From 74b4b2df4ee184b54a2b3c84487d7d88d78d6aab Mon Sep 17 00:00:00 2001
From: Darko Gjorgjijoski <dg@darkog.com>
Date: Mon, 6 Apr 2026 17:59:15 +0200
Subject: [PATCH] Finalize Typescript restructure

---
 .../Controllers/Admin/BackupsController.php   |    1 -
 app/Models/User.php                           |    6 +
 .../Backup/BackupConfigurationFactory.php     |   13 +-
 config/invoiceshelf.php                       |   21 +-
 lang/en.json                                  |   15 +-
 resources/scripts-v2/api/index.ts             |   12 +-
 .../scripts-v2/api/services/auth.service.ts   |    9 +-
 .../scripts-v2/api/services/backup.service.ts |   31 +-
 .../api/services/bootstrap.service.ts         |    4 +-
 .../api/services/custom-field.service.ts      |    1 +
 .../api/services/customer.service.ts          |   37 +-
 .../scripts-v2/api/services/disk.service.ts   |   49 +-
 resources/scripts-v2/api/services/index.ts    |   14 +-
 .../api/services/invoice.service.ts           |   16 +-
 .../scripts-v2/api/services/mail.service.ts   |    7 +-
 .../scripts-v2/api/services/member.service.ts |    2 +-
 .../scripts-v2/api/services/pdf.service.ts    |    5 +-
 .../api/services/setting.service.ts           |    4 +-
 .../scripts-v2/api/services/update.service.ts |   74 +
 .../scripts-v2/components/base/BaseCard.vue   |    2 +-
 .../components/base/BaseCustomInput.vue       |    2 +-
 .../base/BaseCustomerSelectPopup.vue          |  145 +-
 .../scripts-v2/components/base/BaseDialog.vue |   12 +-
 .../components/base/BaseDropdown.vue          |   60 +-
 .../components/base/BaseItemSelect.vue        |   55 +-
 .../scripts-v2/components/base/BaseModal.vue  |   10 +-
 .../components/base/BaseMultiselect.vue       | 1383 +++++++++++++++--
 .../components/base/BasePdfPreview.vue        |   79 +
 .../scripts-v2/components/base/BaseTab.vue    |   24 +
 .../components/base/BaseTabGroup.vue          |    6 +-
 .../components/base/EstimateStatusBadge.vue   |   16 +-
 .../components/base/InvoicePublicPage.vue     |   28 +-
 .../components/base/InvoiceStatusBadge.vue    |   22 +-
 .../components/base/PaidStatusBadge.vue       |   16 +-
 .../base/RecurringInvoiceStatusBadge.vue      |   18 +-
 resources/scripts-v2/components/base/index.ts |    2 +
 .../components/layout/FilterWrapper.vue       |   42 +-
 .../notifications/NotificationItem.vue        |    6 +-
 .../scripts-v2/components/table/DataTable.vue |    4 +-
 .../scripts-v2/composables/use-company.ts     |    6 +-
 .../components/settings/AdminBackupModal.vue  |  270 ++++
 .../settings/AdminFileDiskModal.vue           |  565 +++++++
 .../components/settings/AdminPdfDomDriver.vue |  105 ++
 .../settings/AdminPdfGotenbergDriver.vue      |  180 +++
 resources/scripts-v2/features/admin/routes.ts |   21 +-
 .../admin/views/settings/AdminBackupView.vue  |  328 ++++
 .../views/settings/AdminFileDiskView.vue      |  295 ++++
 .../views/settings/AdminMailConfigView.vue    |  127 ++
 .../views/settings/AdminPdfGenerationView.vue |   96 ++
 .../views/settings/AdminUpdateAppView.vue     |  481 ++++++
 resources/scripts-v2/features/auth/routes.ts  |   18 +-
 .../auth/views/ForgotPasswordView.vue         |    6 +-
 .../features/auth/views/LoginView.vue         |    8 +-
 .../auth/views/RegisterWithInvitationView.vue |  264 ++--
 .../features/auth/views/ResetPasswordView.vue |    6 +-
 .../components/CreateCustomFields.vue         |   46 +-
 .../customers/components/CustomerChart.vue    |   45 +-
 .../customers/components/CustomerDropdown.vue |   63 +-
 .../customers/components/CustomerModal.vue    |   13 +-
 .../components/types/DateTimeType.vue         |   15 +
 .../customers/components/types/DateType.vue   |   15 +
 .../components/types/DropdownType.vue         |   29 +
 .../customers/components/types/InputType.vue  |   15 +
 .../customers/components/types/NumberType.vue |   15 +
 .../customers/components/types/PhoneType.vue  |   15 +
 .../customers/components/types/SwitchType.vue |   15 +
 .../components/types/TextAreaType.vue         |   15 +
 .../customers/components/types/TimeType.vue   |   15 +
 .../customers/components/types/UrlType.vue    |   15 +
 .../features/company/customers/routes.ts      |    4 +
 .../features/company/customers/store.ts       |   16 +-
 .../customers/views/CustomerCreateView.vue    |   12 +-
 .../customers/views/CustomerDetailView.vue    |    6 +-
 .../dashboard/components/DashboardTable.vue   |   45 +-
 .../features/company/dashboard/routes.ts      |    1 +
 .../company/dashboard/views/DashboardView.vue |    4 +-
 .../components/EstimateBasicFields.vue        |    5 +-
 .../estimates/components/EstimateDropdown.vue |  155 +-
 .../components/SendEstimateModal.vue          |  321 ++++
 .../features/company/estimates/routes.ts      |    4 +
 .../features/company/estimates/store.ts       |   32 +-
 .../estimates/views/EstimateCreateView.vue    |   16 +-
 .../estimates/views/EstimateDetailView.vue    |   88 +-
 .../estimates/views/EstimateIndexView.vue     |   82 +-
 .../components/ExpenseCategoryDropdown.vue    |   52 +-
 .../expenses/components/ExpenseDropdown.vue   |   29 +-
 .../features/company/expenses/routes.ts       |    3 +
 .../expenses/views/ExpenseIndexView.vue       |   62 +-
 .../components/InvoiceBasicFields.vue         |   15 +-
 .../invoices/components/InvoiceDropdown.vue   |   91 +-
 .../invoices/components/RecurringFields.vue   |  234 +++
 .../invoices/components/SendInvoiceModal.vue  |  378 +++++
 .../features/company/invoices/routes.ts       |    4 +
 .../features/company/invoices/store.ts        |   34 +-
 .../invoices/views/InvoiceCreateView.vue      |  249 ++-
 .../invoices/views/InvoiceDetailView.vue      |   90 +-
 .../invoices/views/InvoiceIndexView.vue       |  850 ++++++++--
 .../company/items/components/ItemModal.vue    |   52 +-
 .../features/company/items/routes.ts          |    3 +
 .../features/company/items/use-tax-types.ts   |   28 +
 .../company/items/views/ItemCreateView.vue    |   17 +-
 .../members/components/InviteMemberModal.vue  |    2 +-
 .../features/company/members/routes.ts        |    3 +-
 .../company/members/views/MemberIndexView.vue |   32 +-
 .../features/company/modules/routes.ts        |    2 +
 .../modules/views/ModuleDetailView.vue        |   32 +-
 .../company/modules/views/ModuleIndexView.vue |    2 +-
 .../payments/components/PaymentDropdown.vue   |   36 +-
 .../payments/components/SendPaymentModal.vue  |  321 ++++
 .../features/company/payments/routes.ts       |    5 +
 .../features/company/payments/store.ts        |   19 +-
 .../payments/views/PaymentCreateView.vue      |  108 +-
 .../payments/views/PaymentDetailView.vue      |   47 +-
 .../payments/views/PaymentIndexView.vue       |   81 +-
 .../RecurringInvoiceBasicFields.vue           |    3 +-
 .../components/RecurringInvoiceDropdown.vue   |   45 +-
 .../company/recurring-invoices/routes.ts      |   23 +-
 .../company/recurring-invoices/store.ts       |   97 +-
 .../views/RecurringInvoiceCreateView.vue      |    3 +-
 .../views/RecurringInvoiceDetailView.vue      |  530 ++++++-
 .../views/RecurringInvoiceIndexView.vue       |   67 +-
 .../features/company/reports/routes.ts        |   33 +-
 .../reports/views/ExpensesReportView.vue      |    9 +-
 .../reports/views/ProfitLossReportView.vue    |    9 +-
 .../reports/views/ReportsLayoutView.vue       |   72 +
 .../company/reports/views/SalesReportView.vue |    9 +-
 .../company/reports/views/TaxReportView.vue   |    9 +-
 .../settings/components/CategoryModal.vue     |   10 +
 .../settings/components/CompanyModal.vue      |  260 ++++
 .../settings/components/CustomFieldModal.vue  |   45 +
 .../components/DeleteCompanyModal.vue         |  139 ++
 .../settings/components/EstimatesTab.vue      |   13 +-
 .../EstimatesTabConvertEstimate.vue           |   67 +
 .../components/EstimatesTabDefaultFormats.vue |  120 ++
 .../components/EstimatesTabExpiryDate.vue     |  139 ++
 .../components/ExchangeRateProviderModal.vue  |   10 +
 .../components/ExpenseCategoryDropdown.vue    |    8 +-
 .../settings/components/InvoicesTab.vue       |   19 +-
 .../components/InvoicesTabDefaultFormats.vue  |  117 ++
 .../components/InvoicesTabDueDate.vue         |  134 ++
 .../components/InvoicesTabRetrospective.vue   |   59 +
 .../settings/components/ItemUnitModal.vue     |   23 +-
 .../settings/components/MailTestModal.vue     |   15 +-
 .../settings/components/NoteDropdown.vue      |   13 +-
 .../settings/components/NumberCustomizer.vue  |    4 +-
 .../components/PaymentModeDropdown.vue        |    2 +-
 .../settings/components/PaymentModeModal.vue  |   10 +
 .../settings/components/PaymentsTab.vue       |    7 +-
 .../components/PaymentsTabDefaultFormats.vue  |  107 ++
 .../settings/components/RoleDropdown.vue      |   12 +-
 .../settings/components/RolesModal.vue        |   67 +-
 .../settings/components/TaxTypeDropdown.vue   |    8 +-
 .../settings/components/TaxTypeModal.vue      |   10 +
 .../features/company/settings/routes.ts       |  164 +-
 .../settings/views/AccountSettingsView.vue    |   24 +-
 .../settings/views/CompanyInfoView.vue        |   26 -
 .../settings/views/CustomizationView.vue      |   11 +
 .../company/settings/views/DangerZoneView.vue |   40 +
 .../company/settings/views/NotesView.vue      |    5 +-
 .../settings/views/PreferencesView.vue        |   22 +-
 .../company/settings/views/RolesView.vue      |   10 +-
 .../settings/views/SettingsLayoutView.vue     |   46 +-
 .../settings/views/UserGeneralView.vue        |   98 ++
 .../settings/views/UserProfilePhotoView.vue   |   79 +
 .../settings/views/UserSecurityView.vue       |   96 ++
 .../settings/views/UserSettingsLayoutView.vue |  107 ++
 .../components/CustomerPortalAuthLayout.vue   |   84 +
 .../components/CustomerPortalHeader.vue       |  166 ++
 .../components/CustomerPortalLayout.vue       |   41 +-
 .../features/customer-portal/routes.ts        |   34 +-
 .../features/customer-portal/store.ts         |  143 +-
 .../features/customer-portal/utils/routes.ts  |   41 +
 .../views/CustomerEstimateDetailView.vue      |   66 +-
 .../views/CustomerInvoiceDetailView.vue       |    8 +-
 .../views/CustomerPaymentDetailView.vue       |    8 +-
 .../views/CustomerSettingsView.vue            |  197 +--
 .../auth/CustomerPortalForgotPasswordView.vue |  116 ++
 .../views/auth/CustomerPortalLoginView.vue    |  158 ++
 .../auth/CustomerPortalResetPasswordView.vue  |  199 +++
 .../installation/views/PreferencesView.vue    |   61 +-
 .../shared/document-form/DocumentItemRow.vue  |    3 +-
 .../document-form/DocumentItemRowTax.vue      |    8 +-
 .../document-form/DocumentItemsTable.vue      |    2 +-
 .../shared/document-form/DocumentTotals.vue   |    3 +-
 .../document-form/ExchangeRateConverter.vue   |   23 +-
 .../shared/document-form/NoteSelectPopup.vue  |   29 +-
 .../document-form/SelectTemplateModal.vue     |  164 ++
 .../shared/document-form/TaxSelectPopup.vue   |    7 +-
 .../document-form/TemplateSelectButton.vue    |    7 +-
 .../features/shared/document-form/index.ts    |    1 +
 .../scripts-v2/layouts/CompanyLayout.vue      |   70 +-
 .../layouts/partials/CompanySwitcher.vue      |    3 +
 .../layouts/partials/SiteHeader.vue           |    2 +-
 resources/scripts-v2/main.ts                  |    1 +
 resources/scripts-v2/router/guards.ts         |   66 +
 resources/scripts-v2/router/types.ts          |    5 +-
 resources/scripts-v2/stores/company.store.ts  |    4 +-
 resources/scripts-v2/stores/global.store.ts   |   25 +-
 resources/scripts-v2/stores/modal.store.ts    |    4 +-
 resources/scripts-v2/utils/error-handling.ts  |    1 +
 .../scripts-v2/utils/generate-client-id.ts    |    5 +
 resources/scripts-v2/utils/index.ts           |    2 +
 resources/scripts-v2/utils/local-storage.ts   |   20 +
 resources/views/app.blade.php                 |    5 +
 tests/Feature/Admin/AdminSettingsTest.php     |  136 ++
 tests/Feature/Admin/BackupGlobalTest.php      |   48 +
 tests/Feature/Admin/CustomerTest.php          |   26 +-
 tests/Feature/Customer/AuthTest.php           |   83 +
 version.md                                    |    2 +-
 209 files changed, 12419 insertions(+), 1745 deletions(-)
 create mode 100644 resources/scripts-v2/api/services/update.service.ts
 create mode 100644 resources/scripts-v2/components/base/BasePdfPreview.vue
 create mode 100644 resources/scripts-v2/components/base/BaseTab.vue
 create mode 100644 resources/scripts-v2/features/admin/components/settings/AdminBackupModal.vue
 create mode 100644 resources/scripts-v2/features/admin/components/settings/AdminFileDiskModal.vue
 create mode 100644 resources/scripts-v2/features/admin/components/settings/AdminPdfDomDriver.vue
 create mode 100644 resources/scripts-v2/features/admin/components/settings/AdminPdfGotenbergDriver.vue
 create mode 100644 resources/scripts-v2/features/admin/views/settings/AdminBackupView.vue
 create mode 100644 resources/scripts-v2/features/admin/views/settings/AdminFileDiskView.vue
 create mode 100644 resources/scripts-v2/features/admin/views/settings/AdminMailConfigView.vue
 create mode 100644 resources/scripts-v2/features/admin/views/settings/AdminPdfGenerationView.vue
 create mode 100644 resources/scripts-v2/features/admin/views/settings/AdminUpdateAppView.vue
 create mode 100644 resources/scripts-v2/features/company/customers/components/types/DateTimeType.vue
 create mode 100644 resources/scripts-v2/features/company/customers/components/types/DateType.vue
 create mode 100644 resources/scripts-v2/features/company/customers/components/types/DropdownType.vue
 create mode 100644 resources/scripts-v2/features/company/customers/components/types/InputType.vue
 create mode 100644 resources/scripts-v2/features/company/customers/components/types/NumberType.vue
 create mode 100644 resources/scripts-v2/features/company/customers/components/types/PhoneType.vue
 create mode 100644 resources/scripts-v2/features/company/customers/components/types/SwitchType.vue
 create mode 100644 resources/scripts-v2/features/company/customers/components/types/TextAreaType.vue
 create mode 100644 resources/scripts-v2/features/company/customers/components/types/TimeType.vue
 create mode 100644 resources/scripts-v2/features/company/customers/components/types/UrlType.vue
 create mode 100644 resources/scripts-v2/features/company/estimates/components/SendEstimateModal.vue
 create mode 100644 resources/scripts-v2/features/company/invoices/components/RecurringFields.vue
 create mode 100644 resources/scripts-v2/features/company/invoices/components/SendInvoiceModal.vue
 create mode 100644 resources/scripts-v2/features/company/items/use-tax-types.ts
 create mode 100644 resources/scripts-v2/features/company/payments/components/SendPaymentModal.vue
 create mode 100644 resources/scripts-v2/features/company/reports/views/ReportsLayoutView.vue
 create mode 100644 resources/scripts-v2/features/company/settings/components/CompanyModal.vue
 create mode 100644 resources/scripts-v2/features/company/settings/components/DeleteCompanyModal.vue
 create mode 100644 resources/scripts-v2/features/company/settings/components/EstimatesTabConvertEstimate.vue
 create mode 100644 resources/scripts-v2/features/company/settings/components/EstimatesTabDefaultFormats.vue
 create mode 100644 resources/scripts-v2/features/company/settings/components/EstimatesTabExpiryDate.vue
 create mode 100644 resources/scripts-v2/features/company/settings/components/InvoicesTabDefaultFormats.vue
 create mode 100644 resources/scripts-v2/features/company/settings/components/InvoicesTabDueDate.vue
 create mode 100644 resources/scripts-v2/features/company/settings/components/InvoicesTabRetrospective.vue
 create mode 100644 resources/scripts-v2/features/company/settings/components/PaymentsTabDefaultFormats.vue
 create mode 100644 resources/scripts-v2/features/company/settings/views/DangerZoneView.vue
 create mode 100644 resources/scripts-v2/features/company/settings/views/UserGeneralView.vue
 create mode 100644 resources/scripts-v2/features/company/settings/views/UserProfilePhotoView.vue
 create mode 100644 resources/scripts-v2/features/company/settings/views/UserSecurityView.vue
 create mode 100644 resources/scripts-v2/features/company/settings/views/UserSettingsLayoutView.vue
 create mode 100644 resources/scripts-v2/features/customer-portal/components/CustomerPortalAuthLayout.vue
 create mode 100644 resources/scripts-v2/features/customer-portal/components/CustomerPortalHeader.vue
 create mode 100644 resources/scripts-v2/features/customer-portal/utils/routes.ts
 create mode 100644 resources/scripts-v2/features/customer-portal/views/auth/CustomerPortalForgotPasswordView.vue
 create mode 100644 resources/scripts-v2/features/customer-portal/views/auth/CustomerPortalLoginView.vue
 create mode 100644 resources/scripts-v2/features/customer-portal/views/auth/CustomerPortalResetPasswordView.vue
 create mode 100644 resources/scripts-v2/features/shared/document-form/SelectTemplateModal.vue
 create mode 100644 resources/scripts-v2/utils/generate-client-id.ts
 create mode 100644 tests/Feature/Admin/AdminSettingsTest.php
 create mode 100644 tests/Feature/Admin/BackupGlobalTest.php
 create mode 100644 tests/Feature/Customer/AuthTest.php

diff --git a/app/Http/Controllers/Admin/BackupsController.php b/app/Http/Controllers/Admin/BackupsController.php
index 099bffeb..7b27234b 100644
--- a/app/Http/Controllers/Admin/BackupsController.php
+++ b/app/Http/Controllers/Admin/BackupsController.php
@@ -68,7 +68,6 @@ class BackupsController extends Controller
         $this->authorize('manage backups');
 
         $data = $request->all();
-        $data['company'] = $request->header('company');
 
         dispatch(new CreateBackupJob($data))->onQueue(config('backup.queue.name'));
 
diff --git a/app/Models/User.php b/app/Models/User.php
index 8a5b8220..898a5264 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -257,6 +257,12 @@ class User extends Authenticatable implements HasMedia
             $query->wherePhone($filters->get('phone'));
         }
 
+        if ($filters->get('role')) {
+            $query->whereHas('roles', function ($q) use ($filters) {
+                $q->where('roles.id', $filters->get('role'));
+            });
+        }
+
         if ($filters->get('orderByField') || $filters->get('orderBy')) {
             $field = $filters->get('orderByField') ? $filters->get('orderByField') : 'name';
             $orderBy = $filters->get('orderBy') ? $filters->get('orderBy') : 'asc';
diff --git a/app/Services/Backup/BackupConfigurationFactory.php b/app/Services/Backup/BackupConfigurationFactory.php
index cb5f258a..e2fd9acd 100644
--- a/app/Services/Backup/BackupConfigurationFactory.php
+++ b/app/Services/Backup/BackupConfigurationFactory.php
@@ -2,19 +2,14 @@
 
 namespace App\Services\Backup;
 
-use App\Models\CompanySetting;
 use App\Models\FileDisk;
 use Exception;
 use Spatie\Backup\Config\Config;
 
 class BackupConfigurationFactory
 {
-    public static function make($data = []): Config
+    public static function make(array $data = []): Config
     {
-        if (blank($data['company'] ?? null)) {
-            throw new Exception('The Company ID is missig');
-        }
-
         if (blank($data['file_disk_id'] ?? null)) {
             throw new Exception('No file disk selected');
         }
@@ -27,12 +22,6 @@ class BackupConfigurationFactory
 
         config(['backup.backup.destination.disks' => [$prefix.$fileDisk->driver]]);
 
-        $companyNotificationEmail = CompanySetting::getSetting('notification_email', $data['company']);
-
-        if ($companyNotificationEmail) {
-            config(['backup.notifications.mail.to' => $companyNotificationEmail]);
-        }
-
         $config = Config::fromArray(config('backup'));
 
         return $config;
diff --git a/config/invoiceshelf.php b/config/invoiceshelf.php
index d8515cfb..e3ee9a5c 100644
--- a/config/invoiceshelf.php
+++ b/config/invoiceshelf.php
@@ -9,7 +9,6 @@ use App\Models\Invoice;
 use App\Models\Item;
 use App\Models\Note;
 use App\Models\Payment;
-use App\Models\RecurringInvoice;
 use App\Models\TaxType;
 
 return [
@@ -164,7 +163,7 @@ return [
             'title' => 'settings.roles.title',
             'group' => '',
             'name' => 'Company Roles',
-            'link' => '/admin/settings/roles-settings',
+            'link' => '/admin/settings/roles',
             'icon' => 'UserGroupIcon',
             'owner_only' => true,
             'ability' => '',
@@ -174,7 +173,7 @@ return [
             'title' => 'settings.menu_title.exchange_rate',
             'group' => '',
             'name' => 'Exchange Rate Provider',
-            'link' => '/admin/settings/exchange-rate-provider',
+            'link' => '/admin/settings/exchange-rate',
             'icon' => 'BanknotesIcon',
             'owner_only' => false,
             'ability' => 'view-exchange-rate-provider',
@@ -204,7 +203,7 @@ return [
             'title' => 'settings.menu_title.payment_modes',
             'group' => '',
             'name' => 'Payment modes',
-            'link' => '/admin/settings/payment-mode',
+            'link' => '/admin/settings/payment-modes',
             'icon' => 'CreditCardIcon',
             'owner_only' => false,
             'ability' => 'view-payment',
@@ -234,7 +233,7 @@ return [
             'title' => 'settings.menu_title.expense_category',
             'group' => '',
             'name' => 'Expense Category',
-            'link' => '/admin/settings/expense-category',
+            'link' => '/admin/settings/expense-categories',
             'icon' => 'ClipboardDocumentListIcon',
             'owner_only' => false,
             'ability' => 'view-expense',
@@ -244,7 +243,7 @@ return [
             'title' => 'settings.mail.company_mail_config',
             'group' => '',
             'name' => 'Mail Configuration',
-            'link' => '/admin/settings/mail-configuration',
+            'link' => '/admin/settings/mail-config',
             'icon' => 'EnvelopeIcon',
             'owner_only' => true,
             'ability' => '',
@@ -306,16 +305,6 @@ return [
             'ability' => 'view-invoice',
             'model' => Invoice::class,
         ],
-        [
-            'title' => 'navigation.recurring-invoices',
-            'group' => 2,
-            'link' => '/admin/recurring-invoices',
-            'icon' => 'DocumentTextIcon',
-            'name' => 'Recurring Invoices',
-            'owner_only' => false,
-            'ability' => 'view-recurring-invoice',
-            'model' => RecurringInvoice::class,
-        ],
         [
             'title' => 'navigation.payments',
             'group' => 2,
diff --git a/lang/en.json b/lang/en.json
index d85f1036..211dd8f2 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -102,6 +102,7 @@
     "street_2": "Street 2",
     "action_failed": "Action Failed",
     "retry": "Retry",
+    "unable_to_load_pdf": "Unable to load document preview",
     "choose_note": "Choose Note",
     "no_note_found": "No Note Found",
     "insert_note": "Insert Note",
@@ -451,6 +452,7 @@
     "update_expense": "Update Expense",
     "edit_invoice": "Edit Invoice",
     "new_invoice": "New Invoice",
+    "one_time": "One-time",
     "save_invoice": "Save Invoice",
     "update_invoice": "Update Invoice",
     "add_new_tax": "Add New Tax",
@@ -550,6 +552,7 @@
     "update_expense": "Update Expense",
     "edit_invoice": "Edit Recurring Invoice",
     "new_invoice": "New Recurring Invoice",
+    "recurring": "Recurring",
     "send_automatically": "Send Automatically",
     "send_automatically_desc": "Enable this, if you would like to send the invoice automatically to the customer when its created.",
     "save_invoice": "Save Recurring Invoice",
@@ -594,7 +597,13 @@
       "every_hour": "Every Hour",
       "every_2_hour": "Every 2 Hour",
       "every_day_at_midnight": "Every day at midnight",
+      "every_day": "Every Day",
       "every_week": "Every Week",
+      "every_2_weeks": "Every 2 Weeks",
+      "every_month": "Every Month",
+      "every_2_months": "Every 2 Months",
+      "every_quarter": "Every 3 Months (Quarterly)",
+      "every_year": "Every Year",
       "every_15_days_at_midnight": "Every 15 days at midnight",
       "on_the_first_day_of_every_month_at_midnight": "On the first day of every month at 00:00",
       "every_6_month": "Every 6 Month",
@@ -613,7 +622,8 @@
       "none": "None",
       "date": "Date",
       "count": "Count"
-    }
+    },
+    "make_recurring": "Make Recurring"
   },
   "payments": {
     "title": "Payments",
@@ -771,6 +781,7 @@
     "date_of_creation": "Date Of Creation",
     "action": "Action",
     "invite_member": "Invite Member",
+    "select_role": "Select Role",
     "add_member": "Add Member",
     "save_member": "Save Member",
     "update_member": "Update Member",
@@ -968,6 +979,7 @@
       "updated_message": "Company information updated successfully",
       "delete_company": "Delete Company",
       "delete_company_description": "Once you delete your company, you will lose all the data and files associated with it permanently.",
+      "danger_zone": "Danger Zone",
       "are_you_absolutely_sure": "Are you absolutely sure?",
       "delete_company_modal_desc": "This action cannot be undone. This will permanently delete {company} and all of its associated data.",
       "delete_company_modal_label": "Please type {company} to confirm"
@@ -1188,6 +1200,7 @@
       "description": "Manage the roles & permissions of this company",
       "save": "Save",
       "add_new_role": "Add New Role",
+      "system_role": "System Role",
       "role_name": "Role Name",
       "added_on": "Added on",
       "add_role": "Add Role",
diff --git a/resources/scripts-v2/api/index.ts b/resources/scripts-v2/api/index.ts
index b3937745..7d5a4abc 100644
--- a/resources/scripts-v2/api/index.ts
+++ b/resources/scripts-v2/api/index.ts
@@ -27,6 +27,7 @@ export {
   mailService,
   pdfService,
   diskService,
+  updateService,
 } from './services'
 
 // Re-export all service types
@@ -55,7 +56,9 @@ export type {
   FrequencyDateResponse,
   CustomerListParams,
   CustomerListResponse,
-  CustomerStatsData,
+  CustomerStatsChartData,
+  CustomerStatsParams,
+  CustomerStatsResponse,
   PaymentListParams,
   PaymentListResponse,
   SendPaymentPayload,
@@ -103,6 +106,7 @@ export type {
   ModuleInstallPayload,
   ModuleCheckResponse,
   Backup,
+  BackupListResponse,
   CreateBackupPayload,
   DeleteBackupParams,
   MailConfig,
@@ -119,5 +123,11 @@ export type {
   GotenbergConfig,
   Disk,
   DiskDriversResponse,
+  DiskDriverValue,
   CreateDiskPayload,
+  CheckUpdateResponse,
+  UpdateRelease,
+  UpdateDownloadResponse,
+  UpdateStepResponse,
+  FinishUpdatePayload,
 } from './services'
diff --git a/resources/scripts-v2/api/services/auth.service.ts b/resources/scripts-v2/api/services/auth.service.ts
index eb5694c5..eb68a21f 100644
--- a/resources/scripts-v2/api/services/auth.service.ts
+++ b/resources/scripts-v2/api/services/auth.service.ts
@@ -36,6 +36,11 @@ export interface RegisterWithInvitationPayload {
   email: string
   password: string
   password_confirmation: string
+  invitation_token: string
+}
+
+export interface RegisterWithInvitationResponse {
+  type: string
   token: string
 }
 
@@ -74,8 +79,8 @@ export const authService = {
     return data
   },
 
-  async registerWithInvitation(payload: RegisterWithInvitationPayload): Promise<ApiResponse<User>> {
-    const { data } = await client.post(API.REGISTER_WITH_INVITATION, payload)
+  async registerWithInvitation(payload: RegisterWithInvitationPayload): Promise<RegisterWithInvitationResponse> {
+    const { data } = await client.post<RegisterWithInvitationResponse>(API.REGISTER_WITH_INVITATION, payload)
     return data
   },
 }
diff --git a/resources/scripts-v2/api/services/backup.service.ts b/resources/scripts-v2/api/services/backup.service.ts
index d6f86922..7c417454 100644
--- a/resources/scripts-v2/api/services/backup.service.ts
+++ b/resources/scripts-v2/api/services/backup.service.ts
@@ -1,28 +1,35 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { ApiResponse, ListParams } from '@v2/types/api'
 
 export interface Backup {
-  id: number
-  disk: string
   path: string
   created_at: string
-  file_size: string
+  size: string
+}
+
+export interface BackupListResponse {
+  backups: Backup[]
+  disks: string[]
+  error?: string
+  error_message?: string
 }
 
 export interface CreateBackupPayload {
-  option: 'full' | 'database' | 'files'
-  selected_disk: string | null
+  option: 'full' | 'only-db' | 'only-files'
+  file_disk_id: number
 }
 
 export interface DeleteBackupParams {
   disk: string
-  path?: string
-  file_name?: string
+  path: string
+  file_disk_id?: number
 }
 
 export const backupService = {
-  async list(params?: ListParams): Promise<ApiResponse<Backup[]>> {
+  async list(params: {
+    disk: string
+    file_disk_id?: number
+  }): Promise<BackupListResponse> {
     const { data } = await client.get(API.BACKUPS, { params })
     return data
   },
@@ -37,7 +44,11 @@ export const backupService = {
     return data
   },
 
-  async download(params: { disk: string; path?: string; file_name?: string }): Promise<Blob> {
+  async download(params: {
+    disk: string
+    path: string
+    file_disk_id?: number
+  }): Promise<Blob> {
     const { data } = await client.get(API.DOWNLOAD_BACKUP, {
       params,
       responseType: 'blob',
diff --git a/resources/scripts-v2/api/services/bootstrap.service.ts b/resources/scripts-v2/api/services/bootstrap.service.ts
index d8c799ff..c9a241b3 100644
--- a/resources/scripts-v2/api/services/bootstrap.service.ts
+++ b/resources/scripts-v2/api/services/bootstrap.service.ts
@@ -8,9 +8,10 @@ import type { Ability } from '@v2/types/domain/role'
 export interface MenuItem {
   title: string
   name: string
-  route: string
+  link: string
   icon: string
   group: string
+  group_label?: string
   ability?: string
 }
 
@@ -27,6 +28,7 @@ export interface BootstrapResponse {
   config: Record<string, unknown>
   global_settings: Record<string, string>
   modules: string[]
+  admin_mode?: boolean
   pending_invitations?: Array<{
     token: string
     company_name: string
diff --git a/resources/scripts-v2/api/services/custom-field.service.ts b/resources/scripts-v2/api/services/custom-field.service.ts
index 2c3b95ac..b7a224f4 100644
--- a/resources/scripts-v2/api/services/custom-field.service.ts
+++ b/resources/scripts-v2/api/services/custom-field.service.ts
@@ -17,6 +17,7 @@ export interface CreateCustomFieldPayload {
   is_required?: boolean
   options?: Array<{ name: string }> | string[] | null
   order?: number | null
+  default_answer?: string | null
 }
 
 export const customFieldService = {
diff --git a/resources/scripts-v2/api/services/customer.service.ts b/resources/scripts-v2/api/services/customer.service.ts
index 89f82eb7..f305fd2a 100644
--- a/resources/scripts-v2/api/services/customer.service.ts
+++ b/resources/scripts-v2/api/services/customer.service.ts
@@ -24,16 +24,28 @@ export interface CustomerListResponse {
   meta: CustomerListMeta
 }
 
-export interface CustomerStatsData {
-  id: number
-  name: string
-  email: string | null
-  total_invoices: number
-  total_estimates: number
-  total_payments: number
-  total_expenses: number
-  total_amount_due: number
-  total_paid: number
+export interface CustomerStatsChartData {
+  salesTotal: number
+  totalReceipts: number
+  totalExpenses: number
+  netProfit: number
+  expenseTotals: number[]
+  netProfits: number[]
+  months: string[]
+  receiptTotals: number[]
+  invoiceTotals: number[]
+}
+
+export interface CustomerStatsParams {
+  previous_year?: boolean
+  this_year?: boolean
+}
+
+export interface CustomerStatsResponse {
+  data: Customer
+  meta: {
+    chartData: CustomerStatsChartData
+  }
 }
 
 export const customerService = {
@@ -62,7 +74,10 @@ export const customerService = {
     return data
   },
 
-  async getStats(id: number, params?: Record<string, unknown>): Promise<ApiResponse<CustomerStatsData>> {
+  async getStats(
+    id: number,
+    params?: CustomerStatsParams
+  ): Promise<CustomerStatsResponse> {
     const { data } = await client.get(`${API.CUSTOMER_STATS}/${id}/stats`, { params })
     return data
   },
diff --git a/resources/scripts-v2/api/services/disk.service.ts b/resources/scripts-v2/api/services/disk.service.ts
index 78f23937..30f26b1e 100644
--- a/resources/scripts-v2/api/services/disk.service.ts
+++ b/resources/scripts-v2/api/services/disk.service.ts
@@ -1,54 +1,59 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { ApiResponse, ListParams } from '@v2/types/api'
+import type { ApiResponse, ListParams, PaginatedResponse } from '@v2/types/api'
+
+export type DiskDriverValue =
+  | 'local'
+  | 's3'
+  | 's3compat'
+  | 'doSpaces'
+  | 'dropbox'
 
 export interface Disk {
   id: number
   name: string
-  driver: string
+  type: string
+  driver: DiskDriverValue
   set_as_default: boolean
-  credentials: Record<string, string>
-  created_at: string
-  updated_at: string
+  credentials: Record<string, string> | string | null
+  company_id?: number | null
 }
 
 export interface DiskDriversResponse {
-  drivers: string[]
-  [key: string]: unknown
+  drivers: Array<{
+    name: string
+    value: DiskDriverValue
+  }>
+  default: DiskDriverValue | string
 }
 
 export interface CreateDiskPayload {
   name: string
-  selected_driver: string
-  // S3/S3-compat/DOSpaces fields
-  key?: string
-  secret?: string
-  region?: string
-  bucket?: string
-  root?: string
-  endpoint?: string
-  // Dropbox fields
-  token?: string
-  app?: string
+  driver: DiskDriverValue
+  credentials?: Record<string, string> | string
+  set_as_default?: boolean
 }
 
 export const diskService = {
-  async list(params?: ListParams): Promise<ApiResponse<Disk[]>> {
+  async list(params?: ListParams): Promise<PaginatedResponse<Disk>> {
     const { data } = await client.get(API.DISKS, { params })
     return data
   },
 
-  async get(disk: string): Promise<Record<string, unknown>> {
+  async get(disk: DiskDriverValue): Promise<Record<string, string>> {
     const { data } = await client.get(`${API.DISKS}/${disk}`)
     return data
   },
 
-  async create(payload: CreateDiskPayload): Promise<Disk> {
+  async create(payload: CreateDiskPayload): Promise<ApiResponse<Disk>> {
     const { data } = await client.post(API.DISKS, payload)
     return data
   },
 
-  async update(id: number, payload: Partial<CreateDiskPayload>): Promise<ApiResponse<Disk>> {
+  async update(
+    id: number,
+    payload: Partial<CreateDiskPayload>
+  ): Promise<ApiResponse<Disk>> {
     const { data } = await client.put(`${API.DISKS}/${id}`, payload)
     return data
   },
diff --git a/resources/scripts-v2/api/services/index.ts b/resources/scripts-v2/api/services/index.ts
index 8e09e39a..f0338e37 100644
--- a/resources/scripts-v2/api/services/index.ts
+++ b/resources/scripts-v2/api/services/index.ts
@@ -23,6 +23,7 @@ export { backupService } from './backup.service'
 export { mailService } from './mail.service'
 export { pdfService } from './pdf.service'
 export { diskService } from './disk.service'
+export { updateService } from './update.service'
 
 // Re-export service types for convenience
 export type { LoginPayload, LoginResponse, ForgotPasswordPayload, ResetPasswordPayload, RegisterWithInvitationPayload } from './auth.service'
@@ -30,7 +31,13 @@ export type { BootstrapResponse, MenuItem, CurrentCompanyResponse } from './boot
 export type { InvoiceListParams, InvoiceListResponse, SendInvoicePayload, InvoiceStatusPayload, InvoiceTemplatesResponse } from './invoice.service'
 export type { EstimateListParams, EstimateListResponse, SendEstimatePayload, EstimateStatusPayload, EstimateTemplatesResponse } from './estimate.service'
 export type { RecurringInvoiceListParams, RecurringInvoiceListResponse, FrequencyDateParams, FrequencyDateResponse } from './recurring-invoice.service'
-export type { CustomerListParams, CustomerListResponse, CustomerStatsData } from './customer.service'
+export type {
+  CustomerListParams,
+  CustomerListResponse,
+  CustomerStatsChartData,
+  CustomerStatsParams,
+  CustomerStatsResponse,
+} from './customer.service'
 export type { PaymentListParams, PaymentListResponse, SendPaymentPayload, CreatePaymentMethodPayload } from './payment.service'
 export type { ExpenseListParams, ExpenseListResponse, CreateExpenseCategoryPayload } from './expense.service'
 export type { ItemListParams, ItemListResponse, CreateItemPayload, CreateUnitPayload } from './item.service'
@@ -46,7 +53,8 @@ export type { CustomFieldListParams, CreateCustomFieldPayload } from './custom-f
 export type { CreateNotePayload } from './note.service'
 export type { CreateExchangeRateProviderPayload, BulkUpdatePayload, ExchangeRateResponse, ActiveProviderResponse } from './exchange-rate.service'
 export type { Module, ModuleInstallPayload, ModuleCheckResponse } from './module.service'
-export type { Backup, CreateBackupPayload, DeleteBackupParams } from './backup.service'
+export type { Backup, BackupListResponse, CreateBackupPayload, DeleteBackupParams } from './backup.service'
 export type { MailConfig, MailConfigResponse, MailDriver, SmtpConfig, MailgunConfig, SesConfig, TestMailPayload } from './mail.service'
 export type { PdfConfig, PdfConfigResponse, PdfDriver, DomPdfConfig, GotenbergConfig } from './pdf.service'
-export type { Disk, DiskDriversResponse, CreateDiskPayload } from './disk.service'
+export type { Disk, DiskDriversResponse, DiskDriverValue, CreateDiskPayload } from './disk.service'
+export type { CheckUpdateResponse, UpdateRelease, UpdateDownloadResponse, UpdateStepResponse, FinishUpdatePayload } from './update.service'
diff --git a/resources/scripts-v2/api/services/invoice.service.ts b/resources/scripts-v2/api/services/invoice.service.ts
index e6f73e52..2d86b169 100644
--- a/resources/scripts-v2/api/services/invoice.service.ts
+++ b/resources/scripts-v2/api/services/invoice.service.ts
@@ -30,10 +30,12 @@ export interface InvoiceListResponse {
 
 export interface SendInvoicePayload {
   id: number
-  subject?: string
-  body?: string
-  from?: string
-  to?: string
+  subject?: string | null
+  body?: string | null
+  from?: string | null
+  to?: string | null
+  cc?: string | null
+  bcc?: string | null
 }
 
 export interface InvoiceStatusPayload {
@@ -43,6 +45,12 @@ export interface InvoiceStatusPayload {
 
 export interface SendPreviewParams {
   id: number
+  from?: string | null
+  to?: string | null
+  cc?: string | null
+  bcc?: string | null
+  subject?: string | null
+  body?: string | null
 }
 
 export interface InvoiceTemplate {
diff --git a/resources/scripts-v2/api/services/mail.service.ts b/resources/scripts-v2/api/services/mail.service.ts
index 3145bbe5..7f90f0ff 100644
--- a/resources/scripts-v2/api/services/mail.service.ts
+++ b/resources/scripts-v2/api/services/mail.service.ts
@@ -1,10 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
 
-export interface MailDriver {
-  name: string
-  value: string
-}
+export type MailDriver = string
 
 export interface SmtpConfig {
   mail_driver: string
@@ -46,6 +43,8 @@ export interface MailConfigResponse {
 
 export interface TestMailPayload {
   to: string
+  subject: string
+  message: string
 }
 
 export const mailService = {
diff --git a/resources/scripts-v2/api/services/member.service.ts b/resources/scripts-v2/api/services/member.service.ts
index 1bfdb4ae..a91c83bb 100644
--- a/resources/scripts-v2/api/services/member.service.ts
+++ b/resources/scripts-v2/api/services/member.service.ts
@@ -31,7 +31,7 @@ export interface UpdateMemberPayload {
 
 export interface InviteMemberPayload {
   email: string
-  role?: string
+  role_id: number | null
 }
 
 export interface DeleteMembersPayload {
diff --git a/resources/scripts-v2/api/services/pdf.service.ts b/resources/scripts-v2/api/services/pdf.service.ts
index 480942b3..c5ac7cc5 100644
--- a/resources/scripts-v2/api/services/pdf.service.ts
+++ b/resources/scripts-v2/api/services/pdf.service.ts
@@ -1,10 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
 
-export interface PdfDriver {
-  name: string
-  value: string
-}
+export type PdfDriver = string
 
 export interface DomPdfConfig {
   pdf_driver: string
diff --git a/resources/scripts-v2/api/services/setting.service.ts b/resources/scripts-v2/api/services/setting.service.ts
index 8c153c5f..4b4411c1 100644
--- a/resources/scripts-v2/api/services/setting.service.ts
+++ b/resources/scripts-v2/api/services/setting.service.ts
@@ -28,7 +28,7 @@ export interface NumberPlaceholdersParams {
 }
 
 export interface NumberPlaceholder {
-  description: string
+  name: string
   value: string
 }
 
@@ -102,7 +102,7 @@ export const settingService = {
   },
 
   // App Version
-  async getAppVersion(): Promise<{ version: string }> {
+  async getAppVersion(): Promise<{ version: string; channel: string }> {
     const { data } = await client.get(API.APP_VERSION)
     return data
   },
diff --git a/resources/scripts-v2/api/services/update.service.ts b/resources/scripts-v2/api/services/update.service.ts
new file mode 100644
index 00000000..f68aac94
--- /dev/null
+++ b/resources/scripts-v2/api/services/update.service.ts
@@ -0,0 +1,74 @@
+import { client } from '../client'
+import { API } from '../endpoints'
+
+export interface UpdateRelease {
+  version: string
+  description?: string | null
+  changelog?: string | null
+  extensions?: Record<string, boolean>
+  min_php_version?: string | null
+  deleted_files?: string | string[] | null
+}
+
+export interface CheckUpdateResponse {
+  success?: boolean
+  release: UpdateRelease | null
+  is_minor?: boolean
+}
+
+export interface UpdateDownloadResponse {
+  success: boolean
+  path?: string | boolean | Record<string, unknown> | null
+}
+
+export interface UpdateStepResponse {
+  success: boolean
+  path?: string | boolean | Record<string, unknown> | null
+  error?: string | boolean
+  data?: Record<string, unknown>
+}
+
+export interface FinishUpdatePayload {
+  installed: string
+  version: string
+}
+
+export const updateService = {
+  async check(channel: 'stable' | 'insider' = 'stable'): Promise<CheckUpdateResponse> {
+    const { data } = await client.get(API.CHECK_UPDATE, {
+      params: { channel },
+    })
+
+    return data
+  },
+
+  async download(payload: { version: string }): Promise<UpdateDownloadResponse> {
+    const { data } = await client.post(API.UPDATE_DOWNLOAD, payload)
+    return data
+  },
+
+  async unzip(payload: { path: string }): Promise<UpdateStepResponse> {
+    const { data } = await client.post(API.UPDATE_UNZIP, payload)
+    return data
+  },
+
+  async copy(payload: { path: string }): Promise<UpdateStepResponse> {
+    const { data } = await client.post(API.UPDATE_COPY, payload)
+    return data
+  },
+
+  async delete(payload: { deleted_files?: string | string[] | null }): Promise<UpdateStepResponse> {
+    const { data } = await client.post(API.UPDATE_DELETE, payload)
+    return data
+  },
+
+  async migrate(): Promise<UpdateStepResponse> {
+    const { data } = await client.post(API.UPDATE_MIGRATE)
+    return data
+  },
+
+  async finish(payload: FinishUpdatePayload): Promise<UpdateStepResponse> {
+    const { data } = await client.post(API.UPDATE_FINISH, payload)
+    return data
+  },
+}
diff --git a/resources/scripts-v2/components/base/BaseCard.vue b/resources/scripts-v2/components/base/BaseCard.vue
index f27969da..d9f97df8 100644
--- a/resources/scripts-v2/components/base/BaseCard.vue
+++ b/resources/scripts-v2/components/base/BaseCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-surface/70 backdrop-blur-lg rounded-xl shadow-sm border border-white/15">
+  <div class="bg-surface rounded-xl shadow-sm border border-line-default">
     <div
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-heading border-b border-line-light border-solid"
diff --git a/resources/scripts-v2/components/base/BaseCustomInput.vue b/resources/scripts-v2/components/base/BaseCustomInput.vue
index ba6d184d..88362c12 100644
--- a/resources/scripts-v2/components/base/BaseCustomInput.vue
+++ b/resources/scripts-v2/components/base/BaseCustomInput.vue
@@ -227,7 +227,7 @@ getFields()
         :close-on-select="true"
         max-height="220"
         position="top-end"
-        width-class="w-92"
+        width-class="w-auto min-w-[40rem]"
         class="mb-2"
       >
         <template #activator>
diff --git a/resources/scripts-v2/components/base/BaseCustomerSelectPopup.vue b/resources/scripts-v2/components/base/BaseCustomerSelectPopup.vue
index f14c664b..b2071b76 100644
--- a/resources/scripts-v2/components/base/BaseCustomerSelectPopup.vue
+++ b/resources/scripts-v2/components/base/BaseCustomerSelectPopup.vue
@@ -4,10 +4,14 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useDebounceFn } from '@vueuse/core'
 import { useRoute } from 'vue-router'
-import { usePermissions } from '@v2/composables/use-permissions'
-import { useModal } from '@v2/composables/use-modal'
+import { useUserStore } from '@v2/stores/user.store'
+import { useModalStore } from '@v2/stores/modal.store'
 import { ABILITIES } from '@v2/config/abilities'
-import type { Customer, Address } from '@v2/types/domain'
+import { useCustomerStore } from '@v2/features/company/customers/store'
+import { useInvoiceStore } from '@v2/features/company/invoices/store'
+import { useEstimateStore } from '@v2/features/company/estimates/store'
+import { useRecurringInvoiceStore } from '@v2/features/company/recurring-invoices/store'
+import CustomerModal from '@v2/features/company/customers/components/CustomerModal.vue'
 
 type DocumentType = 'estimate' | 'invoice' | 'recurring-invoice'
 
@@ -20,28 +24,11 @@ interface Validation {
   $errors: ValidationError[]
 }
 
-interface SelectedCustomerData {
-  id: number
-  name: string
-  billing?: Pick<Address, 'name' | 'city' | 'state' | 'zip'> | null
-  shipping?: Pick<Address, 'name' | 'city' | 'state' | 'zip'> | null
-}
-
 interface Props {
   valid?: Validation
   customerId?: number | null
   type?: DocumentType | null
   contentLoading?: boolean
-  selectedCustomer?: SelectedCustomerData | null
-  customers?: Customer[]
-}
-
-interface Emits {
-  (e: 'select', customerId: number): void
-  (e: 'deselect'): void
-  (e: 'edit', customerId: number): void
-  (e: 'search', query: string): void
-  (e: 'create'): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -49,44 +36,112 @@ const props = withDefaults(defineProps<Props>(), {
   customerId: null,
   type: null,
   contentLoading: false,
-  selectedCustomer: null,
-  customers: () => [],
 })
 
-const emit = defineEmits<Emits>()
-
-const { hasAbility } = usePermissions()
-const { openModal } = useModal()
+const userStore = useUserStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 
+const customerStore = useCustomerStore()
+const invoiceStore = useInvoiceStore()
+const estimateStore = useEstimateStore()
+const recurringInvoiceStore = useRecurringInvoiceStore()
+
 const search = ref<string | null>(null)
 const isSearchingCustomer = ref<boolean>(false)
 
+const selectedCustomer = computed(() => {
+  switch (props.type) {
+    case 'invoice':
+      return invoiceStore.newInvoice.customer
+    case 'estimate':
+      return estimateStore.newEstimate.customer
+    case 'recurring-invoice':
+      return recurringInvoiceStore.newRecurringInvoice.customer
+    default:
+      return null
+  }
+})
+
+// Fetch initial customers on setup
+async function fetchInitialCustomers(): Promise<void> {
+  await customerStore.fetchCustomers({
+    orderByField: '',
+    orderBy: '',
+  })
+}
+
+// Select customer on setup if customerId is provided
+if (props.customerId) {
+  if (props.type === 'invoice') {
+    invoiceStore.selectCustomer(props.customerId)
+  } else if (props.type === 'estimate') {
+    estimateStore.selectCustomer(props.customerId)
+  } else if (props.type === 'recurring-invoice') {
+    recurringInvoiceStore.selectCustomer(props.customerId)
+  }
+}
+
+fetchInitialCustomers()
+
 const debounceSearchCustomer = useDebounceFn(() => {
   isSearchingCustomer.value = true
   searchCustomer()
 }, 500)
 
-function searchCustomer(): void {
-  if (search.value !== null) {
-    emit('search', search.value)
-  }
+async function searchCustomer(): Promise<void> {
+  await customerStore.fetchCustomers({
+    display_name: search.value ?? '',
+    page: 1,
+  })
   isSearchingCustomer.value = false
 }
 
-function editCustomer(): void {
-  if (props.selectedCustomer) {
-    emit('edit', props.selectedCustomer.id)
+function selectNewCustomer(id: number, close: () => void): void {
+  const params: Record<string, unknown> = { userId: id }
+  if (route.params.id) params.model_id = route.params.id
+
+  if (props.type === 'invoice') {
+    invoiceStore.getNextNumber(params, true)
+    invoiceStore.selectCustomer(id)
+  } else if (props.type === 'estimate') {
+    estimateStore.getNextNumber(params, true)
+    estimateStore.selectCustomer(id)
+  } else if (props.type === 'recurring-invoice') {
+    recurringInvoiceStore.selectCustomer(id)
   }
+
+  close()
+  search.value = null
 }
 
 function resetSelectedCustomer(): void {
-  emit('deselect')
+  if (props.type === 'invoice') {
+    invoiceStore.resetSelectedCustomer()
+  } else if (props.type === 'estimate') {
+    estimateStore.resetSelectedCustomer()
+  } else if (props.type === 'recurring-invoice') {
+    recurringInvoiceStore.resetSelectedCustomer()
+  }
+}
+
+async function editCustomer(): Promise<void> {
+  if (!selectedCustomer.value) return
+  await customerStore.fetchCustomer(selectedCustomer.value.id)
+  modalStore.openModal({
+    title: t('customers.edit_customer'),
+    componentName: 'CustomerModal',
+  })
 }
 
 function openCustomerModal(): void {
-  emit('create')
+  customerStore.resetCurrentCustomer()
+  modalStore.openModal({
+    title: t('customers.add_customer'),
+    componentName: 'CustomerModal',
+    variant: 'md',
+  })
 }
 
 function initGenerator(name: string): string {
@@ -96,16 +151,13 @@ function initGenerator(name: string): string {
   }
   return ''
 }
-
-function selectNewCustomer(id: number, close: () => void): void {
-  emit('select', id)
-  close()
-  search.value = null
-}
 </script>
 
 <template>
-  <BaseContentPlaceholders v-if="contentLoading">
+  <div>
+    <CustomerModal />
+
+    <BaseContentPlaceholders v-if="contentLoading">
     <BaseContentPlaceholdersBox
       :rounded="true"
       class="w-full"
@@ -359,7 +411,7 @@ function selectNewCustomer(id: number, close: () => void): void {
                 :placeholder="$t('general.search')"
                 type="text"
                 icon="search"
-                @update:modelValue="(val: string | null) => debounceSearchCustomer()"
+                @update:modelValue="() => debounceSearchCustomer()"
               />
 
               <ul
@@ -372,7 +424,7 @@ function selectNewCustomer(id: number, close: () => void): void {
                 "
               >
                 <li
-                  v-for="(customer, index) in customers"
+                  v-for="(customer, index) in customerStore.customers"
                   :key="index"
                   href="#"
                   class="
@@ -434,7 +486,7 @@ function selectNewCustomer(id: number, close: () => void): void {
                   </div>
                 </li>
                 <div
-                  v-if="customers.length === 0"
+                  v-if="customerStore.customers.length === 0"
                   class="flex justify-center p-5 text-subtle"
                 >
                   <label class="text-base text-muted cursor-pointer">
@@ -445,7 +497,7 @@ function selectNewCustomer(id: number, close: () => void): void {
             </div>
 
             <button
-              v-if="hasAbility(ABILITIES.CREATE_CUSTOMER)"
+              v-if="userStore.hasAbilities(ABILITIES.CREATE_CUSTOMER)"
               type="button"
               class="
                 h-10
@@ -483,4 +535,5 @@ function selectNewCustomer(id: number, close: () => void): void {
       </transition>
     </Popover>
   </div>
+  </div>
 </template>
diff --git a/resources/scripts-v2/components/base/BaseDialog.vue b/resources/scripts-v2/components/base/BaseDialog.vue
index 6bc88c68..a9e5a3a2 100644
--- a/resources/scripts-v2/components/base/BaseDialog.vue
+++ b/resources/scripts-v2/components/base/BaseDialog.vue
@@ -30,7 +30,7 @@
           leave-to="opacity-0"
         >
           <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-surface-secondary0/75"
+            class="fixed inset-0 transition-opacity bg-black/50"
           />
         </TransitionChild>
 
@@ -59,9 +59,9 @@
               text-left
               align-bottom
               transition-all
-              bg-surface/80 backdrop-blur-2xl
-              rounded-xl border border-white/15
-              shadow-xl
+              bg-surface/95 backdrop-blur-xl backdrop-saturate-150
+              rounded-xl border border-line-default
+              shadow-2xl
               sm:my-8 sm:align-middle sm:w-full sm:p-6
               relative
             "
@@ -86,12 +86,12 @@
               >
                 <BaseIcon
                   v-if="dialogStore.variant === 'primary'"
-                  name="CheckIcon"
+                  name="CheckCircleIcon"
                   class="w-6 h-6 text-alert-success-text"
                 />
                 <BaseIcon
                   v-else
-                  name="ExclamationIcon"
+                  name="ExclamationTriangleIcon"
                   class="w-6 h-6 text-alert-error-text"
                   aria-hidden="true"
                 />
diff --git a/resources/scripts-v2/components/base/BaseDropdown.vue b/resources/scripts-v2/components/base/BaseDropdown.vue
index fbeaaf13..fc740d20 100644
--- a/resources/scripts-v2/components/base/BaseDropdown.vue
+++ b/resources/scripts-v2/components/base/BaseDropdown.vue
@@ -11,40 +11,49 @@
       />
     </BaseContentPlaceholders>
     <Menu v-else>
-      <MenuButton ref="trigger" class="focus:outline-hidden" @click="onClick">
-        <slot name="activator" />
-      </MenuButton>
+      <span ref="trigger" class="inline-flex">
+        <MenuButton class="focus:outline-hidden" @click="onClick">
+          <slot name="activator" />
+        </MenuButton>
+      </span>
 
-      <div ref="container" class="z-10" :class="widthClass">
-        <transition
-          enter-active-class="transition duration-100 ease-out"
-          enter-from-class="scale-95 opacity-0"
-          enter-to-class="scale-100 opacity-100"
-          leave-active-class="transition duration-75 ease-in"
-          leave-from-class="scale-100 opacity-100"
-          leave-to-class="scale-95 opacity-0"
+      <Teleport to="body">
+        <div
+          ref="container"
+          class="fixed top-0 left-0 z-10"
+          :class="[widthClass, !contentLoading ? 'pointer-events-none' : '']"
         >
-          <MenuItems :class="containerClasses">
-            <div class="py-1">
-              <slot />
-            </div>
-          </MenuItems>
-        </transition>
-      </div>
+          <transition
+            enter-active-class="transition duration-100 ease-out"
+            enter-from-class="scale-95 opacity-0"
+            enter-to-class="scale-100 opacity-100"
+            leave-active-class="transition duration-75 ease-in"
+            leave-from-class="scale-100 opacity-100"
+            leave-to-class="scale-95 opacity-0"
+          >
+            <MenuItems :class="containerClasses">
+              <div class="py-1">
+                <slot />
+              </div>
+            </MenuItems>
+          </transition>
+        </div>
+      </Teleport>
     </Menu>
   </div>
 </template>
 
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItems } from '@headlessui/vue'
-import { computed, ref } from 'vue'
+import { computed, nextTick } from 'vue'
 import { usePopper } from '@v2/composables/use-popper'
+import type { Placement } from '@popperjs/core'
 
 interface Props {
   containerClass?: string
   widthClass?: string
   positionClass?: string
-  position?: string
+  position?: Placement
   wrapperClass?: string
   contentLoading?: boolean
 }
@@ -60,16 +69,19 @@ const props = withDefaults(defineProps<Props>(), {
 
 const containerClasses = computed<string>(() => {
   const baseClass = `origin-top-right rounded-xl shadow-xl bg-surface/80 backdrop-blur-xl border border-white/15 divide-y divide-line-light focus:outline-hidden`
-  return `${baseClass} ${props.containerClass}`
+  return `${baseClass} pointer-events-auto ${props.containerClass}`
 })
 
 const [trigger, container, popper] = usePopper({
-  placement: 'bottom-end',
+  placement: props.position,
   strategy: 'fixed',
   modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
 })
 
-function onClick(): void {
-  popper.value.update()
+async function onClick(): Promise<void> {
+  await nextTick()
+  requestAnimationFrame(() => {
+    popper.value?.update()
+  })
 }
 </script>
diff --git a/resources/scripts-v2/components/base/BaseItemSelect.vue b/resources/scripts-v2/components/base/BaseItemSelect.vue
index b4cc2627..5bafa859 100644
--- a/resources/scripts-v2/components/base/BaseItemSelect.vue
+++ b/resources/scripts-v2/components/base/BaseItemSelect.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { usePermissions } from '@v2/composables/use-permissions'
-import { useModal } from '@v2/composables/use-modal'
+import { useUserStore } from '@v2/stores/user.store'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useItemStore } from '@v2/features/company/items/store'
 import { ABILITIES } from '@v2/config/abilities'
+import ItemModal from '@v2/features/company/items/components/ItemModal.vue'
 import type { Item } from '@v2/types/domain'
 import type { Tax } from '@v2/types/domain'
 
@@ -23,6 +25,8 @@ interface Props {
   invalidDescription?: boolean
   taxPerItem?: string
   taxes?: Tax[] | null
+  store?: { deselectItem: (index: number) => void } | null
+  storeProp?: string
 }
 
 interface Emits {
@@ -40,18 +44,27 @@ const props = withDefaults(defineProps<Props>(), {
   invalidDescription: false,
   taxPerItem: '',
   taxes: null,
+  store: null,
+  storeProp: '',
 })
 
 const emit = defineEmits<Emits>()
 
-const { hasAbility } = usePermissions()
-const { openModal } = useModal()
+const userStore = useUserStore()
+const modalStore = useModalStore()
+const itemStore = useItemStore()
 const { t } = useI18n()
 
 const itemSelect = ref<Item | null>(null)
+const multiselectRef = ref<{ close?: () => void } | null>(null)
 const loading = ref<boolean>(false)
 const itemData = reactive<LineItem>({ ...props.item })
 
+async function searchItems(search: string): Promise<Item[]> {
+  const res = await itemStore.fetchItems({ search })
+  return res.data as unknown as Item[]
+}
+
 const description = computed<string | null>({
   get: () => props.item.description,
   set: (value: string | null) => {
@@ -60,25 +73,35 @@ const description = computed<string | null>({
 })
 
 function openItemModal(): void {
-  openModal({
-    title: t('items.add_item'),
-    componentName: 'ItemModal',
-    refreshData: () => {},
-    data: {
-      taxPerItem: props.taxPerItem,
-      taxes: props.taxes,
-      itemIndex: props.index,
-    },
+  // Close the multiselect dropdown before opening the modal
+  ;(document.activeElement as HTMLElement)?.blur()
+
+  nextTick(() => {
+    modalStore.openModal({
+      title: t('items.add_item'),
+      componentName: 'ItemModal',
+      refreshData: (val: Item) => emit('select', val),
+      data: {
+        taxPerItem: props.taxPerItem,
+        taxes: props.taxes,
+        itemIndex: props.index,
+      },
+    })
   })
 }
 
 function deselectItem(index: number): void {
+  if (props.store) {
+    props.store.deselectItem(index)
+  }
   emit('deselect', index)
 }
 </script>
 
 <template>
   <div class="flex-1 text-sm">
+    <ItemModal />
+
     <!-- Selected Item Field  -->
     <div
       v-if="item.item_id"
@@ -106,6 +129,7 @@ function deselectItem(index: number): void {
     <!-- Select Item Field -->
     <BaseMultiselect
       v-else
+      ref="multiselectRef"
       v-model="itemSelect"
       :content-loading="contentLoading"
       value-prop="id"
@@ -118,6 +142,7 @@ function deselectItem(index: number): void {
       resolve-on-load
       :delay="500"
       searchable
+      :options="searchItems"
       object
       @update:modelValue="(val: Item) => $emit('select', val)"
       @searchChange="(val: string) => $emit('search', val)"
@@ -125,7 +150,7 @@ function deselectItem(index: number): void {
       <!-- Add Item Action  -->
       <template #action>
         <BaseSelectAction
-          v-if="hasAbility(ABILITIES.CREATE_ITEM)"
+          v-if="userStore.hasAbilities(ABILITIES.CREATE_ITEM)"
           @click="openItemModal"
         >
           <BaseIcon
diff --git a/resources/scripts-v2/components/base/BaseModal.vue b/resources/scripts-v2/components/base/BaseModal.vue
index b084c675..0cc0205a 100644
--- a/resources/scripts-v2/components/base/BaseModal.vue
+++ b/resources/scripts-v2/components/base/BaseModal.vue
@@ -29,7 +29,7 @@
             leave-to="opacity-0"
           >
             <DialogOverlay
-              class="fixed inset-0 transition-opacity bg-gray-700/25"
+              class="fixed inset-0 transition-opacity bg-black/50"
             />
           </TransitionChild>
 
@@ -51,17 +51,17 @@
             <div
               :class="`inline-block
               align-middle
-              bg-surface/80 backdrop-blur-2xl
-              rounded-xl border border-white/15
+              bg-surface/95 backdrop-blur-xl backdrop-saturate-150
+              rounded-xl border border-line-default
               text-left
               overflow-hidden
               relative
-              shadow-xl
+              shadow-2xl
               transition-all
               my-4
               ${modalSize}
               sm:w-full
-              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
+              border-t-8 border-solid rounded border-primary-500`"
             >
               <div
                 v-if="hasHeaderSlot"
diff --git a/resources/scripts-v2/components/base/BaseMultiselect.vue b/resources/scripts-v2/components/base/BaseMultiselect.vue
index a0b86a1a..c8e5632e 100644
--- a/resources/scripts-v2/components/base/BaseMultiselect.vue
+++ b/resources/scripts-v2/components/base/BaseMultiselect.vue
@@ -1,20 +1,260 @@
+<template>
+  <BaseContentPlaceholders v-if="contentLoading">
+    <BaseContentPlaceholdersBox
+      :rounded="true"
+      class="w-full"
+      style="height: 40px"
+    />
+  </BaseContentPlaceholders>
+
+  <div
+    v-else
+    :id="id"
+    ref="rootRef"
+    v-bind="rootAttrs"
+    :tabindex="rootTabIndex"
+    :class="containerClass"
+    @click="handleContainerClick"
+    @focusin="handleFocusIn"
+    @focusout="handleFocusOut"
+    @keydown="handleKeydown"
+  >
+    <template v-if="isTagsMode">
+      <div :class="classes.tags">
+        <slot
+          v-for="option in selectedOptions"
+          :key="option.key"
+          name="tag"
+          :option="option.raw"
+          :handle-tag-remove="handleTagRemove"
+          :handleTagRemove="handleTagRemove"
+          :disabled="disabled"
+        >
+          <span
+            :class="[classes.tag, disabled ? classes.tagDisabled : '']"
+          >
+            {{ getOptionLabel(option.raw) }}
+            <span
+              v-if="!disabled"
+              :class="classes.tagRemove"
+              @mousedown.prevent.stop="handleTagRemove(option.raw)"
+            >
+              <span :class="classes.tagRemoveIcon" />
+            </span>
+          </span>
+        </slot>
+
+        <div :class="classes.tagsSearchWrapper">
+          <span :class="classes.tagsSearchCopy">{{ search }}</span>
+          <input
+            v-if="searchable && !disabled"
+            ref="inputRef"
+            :type="inputType"
+            :value="search"
+            :class="classes.tagsSearch"
+            :autocomplete="autocomplete"
+            style="box-shadow: none !important"
+            @focus="openDropdown"
+            @input="handleSearchInput"
+            @paste.stop
+          />
+        </div>
+      </div>
+    </template>
+
+    <input
+      v-else-if="searchable && !disabled"
+      ref="inputRef"
+      :type="inputType"
+      :value="search"
+      :class="classes.search"
+      :autocomplete="autocomplete"
+      @focus="openDropdown"
+      @input="handleSearchInput"
+      @paste.stop
+    />
+
+    <template v-if="showSingleLabel && selectedOption">
+      <slot name="singlelabel" :value="selectedOption.raw">
+        <div :class="classes.singleLabel">
+          {{ getOptionLabel(selectedOption.raw) }}
+        </div>
+      </slot>
+    </template>
+
+    <template v-if="showMultipleLabel">
+      <slot
+        name="multiplelabel"
+        :values="selectedOptions.map((option) => option.raw)"
+      >
+        <div :class="classes.multipleLabel">
+          {{ multipleLabelText }}
+        </div>
+      </slot>
+    </template>
+
+    <template v-if="placeholder && !hasSelected && !search">
+      <slot name="placeholder">
+        <div :class="classes.placeholder">
+          {{ placeholder }}
+        </div>
+      </slot>
+    </template>
+
+    <slot v-if="busy" name="spinner">
+      <span :class="classes.spinner" />
+    </slot>
+
+    <slot
+      v-if="hasSelected && !disabled && canClear && !busy"
+      name="clear"
+      :clear="clearSelection"
+    >
+      <span
+        :class="classes.clear"
+        @mousedown.prevent.stop="clearSelection"
+      >
+        <span :class="classes.clearIcon" />
+      </span>
+    </slot>
+
+    <slot v-if="caret" name="caret">
+      <span
+        :class="caretClass"
+        @mousedown.prevent.stop="toggleDropdown"
+      />
+    </slot>
+
+    <div
+      v-show="dropdownVisible"
+      :class="dropdownClass"
+      tabindex="-1"
+    >
+      <div class="w-full overflow-y-auto">
+        <slot
+          name="beforelist"
+          :options="slotOptions"
+        />
+
+        <ul :class="classes.options">
+          <template v-if="groups">
+            <li
+              v-for="group in visibleGroups"
+              :key="group.key"
+              :class="classes.group"
+            >
+              <div :class="groupLabelClass(group)">
+                <slot name="grouplabel" :group="group.raw">
+                  <span>{{ group.label }}</span>
+                </slot>
+              </div>
+
+              <ul :class="classes.groupOptions">
+                <li
+                  v-for="option in group.options"
+                  :key="option.key"
+                  :class="optionClass(option)"
+                  :data-pointed="isHighlighted(option.raw)"
+                  @mouseenter="setHighlighted(option.raw)"
+                  @mousedown.prevent.stop="handleOptionClick(option.raw)"
+                >
+                  <slot
+                    name="option"
+                    :option="option.raw"
+                    :search="search"
+                  >
+                    <span>{{ getOptionLabel(option.raw) }}</span>
+                  </slot>
+                </li>
+              </ul>
+            </li>
+          </template>
+
+          <template v-else>
+            <li
+              v-for="option in visibleOptions"
+              :key="option.key"
+              :class="optionClass(option)"
+              :data-pointed="isHighlighted(option.raw)"
+              @mouseenter="setHighlighted(option.raw)"
+              @mousedown.prevent.stop="handleOptionClick(option.raw)"
+            >
+              <slot
+                name="option"
+                :option="option.raw"
+                :search="search"
+              >
+                <span>{{ getOptionLabel(option.raw) }}</span>
+              </slot>
+            </li>
+          </template>
+        </ul>
+
+        <slot v-if="noOptions" name="nooptions">
+          <div :class="classes.noOptions">
+            {{ noOptionsText }}
+          </div>
+        </slot>
+
+        <slot v-if="noResults" name="noresults">
+          <div :class="classes.noResults">
+            {{ noResultsText }}
+          </div>
+        </slot>
+
+        <slot
+          name="afterlist"
+          :options="slotOptions"
+        />
+      </div>
+
+      <slot name="action" />
+    </div>
+
+    <input
+      v-if="required"
+      :class="classes.fakeInput"
+      tabindex="-1"
+      :value="textValue"
+      required
+    />
+
+    <template v-if="nativeSupport">
+      <input
+        v-if="mode === 'single'"
+        type="hidden"
+        :name="name"
+        :value="plainValue ?? ''"
+      />
+      <template v-else>
+        <input
+          v-for="(value, index) in nativeValues"
+          :key="index"
+          type="hidden"
+          :name="`${name}[]`"
+          :value="value"
+        />
+      </template>
+    </template>
+
+    <div :class="classes.spacer" />
+  </div>
+</template>
+
 <script setup lang="ts">
-/**
- * BaseMultiselect is a custom multiselect component built from composables.
- * The original v1 component uses Options API with composables for data, value,
- * search, pointer, options, dropdown, multiselect, keyboard, and classes logic.
- *
- * This v2 wrapper re-exports the original BaseMultiselect from base-select with
- * typed props. The underlying composables (useData, useValue, useSearch, etc.)
- * remain in their original JS form and are consumed by the original component.
- *
- * For consumers, this provides a typed interface while delegating to the
- * battle-tested implementation underneath.
- */
-import { computed } from 'vue'
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useAttrs,
+  watch,
+} from 'vue'
 
 type MultiselectMode = 'single' | 'multiple' | 'tags'
 type OpenDirection = 'top' | 'bottom'
+type OptionRecord = Record<string, unknown>
 
 interface MultiselectClasses {
   container?: string
@@ -74,11 +314,12 @@ interface Props {
   contentLoading?: boolean
   value?: unknown
   modelValue?: unknown
-  options?: unknown[] | Record<string, unknown> | ((...args: unknown[]) => Promise<unknown[]>)
+  options?: unknown[] | Record<string, unknown> | ((query: string) => Promise<unknown[]> | unknown[])
   id?: string | number
   name?: string | number
   disabled?: boolean
   label?: string
+  labelValue?: string
   trackBy?: string
   valueProp?: string
   placeholder?: string | null
@@ -92,7 +333,7 @@ interface Props {
   loading?: boolean
   noOptionsText?: string
   noResultsText?: string
-  multipleLabel?: (values: unknown[]) => string
+  multipleLabel?: ((values: unknown[]) => string) | null
   object?: boolean
   delay?: number
   minChars?: number
@@ -119,19 +360,93 @@ interface Props {
   groupHideEmpty?: boolean
   groupSelect?: boolean
   inputType?: string
+  allowEmpty?: boolean
+  showLabels?: boolean
 }
 
-interface Emits {
-  (e: 'open'): void
-  (e: 'close'): void
-  (e: 'select', option: unknown): void
-  (e: 'deselect', option: unknown): void
-  (e: 'input', value: unknown): void
-  (e: 'search-change', query: string): void
-  (e: 'tag', query: string): void
-  (e: 'update:modelValue', value: unknown): void
-  (e: 'change', value: unknown): void
-  (e: 'clear'): void
+interface NormalizedOption {
+  key: string
+  raw: OptionRecord
+}
+
+interface NormalizedGroup {
+  key: string
+  label: string
+  raw: OptionRecord
+  options: NormalizedOption[]
+}
+
+const defaultClasses: Required<MultiselectClasses> = {
+  container:
+    'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-line-default rounded-md bg-surface text-sm leading-snug outline-hidden max-h-10',
+  containerDisabled:
+    'cursor-default bg-surface-muted/50 !text-subtle',
+  containerOpen: '',
+  containerOpenTop: '',
+  containerActive: 'ring-1 ring-primary-400 border-primary-400',
+  containerInvalid:
+    'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400',
+  containerInvalidActive: 'ring-1 border-red-400 ring-red-400',
+  singleLabel:
+    'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
+  multipleLabel:
+    'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
+  search:
+    'w-full absolute inset-0 outline-hidden appearance-none box-border border-0 text-sm font-sans bg-surface rounded-md pl-3.5',
+  tags: 'grow shrink flex flex-wrap mt-1 pl-2',
+  tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap',
+  tagDisabled: 'pr-2 !bg-subtle text-white',
+  tagRemove:
+    'flex items-center justify-center p-1 mx-0.5 rounded-xs hover:bg-black/10 group',
+  tagRemoveIcon:
+    'bg-multiselect-remove text-white bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
+  tagsSearchWrapper: 'inline-block relative mx-1 mb-1 grow shrink h-full',
+  tagsSearch:
+    'absolute inset-0 border-0 focus:outline-hidden !shadow-none !focus:shadow-none appearance-none p-0 text-sm font-sans box-border w-full',
+  tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
+  placeholder:
+    'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-subtle text-sm',
+  caret:
+    'bg-multiselect-caret bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform',
+  caretOpen: 'rotate-180 pointer-events-auto',
+  clear:
+    'pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80',
+  clearIcon:
+    'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
+  spinner:
+    'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0',
+  dropdown:
+    'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 border border-line-strong mt-1 overflow-y-auto z-50 bg-surface flex flex-col rounded-md',
+  dropdownTop:
+    '-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
+  dropdownBottom: 'translate-y-full',
+  dropdownHidden: 'hidden',
+  options: 'flex flex-col p-0 m-0 list-none',
+  optionsTop: 'flex-col-reverse',
+  group: 'p-0 m-0',
+  groupLabel:
+    'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-surface-muted cursor-default leading-normal',
+  groupLabelPointable: 'cursor-pointer',
+  groupLabelPointed: 'bg-surface-muted text-body',
+  groupLabelSelected: 'bg-primary-600 text-white',
+  groupLabelDisabled: 'bg-surface-tertiary text-subtle cursor-not-allowed',
+  groupLabelSelectedPointed: 'bg-primary-600 text-white opacity-90',
+  groupLabelSelectedDisabled:
+    'text-primary-100 bg-primary-600/50 cursor-not-allowed',
+  groupOptions: 'p-0 m-0',
+  option:
+    'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3',
+  optionPointed: 'text-heading bg-surface-tertiary',
+  optionSelected: 'text-white bg-primary-500',
+  optionDisabled: 'text-subtle cursor-not-allowed',
+  optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
+  optionSelectedDisabled:
+    'text-primary-100 bg-primary-500/50 cursor-not-allowed',
+  noOptions: 'py-2 px-3 text-muted bg-surface',
+  noResults: 'py-2 px-3 text-muted bg-surface',
+  fakeInput:
+    'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-hidden text-transparent',
+  spacer: 'h-9 py-px box-content',
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -145,6 +460,7 @@ const props = withDefaults(defineProps<Props>(), {
   name: 'multiselect',
   disabled: false,
   label: 'label',
+  labelValue: '',
   trackBy: 'label',
   valueProp: 'value',
   placeholder: null,
@@ -158,7 +474,7 @@ const props = withDefaults(defineProps<Props>(), {
   loading: false,
   noOptionsText: 'The list is empty',
   noResultsText: 'No results found',
-  multipleLabel: undefined,
+  multipleLabel: null,
   object: false,
   delay: -1,
   minChars: 0,
@@ -175,78 +491,7 @@ const props = withDefaults(defineProps<Props>(), {
   openDirection: 'bottom',
   nativeSupport: false,
   invalid: false,
-  classes: () => ({
-    container:
-      'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-line-default rounded-md bg-surface text-sm leading-snug outline-hidden max-h-10',
-    containerDisabled:
-      'cursor-default bg-surface-muted/50 !text-subtle',
-    containerOpen: '',
-    containerOpenTop: '',
-    containerActive: 'ring-1 ring-primary-400 border-primary-400',
-    containerInvalid:
-      'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400',
-    containerInvalidActive: 'ring-1 border-red-400 ring-red-400',
-    singleLabel:
-      'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
-    multipleLabel:
-      'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
-    search:
-      'w-full absolute inset-0 outline-hidden appearance-none box-border border-0 text-sm font-sans bg-surface rounded-md pl-3.5',
-    tags: 'grow shrink flex flex-wrap mt-1 pl-2',
-    tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap',
-    tagDisabled: 'pr-2 !bg-subtle text-white',
-    tagRemove:
-      'flex items-center justify-center p-1 mx-0.5 rounded-xs hover:bg-black/10 group',
-    tagRemoveIcon:
-      'bg-multiselect-remove text-white bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
-    tagsSearchWrapper: 'inline-block relative mx-1 mb-1 grow shrink h-full',
-    tagsSearch:
-      'absolute inset-0 border-0 focus:outline-hidden !shadow-none !focus:shadow-none appearance-none p-0 text-sm font-sans box-border w-full',
-    tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
-    placeholder:
-      'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-subtle text-sm',
-    caret:
-      'bg-multiselect-caret bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform',
-    caretOpen: 'rotate-180 pointer-events-auto',
-    clear:
-      'pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80',
-    clearIcon:
-      'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
-    spinner:
-      'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0',
-    dropdown:
-      'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 border border-line-strong mt-1 overflow-y-auto z-50 bg-surface flex flex-col rounded-md',
-    dropdownTop:
-      '-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
-    dropdownBottom: 'translate-y-full',
-    dropdownHidden: 'hidden',
-    options: 'flex flex-col p-0 m-0 list-none',
-    optionsTop: 'flex-col-reverse',
-    group: 'p-0 m-0',
-    groupLabel:
-      'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-surface-muted cursor-default leading-normal',
-    groupLabelPointable: 'cursor-pointer',
-    groupLabelPointed: 'bg-surface-muted text-body',
-    groupLabelSelected: 'bg-primary-600 text-white',
-    groupLabelDisabled: 'bg-surface-tertiary text-subtle cursor-not-allowed',
-    groupLabelSelectedPointed: 'bg-primary-600 text-white opacity-90',
-    groupLabelSelectedDisabled:
-      'text-primary-100 bg-primary-600/50 cursor-not-allowed',
-    groupOptions: 'p-0 m-0',
-    option:
-      'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3',
-    optionPointed: 'text-heading bg-surface-tertiary',
-    optionSelected: 'text-white bg-primary-500',
-    optionDisabled: 'text-subtle cursor-not-allowed',
-    optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
-    optionSelectedDisabled:
-      'text-primary-100 bg-primary-500/50 cursor-not-allowed',
-    noOptions: 'py-2 px-3 text-muted bg-surface',
-    noResults: 'py-2 px-3 text-muted bg-surface',
-    fakeInput:
-      'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-hidden text-transparent',
-    spacer: 'h-9 py-px box-content',
-  }),
+  classes: () => ({}),
   strict: true,
   closeOnSelect: true,
   autocomplete: undefined,
@@ -256,33 +501,921 @@ const props = withDefaults(defineProps<Props>(), {
   groupHideEmpty: false,
   groupSelect: true,
   inputType: 'text',
+  allowEmpty: undefined,
+  showLabels: true,
 })
 
-defineEmits<Emits>()
+const emit = defineEmits<{
+  (e: 'open'): void
+  (e: 'close'): void
+  (e: 'select', value: unknown, option?: unknown): void
+  (e: 'deselect', value: unknown, option?: unknown): void
+  (e: 'remove', value: unknown, option?: unknown): void
+  (e: 'input', value: unknown): void
+  (e: 'search-change', query: string): void
+  (e: 'searchChange', query: string): void
+  (e: 'tag', query: string): void
+  (e: 'update:modelValue', value: unknown): void
+  (e: 'change', value: unknown): void
+  (e: 'clear'): void
+}>()
 
-/**
- * NOTE: This component serves as a typed facade. The actual rendering is done
- * by the original BaseMultiselect from `base-select/BaseMultiselect.vue`.
- * In a full migration, the composables would be rewritten in TypeScript.
- * For now, consumers get full type safety on the props/emits boundary.
- */
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+const rootRef = ref<HTMLElement | null>(null)
+const inputRef = ref<HTMLInputElement | null>(null)
+const isOpen = ref(false)
+const isFocused = ref(false)
+const search = ref(props.initialSearch ?? '')
+const resolvedOptions = ref<unknown[]>([])
+const appendedOptions = ref<OptionRecord[]>([])
+const isResolving = ref(false)
+const highlightedKey = ref<string | null>(null)
+let searchTimeout: ReturnType<typeof window.setTimeout> | null = null
+let requestId = 0
+
+const classes = computed<Required<MultiselectClasses>>(() => ({
+  ...defaultClasses,
+  ...(props.classes ?? {}),
+}))
+
+const rootAttrs = computed<Record<string, unknown>>(() => {
+  const { tabindex, ...rest } = attrs as Record<string, unknown>
+
+  return rest
+})
+
+const rootTabIndex = computed<number>(() => {
+  const rawTabIndex = (attrs as Record<string, unknown>).tabindex
+
+  if (props.disabled) {
+    return -1
+  }
+
+  if (
+    typeof rawTabIndex === 'number' ||
+    (typeof rawTabIndex === 'string' && rawTabIndex.length > 0)
+  ) {
+    return Number(rawTabIndex)
+  }
+
+  return 0
+})
+
+const isMultiMode = computed<boolean>(() => {
+  return props.mode === 'multiple' || props.mode === 'tags'
+})
+
+const isTagsMode = computed<boolean>(() => props.mode === 'tags')
+
+const effectiveCanDeselect = computed<boolean>(() => {
+  return props.allowEmpty ?? props.canDeselect
+})
+
+const modelSource = computed(() => {
+  return props.modelValue !== undefined ? props.modelValue : props.value
+})
+
+const busy = computed<boolean>(() => {
+  return props.loading || isResolving.value
+})
+
+const containerClass = computed(() => {
+  return [
+    classes.value.container,
+    props.disabled ? classes.value.containerDisabled : '',
+    isOpen.value ? classes.value.containerOpen : '',
+    isOpen.value && props.openDirection === 'top'
+      ? classes.value.containerOpenTop
+      : '',
+    isFocused.value && props.invalid
+      ? classes.value.containerInvalidActive
+      : '',
+    isFocused.value && !props.invalid ? classes.value.containerActive : '',
+    props.invalid ? classes.value.containerInvalid : '',
+  ]
+})
+
+const caretClass = computed(() => {
+  return [
+    classes.value.caret,
+    isOpen.value ? classes.value.caretOpen : '',
+  ]
+})
+
+const dropdownVisible = computed<boolean>(() => {
+  return isOpen.value && props.showOptions
+})
+
+const dropdownClass = computed(() => {
+  return [
+    classes.value.dropdown,
+    props.openDirection === 'top'
+      ? classes.value.dropdownTop
+      : classes.value.dropdownBottom,
+    dropdownVisible.value ? '' : classes.value.dropdownHidden,
+  ]
+})
+
+const optionSource = computed<unknown>(() => {
+  return typeof props.options === 'function' ? resolvedOptions.value : props.options
+})
+
+const normalizedOptions = computed<NormalizedOption[]>(() => {
+  if (props.groups) {
+    return []
+  }
+
+  return normalizeOptionList(optionSource.value).concat(
+    appendedOptions.value.map((option, index) =>
+      normalizeOption(option, `appended-${index}`)
+    )
+  )
+})
+
+const normalizedGroups = computed<NormalizedGroup[]>(() => {
+  if (!props.groups) {
+    return []
+  }
+
+  return normalizeGroups(optionSource.value)
+})
+
+const allSelectableOptions = computed<NormalizedOption[]>(() => {
+  if (props.groups) {
+    return normalizedGroups.value.flatMap((group) => group.options)
+  }
+
+  return normalizedOptions.value
+})
+
+const selectedOptions = computed<NormalizedOption[]>(() => {
+  const value = modelSource.value
+
+  if (isMultiMode.value) {
+    const values = Array.isArray(value) ? value : []
+
+    return values
+      .map((entry, index) => resolveSelectedOption(entry, `selected-${index}`))
+      .filter((option): option is NormalizedOption => option !== null)
+  }
+
+  if (value === null || value === undefined) {
+    return []
+  }
+
+  if (typeof value === 'string' && value.length === 0) {
+    return []
+  }
+
+  const option = resolveSelectedOption(value, 'selected-single')
+
+  return option ? [option] : []
+})
+
+const selectedOption = computed<NormalizedOption | null>(() => {
+  return selectedOptions.value[0] ?? null
+})
+
+const selectedRawOptions = computed<OptionRecord[]>(() => {
+  return selectedOptions.value.map((option) => option.raw)
+})
+
+const hasSelected = computed<boolean>(() => {
+  return selectedOptions.value.length > 0
+})
+
+const visibleOptions = computed<NormalizedOption[]>(() => {
+  let options = normalizedOptions.value.filter((option) => matchesSearch(option.raw))
+
+  if (props.hideSelected && isMultiMode.value) {
+    options = options.filter((option) => !isSelected(option.raw))
+  }
+
+  if (props.limit > -1) {
+    options = options.slice(0, props.limit)
+  }
+
+  return options
+})
+
+const visibleGroups = computed<NormalizedGroup[]>(() => {
+  return normalizedGroups.value
+    .map((group) => {
+      let options = group.options.filter((option) => matchesSearch(option.raw))
+
+      if (props.hideSelected && isMultiMode.value) {
+        options = options.filter((option) => !isSelected(option.raw))
+      }
+
+      if (props.limit > -1) {
+        options = options.slice(0, props.limit)
+      }
+
+      return {
+        ...group,
+        options,
+      }
+    })
+    .filter((group) => {
+      if (!props.groupHideEmpty) {
+        return search.value ? group.options.length > 0 : true
+      }
+
+      return group.options.length > 0
+    })
+})
+
+const selectableOptions = computed<NormalizedOption[]>(() => {
+  if (props.groups) {
+    return visibleGroups.value.flatMap((group) => group.options)
+  }
+
+  return visibleOptions.value
+})
+
+const slotOptions = computed<unknown[]>(() => {
+  if (props.groups) {
+    return visibleGroups.value.map((group) => group.raw)
+  }
+
+  return visibleOptions.value.map((option) => option.raw)
+})
+
+const multipleLabelText = computed<string>(() => {
+  if (props.multipleLabel) {
+    return props.multipleLabel(selectedOptions.value.map((option) => option.raw))
+  }
+
+  return selectedOptions.value.length > 1
+    ? `${selectedOptions.value.length} options selected`
+    : '1 option selected'
+})
+
+const showSingleLabel = computed<boolean>(() => {
+  return props.mode === 'single' && hasSelected.value && !search.value
+})
+
+const showMultipleLabel = computed<boolean>(() => {
+  return props.mode === 'multiple' && hasSelected.value && !search.value
+})
+
+const noOptions = computed<boolean>(() => {
+  return !busy.value && allSelectableOptions.value.length === 0 && !showCreateTagOption.value
+})
+
+const noResults = computed<boolean>(() => {
+  return (
+    !busy.value &&
+    allSelectableOptions.value.length > 0 &&
+    selectableOptions.value.length === 0 &&
+    search.value.length > 0
+  )
+})
+
+const showCreateTagOption = computed<boolean>(() => {
+  return Boolean(createTagOption.value)
+})
+
+const createTagOption = computed<OptionRecord | null>(() => {
+  if (!props.createTag || !search.value.trim()) {
+    return null
+  }
+
+  const value = search.value.trim()
+
+  if (allSelectableOptions.value.some((option) => matchesValue(option.raw, value))) {
+    return null
+  }
+
+  return {
+    [props.valueProp]: value,
+    [props.label]: value,
+    [props.trackBy]: value,
+  }
+})
+
+const plainValue = computed<unknown>(() => {
+  if (props.mode === 'single') {
+    return selectedOption.value
+      ? getOptionValue(selectedOption.value.raw)
+      : null
+  }
+
+  return selectedOptions.value.map((option) => getOptionValue(option.raw))
+})
+
+const nativeValues = computed<unknown[]>(() => {
+  return Array.isArray(plainValue.value) ? plainValue.value : []
+})
+
+const textValue = computed<string>(() => {
+  if (props.mode === 'single') {
+    const value = plainValue.value
+    return value == null ? '' : String(value)
+  }
+
+  return nativeValues.value.map((value) => String(value)).join(',')
+})
+
+watch(
+  search,
+  (query) => {
+    emit('search-change', query)
+    emit('searchChange', query)
+
+    if (typeof props.options === 'function' && props.delay > -1) {
+      if (query.length < props.minChars) {
+        if (props.clearOnSearch) {
+          resolvedOptions.value = []
+        }
+        return
+      }
+
+      if (props.clearOnSearch) {
+        resolvedOptions.value = []
+      }
+
+      if (searchTimeout) {
+        window.clearTimeout(searchTimeout)
+      }
+
+      searchTimeout = window.setTimeout(() => {
+        if (query === search.value) {
+          void resolveOptions(query)
+        }
+      }, props.delay)
+    }
+  },
+  { flush: 'sync' }
+)
+
+watch(
+  selectableOptions,
+  (options) => {
+    if (!options.length) {
+      highlightedKey.value = null
+      return
+    }
+
+    if (!options.some((option) => option.key === highlightedKey.value)) {
+      highlightedKey.value = options.find((option) => !isOptionDisabled(option.raw))?.key ?? null
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.initialSearch,
+  (value) => {
+    search.value = value ?? ''
+  }
+)
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleDocumentMousedown)
+
+  if (typeof props.options === 'function' && props.resolveOnLoad) {
+    void resolveOptions(search.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', handleDocumentMousedown)
+
+  if (searchTimeout) {
+    window.clearTimeout(searchTimeout)
+  }
+})
+
+function isPlainObject(value: unknown): value is OptionRecord {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function normalizeOptionList(source: unknown): NormalizedOption[] {
+  if (Array.isArray(source)) {
+    return source.map((option, index) => normalizeOption(option, index))
+  }
+
+  if (isPlainObject(source)) {
+    return Object.entries(source).map(([key, value], index) =>
+      normalizeOption(
+        {
+          [props.valueProp]: key,
+          [props.trackBy]: value,
+          [props.label]: value,
+        },
+        index
+      )
+    )
+  }
+
+  return []
+}
+
+function normalizeGroups(source: unknown): NormalizedGroup[] {
+  if (!Array.isArray(source)) {
+    return []
+  }
+
+  return source.map((group, index) => {
+    const rawGroup = isPlainObject(group) ? group : {}
+    const options = normalizeOptionList(rawGroup[props.groupOptions]).map(
+      (option) => {
+        if (Boolean(rawGroup.disabled)) {
+          return {
+            ...option,
+            raw: {
+              ...option.raw,
+              disabled: true,
+            },
+          }
+        }
+
+        return option
+      }
+    )
+
+    return {
+      key: `group-${index}-${String(rawGroup[props.groupLabel] ?? '')}`,
+      label: String(rawGroup[props.groupLabel] ?? ''),
+      raw: rawGroup,
+      options,
+    }
+  })
+}
+
+function normalizeOption(option: unknown, fallbackKey: string | number): NormalizedOption {
+  const raw = normalizeOptionRecord(option)
+
+  return {
+    key: `${String(getOptionValue(raw) ?? '')}-${String(fallbackKey)}`,
+    raw,
+  }
+}
+
+function normalizeOptionRecord(option: unknown): OptionRecord {
+  if (isPlainObject(option)) {
+    return option
+  }
+
+  return {
+    [props.valueProp]: option,
+    [props.trackBy]: option,
+    [props.label]: option,
+  }
+}
+
+function resolveSelectedOption(
+  value: unknown,
+  fallbackKey: string | number
+): NormalizedOption | null {
+  if (value === null || value === undefined) {
+    return null
+  }
+
+  const matched = allSelectableOptions.value.find((option) =>
+    matchesExternal(option.raw, value)
+  )
+
+  if (matched) {
+    return matched
+  }
+
+  return normalizeOption(value, fallbackKey)
+}
+
+function getOptionValue(option: OptionRecord): unknown {
+  return option[props.valueProp]
+}
+
+function getOptionLabel(option: OptionRecord): string {
+  const labelKey = props.labelValue || props.label
+  const value = option[labelKey] ?? option[props.label] ?? getOptionValue(option)
+
+  return value == null ? '' : String(value)
+}
+
+function getTrackValue(option: OptionRecord): string {
+  const value = option[props.trackBy] ?? option[props.label] ?? getOptionValue(option)
+
+  return value == null ? '' : String(value)
+}
+
+function normalizeSearch(value: unknown): string {
+  return String(value ?? '').trim().toLowerCase()
+}
+
+function matchesSearch(option: OptionRecord): boolean {
+  if (!search.value || !props.filterResults) {
+    return true
+  }
+
+  const query = normalizeSearch(search.value)
+
+  return (
+    normalizeSearch(getTrackValue(option)).includes(query) ||
+    normalizeSearch(getOptionLabel(option)).includes(query)
+  )
+}
+
+function matchesValue(option: OptionRecord, value: unknown): boolean {
+  return String(getOptionValue(option)) === String(value)
+}
+
+function matchesExternal(option: OptionRecord, value: unknown): boolean {
+  if (isPlainObject(value)) {
+    if (props.object) {
+      return String(getOptionValue(option)) === String(getOptionValue(value))
+    }
+
+    const candidate = value[props.valueProp]
+
+    if (candidate !== undefined) {
+      return String(getOptionValue(option)) === String(candidate)
+    }
+
+    return normalizeSearch(getTrackValue(option)) === normalizeSearch(getTrackValue(value))
+  }
+
+  return String(getOptionValue(option)) === String(value)
+}
+
+function isOptionDisabled(option: OptionRecord): boolean {
+  return Boolean(option.disabled)
+}
+
+function isSelected(option: OptionRecord): boolean {
+  return selectedRawOptions.value.some((selected) => matchesExternal(option, selected))
+}
+
+function isHighlighted(option: OptionRecord): boolean {
+  const key = normalizeOption(option, 'highlight').key
+
+  return highlightedKey.value === key
+}
+
+function setHighlighted(option: OptionRecord): void {
+  highlightedKey.value = normalizeOption(option, 'highlight').key
+}
+
+function optionClass(option: NormalizedOption): string[] {
+  const selected = isSelected(option.raw)
+  const disabled = isOptionDisabled(option.raw)
+  const highlighted = isHighlighted(option.raw)
+
+  return [
+    classes.value.option,
+    highlighted ? classes.value.optionPointed : '',
+    selected ? classes.value.optionSelected : '',
+    disabled ? classes.value.optionDisabled : '',
+    selected && highlighted ? classes.value.optionSelectedPointed : '',
+    selected && disabled ? classes.value.optionSelectedDisabled : '',
+  ]
+}
+
+function groupLabelClass(group: NormalizedGroup): string[] {
+  return [
+    classes.value.groupLabel,
+    Boolean(group.raw.disabled) ? classes.value.groupLabelDisabled : '',
+  ]
+}
+
+function publicValue(option: OptionRecord): unknown {
+  return props.object ? option : getOptionValue(option)
+}
+
+function emitModel(value: OptionRecord | OptionRecord[] | null): void {
+  const externalValue = makeExternal(value)
+
+  emit('change', externalValue)
+  emit('input', externalValue)
+  emit('update:modelValue', externalValue)
+}
+
+function makeExternal(value: OptionRecord | OptionRecord[] | null): unknown {
+  if (props.object) {
+    return value
+  }
+
+  if (value === null) {
+    return null
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((option) => getOptionValue(option))
+  }
+
+  return getOptionValue(value)
+}
+
+function clearSearch(): void {
+  if (!props.preserveSearch) {
+    search.value = ''
+  }
+}
+
+function openDropdown(): void {
+  if (props.disabled || isOpen.value) {
+    return
+  }
+
+  isOpen.value = true
+  emit('open')
+
+  if (typeof props.options === 'function' && props.delay === -1) {
+    void resolveOptions(search.value)
+  }
+
+  void nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+
+function closeDropdown(): void {
+  if (!isOpen.value) {
+    return
+  }
+
+  isOpen.value = false
+  emit('close')
+
+  if (!props.preserveSearch && !isTagsMode.value) {
+    search.value = ''
+  }
+}
+
+function toggleDropdown(): void {
+  if (dropdownVisible.value) {
+    closeDropdown()
+    return
+  }
+
+  openDropdown()
+}
+
+function selectOption(option: OptionRecord): void {
+  if (props.mode === 'single') {
+    emitModel(option)
+    emit('select', publicValue(option), option)
+
+    if (props.clearOnSelect) {
+      clearSearch()
+    }
+
+    if (props.closeOnSelect) {
+      closeDropdown()
+    }
+
+    return
+  }
+
+  const next = selectedRawOptions.value.concat(option)
+
+  emitModel(next)
+  emit('select', publicValue(option), option)
+
+  if (props.clearOnSelect) {
+    clearSearch()
+  }
+
+  if (props.closeOnSelect) {
+    closeDropdown()
+  }
+}
+
+function deselectOption(option: OptionRecord): void {
+  if (props.mode === 'single') {
+    emitModel(null)
+    emit('deselect', publicValue(option), option)
+    emit('remove', publicValue(option), option)
+    return
+  }
+
+  const next = selectedRawOptions.value.filter(
+    (selected) => !matchesExternal(option, selected)
+  )
+
+  emitModel(next)
+  emit('deselect', publicValue(option), option)
+  emit('remove', publicValue(option), option)
+}
+
+function clearSelection(): void {
+  emit('clear')
+  emitModel(props.mode === 'single' ? null : [])
+}
+
+function handleOptionClick(option: OptionRecord): void {
+  if (isOptionDisabled(option)) {
+    return
+  }
+
+  if (props.mode === 'single') {
+    if (isSelected(option)) {
+      if (effectiveCanDeselect.value) {
+        deselectOption(option)
+      }
+
+      if (props.closeOnSelect) {
+        closeDropdown()
+      }
+
+      return
+    }
+
+    selectOption(option)
+    return
+  }
+
+  if (isSelected(option)) {
+    deselectOption(option)
+    return
+  }
+
+  if (props.max > -1 && selectedOptions.value.length >= props.max) {
+    return
+  }
+
+  selectOption(option)
+}
+
+function handleTagRemove(option: OptionRecord): void {
+  deselectOption(option)
+}
+
+function handleSearchInput(event: Event): void {
+  const target = event.target as HTMLInputElement
+
+  search.value = target.value
+
+  if (props.clearOnSearch && hasSelected.value && props.mode === 'single') {
+    emitModel(null)
+  }
+
+  if (!dropdownVisible.value) {
+    openDropdown()
+  }
+}
+
+function handleContainerClick(): void {
+  if (props.disabled) {
+    return
+  }
+
+  if (props.searchable) {
+    openDropdown()
+    return
+  }
+
+  toggleDropdown()
+}
+
+function handleFocusIn(): void {
+  isFocused.value = true
+}
+
+function handleFocusOut(event: FocusEvent): void {
+  const relatedTarget = event.relatedTarget as Node | null
+
+  if (!rootRef.value?.contains(relatedTarget)) {
+    isFocused.value = false
+  }
+}
+
+function handleDocumentMousedown(event: MouseEvent): void {
+  if (!rootRef.value?.contains(event.target as Node)) {
+    isFocused.value = false
+    closeDropdown()
+  }
+}
+
+function moveHighlight(direction: 1 | -1): void {
+  const options = selectableOptions.value.filter(
+    (option) => !isOptionDisabled(option.raw)
+  )
+
+  if (!options.length) {
+    highlightedKey.value = null
+    return
+  }
+
+  const currentIndex = options.findIndex(
+    (option) => option.key === highlightedKey.value
+  )
+
+  if (currentIndex === -1) {
+    highlightedKey.value = options[0].key
+    return
+  }
+
+  const nextIndex =
+    (currentIndex + direction + options.length) % options.length
+
+  highlightedKey.value = options[nextIndex].key
+}
+
+function selectHighlighted(): void {
+  const option = selectableOptions.value.find(
+    (candidate) => candidate.key === highlightedKey.value
+  )
+
+  if (option) {
+    handleOptionClick(option.raw)
+    return
+  }
+
+  if (createTagOption.value) {
+    emit('tag', String(getOptionValue(createTagOption.value)))
+
+    if (props.appendNewTag) {
+      appendedOptions.value = appendedOptions.value.concat(createTagOption.value)
+    }
+
+    handleOptionClick(createTagOption.value)
+  }
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (props.disabled) {
+    return
+  }
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    openDropdown()
+    moveHighlight(1)
+    return
+  }
+
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    openDropdown()
+    moveHighlight(-1)
+    return
+  }
+
+  if (event.key === 'Escape') {
+    closeDropdown()
+    return
+  }
+
+  if (event.key === 'Tab') {
+    closeDropdown()
+    return
+  }
+
+  if (
+    event.key === 'Backspace' &&
+    !search.value &&
+    effectiveCanDeselect.value
+  ) {
+    if (props.mode === 'single' && selectedOption.value) {
+      event.preventDefault()
+      deselectOption(selectedOption.value.raw)
+      return
+    }
+
+    if (isTagsMode.value && selectedOptions.value.length > 0) {
+      event.preventDefault()
+      deselectOption(selectedOptions.value[selectedOptions.value.length - 1].raw)
+    }
+  }
+
+  if (props.addTagOn.includes(event.key.toLowerCase()) || event.key === 'Enter') {
+    if (!dropdownVisible.value && !createTagOption.value) {
+      return
+    }
+
+    event.preventDefault()
+    selectHighlighted()
+  }
+}
+
+async function resolveOptions(query: string): Promise<void> {
+  if (typeof props.options !== 'function') {
+    return
+  }
+
+  const nextRequestId = ++requestId
+
+  isResolving.value = true
+
+  try {
+    const response = await props.options(query)
+
+    if (nextRequestId !== requestId) {
+      return
+    }
+
+    resolvedOptions.value = Array.isArray(response) ? response : []
+  } finally {
+    if (nextRequestId === requestId) {
+      isResolving.value = false
+    }
+  }
+}
 </script>
-
-<template>
-  <BaseContentPlaceholders v-if="contentLoading">
-    <BaseContentPlaceholdersBox
-      :rounded="true"
-      class="w-full"
-      style="height: 40px"
-    />
-  </BaseContentPlaceholders>
-  <div v-else>
-    <!--
-      This component delegates to the original BaseMultiselect at runtime.
-      The template is intentionally a pass-through slot container.
-      The actual multiselect UI is rendered by the globally registered
-      BaseMultiselect component from the v1 codebase.
-    -->
-    <slot />
-  </div>
-</template>
diff --git a/resources/scripts-v2/components/base/BasePdfPreview.vue b/resources/scripts-v2/components/base/BasePdfPreview.vue
new file mode 100644
index 00000000..2e2b66df
--- /dev/null
+++ b/resources/scripts-v2/components/base/BasePdfPreview.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface Props {
+  src: string | false
+}
+
+const props = defineProps<Props>()
+
+const status = ref<'idle' | 'loading' | 'ready' | 'error'>('idle')
+
+async function checkPdf(url: string): Promise<void> {
+  status.value = 'loading'
+  try {
+    const response = await fetch(url, { method: 'GET', credentials: 'same-origin' })
+    if (response.ok) {
+      status.value = 'ready'
+    } else {
+      status.value = 'error'
+    }
+  } catch {
+    status.value = 'error'
+  }
+}
+
+function retry(): void {
+  if (props.src) {
+    checkPdf(props.src)
+  }
+}
+
+watch(
+  () => props.src,
+  (url) => {
+    if (url) {
+      checkPdf(url)
+    } else {
+      status.value = 'idle'
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div
+    class="flex flex-col min-h-0 mt-8 overflow-hidden"
+    style="height: 75vh"
+  >
+    <!-- Loading -->
+    <div
+      v-if="status === 'loading' || status === 'idle'"
+      class="flex-1 flex items-center justify-center border border-line-default rounded-md bg-surface"
+    >
+      <BaseSpinner class="w-8 h-8 text-primary-400" />
+    </div>
+
+    <!-- Error -->
+    <div
+      v-else-if="status === 'error'"
+      class="flex-1 flex flex-col items-center justify-center gap-4 border border-line-default rounded-md bg-surface"
+    >
+      <BaseIcon name="ExclamationCircleIcon" class="w-12 h-12 text-muted" />
+      <p class="text-sm text-muted">
+        {{ $t('general.unable_to_load_pdf') }}
+      </p>
+      <BaseButton variant="primary-outline" size="sm" @click="retry">
+        {{ $t('general.retry') }}
+      </BaseButton>
+    </div>
+
+    <!-- PDF iframe -->
+    <iframe
+      v-else
+      :src="src || undefined"
+      class="flex-1 border border-line-default border-solid rounded-md bg-surface"
+    />
+  </div>
+</template>
diff --git a/resources/scripts-v2/components/base/BaseTab.vue b/resources/scripts-v2/components/base/BaseTab.vue
new file mode 100644
index 00000000..085ea407
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseTab.vue
@@ -0,0 +1,24 @@
+<template>
+  <TabPanel :class="[tabPanelContainer, 'focus:outline-hidden']">
+    <slot />
+  </TabPanel>
+</template>
+
+<script setup lang="ts">
+import { TabPanel } from '@headlessui/vue'
+
+withDefaults(
+  defineProps<{
+    title?: string | number
+    count?: string | number
+    countVariant?: string | number
+    tabPanelContainer?: string
+  }>(),
+  {
+    title: 'Tab',
+    count: '',
+    countVariant: '',
+    tabPanelContainer: 'py-4 mt-px',
+  },
+)
+</script>
diff --git a/resources/scripts-v2/components/base/BaseTabGroup.vue b/resources/scripts-v2/components/base/BaseTabGroup.vue
index 86d6e21a..cba4b73b 100644
--- a/resources/scripts-v2/components/base/BaseTabGroup.vue
+++ b/resources/scripts-v2/components/base/BaseTabGroup.vue
@@ -40,7 +40,7 @@ function onChange(d: number): void {
 </script>
 
 <template>
-  <div>
+  <div class="w-full">
     <TabGroup :default-index="defaultIndex" @change="onChange">
       <TabList
         :class="[
@@ -57,9 +57,9 @@ function onChange(d: number): void {
         >
           <button
             :class="[
-              'px-8 py-2 text-sm leading-5 font-medium flex items-center relative border-b-2 mt-4 focus:outline-hidden whitespace-nowrap',
+              'px-5 py-2.5 text-sm leading-5 font-medium flex items-center relative -mb-px border-b-2 focus:outline-hidden whitespace-nowrap transition-colors',
               selected
-                ? ' border-primary-400 text-heading font-medium'
+                ? 'border-primary-400 text-heading'
                 : 'border-transparent text-muted hover:text-body hover:border-line-strong',
             ]"
           >
diff --git a/resources/scripts-v2/components/base/EstimateStatusBadge.vue b/resources/scripts-v2/components/base/EstimateStatusBadge.vue
index 3c76835a..427e9f51 100644
--- a/resources/scripts-v2/components/base/EstimateStatusBadge.vue
+++ b/resources/scripts-v2/components/base/EstimateStatusBadge.vue
@@ -10,28 +10,30 @@ const props = withDefaults(defineProps<Props>(), {
   status: '',
 })
 
+const baseClasses = 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium'
+
 const badgeColorClasses = computed<string>(() => {
   switch (props.status) {
     case EstimateStatus.DRAFT:
     case 'DRAFT':
-      return 'bg-yellow-300/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center'
+      return `${baseClasses} bg-gray-100 text-gray-700 ring-1 ring-inset ring-gray-300/50`
     case EstimateStatus.SENT:
     case 'SENT':
-      return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center'
+      return `${baseClasses} bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-300/50`
     case EstimateStatus.VIEWED:
     case 'VIEWED':
-      return 'bg-blue-400/25 px-2 py-1 text-sm text-status-blue uppercase font-normal text-center'
+      return `${baseClasses} bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-300/50`
     case EstimateStatus.EXPIRED:
     case 'EXPIRED':
-      return 'bg-red-300/25 px-2 py-1 text-sm text-status-red uppercase font-normal text-center'
+      return `${baseClasses} bg-red-50 text-red-700 ring-1 ring-inset ring-red-300/50`
     case EstimateStatus.ACCEPTED:
     case 'ACCEPTED':
-      return 'bg-green-400/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center'
+      return `${baseClasses} bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-300/50`
     case EstimateStatus.REJECTED:
     case 'REJECTED':
-      return 'bg-purple-300/25 px-2 py-1 text-sm text-status-purple uppercase font-normal text-center'
+      return `${baseClasses} bg-rose-50 text-rose-700 ring-1 ring-inset ring-rose-300/50`
     default:
-      return 'bg-surface-secondary0/25 px-2 py-1 text-sm text-heading uppercase font-normal text-center'
+      return `${baseClasses} bg-surface-secondary text-muted ring-1 ring-inset ring-line-default`
   }
 })
 </script>
diff --git a/resources/scripts-v2/components/base/InvoicePublicPage.vue b/resources/scripts-v2/components/base/InvoicePublicPage.vue
index 039da3a6..e40f6abb 100644
--- a/resources/scripts-v2/components/base/InvoicePublicPage.vue
+++ b/resources/scripts-v2/components/base/InvoicePublicPage.vue
@@ -2,6 +2,8 @@
 import { ref, computed } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { client } from '@v2/api/client'
+import InvoiceInformationCard from './InvoiceInformationCard.vue'
 import type { Currency } from '@v2/types/domain'
 import type { Company } from '@v2/types/domain'
 import type { Customer } from '@v2/types/domain'
@@ -23,12 +25,6 @@ interface InvoicePublicData {
   customer?: Pick<Customer, 'name'>
 }
 
-interface Props {
-  fetchInvoice: (hash: string) => Promise<InvoicePublicData>
-}
-
-const props = defineProps<Props>()
-
 const invoiceData = ref<InvoicePublicData | null>(null) as Ref<InvoicePublicData | null>
 const route = useRoute()
 const router = useRouter()
@@ -37,7 +33,8 @@ loadInvoice()
 
 async function loadInvoice(): Promise<void> {
   const hash = route.params.hash as string
-  invoiceData.value = await props.fetchInvoice(hash)
+  const { data } = await client.get(`/customer/invoices/${hash}`)
+  invoiceData.value = data.data
 }
 
 const shareableLink = computed<string>(() => {
@@ -60,13 +57,16 @@ const customerLogo = computed<string | false>(() => {
 const pageTitle: ComputedRef<string> = computed(() => invoiceData.value?.invoice_number ?? '')
 
 function payInvoice(): void {
-  router.push({
-    name: 'invoice.pay',
-    params: {
-      hash: route.params.hash as string,
-      company: invoiceData.value?.company?.slug ?? '',
-    },
-  })
+  const resolved = router.resolve({ name: 'invoice.pay' })
+  if (resolved.matched.length) {
+    router.push({
+      name: 'invoice.pay',
+      params: {
+        hash: route.params.hash as string,
+        company: invoiceData.value?.company?.slug ?? '',
+      },
+    })
+  }
 }
 </script>
 
diff --git a/resources/scripts-v2/components/base/InvoiceStatusBadge.vue b/resources/scripts-v2/components/base/InvoiceStatusBadge.vue
index fd2b44c7..256a5723 100644
--- a/resources/scripts-v2/components/base/InvoiceStatusBadge.vue
+++ b/resources/scripts-v2/components/base/InvoiceStatusBadge.vue
@@ -16,35 +16,37 @@ const props = withDefaults(defineProps<Props>(), {
   status: '',
 })
 
+const baseClasses = 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium'
+
 const badgeColorClasses = computed<string>(() => {
   switch (props.status) {
     case InvoiceStatus.DRAFT:
     case 'DRAFT':
-      return 'bg-yellow-300/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center'
+      return `${baseClasses} bg-gray-100 text-gray-700 ring-1 ring-inset ring-gray-300/50`
     case InvoiceStatus.SENT:
     case 'SENT':
-      return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center'
+      return `${baseClasses} bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-300/50`
     case InvoiceStatus.VIEWED:
     case 'VIEWED':
-      return 'bg-blue-400/25 px-2 py-1 text-sm text-status-blue uppercase font-normal text-center'
+      return `${baseClasses} bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-300/50`
     case InvoiceStatus.COMPLETED:
     case 'COMPLETED':
-      return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center'
+      return `${baseClasses} bg-green-50 text-green-700 ring-1 ring-inset ring-green-300/50`
     case 'DUE':
-      return 'bg-yellow-500/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center'
+      return `${baseClasses} bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-300/50`
     case 'OVERDUE':
-      return 'bg-red-300/50 px-2 py-1 text-sm text-status-red uppercase font-normal text-center'
+      return `${baseClasses} bg-red-50 text-red-700 ring-1 ring-inset ring-red-300/50`
     case InvoicePaidStatus.UNPAID:
     case 'UNPAID':
-      return 'bg-yellow-500/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center'
+      return `${baseClasses} bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-300/50`
     case InvoicePaidStatus.PARTIALLY_PAID:
     case 'PARTIALLY_PAID':
-      return 'bg-blue-400/25 px-2 py-1 text-sm text-status-blue uppercase font-normal text-center'
+      return `${baseClasses} bg-cyan-50 text-cyan-700 ring-1 ring-inset ring-cyan-300/50`
     case InvoicePaidStatus.PAID:
     case 'PAID':
-      return 'bg-green-500/40 px-2 py-1 text-sm text-status-green uppercase font-semibold text-center'
+      return `${baseClasses} bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-300/50`
     default:
-      return 'bg-surface-secondary0/25 px-2 py-1 text-sm text-heading uppercase font-normal text-center'
+      return `${baseClasses} bg-surface-secondary text-muted ring-1 ring-inset ring-line-default`
   }
 })
 </script>
diff --git a/resources/scripts-v2/components/base/PaidStatusBadge.vue b/resources/scripts-v2/components/base/PaidStatusBadge.vue
index 12cdf1f9..2be67e74 100644
--- a/resources/scripts-v2/components/base/PaidStatusBadge.vue
+++ b/resources/scripts-v2/components/base/PaidStatusBadge.vue
@@ -6,35 +6,35 @@ type PaidBadgeStatus = InvoicePaidStatus | 'OVERDUE' | string
 
 interface Props {
   status?: PaidBadgeStatus
-  defaultClass?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   status: '',
-  defaultClass: 'px-1 py-0.5 text-xs',
 })
 
+const baseClasses = 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium'
+
 const badgeColorClasses = computed<string>(() => {
   switch (props.status) {
     case InvoicePaidStatus.PAID:
     case 'PAID':
-      return 'bg-green-500/40 text-status-green uppercase font-semibold text-center'
+      return `${baseClasses} bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-300/50`
     case InvoicePaidStatus.UNPAID:
     case 'UNPAID':
-      return 'bg-yellow-500/25 text-status-yellow uppercase font-normal text-center'
+      return `${baseClasses} bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-300/50`
     case InvoicePaidStatus.PARTIALLY_PAID:
     case 'PARTIALLY_PAID':
-      return 'bg-blue-400/25 text-status-blue uppercase font-normal text-center'
+      return `${baseClasses} bg-cyan-50 text-cyan-700 ring-1 ring-inset ring-cyan-300/50`
     case 'OVERDUE':
-      return 'bg-red-300/50 px-2 py-1 text-sm text-status-red uppercase font-normal text-center'
+      return `${baseClasses} bg-red-50 text-red-700 ring-1 ring-inset ring-red-300/50`
     default:
-      return 'bg-surface-secondary0/25 text-heading uppercase font-normal text-center'
+      return `${baseClasses} bg-surface-secondary text-muted ring-1 ring-inset ring-line-default`
   }
 })
 </script>
 
 <template>
-  <span :class="[badgeColorClasses, defaultClass]">
+  <span :class="badgeColorClasses">
     <slot />
   </span>
 </template>
diff --git a/resources/scripts-v2/components/base/RecurringInvoiceStatusBadge.vue b/resources/scripts-v2/components/base/RecurringInvoiceStatusBadge.vue
index 0744591d..1e6b6b94 100644
--- a/resources/scripts-v2/components/base/RecurringInvoiceStatusBadge.vue
+++ b/resources/scripts-v2/components/base/RecurringInvoiceStatusBadge.vue
@@ -10,19 +10,21 @@ const props = withDefaults(defineProps<Props>(), {
   status: '',
 })
 
+const baseClasses = 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium'
+
 const badgeColorClasses = computed<string>(() => {
   switch (props.status) {
-    case RecurringInvoiceStatus.COMPLETED:
-    case 'COMPLETED':
-      return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center'
-    case RecurringInvoiceStatus.ON_HOLD:
-    case 'ON_HOLD':
-      return 'bg-yellow-500/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center'
     case RecurringInvoiceStatus.ACTIVE:
     case 'ACTIVE':
-      return 'bg-blue-400/25 px-2 py-1 text-sm text-status-blue uppercase font-normal text-center'
+      return `${baseClasses} bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-300/50`
+    case RecurringInvoiceStatus.ON_HOLD:
+    case 'ON_HOLD':
+      return `${baseClasses} bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-300/50`
+    case RecurringInvoiceStatus.COMPLETED:
+    case 'COMPLETED':
+      return `${baseClasses} bg-green-50 text-green-700 ring-1 ring-inset ring-green-300/50`
     default:
-      return 'bg-surface-secondary0/25 px-2 py-1 text-sm text-heading uppercase font-normal text-center'
+      return `${baseClasses} bg-surface-secondary text-muted ring-1 ring-inset ring-line-default`
   }
 })
 </script>
diff --git a/resources/scripts-v2/components/base/index.ts b/resources/scripts-v2/components/base/index.ts
index 6f1234ca..97218ce6 100644
--- a/resources/scripts-v2/components/base/index.ts
+++ b/resources/scripts-v2/components/base/index.ts
@@ -30,6 +30,7 @@ export { default as BaseListItem } from './BaseListItem.vue'
 export { default as BaseMoney } from './BaseMoney.vue'
 export { default as BaseModal } from './BaseModal.vue'
 export { default as BaseMultiselect } from './BaseMultiselect.vue'
+export { default as BasePdfPreview } from './BasePdfPreview.vue'
 export { default as BaseRadio } from './BaseRadio.vue'
 export { default as BaseRating } from './BaseRating.vue'
 export { default as BaseRecurringInvoiceStatusLabel } from './BaseRecurringInvoiceStatusLabel.vue'
@@ -39,6 +40,7 @@ export { default as BaseSelectInput } from './BaseSelectInput.vue'
 export { default as BaseSettingCard } from './BaseSettingCard.vue'
 export { default as BaseSpinner } from './BaseSpinner.vue'
 export { default as BaseSwitch } from './BaseSwitch.vue'
+export { default as BaseTab } from './BaseTab.vue'
 export { default as BaseTabGroup } from './BaseTabGroup.vue'
 export { default as BaseText } from './BaseText.vue'
 export { default as BaseTextarea } from './BaseTextarea.vue'
diff --git a/resources/scripts-v2/components/layout/FilterWrapper.vue b/resources/scripts-v2/components/layout/FilterWrapper.vue
index 6d565558..6a0a3ece 100644
--- a/resources/scripts-v2/components/layout/FilterWrapper.vue
+++ b/resources/scripts-v2/components/layout/FilterWrapper.vue
@@ -1,37 +1,41 @@
 <template>
   <transition
-    enter-active-class="transition duration-500 ease-in-out"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="transition ease-in-out"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
+    enter-active-class="transition duration-300 ease-out"
+    enter-from-class="opacity-0 -translate-y-2"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition duration-200 ease-in"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 -translate-y-2"
   >
-    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-surface-muted rounded">
+    <div
+      v-show="show"
+      class="relative z-10 p-5 md:p-6 bg-surface rounded-xl border border-line-default shadow-sm mb-4"
+    >
       <slot name="filter-header" />
 
-      <label
+      <button
         class="
-          absolute
-          text-sm
-          leading-snug
-          text-heading
-          cursor-pointer
-          hover:text-body
-          top-2.5
-          right-3.5
+          absolute top-4 right-4
+          flex items-center gap-1
+          text-xs font-medium
+          text-muted hover:text-heading
+          px-2 py-1
+          rounded-md
+          hover:bg-surface-secondary
+          transition-colors
         "
         @click="emit('clear')"
       >
+        <BaseIcon name="XMarkIcon" class="w-3.5 h-3.5" />
         {{ $t('general.clear_all') }}
-      </label>
+      </button>
 
       <div
         class="flex flex-col space-y-3"
         :class="
           rowOnXl
-            ? 'xl:flex-row xl:space-x-4 xl:space-y-0 xl:items-center'
-            : 'lg:flex-row lg:space-x-4 lg:space-y-0 lg:items-center'
+            ? 'xl:flex-row xl:space-x-4 xl:space-y-0 xl:items-end'
+            : 'lg:flex-row lg:space-x-4 lg:space-y-0 lg:items-end'
         "
       >
         <slot />
diff --git a/resources/scripts-v2/components/notifications/NotificationItem.vue b/resources/scripts-v2/components/notifications/NotificationItem.vue
index 94431e2d..aa989316 100644
--- a/resources/scripts-v2/components/notifications/NotificationItem.vue
+++ b/resources/scripts-v2/components/notifications/NotificationItem.vue
@@ -80,10 +80,10 @@
             >
               {{
                 notification.message
-                  ? notification.message
+                  ? $t(notification.message)
                   : success
-                  ? 'Successful'
-                  : 'Something went wrong'
+                  ? $t('general.successful')
+                  : $t('general.something_went_wrong')
               }}
             </p>
           </div>
diff --git a/resources/scripts-v2/components/table/DataTable.vue b/resources/scripts-v2/components/table/DataTable.vue
index 5c1537f2..3a7cbcad 100644
--- a/resources/scripts-v2/components/table/DataTable.vue
+++ b/resources/scripts-v2/components/table/DataTable.vue
@@ -6,8 +6,8 @@
           class="
             relative
             overflow-hidden
-            bg-surface/70 backdrop-blur-lg
-            border border-white/15
+            bg-surface
+            border border-line-default
             shadow-sm
             rounded-xl
           "
diff --git a/resources/scripts-v2/composables/use-company.ts b/resources/scripts-v2/composables/use-company.ts
index e2dce69f..7e0dd97d 100644
--- a/resources/scripts-v2/composables/use-company.ts
+++ b/resources/scripts-v2/composables/use-company.ts
@@ -47,9 +47,7 @@ const selectedCompany = ref<Company | null>(null)
 const companies = ref<Company[]>([])
 const selectedCompanySettings = ref<CompanySettings>({})
 const selectedCompanyCurrency = ref<CompanyCurrency | null>(null)
-const isAdminMode = ref<boolean>(
-  ls.get<string>(LS_KEYS.IS_ADMIN_MODE) === 'true'
-)
+const isAdminMode = ref<boolean>(ls.getBoolean(LS_KEYS.IS_ADMIN_MODE))
 
 /**
  * Composable for managing company selection and admin mode state.
@@ -104,7 +102,7 @@ export function useCompany(): UseCompanyReturn {
    */
   function enterAdminMode(): void {
     isAdminMode.value = true
-    ls.set(LS_KEYS.IS_ADMIN_MODE, 'true')
+    ls.set(LS_KEYS.IS_ADMIN_MODE, true)
     ls.remove(LS_KEYS.SELECTED_COMPANY)
     selectedCompany.value = null
   }
diff --git a/resources/scripts-v2/features/admin/components/settings/AdminBackupModal.vue b/resources/scripts-v2/features/admin/components/settings/AdminBackupModal.vue
new file mode 100644
index 00000000..7b8cb324
--- /dev/null
+++ b/resources/scripts-v2/features/admin/components/settings/AdminBackupModal.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import {
+  backupService,
+  type CreateBackupPayload,
+} from '@v2/api/services/backup.service'
+import { diskService, type Disk } from '@v2/api/services/disk.service'
+import {
+  getErrorTranslationKey,
+  handleApiError,
+} from '@v2/utils/error-handling'
+
+type BackupOption = CreateBackupPayload['option']
+
+interface DiskOption extends Disk {
+  display_name: string
+}
+
+interface BackupTypeOption {
+  id: BackupOption
+  label: string
+}
+
+interface BackupModalData {
+  disks?: DiskOption[]
+  selectedDiskId?: number | null
+}
+
+interface BackupForm {
+  option: BackupOption | ''
+  selectedDiskId: number | null
+}
+
+const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+
+const isSaving = ref(false)
+const isFetchingInitialData = ref(false)
+const disks = ref<DiskOption[]>([])
+
+const form = reactive<BackupForm>({
+  option: 'full',
+  selectedDiskId: null,
+})
+
+const backupTypeOptions: BackupTypeOption[] = [
+  {
+    id: 'full',
+    label: 'full',
+  },
+  {
+    id: 'only-db',
+    label: 'only-db',
+  },
+  {
+    id: 'only-files',
+    label: 'only-files',
+  },
+]
+
+const modalActive = computed<boolean>(() => {
+  return modalStore.active && modalStore.componentName === 'AdminBackupModal'
+})
+
+const rules = computed(() => ({
+  option: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  selectedDiskId: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, form)
+
+async function setInitialData(): Promise<void> {
+  resetForm()
+  isFetchingInitialData.value = true
+
+  try {
+    const modalData = isBackupModalData(modalStore.data) ? modalStore.data : null
+
+    if (modalData?.disks?.length) {
+      disks.value = modalData.disks
+      form.selectedDiskId =
+        modalData.selectedDiskId ??
+        modalData.disks.find((disk) => disk.set_as_default)?.id ??
+        modalData.disks[0]?.id ??
+        null
+
+      return
+    }
+
+    const response = await diskService.list({ limit: 'all' })
+
+    disks.value = response.data.map((disk) => ({
+      ...disk,
+      display_name: `${disk.name} - [${disk.driver}]`,
+    }))
+
+    const selectedDiskId =
+      modalStore.data &&
+      typeof modalStore.data === 'object' &&
+      'id' in (modalStore.data as Record<string, unknown>)
+        ? Number((modalStore.data as Record<string, unknown>).id)
+        : null
+
+    form.selectedDiskId =
+      disks.value.find((disk) => disk.id === selectedDiskId)?.id ??
+      disks.value.find((disk) => disk.set_as_default)?.id ??
+      disks.value[0]?.id ??
+      null
+  } catch (error: unknown) {
+    showApiError(error)
+  } finally {
+    isFetchingInitialData.value = false
+  }
+}
+
+async function createBackup(): Promise<void> {
+  v$.value.$touch()
+
+  if (v$.value.$invalid || !form.selectedDiskId) {
+    return
+  }
+
+  isSaving.value = true
+
+  try {
+    const response = await backupService.create({
+      option: form.option as BackupOption,
+      file_disk_id: form.selectedDiskId,
+    })
+
+    if (response.success) {
+      notificationStore.showNotification({
+        type: 'success',
+        message: t('settings.backup.created_message'),
+      })
+      modalStore.refreshData?.()
+      closeModal()
+    }
+  } catch (error: unknown) {
+    showApiError(error)
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function showApiError(error: unknown): void {
+  const normalizedError = handleApiError(error)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+
+function resetForm(): void {
+  form.option = 'full'
+  form.selectedDiskId = null
+  v$.value.$reset()
+}
+
+function closeModal(): void {
+  modalStore.closeModal()
+
+  setTimeout(() => {
+    resetForm()
+    disks.value = []
+  }, 300)
+}
+
+function isBackupModalData(value: unknown): value is BackupModalData {
+  return Boolean(value && typeof value === 'object')
+}
+</script>
+
+<template>
+  <BaseModal :show="modalActive" @close="closeModal" @open="setInitialData">
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalStore.title }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="w-6 h-6 text-muted cursor-pointer"
+          @click="closeModal"
+        />
+      </div>
+    </template>
+
+    <form @submit.prevent="createBackup">
+      <div class="p-4 md:p-6">
+        <BaseInputGrid layout="one-column">
+          <BaseInputGroup
+            :label="$t('settings.backup.select_backup_type')"
+            :error="v$.option.$error && v$.option.$errors[0]?.$message"
+            required
+          >
+            <BaseSelectInput
+              v-model="form.option"
+              :options="backupTypeOptions"
+              :placeholder="$t('settings.backup.select_backup_type')"
+              value-prop="id"
+              @update:model-value="v$.option.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('settings.disk.select_disk')"
+            :error="
+              v$.selectedDiskId.$error && v$.selectedDiskId.$errors[0]?.$message
+            "
+            required
+          >
+            <BaseMultiselect
+              v-model="form.selectedDiskId"
+              :options="disks"
+              :content-loading="isFetchingInitialData"
+              :can-deselect="false"
+              :invalid="v$.selectedDiskId.$error"
+              label="display_name"
+              track-by="id"
+              value-prop="id"
+              searchable
+              :placeholder="$t('settings.disk.select_disk')"
+              @update:model-value="v$.selectedDiskId.$touch()"
+            />
+          </BaseInputGroup>
+        </BaseInputGrid>
+      </div>
+
+      <div
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+      >
+        <BaseButton
+          type="button"
+          variant="primary-outline"
+          class="mr-3"
+          @click="closeModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+
+        <BaseButton
+          :loading="isSaving"
+          :disabled="isSaving"
+          variant="primary"
+          type="submit"
+        >
+          <template #left="slotProps">
+            <BaseIcon
+              v-if="!isSaving"
+              name="ArrowDownOnSquareIcon"
+              :class="slotProps.class"
+            />
+          </template>
+          {{ $t('general.create') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
diff --git a/resources/scripts-v2/features/admin/components/settings/AdminFileDiskModal.vue b/resources/scripts-v2/features/admin/components/settings/AdminFileDiskModal.vue
new file mode 100644
index 00000000..4a4f04af
--- /dev/null
+++ b/resources/scripts-v2/features/admin/components/settings/AdminFileDiskModal.vue
@@ -0,0 +1,565 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import {
+  diskService,
+  type CreateDiskPayload,
+  type Disk,
+  type DiskDriverValue,
+} from '@v2/api/services/disk.service'
+import {
+  getErrorTranslationKey,
+  handleApiError,
+} from '@v2/utils/error-handling'
+
+interface DiskField {
+  key: string
+  labelKey: string
+  placeholder?: string
+}
+
+interface DiskDriverOption {
+  name: string
+  value: DiskDriverValue
+}
+
+interface DiskForm {
+  name: string
+  driver: DiskDriverValue
+  set_as_default: boolean
+  credentials: Record<string, string>
+}
+
+const DRIVER_FIELDS: Record<DiskDriverValue, DiskField[]> = {
+  local: [
+    {
+      key: 'root',
+      labelKey: 'settings.disk.local_root',
+      placeholder: 'Ex. /user/root/',
+    },
+  ],
+  s3: [
+    {
+      key: 'root',
+      labelKey: 'settings.disk.aws_root',
+      placeholder: 'Ex. /user/root/',
+    },
+    {
+      key: 'key',
+      labelKey: 'settings.disk.aws_key',
+      placeholder: 'Ex. KEIS4S39SERSDS',
+    },
+    {
+      key: 'secret',
+      labelKey: 'settings.disk.aws_secret',
+      placeholder: 'Ex. ********',
+    },
+    {
+      key: 'region',
+      labelKey: 'settings.disk.aws_region',
+      placeholder: 'Ex. us-west',
+    },
+    {
+      key: 'bucket',
+      labelKey: 'settings.disk.aws_bucket',
+      placeholder: 'Ex. AppName',
+    },
+  ],
+  s3compat: [
+    {
+      key: 'endpoint',
+      labelKey: 'settings.disk.s3_endpoint',
+      placeholder: 'Ex. https://s3.example.com',
+    },
+    {
+      key: 'key',
+      labelKey: 'settings.disk.s3_key',
+      placeholder: 'Ex. KEIS4S39SERSDS',
+    },
+    {
+      key: 'secret',
+      labelKey: 'settings.disk.s3_secret',
+      placeholder: 'Ex. ********',
+    },
+    {
+      key: 'region',
+      labelKey: 'settings.disk.s3_region',
+      placeholder: 'Ex. us-west',
+    },
+    {
+      key: 'bucket',
+      labelKey: 'settings.disk.s3_bucket',
+      placeholder: 'Ex. AppName',
+    },
+    {
+      key: 'root',
+      labelKey: 'settings.disk.s3_root',
+      placeholder: 'Ex. /user/root/',
+    },
+  ],
+  doSpaces: [
+    {
+      key: 'key',
+      labelKey: 'settings.disk.do_spaces_key',
+      placeholder: 'Ex. KEIS4S39SERSDS',
+    },
+    {
+      key: 'secret',
+      labelKey: 'settings.disk.do_spaces_secret',
+      placeholder: 'Ex. ********',
+    },
+    {
+      key: 'region',
+      labelKey: 'settings.disk.do_spaces_region',
+      placeholder: 'Ex. nyc3',
+    },
+    {
+      key: 'bucket',
+      labelKey: 'settings.disk.do_spaces_bucket',
+      placeholder: 'Ex. AppName',
+    },
+    {
+      key: 'endpoint',
+      labelKey: 'settings.disk.do_spaces_endpoint',
+      placeholder: 'Ex. https://nyc3.digitaloceanspaces.com',
+    },
+    {
+      key: 'root',
+      labelKey: 'settings.disk.do_spaces_root',
+      placeholder: 'Ex. /user/root/',
+    },
+  ],
+  dropbox: [
+    {
+      key: 'token',
+      labelKey: 'settings.disk.dropbox_token',
+    },
+    {
+      key: 'key',
+      labelKey: 'settings.disk.dropbox_key',
+      placeholder: 'Ex. KEIS4S39SERSDS',
+    },
+    {
+      key: 'secret',
+      labelKey: 'settings.disk.dropbox_secret',
+      placeholder: 'Ex. ********',
+    },
+    {
+      key: 'app',
+      labelKey: 'settings.disk.dropbox_app',
+    },
+    {
+      key: 'root',
+      labelKey: 'settings.disk.dropbox_root',
+      placeholder: 'Ex. /user/root/',
+    },
+  ],
+}
+
+const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+
+const isSaving = ref(false)
+const isFetchingInitialData = ref(false)
+const driverOptions = ref<DiskDriverOption[]>([])
+const currentDisk = ref<Disk | null>(null)
+
+const form = reactive<DiskForm>({
+  name: '',
+  driver: 'local',
+  set_as_default: false,
+  credentials: {},
+})
+
+const modalActive = computed<boolean>(() => {
+  return modalStore.active && modalStore.componentName === 'AdminFileDiskModal'
+})
+
+const currentFields = computed<DiskField[]>(() => {
+  return DRIVER_FIELDS[form.driver] ?? []
+})
+
+const defaultSwitchDisabled = computed<boolean>(() => {
+  return Boolean(currentDisk.value?.set_as_default)
+})
+
+const rules = computed(() => {
+  const credentialRules = currentFields.value.reduce<
+    Record<string, { required: ReturnType<typeof helpers.withMessage> }>
+  >((ruleSet, field) => {
+    ruleSet[field.key] = {
+      required: helpers.withMessage(t('validation.required'), required),
+    }
+
+    return ruleSet
+  }, {})
+
+  return {
+    name: {
+      required: helpers.withMessage(t('validation.required'), required),
+    },
+    driver: {
+      required: helpers.withMessage(t('validation.required'), required),
+    },
+    credentials: credentialRules,
+  }
+})
+
+const v$ = useVuelidate(rules, form)
+
+async function setInitialData(): Promise<void> {
+  resetForm()
+  isFetchingInitialData.value = true
+
+  try {
+    const response = await diskService.getDrivers()
+    driverOptions.value = response.drivers
+
+    if (isDisk(modalStore.data)) {
+      currentDisk.value = modalStore.data
+      form.name = currentDisk.value.name
+      form.driver = currentDisk.value.driver
+      form.set_as_default = currentDisk.value.set_as_default
+      form.credentials = normalizeDiskCredentials(
+        currentDisk.value.credentials,
+        currentDisk.value.driver
+      )
+    } else {
+      currentDisk.value = null
+      form.driver = resolveInitialDriver(response.drivers, response.default)
+      form.credentials = await loadDriverCredentials(form.driver)
+    }
+  } catch (error: unknown) {
+    showApiError(error)
+  } finally {
+    isFetchingInitialData.value = false
+  }
+}
+
+async function handleDriverChange(value: DiskDriverValue): Promise<void> {
+  v$.value.driver.$touch()
+  form.driver = value
+
+  const existingName = form.name
+  const existingDefaultState = form.set_as_default
+
+  form.credentials = await loadDriverCredentials(value)
+  form.name = existingName
+  form.set_as_default = existingDefaultState
+}
+
+async function saveDisk(): Promise<void> {
+  v$.value.$touch()
+
+  if (v$.value.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+
+  try {
+    const payload: CreateDiskPayload = {
+      name: form.name.trim(),
+      driver: form.driver,
+      credentials: { ...form.credentials },
+      set_as_default: form.set_as_default,
+    }
+
+    if (currentDisk.value) {
+      await diskService.update(currentDisk.value.id, payload)
+      notificationStore.showNotification({
+        type: 'success',
+        message: t('settings.disk.success_update'),
+      })
+    } else {
+      await diskService.create(payload)
+      notificationStore.showNotification({
+        type: 'success',
+        message: t('settings.disk.success_create'),
+      })
+    }
+
+    modalStore.refreshData?.()
+    closeModal()
+  } catch (error: unknown) {
+    showApiError(error)
+  } finally {
+    isSaving.value = false
+  }
+}
+
+async function loadDriverCredentials(
+  driver: DiskDriverValue
+): Promise<Record<string, string>> {
+  if (currentDisk.value && currentDisk.value.driver === driver) {
+    return normalizeDiskCredentials(currentDisk.value.credentials, driver)
+  }
+
+  const defaults = await diskService.get(driver)
+  return normalizeDiskCredentials(defaults, driver)
+}
+
+function resolveInitialDriver(
+  drivers: DiskDriverOption[],
+  defaultDriver: string
+): DiskDriverValue {
+  const matchedDriver = drivers.find((driver) => driver.value === defaultDriver)
+  return matchedDriver?.value ?? drivers[0]?.value ?? 'local'
+}
+
+function normalizeDiskCredentials(
+  credentials: Disk['credentials'] | Record<string, string>,
+  driver: DiskDriverValue
+): Record<string, string> {
+  const emptyCredentials = createEmptyCredentials(driver)
+
+  if (!credentials) {
+    return emptyCredentials
+  }
+
+  if (typeof credentials === 'string') {
+    try {
+      const parsedCredentials = JSON.parse(credentials) as unknown
+
+      if (typeof parsedCredentials === 'string') {
+        return {
+          ...emptyCredentials,
+          root: parsedCredentials,
+        }
+      }
+
+      if (parsedCredentials && typeof parsedCredentials === 'object') {
+        return {
+          ...emptyCredentials,
+          ...stringifyRecord(parsedCredentials as Record<string, unknown>),
+        }
+      }
+    } catch {
+      return {
+        ...emptyCredentials,
+        root: credentials,
+      }
+    }
+  }
+
+  return {
+    ...emptyCredentials,
+    ...stringifyRecord(credentials as Record<string, unknown>),
+  }
+}
+
+function createEmptyCredentials(driver: DiskDriverValue): Record<string, string> {
+  return currentFieldsFor(driver).reduce<Record<string, string>>(
+    (credentialSet, field) => {
+      credentialSet[field.key] = ''
+      return credentialSet
+    },
+    {}
+  )
+}
+
+function currentFieldsFor(driver: DiskDriverValue): DiskField[] {
+  return DRIVER_FIELDS[driver] ?? []
+}
+
+function stringifyRecord(
+  value: Record<string, unknown>
+): Record<string, string> {
+  return Object.entries(value).reduce<Record<string, string>>(
+    (record, [key, entry]) => {
+      record[key] = entry == null ? '' : String(entry)
+      return record
+    },
+    {}
+  )
+}
+
+function touchCredential(key: string): void {
+  const credentialField = (
+    v$.value.credentials as Record<
+      string,
+      { $touch: () => void }
+    >
+  )[key]
+
+  credentialField?.$touch()
+}
+
+function credentialError(key: string): string {
+  const credentialField = (
+    v$.value.credentials as Record<
+      string,
+      { $error: boolean; $errors: Array<{ $message: string }> }
+    >
+  )[key]
+
+  if (!credentialField?.$error) {
+    return ''
+  }
+
+  return credentialField.$errors[0]?.$message ?? ''
+}
+
+function isCredentialInvalid(key: string): boolean {
+  const credentialField = (
+    v$.value.credentials as Record<string, { $error: boolean }>
+  )[key]
+
+  return Boolean(credentialField?.$error)
+}
+
+function showApiError(error: unknown): void {
+  const normalizedError = handleApiError(error)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+
+function resetForm(): void {
+  form.name = ''
+  form.driver = 'local'
+  form.set_as_default = false
+  form.credentials = {}
+  currentDisk.value = null
+  v$.value.$reset()
+}
+
+function closeModal(): void {
+  modalStore.closeModal()
+
+  setTimeout(() => {
+    resetForm()
+    driverOptions.value = []
+  }, 300)
+}
+
+function isDisk(value: unknown): value is Disk {
+  return Boolean(
+    value &&
+      typeof value === 'object' &&
+      'id' in value &&
+      'driver' in value &&
+      'name' in value
+  )
+}
+</script>
+
+<template>
+  <BaseModal :show="modalActive" @close="closeModal" @open="setInitialData">
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalStore.title }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="w-6 h-6 text-muted cursor-pointer"
+          @click="closeModal"
+        />
+      </div>
+    </template>
+
+    <form @submit.prevent="saveDisk">
+      <div class="p-4 md:p-6">
+        <BaseInputGrid>
+          <BaseInputGroup
+            :label="$t('settings.disk.name')"
+            :error="v$.name.$error && v$.name.$errors[0]?.$message"
+            required
+          >
+            <BaseInput
+              v-model.trim="form.name"
+              :invalid="v$.name.$error"
+              @input="v$.name.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('settings.disk.driver')"
+            :error="v$.driver.$error && v$.driver.$errors[0]?.$message"
+            required
+          >
+            <BaseMultiselect
+              v-model="form.driver"
+              :options="driverOptions"
+              :content-loading="isFetchingInitialData"
+              :can-deselect="false"
+              :invalid="v$.driver.$error"
+              label="name"
+              track-by="value"
+              value-prop="value"
+              searchable
+              @update:model-value="handleDriverChange"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            v-for="field in currentFields"
+            :key="field.key"
+            :label="$t(field.labelKey)"
+            :error="credentialError(field.key)"
+            required
+          >
+            <BaseInput
+              v-model.trim="form.credentials[field.key]"
+              :invalid="isCredentialInvalid(field.key)"
+              :placeholder="field.placeholder"
+              @input="touchCredential(field.key)"
+            />
+          </BaseInputGroup>
+        </BaseInputGrid>
+
+        <div class="mt-6 flex items-center">
+          <div class="relative flex items-center w-12">
+            <BaseSwitch
+              v-model="form.set_as_default"
+              :disabled="defaultSwitchDisabled"
+              class="flex"
+            />
+          </div>
+
+          <div class="ml-4">
+            <p class="mb-1 text-base leading-snug text-heading">
+              {{ $t('settings.disk.is_default') }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+      >
+        <BaseButton
+          type="button"
+          variant="primary-outline"
+          class="mr-3"
+          @click="closeModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+
+        <BaseButton
+          :loading="isSaving"
+          :disabled="isSaving"
+          variant="primary"
+          type="submit"
+        >
+          <template #left="slotProps">
+            <BaseIcon
+              v-if="!isSaving"
+              name="ArrowDownOnSquareIcon"
+              :class="slotProps.class"
+            />
+          </template>
+          {{ currentDisk ? $t('general.update') : $t('general.save') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
diff --git a/resources/scripts-v2/features/admin/components/settings/AdminPdfDomDriver.vue b/resources/scripts-v2/features/admin/components/settings/AdminPdfDomDriver.vue
new file mode 100644
index 00000000..d7c8d4df
--- /dev/null
+++ b/resources/scripts-v2/features/admin/components/settings/AdminPdfDomDriver.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import type { PdfDriver } from '@v2/api/services/pdf.service'
+
+interface DomPdfForm {
+  pdf_driver: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    configData?: Record<string, unknown>
+    isSaving?: boolean
+    isFetchingInitialData?: boolean
+    drivers?: PdfDriver[]
+  }>(),
+  {
+    configData: () => ({}),
+    isSaving: false,
+    isFetchingInitialData: false,
+    drivers: () => [],
+  }
+)
+
+const emit = defineEmits<{
+  'submit-data': [config: DomPdfForm]
+  'on-change-driver': [driver: string]
+}>()
+
+const { t } = useI18n()
+
+const form = reactive<DomPdfForm>({
+  pdf_driver: 'dompdf',
+})
+
+const rules = computed(() => ({
+  pdf_driver: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, form)
+
+onMounted(() => {
+  if (typeof props.configData.pdf_driver === 'string') {
+    form.pdf_driver = props.configData.pdf_driver
+  }
+})
+
+function onChangeDriver(): void {
+  v$.value.pdf_driver.$touch()
+  emit('on-change-driver', form.pdf_driver)
+}
+
+function saveConfig(): void {
+  v$.value.$touch()
+  if (v$.value.$invalid) {
+    return
+  }
+
+  emit('submit-data', { ...form })
+}
+</script>
+
+<template>
+  <form @submit.prevent="saveConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.pdf.driver')"
+        :error="v$.pdf_driver.$error && v$.pdf_driver.$errors[0]?.$message"
+        required
+      >
+        <BaseMultiselect
+          v-model="form.pdf_driver"
+          :content-loading="isFetchingInitialData"
+          :options="drivers"
+          :can-deselect="false"
+          :invalid="v$.pdf_driver.$error"
+          @update:model-value="onChangeDriver"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+
+    <div class="flex my-10">
+      <BaseButton
+        :disabled="isSaving"
+        :content-loading="isFetchingInitialData"
+        :loading="isSaving"
+        type="submit"
+        variant="primary"
+      >
+        <template #left="slotProps">
+          <BaseIcon
+            v-if="!isSaving"
+            name="ArrowDownOnSquareIcon"
+            :class="slotProps.class"
+          />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+    </div>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/admin/components/settings/AdminPdfGotenbergDriver.vue b/resources/scripts-v2/features/admin/components/settings/AdminPdfGotenbergDriver.vue
new file mode 100644
index 00000000..619ed15b
--- /dev/null
+++ b/resources/scripts-v2/features/admin/components/settings/AdminPdfGotenbergDriver.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import type { PdfDriver } from '@v2/api/services/pdf.service'
+
+interface GotenbergForm {
+  pdf_driver: string
+  gotenberg_host: string
+  gotenberg_papersize: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    configData?: Record<string, unknown>
+    isSaving?: boolean
+    isFetchingInitialData?: boolean
+    drivers?: PdfDriver[]
+  }>(),
+  {
+    configData: () => ({}),
+    isSaving: false,
+    isFetchingInitialData: false,
+    drivers: () => [],
+  }
+)
+
+const emit = defineEmits<{
+  'submit-data': [config: GotenbergForm]
+  'on-change-driver': [driver: string]
+}>()
+
+const { t } = useI18n()
+
+const form = reactive<GotenbergForm>({
+  pdf_driver: 'gotenberg',
+  gotenberg_host: '',
+  gotenberg_papersize: '210mm 297mm',
+})
+
+function isValidServiceUrl(value: string): boolean {
+  if (!helpers.req(value)) {
+    return true
+  }
+
+  try {
+    const parsedUrl = new URL(value)
+
+    return (
+      (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') &&
+      parsedUrl.hostname.length > 0
+    )
+  } catch {
+    return false
+  }
+}
+
+const rules = computed(() => ({
+  pdf_driver: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  gotenberg_host: {
+    required: helpers.withMessage(t('validation.required'), required),
+    validServiceUrl: helpers.withMessage(
+      t('validation.invalid_url'),
+      isValidServiceUrl
+    ),
+  },
+  gotenberg_papersize: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, form)
+
+onMounted(() => {
+  if (typeof props.configData.pdf_driver === 'string') {
+    form.pdf_driver = props.configData.pdf_driver
+  }
+
+  if (typeof props.configData.gotenberg_host === 'string') {
+    form.gotenberg_host = props.configData.gotenberg_host
+  }
+
+  if (typeof props.configData.gotenberg_papersize === 'string') {
+    form.gotenberg_papersize = props.configData.gotenberg_papersize
+  }
+})
+
+function onChangeDriver(): void {
+  v$.value.pdf_driver.$touch()
+  emit('on-change-driver', form.pdf_driver)
+}
+
+function saveConfig(): void {
+  v$.value.$touch()
+  if (v$.value.$invalid) {
+    return
+  }
+
+  emit('submit-data', { ...form })
+}
+</script>
+
+<template>
+  <form @submit.prevent="saveConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.pdf.driver')"
+        :error="v$.pdf_driver.$error && v$.pdf_driver.$errors[0]?.$message"
+        required
+      >
+        <BaseMultiselect
+          v-model="form.pdf_driver"
+          :content-loading="isFetchingInitialData"
+          :options="drivers"
+          :can-deselect="false"
+          :invalid="v$.pdf_driver.$error"
+          @update:model-value="onChangeDriver"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.pdf.gotenberg_host')"
+        :error="
+          v$.gotenberg_host.$error && v$.gotenberg_host.$errors[0]?.$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="form.gotenberg_host"
+          :content-loading="isFetchingInitialData"
+          :invalid="v$.gotenberg_host.$error"
+          type="text"
+          name="gotenberg_host"
+          @input="v$.gotenberg_host.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.pdf.papersize')"
+        :help-text="$t('settings.pdf.papersize_hint')"
+        :error="
+          v$.gotenberg_papersize.$error &&
+          v$.gotenberg_papersize.$errors[0]?.$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="form.gotenberg_papersize"
+          :content-loading="isFetchingInitialData"
+          :invalid="v$.gotenberg_papersize.$error"
+          type="text"
+          name="gotenberg_papersize"
+          @input="v$.gotenberg_papersize.$touch()"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+
+    <div class="flex my-10">
+      <BaseButton
+        :disabled="isSaving"
+        :content-loading="isFetchingInitialData"
+        :loading="isSaving"
+        type="submit"
+        variant="primary"
+      >
+        <template #left="slotProps">
+          <BaseIcon
+            v-if="!isSaving"
+            name="ArrowDownOnSquareIcon"
+            :class="slotProps.class"
+          />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+    </div>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/admin/routes.ts b/resources/scripts-v2/features/admin/routes.ts
index 1531f32e..00773de3 100644
--- a/resources/scripts-v2/features/admin/routes.ts
+++ b/resources/scripts-v2/features/admin/routes.ts
@@ -7,6 +7,11 @@ const AdminCompanyEditView = () => import('./views/AdminCompanyEditView.vue')
 const AdminUsersView = () => import('./views/AdminUsersView.vue')
 const AdminUserEditView = () => import('./views/AdminUserEditView.vue')
 const AdminSettingsView = () => import('./views/AdminSettingsView.vue')
+const AdminMailConfigView = () => import('./views/settings/AdminMailConfigView.vue')
+const AdminPdfGenerationView = () => import('./views/settings/AdminPdfGenerationView.vue')
+const AdminBackupView = () => import('./views/settings/AdminBackupView.vue')
+const AdminFileDiskView = () => import('./views/settings/AdminFileDiskView.vue')
+const AdminUpdateAppView = () => import('./views/settings/AdminUpdateAppView.vue')
 
 export const adminRoutes: RouteRecordRaw[] = [
   {
@@ -15,6 +20,7 @@ export const adminRoutes: RouteRecordRaw[] = [
     meta: {
       requiresAuth: true,
       isSuperAdmin: true,
+      usesAdminBootstrap: true,
     },
     children: [
       {
@@ -65,14 +71,17 @@ export const adminRoutes: RouteRecordRaw[] = [
           isSuperAdmin: true,
         },
         children: [
+          {
+            path: '',
+            redirect: 'mail-configuration',
+          },
           {
             path: 'mail-configuration',
             name: 'admin.settings.mail',
             meta: {
               isSuperAdmin: true,
             },
-            // Loaded by settings sub-routes
-            component: { template: '<router-view />' },
+            component: AdminMailConfigView,
           },
           {
             path: 'pdf-generation',
@@ -80,7 +89,7 @@ export const adminRoutes: RouteRecordRaw[] = [
             meta: {
               isSuperAdmin: true,
             },
-            component: { template: '<router-view />' },
+            component: AdminPdfGenerationView,
           },
           {
             path: 'backup',
@@ -88,7 +97,7 @@ export const adminRoutes: RouteRecordRaw[] = [
             meta: {
               isSuperAdmin: true,
             },
-            component: { template: '<router-view />' },
+            component: AdminBackupView,
           },
           {
             path: 'file-disk',
@@ -96,7 +105,7 @@ export const adminRoutes: RouteRecordRaw[] = [
             meta: {
               isSuperAdmin: true,
             },
-            component: { template: '<router-view />' },
+            component: AdminFileDiskView,
           },
           {
             path: 'update-app',
@@ -104,7 +113,7 @@ export const adminRoutes: RouteRecordRaw[] = [
             meta: {
               isSuperAdmin: true,
             },
-            component: { template: '<router-view />' },
+            component: AdminUpdateAppView,
           },
         ],
       },
diff --git a/resources/scripts-v2/features/admin/views/settings/AdminBackupView.vue b/resources/scripts-v2/features/admin/views/settings/AdminBackupView.vue
new file mode 100644
index 00000000..b17b1682
--- /dev/null
+++ b/resources/scripts-v2/features/admin/views/settings/AdminBackupView.vue
@@ -0,0 +1,328 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useDialogStore } from '@v2/stores/dialog.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { backupService, type Backup } from '@v2/api/services/backup.service'
+import { diskService, type Disk } from '@v2/api/services/disk.service'
+import {
+  getErrorTranslationKey,
+  handleApiError,
+} from '@v2/utils/error-handling'
+import AdminBackupModal from '@v2/features/admin/components/settings/AdminBackupModal.vue'
+
+interface TableColumn {
+  key: string
+  label?: string
+  thClass?: string
+  tdClass?: string
+  sortable?: boolean
+}
+
+interface DiskOption extends Disk {
+  display_name: string
+}
+
+interface FetchParams {
+  page: number
+  filter: Record<string, unknown>
+  sort: { fieldName: string; order: string }
+}
+
+interface FetchResult {
+  data: Backup[]
+  pagination: {
+    totalPages: number
+    currentPage: number
+    totalCount: number
+    limit: number
+  }
+}
+
+const modalStore = useModalStore()
+const dialogStore = useDialogStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+
+const table = ref<{ refresh: () => void } | null>(null)
+const disks = ref<DiskOption[]>([])
+const selectedDisk = ref<DiskOption | null>(null)
+const isFetchingInitialData = ref(false)
+const backupError = ref('')
+
+const backupColumns = computed<TableColumn[]>(() => [
+  {
+    key: 'path',
+    label: t('settings.backup.path'),
+    thClass: 'extra',
+    tdClass: 'font-medium text-heading',
+  },
+  {
+    key: 'created_at',
+    label: t('settings.backup.created_at'),
+    tdClass: 'font-medium text-heading',
+  },
+  {
+    key: 'size',
+    label: t('settings.backup.size'),
+    tdClass: 'font-medium text-heading',
+  },
+  {
+    key: 'actions',
+    label: '',
+    tdClass: 'text-right text-sm font-medium',
+    sortable: false,
+  },
+])
+
+watch(
+  selectedDisk,
+  (newDisk, oldDisk) => {
+    if (newDisk?.id && oldDisk?.id && newDisk.id !== oldDisk.id) {
+      refreshTable()
+    }
+  }
+)
+
+loadDisks()
+
+async function loadDisks(): Promise<void> {
+  isFetchingInitialData.value = true
+
+  try {
+    const response = await diskService.list({ limit: 'all' })
+
+    disks.value = response.data.map((disk) => ({
+      ...disk,
+      display_name: `${disk.name} - [${disk.driver}]`,
+    }))
+
+    selectedDisk.value =
+      disks.value.find((disk) => disk.set_as_default) ?? disks.value[0] ?? null
+  } catch (error: unknown) {
+    showApiError(error)
+  } finally {
+    isFetchingInitialData.value = false
+  }
+}
+
+async function fetchData({ page }: FetchParams): Promise<FetchResult> {
+  if (!selectedDisk.value) {
+    return emptyResult(page)
+  }
+
+  backupError.value = ''
+
+  try {
+    const response = await backupService.list({
+      disk: selectedDisk.value.driver,
+      file_disk_id: selectedDisk.value.id,
+    })
+
+    if (response.error) {
+      backupError.value = t('settings.backup.invalid_disk_credentials')
+
+      return emptyResult(page)
+    }
+
+    return {
+      data: response.backups,
+      pagination: {
+        totalPages: 1,
+        currentPage: 1,
+        totalCount: response.backups.length,
+        limit: response.backups.length || 1,
+      },
+    }
+  } catch (error: unknown) {
+    showApiError(error)
+    return emptyResult(page)
+  }
+}
+
+async function removeBackup(backup: Backup): Promise<void> {
+  if (!selectedDisk.value) {
+    return
+  }
+
+  const confirmed = await dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('settings.backup.backup_confirm_delete'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  })
+
+  if (!confirmed) {
+    return
+  }
+
+  try {
+    const response = await backupService.delete({
+      disk: selectedDisk.value.driver,
+      file_disk_id: selectedDisk.value.id,
+      path: backup.path,
+    })
+
+    if (response.success) {
+      notificationStore.showNotification({
+        type: 'success',
+        message: t('settings.backup.deleted_message'),
+      })
+      refreshTable()
+    }
+  } catch (error: unknown) {
+    showApiError(error)
+  }
+}
+
+async function downloadBackup(backup: Backup): Promise<void> {
+  if (!selectedDisk.value) {
+    return
+  }
+
+  isFetchingInitialData.value = true
+  let objectUrl = ''
+
+  try {
+    const blob = await backupService.download({
+      disk: selectedDisk.value.driver,
+      file_disk_id: selectedDisk.value.id,
+      path: backup.path,
+    })
+
+    objectUrl = window.URL.createObjectURL(blob)
+
+    const downloadLink = document.createElement('a')
+    downloadLink.href = objectUrl
+    downloadLink.setAttribute(
+      'download',
+      backup.path.split('/').pop() ?? 'backup.zip'
+    )
+    document.body.appendChild(downloadLink)
+    downloadLink.click()
+    document.body.removeChild(downloadLink)
+  } catch (error: unknown) {
+    showApiError(error)
+  } finally {
+    if (objectUrl) {
+      window.URL.revokeObjectURL(objectUrl)
+    }
+    isFetchingInitialData.value = false
+  }
+}
+
+function openCreateBackupModal(): void {
+  modalStore.openModal({
+    title: t('settings.backup.create_backup'),
+    componentName: 'AdminBackupModal',
+    size: 'sm',
+    data: {
+      disks: disks.value,
+      selectedDiskId: selectedDisk.value?.id ?? null,
+    },
+    refreshData: table.value?.refresh,
+  })
+}
+
+function refreshTable(): void {
+  table.value?.refresh()
+}
+
+function emptyResult(page: number): FetchResult {
+  return {
+    data: [],
+    pagination: {
+      totalPages: 1,
+      currentPage: page,
+      totalCount: 0,
+      limit: 1,
+    },
+  }
+}
+
+function showApiError(error: unknown): void {
+  const normalizedError = handleApiError(error)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+</script>
+
+<template>
+  <AdminBackupModal />
+
+  <BaseSettingCard
+    :title="$t('settings.backup.title', 1)"
+    :description="$t('settings.backup.description')"
+  >
+    <template #action>
+      <BaseButton variant="primary-outline" @click="openCreateBackupModal">
+        <template #left="slotProps">
+          <BaseIcon :class="slotProps.class" name="PlusIcon" />
+        </template>
+        {{ $t('settings.backup.new_backup') }}
+      </BaseButton>
+    </template>
+
+    <div class="grid my-14 md:grid-cols-3">
+      <BaseInputGroup
+        :label="$t('settings.disk.select_disk')"
+        :content-loading="isFetchingInitialData"
+      >
+        <BaseMultiselect
+          v-model="selectedDisk"
+          :content-loading="isFetchingInitialData"
+          :options="disks"
+          track-by="id"
+          value-prop="id"
+          label="display_name"
+          :placeholder="$t('settings.disk.select_disk')"
+          object
+          searchable
+          class="w-full"
+        />
+      </BaseInputGroup>
+    </div>
+
+    <BaseErrorAlert
+      v-if="backupError"
+      class="mt-6"
+      :errors="[backupError]"
+    />
+
+    <BaseTable
+      ref="table"
+      class="mt-10"
+      :show-filter="false"
+      :data="fetchData"
+      :columns="backupColumns"
+    >
+      <template #cell-actions="{ row }">
+        <BaseDropdown>
+          <template #activator>
+            <div class="inline-block">
+              <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
+            </div>
+          </template>
+
+          <BaseDropdownItem @click="downloadBackup(row.data)">
+            <BaseIcon name="CloudArrowDownIcon" class="mr-3 text-body" />
+            {{ $t('general.download') }}
+          </BaseDropdownItem>
+
+          <BaseDropdownItem @click="removeBackup(row.data)">
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
+            {{ $t('general.delete') }}
+          </BaseDropdownItem>
+        </BaseDropdown>
+      </template>
+    </BaseTable>
+  </BaseSettingCard>
+</template>
diff --git a/resources/scripts-v2/features/admin/views/settings/AdminFileDiskView.vue b/resources/scripts-v2/features/admin/views/settings/AdminFileDiskView.vue
new file mode 100644
index 00000000..f140e4a6
--- /dev/null
+++ b/resources/scripts-v2/features/admin/views/settings/AdminFileDiskView.vue
@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useDialogStore } from '@v2/stores/dialog.store'
+import { useGlobalStore } from '@v2/stores/global.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { diskService, type Disk } from '@v2/api/services/disk.service'
+import {
+  getErrorTranslationKey,
+  handleApiError,
+} from '@v2/utils/error-handling'
+import AdminFileDiskModal from '@v2/features/admin/components/settings/AdminFileDiskModal.vue'
+
+interface TableColumn {
+  key: string
+  label?: string
+  thClass?: string
+  tdClass?: string
+  sortable?: boolean
+}
+
+interface FetchParams {
+  page: number
+  filter: Record<string, unknown>
+  sort: { fieldName: string; order: string }
+}
+
+interface FetchResult {
+  data: Disk[]
+  pagination: {
+    totalPages: number
+    currentPage: number
+    totalCount: number
+    limit: number
+  }
+}
+
+const modalStore = useModalStore()
+const dialogStore = useDialogStore()
+const globalStore = useGlobalStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+
+const table = ref<{ refresh: () => void } | null>(null)
+const savePdfToDisk = ref(
+  (globalStore.globalSettings?.save_pdf_to_disk ?? 'NO') === 'YES'
+)
+
+const fileDiskColumns = computed<TableColumn[]>(() => [
+  {
+    key: 'name',
+    label: t('settings.disk.disk_name'),
+    thClass: 'extra',
+    tdClass: 'font-medium text-heading',
+  },
+  {
+    key: 'driver',
+    label: t('settings.disk.filesystem_driver'),
+    thClass: 'extra',
+    tdClass: 'font-medium text-heading',
+  },
+  {
+    key: 'type',
+    label: t('settings.disk.disk_type'),
+    thClass: 'extra',
+    tdClass: 'font-medium text-heading',
+  },
+  {
+    key: 'set_as_default',
+    label: t('settings.disk.is_default'),
+    thClass: 'extra',
+    tdClass: 'font-medium text-heading',
+  },
+  {
+    key: 'actions',
+    label: '',
+    tdClass: 'text-right text-sm font-medium',
+    sortable: false,
+  },
+])
+
+const savePdfToDiskField = computed<boolean>({
+  get: () => savePdfToDisk.value,
+  set: async (enabled) => {
+    savePdfToDisk.value = enabled
+
+    await globalStore.updateGlobalSettings({
+      data: {
+        settings: {
+          save_pdf_to_disk: enabled ? 'YES' : 'NO',
+        },
+      },
+      message: t('general.setting_updated'),
+    })
+  },
+})
+
+async function fetchData({ page, sort }: FetchParams): Promise<FetchResult> {
+  const response = await diskService.list({
+    orderByField: sort.fieldName || 'created_at',
+    orderBy: sort.order || 'desc',
+    page,
+  })
+
+  return {
+    data: response.data,
+    pagination: {
+      totalPages: response.meta.last_page,
+      currentPage: page,
+      totalCount: response.meta.total,
+      limit: Number(response.meta.per_page) || 5,
+    },
+  }
+}
+
+async function setDefaultDisk(id: number): Promise<void> {
+  const confirmed = await dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('settings.disk.set_default_disk_confirm'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  })
+
+  if (!confirmed) {
+    return
+  }
+
+  try {
+    await diskService.update(id, { set_as_default: true })
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: t('settings.disk.success_set_default_disk'),
+    })
+
+    refreshTable()
+  } catch (error: unknown) {
+    showApiError(error)
+  }
+}
+
+async function removeDisk(id: number): Promise<void> {
+  const confirmed = await dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('settings.disk.confirm_delete'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  })
+
+  if (!confirmed) {
+    return
+  }
+
+  try {
+    const response = await diskService.delete(id)
+
+    if (response.success) {
+      notificationStore.showNotification({
+        type: 'success',
+        message: t('settings.disk.deleted_message'),
+      })
+      refreshTable()
+    }
+  } catch (error: unknown) {
+    showApiError(error)
+  }
+}
+
+function openCreateDiskModal(): void {
+  modalStore.openModal({
+    title: t('settings.disk.new_disk'),
+    componentName: 'AdminFileDiskModal',
+    size: 'lg',
+    refreshData: table.value?.refresh,
+  })
+}
+
+function openEditDiskModal(disk: Disk): void {
+  modalStore.openModal({
+    title: t('settings.disk.edit_file_disk'),
+    componentName: 'AdminFileDiskModal',
+    id: disk.id,
+    data: disk,
+    size: 'lg',
+    refreshData: table.value?.refresh,
+  })
+}
+
+function canShowActions(disk: Disk): boolean {
+  return !disk.set_as_default || disk.type !== 'SYSTEM'
+}
+
+function refreshTable(): void {
+  table.value?.refresh()
+}
+
+function showApiError(error: unknown): void {
+  const normalizedError = handleApiError(error)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+</script>
+
+<template>
+  <AdminFileDiskModal />
+
+  <BaseSettingCard
+    :title="$t('settings.disk.title', 1)"
+    :description="$t('settings.disk.description')"
+  >
+    <template #action>
+      <BaseButton variant="primary-outline" @click="openCreateDiskModal">
+        <template #left="slotProps">
+          <BaseIcon :class="slotProps.class" name="PlusIcon" />
+        </template>
+        {{ $t('settings.disk.new_disk') }}
+      </BaseButton>
+    </template>
+
+    <BaseTable
+      ref="table"
+      class="mt-16"
+      :data="fetchData"
+      :columns="fileDiskColumns"
+    >
+      <template #cell-set_as_default="{ row }">
+        <span
+          :class="
+            row.data.set_as_default
+              ? 'bg-success text-status-green'
+              : 'bg-surface-muted text-muted'
+          "
+          class="inline-flex rounded-full px-2 py-1 text-xs font-medium uppercase"
+        >
+          {{
+            row.data.set_as_default ? $t('general.yes') : $t('general.no')
+          }}
+        </span>
+      </template>
+
+      <template #cell-actions="{ row }">
+        <BaseDropdown v-if="canShowActions(row.data)">
+          <template #activator>
+            <div class="inline-block">
+              <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
+            </div>
+          </template>
+
+          <BaseDropdownItem
+            v-if="!row.data.set_as_default"
+            @click="setDefaultDisk(row.data.id)"
+          >
+            <BaseIcon class="mr-3 text-body" name="CheckCircleIcon" />
+            {{ $t('settings.disk.set_default_disk') }}
+          </BaseDropdownItem>
+
+          <BaseDropdownItem
+            v-if="row.data.type !== 'SYSTEM'"
+            @click="openEditDiskModal(row.data)"
+          >
+            <BaseIcon name="PencilIcon" class="mr-3 text-body" />
+            {{ $t('general.edit') }}
+          </BaseDropdownItem>
+
+          <BaseDropdownItem
+            v-if="row.data.type !== 'SYSTEM' && !row.data.set_as_default"
+            @click="removeDisk(row.data.id)"
+          >
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
+            {{ $t('general.delete') }}
+          </BaseDropdownItem>
+        </BaseDropdown>
+      </template>
+    </BaseTable>
+
+    <BaseDivider class="mt-8 mb-2" />
+
+    <BaseSwitchSection
+      v-model="savePdfToDiskField"
+      :title="$t('settings.disk.save_pdf_to_disk')"
+      :description="$t('settings.disk.disk_setting_description')"
+    />
+  </BaseSettingCard>
+</template>
diff --git a/resources/scripts-v2/features/admin/views/settings/AdminMailConfigView.vue b/resources/scripts-v2/features/admin/views/settings/AdminMailConfigView.vue
new file mode 100644
index 00000000..ee723511
--- /dev/null
+++ b/resources/scripts-v2/features/admin/views/settings/AdminMailConfigView.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { mailService } from '@v2/api/services/mail.service'
+import type { MailConfig, MailDriver } from '@v2/api/services/mail.service'
+import SmtpMailDriver from '@v2/features/company/settings/components/SmtpMailDriver.vue'
+import MailgunMailDriver from '@v2/features/company/settings/components/MailgunMailDriver.vue'
+import SesMailDriver from '@v2/features/company/settings/components/SesMailDriver.vue'
+import BasicMailDriver from '@v2/features/company/settings/components/BasicMailDriver.vue'
+import MailTestModal from '@v2/features/company/settings/components/MailTestModal.vue'
+
+const { t } = useI18n()
+const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
+
+const isSaving = ref(false)
+const isFetchingInitialData = ref(false)
+const mailConfigData = ref<Record<string, unknown> | null>(null)
+const mailDrivers = ref<MailDriver[]>([])
+const currentMailDriver = ref('smtp')
+
+loadData()
+
+async function loadData(): Promise<void> {
+  isFetchingInitialData.value = true
+
+  try {
+    const [driversResponse, configResponse] = await Promise.all([
+      mailService.getDrivers(),
+      mailService.getConfig(),
+    ])
+
+    mailDrivers.value = driversResponse
+    mailConfigData.value = configResponse
+    currentMailDriver.value = configResponse.mail_driver ?? 'smtp'
+  } finally {
+    isFetchingInitialData.value = false
+  }
+}
+
+const mailDriver = computed(() => {
+  switch (currentMailDriver.value) {
+    case 'mailgun':
+      return MailgunMailDriver
+    case 'ses':
+      return SesMailDriver
+    case 'sendmail':
+    case 'mail':
+      return BasicMailDriver
+    default:
+      return SmtpMailDriver
+  }
+})
+
+function changeDriver(value: string): void {
+  currentMailDriver.value = value
+
+  if (mailConfigData.value) {
+    mailConfigData.value.mail_driver = value
+  }
+}
+
+async function saveEmailConfig(value: MailConfig): Promise<void> {
+  isSaving.value = true
+
+  try {
+    const response = await mailService.saveConfig(value)
+
+    if (response.success) {
+      notificationStore.showNotification({
+        type: 'success',
+        message: t(`settings.success.${response.success}`),
+      })
+
+      if (mailConfigData.value) {
+        mailConfigData.value = {
+          ...mailConfigData.value,
+          ...value,
+        }
+      }
+    }
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function openMailTestModal(): void {
+  modalStore.openModal({
+    title: t('general.test_mail_conf'),
+    componentName: 'MailTestModal',
+    size: 'sm',
+  })
+}
+</script>
+
+<template>
+  <MailTestModal store-type="global" />
+
+  <BaseSettingCard
+    :title="$t('settings.mail.mail_config')"
+    :description="$t('settings.mail.mail_config_desc')"
+  >
+    <div v-if="mailConfigData" class="mt-14">
+      <component
+        :is="mailDriver"
+        :config-data="mailConfigData"
+        :is-saving="isSaving"
+        :mail-drivers="mailDrivers"
+        :is-fetching-initial-data="isFetchingInitialData"
+        @on-change-driver="changeDriver"
+        @submit-data="saveEmailConfig"
+      >
+        <BaseButton
+          variant="primary-outline"
+          type="button"
+          class="ml-2"
+          :content-loading="isFetchingInitialData"
+          @click="openMailTestModal"
+        >
+          {{ $t('general.test_mail_conf') }}
+        </BaseButton>
+      </component>
+    </div>
+  </BaseSettingCard>
+</template>
diff --git a/resources/scripts-v2/features/admin/views/settings/AdminPdfGenerationView.vue b/resources/scripts-v2/features/admin/views/settings/AdminPdfGenerationView.vue
new file mode 100644
index 00000000..4b6b4c1b
--- /dev/null
+++ b/resources/scripts-v2/features/admin/views/settings/AdminPdfGenerationView.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { pdfService } from '@v2/api/services/pdf.service'
+import type { PdfConfig, PdfDriver } from '@v2/api/services/pdf.service'
+import AdminPdfDomDriver from '@v2/features/admin/components/settings/AdminPdfDomDriver.vue'
+import AdminPdfGotenbergDriver from '@v2/features/admin/components/settings/AdminPdfGotenbergDriver.vue'
+
+const { t } = useI18n()
+const notificationStore = useNotificationStore()
+
+const isSaving = ref(false)
+const isFetchingInitialData = ref(false)
+const configData = ref<Record<string, unknown> | null>(null)
+const drivers = ref<PdfDriver[]>([])
+const currentDriver = ref('dompdf')
+
+loadData()
+
+async function loadData(): Promise<void> {
+  isFetchingInitialData.value = true
+
+  try {
+    const [driversResponse, configResponse] = await Promise.all([
+      pdfService.getDrivers(),
+      pdfService.getConfig(),
+    ])
+
+    drivers.value = driversResponse
+    configData.value = configResponse
+    currentDriver.value = configResponse.pdf_driver ?? 'dompdf'
+  } finally {
+    isFetchingInitialData.value = false
+  }
+}
+
+const pdfDriver = computed(() => {
+  if (currentDriver.value === 'gotenberg') {
+    return AdminPdfGotenbergDriver
+  }
+
+  return AdminPdfDomDriver
+})
+
+function changeDriver(value: string): void {
+  currentDriver.value = value
+
+  if (configData.value) {
+    configData.value.pdf_driver = value
+  }
+}
+
+async function saveConfig(value: PdfConfig): Promise<void> {
+  isSaving.value = true
+
+  try {
+    const response = await pdfService.saveConfig(value)
+
+    if (response.success) {
+      notificationStore.showNotification({
+        type: 'success',
+        message: t(`settings.pdf.${response.success}`),
+      })
+
+      if (configData.value) {
+        configData.value = {
+          ...configData.value,
+          ...value,
+        }
+      }
+    }
+  } finally {
+    isSaving.value = false
+  }
+}
+</script>
+
+<template>
+  <BaseSettingCard
+    :title="$t('settings.pdf.pdf_configuration')"
+    :description="$t('settings.pdf.section_description')"
+  >
+    <div v-if="configData" class="mt-14">
+      <component
+        :is="pdfDriver"
+        :config-data="configData"
+        :is-saving="isSaving"
+        :drivers="drivers"
+        :is-fetching-initial-data="isFetchingInitialData"
+        @on-change-driver="changeDriver"
+        @submit-data="saveConfig"
+      />
+    </div>
+  </BaseSettingCard>
+</template>
diff --git a/resources/scripts-v2/features/admin/views/settings/AdminUpdateAppView.vue b/resources/scripts-v2/features/admin/views/settings/AdminUpdateAppView.vue
new file mode 100644
index 00000000..cc3d61fe
--- /dev/null
+++ b/resources/scripts-v2/features/admin/views/settings/AdminUpdateAppView.vue
@@ -0,0 +1,481 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useDialogStore } from '@v2/stores/dialog.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { settingService } from '@v2/api/services/setting.service'
+import { updateService, type UpdateRelease } from '@v2/api/services/update.service'
+import {
+  getErrorTranslationKey,
+  handleApiError,
+} from '@v2/utils/error-handling'
+
+type UpdateStepKey =
+  | 'download'
+  | 'unzip'
+  | 'copy'
+  | 'delete'
+  | 'migrate'
+  | 'finish'
+
+type UpdateStepStatus = 'pending' | 'running' | 'finished' | 'error'
+
+interface UpdateStep {
+  key: UpdateStepKey
+  translationKey: string
+  status: UpdateStepStatus
+  time: string | null
+}
+
+const dialogStore = useDialogStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+
+const isCheckingForUpdate = ref(false)
+const isUpdating = ref(false)
+const insiderChannel = ref(false)
+const currentVersion = ref('')
+const updateRelease = ref<UpdateRelease | null>(null)
+const isMinorUpdate = ref(false)
+
+const updateSteps = ref<UpdateStep[]>([
+  {
+    key: 'download',
+    translationKey: 'settings.update_app.download_zip_file',
+    status: 'pending',
+    time: null,
+  },
+  {
+    key: 'unzip',
+    translationKey: 'settings.update_app.unzipping_package',
+    status: 'pending',
+    time: null,
+  },
+  {
+    key: 'copy',
+    translationKey: 'settings.update_app.copying_files',
+    status: 'pending',
+    time: null,
+  },
+  {
+    key: 'delete',
+    translationKey: 'settings.update_app.deleting_files',
+    status: 'pending',
+    time: null,
+  },
+  {
+    key: 'migrate',
+    translationKey: 'settings.update_app.running_migrations',
+    status: 'pending',
+    time: null,
+  },
+  {
+    key: 'finish',
+    translationKey: 'settings.update_app.finishing_update',
+    status: 'pending',
+    time: null,
+  },
+])
+
+const isUpdateAvailable = computed<boolean>(() => {
+  return Boolean(updateRelease.value)
+})
+
+const requirementEntries = computed(() => {
+  return Object.entries(updateRelease.value?.extensions ?? {})
+})
+
+const allowToUpdate = computed<boolean>(() => {
+  return requirementEntries.value.every(([, isAvailable]) => isAvailable)
+})
+
+onMounted(async () => {
+  window.addEventListener('beforeunload', preventUnloadDuringUpdate)
+  await loadCurrentVersion()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', preventUnloadDuringUpdate)
+})
+
+async function loadCurrentVersion(): Promise<void> {
+  try {
+    const response = await settingService.getAppVersion()
+    currentVersion.value = response.version
+    insiderChannel.value = response.channel === 'insider'
+  } catch (error: unknown) {
+    showApiError(error)
+  }
+}
+
+async function checkUpdate(): Promise<void> {
+  isCheckingForUpdate.value = true
+
+  try {
+    const response = await updateService.check(
+      insiderChannel.value ? 'insider' : 'stable'
+    )
+
+    if (!response.release) {
+      updateRelease.value = null
+      notificationStore.showNotification({
+        type: 'info',
+        message: t('settings.update_app.latest_message'),
+      })
+      return
+    }
+
+    updateRelease.value = response.release
+    isMinorUpdate.value = Boolean(response.is_minor)
+    resetUpdateProgress()
+  } catch (error: unknown) {
+    updateRelease.value = null
+    showApiError(error)
+  } finally {
+    isCheckingForUpdate.value = false
+  }
+}
+
+async function startUpdate(): Promise<void> {
+  if (!updateRelease.value) {
+    return
+  }
+
+  const confirmed = await dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('settings.update_app.update_warning'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  })
+
+  if (!confirmed) {
+    return
+  }
+
+  if (!allowToUpdate.value) {
+    notificationStore.showNotification({
+      type: 'error',
+      message: t('settings.update_app.requirements_not_met'),
+    })
+    return
+  }
+
+  resetUpdateProgress()
+  isUpdating.value = true
+
+  let updatePath: string | null = null
+
+  try {
+    for (const step of updateSteps.value) {
+      step.status = 'running'
+
+      switch (step.key) {
+        case 'download': {
+          const response = await updateService.download({
+            version: updateRelease.value.version,
+          })
+
+          updatePath = extractPath(response.path)
+          break
+        }
+
+        case 'unzip': {
+          if (!updatePath) {
+            throw new Error('Missing update package path.')
+          }
+
+          const response = await updateService.unzip({ path: updatePath })
+          updatePath = extractPath(response.path) ?? updatePath
+          break
+        }
+
+        case 'copy': {
+          if (!updatePath) {
+            throw new Error('Missing extracted update path.')
+          }
+
+          const response = await updateService.copy({ path: updatePath })
+          updatePath = extractPath(response.path) ?? updatePath
+          break
+        }
+
+        case 'delete':
+          await updateService.delete({
+            deleted_files: updateRelease.value.deleted_files ?? null,
+          })
+          break
+
+        case 'migrate':
+          await updateService.migrate()
+          break
+
+        case 'finish':
+          await updateService.finish({
+            installed: currentVersion.value,
+            version: updateRelease.value.version,
+          })
+          break
+      }
+
+      step.status = 'finished'
+      step.time = new Date().toLocaleTimeString()
+    }
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: t('settings.update_app.update_success'),
+    })
+
+    setTimeout(() => {
+      window.location.reload()
+    }, 3000)
+  } catch (error: unknown) {
+    const currentStep = updateSteps.value.find((step) => step.status === 'running')
+
+    if (currentStep) {
+      currentStep.status = 'error'
+      currentStep.time = new Date().toLocaleTimeString()
+    }
+
+    showApiError(error)
+  } finally {
+    isUpdating.value = false
+  }
+}
+
+function resetUpdateProgress(): void {
+  updateSteps.value = updateSteps.value.map((step) => ({
+    ...step,
+    status: 'pending',
+    time: null,
+  }))
+}
+
+function statusClass(step: UpdateStep): string {
+  if (step.status === 'finished') {
+    return 'text-status-green bg-success'
+  }
+
+  if (step.status === 'running') {
+    return 'text-primary-700 bg-primary-100'
+  }
+
+  if (step.status === 'error') {
+    return 'text-danger bg-red-200'
+  }
+
+  return 'text-muted bg-surface-muted'
+}
+
+function preventUnloadDuringUpdate(event: BeforeUnloadEvent): void {
+  if (!isUpdating.value) {
+    return
+  }
+
+  event.preventDefault()
+  event.returnValue = 'Update is in progress!'
+}
+
+function extractPath(value: unknown): string | null {
+  if (typeof value === 'string') {
+    return value
+  }
+
+  return null
+}
+
+function showApiError(error: unknown): void {
+  const normalizedError = handleApiError(error)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+</script>
+
+<template>
+  <BaseSettingCard
+    :title="$t('settings.update_app.title')"
+    :description="$t('settings.update_app.description')"
+  >
+    <div class="pb-8">
+      <label class="text-sm font-medium input-label">
+        {{ $t('settings.update_app.current_version') }}
+      </label>
+
+      <div class="w-full border-b-2 border-line-light border-solid pb-4">
+        <div
+          class="my-2 inline-block rounded-md border border-line-default bg-surface-muted p-3 text-sm text-body"
+        >
+          {{ currentVersion }}
+        </div>
+      </div>
+
+      <div class="pt-4">
+        <BaseCheckbox
+          v-model="insiderChannel"
+          :label="$t('settings.update_app.insider_consent')"
+        />
+      </div>
+
+      <BaseButton
+        :loading="isCheckingForUpdate"
+        :disabled="isCheckingForUpdate || isUpdating"
+        variant="primary-outline"
+        class="mt-6"
+        @click="checkUpdate"
+      >
+        {{ $t('settings.update_app.check_update') }}
+      </BaseButton>
+
+      <BaseDivider v-if="isUpdateAvailable" class="mt-6 mb-4" />
+
+      <div v-if="isUpdateAvailable && updateRelease && !isUpdating" class="mt-4">
+        <BaseHeading type="heading-title" class="mb-2">
+          {{ $t('settings.update_app.avail_update') }}
+        </BaseHeading>
+
+        <div class="mb-3 rounded-md bg-primary-50 p-4">
+          <div class="flex">
+            <div class="shrink-0">
+              <BaseIcon
+                name="InformationCircleIcon"
+                class="h-5 w-5 text-primary-400"
+              />
+            </div>
+            <div class="ml-3">
+              <h3 class="text-sm font-medium text-primary-800">
+                {{ $t('general.note') }}
+              </h3>
+              <div class="mt-2 text-sm text-primary-700">
+                <p>{{ $t('settings.update_app.update_warning') }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <label class="text-sm font-medium input-label">
+          {{ $t('settings.update_app.next_version') }}
+        </label>
+        <br />
+        <div
+          class="my-2 inline-block rounded-md border border-line-default bg-surface-muted p-3 text-sm text-body"
+        >
+          {{ updateRelease.version }}
+          <span v-if="isMinorUpdate" class="ml-2 text-xs text-muted">
+            (minor)
+          </span>
+        </div>
+
+        <div
+          v-if="updateRelease.description"
+          class="update-rich-text mt-4 max-w-[680px] text-sm leading-snug text-muted"
+          v-html="updateRelease.description"
+        />
+
+        <div
+          v-if="updateRelease.changelog"
+          class="update-rich-text mt-4 max-w-[680px] text-sm leading-snug text-muted"
+          v-html="updateRelease.changelog"
+        />
+
+        <div v-if="requirementEntries.length" class="mt-6">
+          <label class="text-sm font-medium input-label">
+            {{ $t('settings.update_app.requirements') }}
+          </label>
+
+          <table class="mt-2 w-full max-w-xl border border-line-default">
+            <tbody>
+              <tr
+                v-for="([extension, available], index) in requirementEntries"
+                :key="extension"
+                :class="index === requirementEntries.length - 1 ? '' : 'border-b border-line-default'"
+              >
+                <td class="p-3 text-sm">
+                  {{ extension }}
+                </td>
+                <td class="p-3 text-right text-sm">
+                  <span
+                    :class="available ? 'bg-success' : 'bg-red-500'"
+                    class="inline-block h-4 w-4 rounded-full"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div
+          v-if="!allowToUpdate"
+          class="mt-6 rounded-md bg-red-50 p-4 text-sm text-red-700"
+        >
+          {{ $t('settings.update_app.requirements_not_met') }}
+        </div>
+
+        <BaseButton
+          class="mt-10"
+          variant="primary"
+          :disabled="!allowToUpdate"
+          @click="startUpdate"
+        >
+          {{ $t('settings.update_app.update') }}
+        </BaseButton>
+      </div>
+
+      <div v-if="isUpdating" class="mt-4">
+        <div class="mb-6 flex items-start justify-between">
+          <div>
+            <BaseHeading type="heading-title" class="mb-2">
+              {{ $t('settings.update_app.update_progress') }}
+            </BaseHeading>
+            <p class="max-w-[480px] text-sm leading-snug text-muted">
+              {{ $t('settings.update_app.progress_text') }}
+            </p>
+          </div>
+
+          <BaseIcon
+            name="ArrowPathIcon"
+            class="h-6 w-6 animate-spin text-primary-400"
+          />
+        </div>
+
+        <ul class="w-full list-none p-0">
+          <li
+            v-for="step in updateSteps"
+            :key="step.key"
+            class="flex w-full justify-between border-b border-line-default py-3 last:border-b-0"
+          >
+            <p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
+            <div class="flex items-center">
+              <span v-if="step.time" class="mr-3 text-xs text-muted">
+                {{ step.time }}
+              </span>
+              <span
+                :class="statusClass(step)"
+                class="block rounded-full px-3 py-1 text-sm uppercase"
+              >
+                {{ step.status }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </BaseSettingCard>
+</template>
+
+<style scoped>
+.update-rich-text :deep(ul) {
+  list-style: disc;
+  margin-left: 1.5rem;
+}
+
+.update-rich-text :deep(li) {
+  margin-bottom: 0.25rem;
+}
+</style>
diff --git a/resources/scripts-v2/features/auth/routes.ts b/resources/scripts-v2/features/auth/routes.ts
index ac62748f..0593aba5 100644
--- a/resources/scripts-v2/features/auth/routes.ts
+++ b/resources/scripts-v2/features/auth/routes.ts
@@ -38,15 +38,15 @@ export const authRoutes: RouteRecordRaw[] = [
           title: 'Reset Password',
         },
       },
+      {
+        path: '/register',
+        name: 'register-with-invitation',
+        component: RegisterWithInvitationView,
+        meta: {
+          requiresAuth: false,
+          title: 'Register',
+        },
+      },
     ],
   },
-  {
-    path: '/register',
-    name: 'register-with-invitation',
-    component: RegisterWithInvitationView,
-    meta: {
-      requiresAuth: false,
-      title: 'Register',
-    },
-  },
 ]
diff --git a/resources/scripts-v2/features/auth/views/ForgotPasswordView.vue b/resources/scripts-v2/features/auth/views/ForgotPasswordView.vue
index 6914c320..a591d89d 100644
--- a/resources/scripts-v2/features/auth/views/ForgotPasswordView.vue
+++ b/resources/scripts-v2/features/auth/views/ForgotPasswordView.vue
@@ -93,7 +93,11 @@ async function onSubmit(): Promise<void> {
 
     isSent.value = true
   } catch (err: unknown) {
-    handleApiError(err)
+    const normalized = handleApiError(err)
+    notificationStore.showNotification({
+      type: 'error',
+      message: normalized.message,
+    })
   } finally {
     isLoading.value = false
   }
diff --git a/resources/scripts-v2/features/auth/views/LoginView.vue b/resources/scripts-v2/features/auth/views/LoginView.vue
index 9c35e079..08770d8b 100644
--- a/resources/scripts-v2/features/auth/views/LoginView.vue
+++ b/resources/scripts-v2/features/auth/views/LoginView.vue
@@ -115,7 +115,13 @@ async function onSubmit(): Promise<void> {
       type: 'success',
       message: 'Logged in successfully.',
     })
-  } catch {
+  } catch (err: unknown) {
+    const { handleApiError } = await import('../../../utils/error-handling')
+    const normalized = handleApiError(err)
+    notificationStore.showNotification({
+      type: 'error',
+      message: normalized.message,
+    })
     isLoading.value = false
   }
 }
diff --git a/resources/scripts-v2/features/auth/views/RegisterWithInvitationView.vue b/resources/scripts-v2/features/auth/views/RegisterWithInvitationView.vue
index da2d1c6e..af25a3ae 100644
--- a/resources/scripts-v2/features/auth/views/RegisterWithInvitationView.vue
+++ b/resources/scripts-v2/features/auth/views/RegisterWithInvitationView.vue
@@ -1,123 +1,128 @@
 <template>
-  <div class="flex items-center justify-center min-h-screen bg-surface-secondary">
-    <div class="w-full max-w-md p-8">
-      <!-- Logo -->
-      <div class="mb-8 text-center">
-        <MainLogo
-          v-if="!loginPageLogo"
-          class="inline-block w-48 h-auto text-primary-500"
-        />
-        <img
-          v-else
-          :src="loginPageLogo"
-          class="inline-block w-48 h-auto"
-        />
-      </div>
+  <!-- Loading -->
+  <div v-if="isLoading" class="mt-12 text-center">
+    <BaseSpinner class="w-8 h-8 text-primary-400 mx-auto" />
+    <p class="text-muted mt-4 text-sm">Loading invitation details...</p>
+  </div>
 
-      <!-- Loading -->
-      <div v-if="isLoading" class="text-center">
-        <p class="text-muted">Loading invitation details...</p>
-      </div>
+  <!-- Invalid/Expired -->
+  <div v-else-if="error" class="mt-12 text-center">
+    <BaseIcon
+      name="ExclamationCircleIcon"
+      class="w-12 h-12 mx-auto text-red-400 mb-4"
+    />
+    <h2 class="text-lg font-semibold text-heading mb-2">
+      Invalid Invitation
+    </h2>
+    <p class="text-sm text-muted mb-4">{{ error }}</p>
+    <router-link
+      to="/login"
+      class="text-sm text-primary-400 hover:text-primary-500"
+    >
+      Go to Login
+    </router-link>
+  </div>
 
-      <!-- Invalid/Expired -->
-      <div v-else-if="error" class="text-center">
-        <BaseIcon
-          name="ExclamationCircleIcon"
-          class="w-16 h-16 mx-auto text-red-400 mb-4"
+  <!-- Registration Form -->
+  <div v-else class="mt-12">
+    <div class="mb-8">
+      <h1 class="text-2xl font-semibold text-heading">
+        Create Your Account
+      </h1>
+      <p class="text-sm text-muted mt-2">
+        You've been invited to join
+        <strong class="text-heading">{{ invitationDetails.company_name }}</strong>
+        as <strong class="text-heading">{{ invitationDetails.role_name }}</strong>
+      </p>
+    </div>
+
+    <form @submit.prevent="submitRegistration">
+      <BaseInputGroup
+        label="Name"
+        :error="v$.name.$error && v$.name.$errors[0].$message"
+        class="mb-4"
+        required
+      >
+        <BaseInput
+          v-model="form.name"
+          :invalid="v$.name.$error"
+          focus
+          @input="v$.name.$touch()"
         />
-        <h1 class="text-xl font-semibold text-heading mb-2">
-          Invalid Invitation
-        </h1>
-        <p class="text-muted">{{ error }}</p>
-        <router-link to="/login" class="text-primary-500 mt-4 inline-block">
-          Go to Login
+      </BaseInputGroup>
+
+      <BaseInputGroup label="Email" class="mb-4">
+        <BaseInput
+          v-model="form.email"
+          type="email"
+          disabled
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        label="Password"
+        :error="v$.password.$error && v$.password.$errors[0].$message"
+        class="mb-4"
+        required
+      >
+        <BaseInput
+          v-model="form.password"
+          :type="isShowPassword ? 'text' : 'password'"
+          :invalid="v$.password.$error"
+          @input="v$.password.$touch()"
+        >
+          <template #right>
+            <BaseIcon
+              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
+              class="mr-1 text-muted cursor-pointer"
+              @click="isShowPassword = !isShowPassword"
+            />
+          </template>
+        </BaseInput>
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        label="Confirm Password"
+        :error="
+          v$.password_confirmation.$error &&
+          v$.password_confirmation.$errors[0].$message
+        "
+        class="mb-4"
+        required
+      >
+        <BaseInput
+          v-model="form.password_confirmation"
+          :type="isShowConfirmPassword ? 'text' : 'password'"
+          :invalid="v$.password_confirmation.$error"
+          @input="v$.password_confirmation.$touch()"
+        >
+          <template #right>
+            <BaseIcon
+              :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
+              class="mr-1 text-muted cursor-pointer"
+              @click="isShowConfirmPassword = !isShowConfirmPassword"
+            />
+          </template>
+        </BaseInput>
+      </BaseInputGroup>
+
+      <div class="mt-5 mb-8">
+        <router-link
+          to="/login"
+          class="text-sm text-primary-400 hover:text-body"
+        >
+          Already have an account? Log in
         </router-link>
       </div>
 
-      <!-- Registration Form -->
-      <div v-else>
-        <div class="text-center mb-6">
-          <h1 class="text-2xl font-semibold text-heading">
-            Create Your Account
-          </h1>
-          <p class="text-muted mt-2">
-            You've been invited to join
-            <strong>{{ invitationDetails.company_name }}</strong> as
-            <strong>{{ invitationDetails.role_name }}</strong>
-          </p>
-        </div>
-
-        <BaseCard class="p-6">
-          <form @submit.prevent="submitRegistration">
-            <div class="space-y-4">
-              <BaseInputGroup
-                label="Name"
-                :error="v$.name.$error && v$.name.$errors[0].$message"
-                required
-              >
-                <BaseInput
-                  v-model="form.name"
-                  :invalid="v$.name.$error"
-                  @input="v$.name.$touch()"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup label="Email">
-                <BaseInput
-                  v-model="form.email"
-                  type="email"
-                  disabled
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                label="Password"
-                :error="v$.password.$error && v$.password.$errors[0].$message"
-                required
-              >
-                <BaseInput
-                  v-model="form.password"
-                  type="password"
-                  :invalid="v$.password.$error"
-                  @input="v$.password.$touch()"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                label="Confirm Password"
-                :error="
-                  v$.password_confirmation.$error &&
-                  v$.password_confirmation.$errors[0].$message
-                "
-                required
-              >
-                <BaseInput
-                  v-model="form.password_confirmation"
-                  type="password"
-                  :invalid="v$.password_confirmation.$error"
-                  @input="v$.password_confirmation.$touch()"
-                />
-              </BaseInputGroup>
-            </div>
-
-            <BaseButton
-              :loading="isSubmitting"
-              :disabled="isSubmitting"
-              class="w-full mt-6"
-              type="submit"
-            >
-              Create Account & Join
-            </BaseButton>
-          </form>
-        </BaseCard>
-
-        <div class="text-center mt-4">
-          <router-link to="/login" class="text-sm text-muted hover:text-primary-500">
-            Already have an account? Log in
-          </router-link>
-        </div>
-      </div>
-    </div>
+      <BaseButton
+        :loading="isSubmitting"
+        :disabled="isSubmitting"
+        type="submit"
+      >
+        Create Account & Join
+      </BaseButton>
+    </form>
   </div>
 </template>
 
@@ -127,8 +132,6 @@ import { useRoute, useRouter } from 'vue-router'
 import { helpers, required, minLength, sameAs } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { authService } from '../../../api/services/auth.service'
-import * as ls from '../../../utils/local-storage'
-import MainLogo from '../../../components/icons/MainLogo.vue'
 
 interface InvitationDetailsData {
   email: string
@@ -146,12 +149,10 @@ interface RegistrationForm {
 const route = useRoute()
 const router = useRouter()
 
-const loginPageLogo = computed<string | false>(() => {
-  return (window as Record<string, unknown>).login_page_logo as string || false
-})
-
 const isLoading = ref<boolean>(true)
 const isSubmitting = ref<boolean>(false)
+const isShowPassword = ref<boolean>(false)
+const isShowConfirmPassword = ref<boolean>(false)
 const error = ref<string | null>(null)
 const invitationDetails = ref<InvitationDetailsData>({
   email: '',
@@ -182,7 +183,7 @@ const rules = computed(() => ({
 
 const v$ = useVuelidate(
   rules,
-  computed(() => form)
+  computed(() => form),
 )
 
 const token = computed<string>(() => route.query.invitation as string)
@@ -195,12 +196,11 @@ onMounted(async () => {
   }
 
   try {
-    const response = await authService.getInvitationDetails(token.value)
-    const details = response.data
+    const details = await authService.getInvitationDetails(token.value) as unknown as InvitationDetailsData
     invitationDetails.value = {
       email: details.email,
       company_name: details.company_name,
-      role_name: details.invited_by,
+      role_name: details.role_name,
     }
     form.email = details.email
   } catch {
@@ -217,17 +217,27 @@ async function submitRegistration(): Promise<void> {
   isSubmitting.value = true
 
   try {
-    await authService.registerWithInvitation({
+    const response = await authService.registerWithInvitation({
       name: form.name,
       email: form.email,
       password: form.password,
       password_confirmation: form.password_confirmation,
-      token: token.value,
+      invitation_token: token.value,
     })
 
+    // Save the auth token before navigating (matching old version's pattern)
+    localStorage.setItem('auth.token', `Bearer ${response.token}`)
+
     router.push('/admin/dashboard')
-  } catch {
-    // Validation errors handled by http interceptor
+  } catch (err: unknown) {
+    const { handleApiError } = await import('../../../utils/error-handling')
+    const { useNotificationStore } = await import('../../../stores/notification.store')
+    const normalized = handleApiError(err)
+    const notificationStore = useNotificationStore()
+    notificationStore.showNotification({
+      type: 'error',
+      message: normalized.message,
+    })
   } finally {
     isSubmitting.value = false
   }
diff --git a/resources/scripts-v2/features/auth/views/ResetPasswordView.vue b/resources/scripts-v2/features/auth/views/ResetPasswordView.vue
index ff192d80..178bee21 100644
--- a/resources/scripts-v2/features/auth/views/ResetPasswordView.vue
+++ b/resources/scripts-v2/features/auth/views/ResetPasswordView.vue
@@ -157,7 +157,11 @@ async function onSubmit(): Promise<void> {
 
     router.push('/login')
   } catch (err: unknown) {
-    handleApiError(err)
+    const normalized = handleApiError(err)
+    notificationStore.showNotification({
+      type: 'error',
+      message: normalized.message,
+    })
   } finally {
     isLoading.value = false
   }
diff --git a/resources/scripts-v2/features/company/customers/components/CreateCustomFields.vue b/resources/scripts-v2/features/company/customers/components/CreateCustomFields.vue
index 50237f9b..d3d26f5d 100644
--- a/resources/scripts-v2/features/company/customers/components/CreateCustomFields.vue
+++ b/resources/scripts-v2/features/company/customers/components/CreateCustomFields.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, watch } from 'vue'
 import lodash from 'lodash'
 import moment from 'moment'
 import { customFieldService } from '@v2/api/services/custom-field.service'
@@ -51,16 +51,32 @@ const props = withDefaults(
   }
 )
 
-const customFields = ref<CustomFieldItem[]>([])
+const storeData = computed(() => {
+  const data = props.store[props.storeProp]
+
+  if (!data) {
+    return null
+  }
+
+  if (!Array.isArray(data.customFields)) {
+    data.customFields = []
+  }
+
+  if (!Array.isArray(data.fields)) {
+    data.fields = []
+  }
+
+  return data
+})
 
 getInitialCustomFields()
 
 function mergeExistingValues(): void {
-  if (props.isEdit && props.store[props.storeProp]) {
-    props.store[props.storeProp].fields.forEach((field) => {
-      const existingIndex = props.store[
-        props.storeProp
-      ].customFields.findIndex((f) => f.id === field.custom_field_id)
+  if (props.isEdit && storeData.value) {
+    storeData.value.fields.forEach((field) => {
+      const existingIndex = storeData.value?.customFields.findIndex(
+        (f) => f.id === field.custom_field_id
+      ) ?? -1
 
       if (existingIndex > -1) {
         let value: string | boolean | number | null = field.default_answer
@@ -72,7 +88,7 @@ function mergeExistingValues(): void {
           ).format('YYYY-MM-DD HH:mm')
         }
 
-        props.store[props.storeProp].customFields[existingIndex] = {
+        storeData.value.customFields[existingIndex] = {
           ...field,
           id: field.custom_field_id ?? field.id,
           value,
@@ -89,6 +105,10 @@ function mergeExistingValues(): void {
 }
 
 async function getInitialCustomFields(): Promise<void> {
+  if (!storeData.value) {
+    return
+  }
+
   const res = await customFieldService.list({
     type: props.type ?? undefined,
     limit: 'all',
@@ -99,7 +119,7 @@ async function getInitialCustomFields(): Promise<void> {
     d.value = d.default_answer
   })
 
-  props.store[props.storeProp].customFields = lodash.sortBy(
+  storeData.value.customFields = lodash.sortBy(
     data,
     (_cf: CustomFieldItem) => _cf.order
   )
@@ -108,7 +128,7 @@ async function getInitialCustomFields(): Promise<void> {
 }
 
 watch(
-  () => props.store[props.storeProp]?.fields,
+  () => storeData.value?.fields,
   () => {
     mergeExistingValues()
   }
@@ -118,14 +138,14 @@ watch(
 <template>
   <div
     v-if="
-      store[storeProp] &&
-      store[storeProp].customFields.length > 0 &&
+      storeData &&
+      storeData.customFields.length > 0 &&
       !isLoading
     "
   >
     <BaseInputGrid :layout="gridLayout">
       <SingleField
-        v-for="(field, index) in store[storeProp].customFields"
+        v-for="(field, index) in storeData.customFields"
         :key="field.id"
         :custom-field-scope="customFieldScope"
         :store="store"
diff --git a/resources/scripts-v2/features/company/customers/components/CustomerChart.vue b/resources/scripts-v2/features/company/customers/components/CustomerChart.vue
index fbadc726..2deabe1f 100644
--- a/resources/scripts-v2/features/company/customers/components/CustomerChart.vue
+++ b/resources/scripts-v2/features/company/customers/components/CustomerChart.vue
@@ -4,22 +4,10 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useCustomerStore } from '../store'
 import { useCompanyStore } from '@v2/stores/company.store'
-import { customerService } from '@v2/api/services/customer.service'
 import LineChart from '@v2/components/charts/LineChart.vue'
 import ChartPlaceholder from './CustomerChartPlaceholder.vue'
 import CustomerInfo from './CustomerInfo.vue'
-
-interface ChartData {
-  salesTotal: number
-  totalReceipts: number
-  totalExpenses: number
-  netProfit: number
-  expenseTotals: number[]
-  netProfits: number[]
-  months: string[]
-  receiptTotals: number[]
-  invoiceTotals: number[]
-}
+import type { CustomerStatsChartData } from '@v2/api/services/customer.service'
 
 interface YearOption {
   label: string
@@ -32,7 +20,7 @@ const { t } = useI18n()
 const route = useRoute()
 
 const isLoading = ref<boolean>(false)
-const chartData = reactive<Partial<ChartData>>({})
+const chartData = reactive<Partial<CustomerStatsChartData>>({})
 const years = reactive<YearOption[]>([
   { label: t('dateRange.this_year'), value: 'This year' },
   { label: t('dateRange.previous_year'), value: 'Previous year' },
@@ -58,21 +46,24 @@ watch(
 
 async function loadCustomer(): Promise<void> {
   isLoading.value = false
-  const response = await customerService.getStats(Number(route.params.id))
+  const response = await customerStore.fetchViewCustomer({
+    id: Number(route.params.id),
+  })
 
-  if (response.data) {
-    const meta = (response as Record<string, unknown>).meta as Record<string, unknown> | undefined
-    if (meta?.chartData) {
-      Object.assign(chartData, meta.chartData)
-    }
+  if (response.meta.chartData) {
+    Object.assign(chartData, response.meta.chartData)
   }
 
   isLoading.value = true
 }
 
 async function onChangeYear(data: string): Promise<boolean> {
-  const params: Record<string, unknown> = {
-    id: route.params.id,
+  const params: {
+    id: number
+    previous_year?: boolean
+    this_year?: boolean
+  } = {
+    id: Number(route.params.id),
   }
 
   if (data === 'Previous year') {
@@ -81,14 +72,10 @@ async function onChangeYear(data: string): Promise<boolean> {
     params.this_year = true
   }
 
-  const response = await customerService.getStats(
-    Number(route.params.id),
-    params
-  )
+  const response = await customerStore.fetchViewCustomer(params)
 
-  const meta = (response as Record<string, unknown>).meta as Record<string, unknown> | undefined
-  if (meta?.chartData) {
-    Object.assign(chartData, meta.chartData)
+  if (response.meta.chartData) {
+    Object.assign(chartData, response.meta.chartData)
   }
 
   return true
diff --git a/resources/scripts-v2/features/company/customers/components/CustomerDropdown.vue b/resources/scripts-v2/features/company/customers/components/CustomerDropdown.vue
index bca01019..2be1d992 100644
--- a/resources/scripts-v2/features/company/customers/components/CustomerDropdown.vue
+++ b/resources/scripts-v2/features/company/customers/components/CustomerDropdown.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { useCustomerStore } from '../store'
 import { useDialogStore } from '../../../../stores/dialog.store'
 import { useUserStore } from '../../../../stores/user.store'
 
 interface RowData {
-  id: number
+  id?: number | string | null
   [key: string]: unknown
 }
 
@@ -40,7 +41,33 @@ const userStore = useUserStore()
 
 const { t } = useI18n()
 const route = useRoute()
-const router = useRouter()
+
+const isDetailView = computed<boolean>(() => route.name === 'customers.view')
+const customerId = computed<number | null>(() => {
+  const rowId = normalizeCustomerId(props.row?.id)
+  if (rowId !== null) {
+    return rowId
+  }
+
+  if (isDetailView.value) {
+    return normalizeCustomerId(route.params.id)
+  }
+
+  return null
+})
+
+function normalizeCustomerId(value: unknown): number | null {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value
+  }
+
+  if (typeof value === 'string' && value.trim() !== '') {
+    const parsedValue = Number(value)
+    return Number.isFinite(parsedValue) ? parsedValue : null
+  }
+
+  return null
+}
 
 function removeCustomer(id: number): void {
   dialogStore
@@ -63,12 +90,20 @@ function removeCustomer(id: number): void {
       }
     })
 }
+
+function onRemoveCustomer(): void {
+  if (customerId.value === null) {
+    return
+  }
+
+  removeCustomer(customerId.value)
+}
 </script>
 
 <template>
   <BaseDropdown :content-loading="customerStore.isFetchingViewData">
     <template #activator>
-      <BaseButton v-if="route.name === 'customers.view'" variant="primary">
+      <BaseButton v-if="isDetailView" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
       <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
@@ -76,8 +111,11 @@ function removeCustomer(id: number): void {
 
     <!-- Edit Customer -->
     <router-link
-      v-if="userStore.hasAbilities(ABILITIES.EDIT_CUSTOMER) && row"
-      :to="`/admin/customers/${row.id}/edit`"
+      v-if="
+        userStore.hasAbilities(ABILITIES.EDIT_CUSTOMER) &&
+        customerId !== null
+      "
+      :to="`/admin/customers/${customerId}/edit`"
     >
       <BaseDropdownItem>
         <BaseIcon
@@ -91,11 +129,11 @@ function removeCustomer(id: number): void {
     <!-- View Customer -->
     <router-link
       v-if="
-        route.name !== 'customers.view' &&
+        !isDetailView &&
         userStore.hasAbilities(ABILITIES.VIEW_CUSTOMER) &&
-        row
+        customerId !== null
       "
-      :to="`customers/${row.id}/view`"
+      :to="`/admin/customers/${customerId}/view`"
     >
       <BaseDropdownItem>
         <BaseIcon
@@ -108,8 +146,11 @@ function removeCustomer(id: number): void {
 
     <!-- Delete Customer -->
     <BaseDropdownItem
-      v-if="userStore.hasAbilities(ABILITIES.DELETE_CUSTOMER) && row"
-      @click="removeCustomer(row.id)"
+      v-if="
+        userStore.hasAbilities(ABILITIES.DELETE_CUSTOMER) &&
+        customerId !== null
+      "
+      @click="onRemoveCustomer"
     >
       <BaseIcon
         name="TrashIcon"
diff --git a/resources/scripts-v2/features/company/customers/components/CustomerModal.vue b/resources/scripts-v2/features/company/customers/components/CustomerModal.vue
index f231a8a7..22723ee6 100644
--- a/resources/scripts-v2/features/company/customers/components/CustomerModal.vue
+++ b/resources/scripts-v2/features/company/customers/components/CustomerModal.vue
@@ -137,6 +137,11 @@ function copyAddress(): void {
 }
 
 async function setInitialData(): Promise<void> {
+  await Promise.all([
+    globalStore.fetchCurrencies(),
+    globalStore.fetchCountries(),
+  ])
+
   if (!customerStore.isEdit) {
     customerStore.currentCustomer.currency_id =
       companyStore.selectedCompanyCurrency?.id ?? null
@@ -217,9 +222,9 @@ function closeCustomerModal(): void {
       </div>
     </template>
     <form action="" @submit.prevent="submitCustomerData">
-      <div class="px-6 pb-3">
+      <div class="px-6 pb-3 max-h-[calc(80vh-8rem)] overflow-y-auto">
         <BaseTabGroup>
-          <BaseTab :title="$t('customers.basic_info')" class="!mt-2">
+          <BaseTab :title="$t('customers.basic_info')">
             <BaseInputGrid layout="one-column">
               <BaseInputGroup
                 :label="$t('customers.display_name')"
@@ -403,7 +408,7 @@ function closeCustomerModal(): void {
             </BaseInputGrid>
           </BaseTab>
 
-          <BaseTab :title="$t('customers.billing_address')" class="!mt-2">
+          <BaseTab :title="$t('customers.billing_address')">
             <BaseInputGrid layout="one-column">
               <BaseInputGroup :label="$t('customers.name')">
                 <BaseInput
@@ -505,7 +510,7 @@ function closeCustomerModal(): void {
             </BaseInputGrid>
           </BaseTab>
 
-          <BaseTab :title="$t('customers.shipping_address')" class="!mt-2">
+          <BaseTab :title="$t('customers.shipping_address')">
             <div class="grid md:grid-cols-12">
               <div class="flex justify-end col-span-12">
                 <BaseButton
diff --git a/resources/scripts-v2/features/company/customers/components/types/DateTimeType.vue b/resources/scripts-v2/features/company/customers/components/types/DateTimeType.vue
new file mode 100644
index 00000000..d3a8d4c8
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/types/DateTimeType.vue
@@ -0,0 +1,15 @@
+<template>
+  <BaseDatePicker v-model="date" enable-time />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | null): void }>()
+
+const date = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>
diff --git a/resources/scripts-v2/features/company/customers/components/types/DateType.vue b/resources/scripts-v2/features/company/customers/components/types/DateType.vue
new file mode 100644
index 00000000..bdfd8ca0
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/types/DateType.vue
@@ -0,0 +1,15 @@
+<template>
+  <BaseDatePicker v-model="date" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | Date | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | Date | null): void }>()
+
+const date = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>
diff --git a/resources/scripts-v2/features/company/customers/components/types/DropdownType.vue b/resources/scripts-v2/features/company/customers/components/types/DropdownType.vue
new file mode 100644
index 00000000..7eef69ee
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/types/DropdownType.vue
@@ -0,0 +1,29 @@
+<template>
+  <BaseMultiselect
+    v-model="inputValue"
+    :options="options"
+    label="name"
+    value-prop="name"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: string | Record<string, unknown> | number | null
+  options?: Array<{ name: string }> | string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  options: () => [],
+})
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: unknown): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>
diff --git a/resources/scripts-v2/features/company/customers/components/types/InputType.vue b/resources/scripts-v2/features/company/customers/components/types/InputType.vue
new file mode 100644
index 00000000..cbbbf85c
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/types/InputType.vue
@@ -0,0 +1,15 @@
+<template>
+  <BaseInput v-model="inputValue" type="text" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | null): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>
diff --git a/resources/scripts-v2/features/company/customers/components/types/NumberType.vue b/resources/scripts-v2/features/company/customers/components/types/NumberType.vue
new file mode 100644
index 00000000..a236eeb9
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/types/NumberType.vue
@@ -0,0 +1,15 @@
+<template>
+  <BaseInput v-model="inputValue" type="number" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | number | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | number | null): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>
diff --git a/resources/scripts-v2/features/company/customers/components/types/PhoneType.vue b/resources/scripts-v2/features/company/customers/components/types/PhoneType.vue
new file mode 100644
index 00000000..7eb3746a
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/types/PhoneType.vue
@@ -0,0 +1,15 @@
+<template>
+  <BaseInput v-model="inputValue" type="tel" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | null): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>
diff --git a/resources/scripts-v2/features/company/customers/components/types/SwitchType.vue b/resources/scripts-v2/features/company/customers/components/types/SwitchType.vue
new file mode 100644
index 00000000..a2a1becc
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/types/SwitchType.vue
@@ -0,0 +1,15 @@
+<template>
+  <BaseSwitch v-model="inputValue" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | number | boolean | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: number): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue === 1,
+  set: (value: boolean) => emit('update:modelValue', value ? 1 : 0),
+})
+</script>
diff --git a/resources/scripts-v2/features/company/customers/components/types/TextAreaType.vue b/resources/scripts-v2/features/company/customers/components/types/TextAreaType.vue
new file mode 100644
index 00000000..bca4101c
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/types/TextAreaType.vue
@@ -0,0 +1,15 @@
+<template>
+  <BaseTextarea v-model="inputValue" rows="2" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | null): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>
diff --git a/resources/scripts-v2/features/company/customers/components/types/TimeType.vue b/resources/scripts-v2/features/company/customers/components/types/TimeType.vue
new file mode 100644
index 00000000..0bf088a0
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/types/TimeType.vue
@@ -0,0 +1,15 @@
+<template>
+  <BaseTimePicker v-model="date" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | Date | Record<string, string> | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | Date | Record<string, string> | null): void }>()
+
+const date = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>
diff --git a/resources/scripts-v2/features/company/customers/components/types/UrlType.vue b/resources/scripts-v2/features/company/customers/components/types/UrlType.vue
new file mode 100644
index 00000000..2c3c0536
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/types/UrlType.vue
@@ -0,0 +1,15 @@
+<template>
+  <BaseInput v-model="inputValue" type="url" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | null): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>
diff --git a/resources/scripts-v2/features/company/customers/routes.ts b/resources/scripts-v2/features/company/customers/routes.ts
index 540af89a..c455bf06 100644
--- a/resources/scripts-v2/features/company/customers/routes.ts
+++ b/resources/scripts-v2/features/company/customers/routes.ts
@@ -6,6 +6,7 @@ const customerRoutes: RouteRecordRaw[] = [
     name: 'customers.index',
     component: () => import('./views/CustomerIndexView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'view-customer',
     },
   },
@@ -14,6 +15,7 @@ const customerRoutes: RouteRecordRaw[] = [
     name: 'customers.create',
     component: () => import('./views/CustomerCreateView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'create-customer',
     },
   },
@@ -22,6 +24,7 @@ const customerRoutes: RouteRecordRaw[] = [
     name: 'customers.edit',
     component: () => import('./views/CustomerCreateView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'edit-customer',
     },
   },
@@ -30,6 +33,7 @@ const customerRoutes: RouteRecordRaw[] = [
     name: 'customers.view',
     component: () => import('./views/CustomerDetailView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'view-customer',
     },
   },
diff --git a/resources/scripts-v2/features/company/customers/store.ts b/resources/scripts-v2/features/company/customers/store.ts
index facd0068..9d55d1bd 100644
--- a/resources/scripts-v2/features/company/customers/store.ts
+++ b/resources/scripts-v2/features/company/customers/store.ts
@@ -5,7 +5,8 @@ import { customerService } from '../../../api/services/customer.service'
 import type {
   CustomerListParams,
   CustomerListResponse,
-  CustomerStatsData,
+  CustomerStatsParams,
+  CustomerStatsResponse,
 } from '../../../api/services/customer.service'
 import { useNotificationStore } from '../../../stores/notification.store'
 import { useGlobalStore } from '../../../stores/global.store'
@@ -47,10 +48,7 @@ export interface CustomerForm {
   password_added?: boolean
 }
 
-export interface CustomerViewData {
-  customer?: Customer
-  [key: string]: unknown
-}
+export type CustomerViewData = Partial<Customer>
 
 function createAddressStub(): CustomerFormAddress {
   return {
@@ -153,13 +151,15 @@ export const useCustomerStore = defineStore('customer', () => {
     }
   }
 
-  async function fetchViewCustomer(params: { id: number }): Promise<ApiResponse<CustomerStatsData>> {
+  async function fetchViewCustomer(
+    params: { id: number } & CustomerStatsParams
+  ): Promise<CustomerStatsResponse> {
     isFetchingViewData.value = true
     try {
-      const response = await customerService.getStats(params.id, params as Record<string, unknown>)
+      const { id, ...queryParams } = params
+      const response = await customerService.getStats(id, queryParams)
       selectedViewCustomer.value = {}
       Object.assign(selectedViewCustomer.value, response.data)
-      setAddressStub(response.data as unknown as Record<string, unknown>)
       isFetchingViewData.value = false
       return response
     } catch (err: unknown) {
diff --git a/resources/scripts-v2/features/company/customers/views/CustomerCreateView.vue b/resources/scripts-v2/features/company/customers/views/CustomerCreateView.vue
index 400f2851..8b775e1f 100644
--- a/resources/scripts-v2/features/company/customers/views/CustomerCreateView.vue
+++ b/resources/scripts-v2/features/company/customers/views/CustomerCreateView.vue
@@ -19,11 +19,7 @@ import { useCompanyStore } from '../../../../stores/company.store'
 import CustomerCustomFields from '@v2/features/company/customers/components/CreateCustomFields.vue'
 import CopyInputField from '@v2/features/company/customers/components/CopyInputField.vue'
 
-// Custom field store - imported from original location
-import { customFieldService } from '@v2/api/services/custom-field.service'
-
 const customerStore = useCustomerStore()
-// Custom fields fetched via service
 const globalStore = useGlobalStore()
 const companyStore = useCompanyStore()
 
@@ -49,6 +45,10 @@ const pageTitle = computed<string>(() =>
   isEdit.value ? t('customers.edit_customer') : t('customers.new_customer')
 )
 
+const hasCustomFields = computed<boolean>(() => {
+  return customerStore.currentCustomer.customFields.length > 0
+})
+
 const rules = computed(() => ({
   currentCustomer: {
     name: {
@@ -709,14 +709,14 @@ async function submitCustomerData(): Promise<void> {
         </div>
 
         <BaseDivider
-          v-if="customFieldStore.customFields.length > 0"
+          v-if="hasCustomFields"
           class="mb-5 md:mb-8"
         />
 
         <!-- Customer Custom Fields -->
         <div class="grid grid-cols-5 gap-2 mb-8">
           <h6
-            v-if="customFieldStore.customFields.length > 0"
+            v-if="hasCustomFields"
             class="col-span-5 text-lg font-semibold text-left lg:col-span-1"
           >
             {{ $t('settings.custom_fields.title') }}
diff --git a/resources/scripts-v2/features/company/customers/views/CustomerDetailView.vue b/resources/scripts-v2/features/company/customers/views/CustomerDetailView.vue
index 4fa1a9a6..a21aec34 100644
--- a/resources/scripts-v2/features/company/customers/views/CustomerDetailView.vue
+++ b/resources/scripts-v2/features/company/customers/views/CustomerDetailView.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 import { useCustomerStore } from '../store'
 import { useUserStore } from '../../../../stores/user.store'
 import CustomerDropdown from '../components/CustomerDropdown.vue'
@@ -19,15 +18,12 @@ const ABILITIES = {
 
 const customerStore = useCustomerStore()
 const userStore = useUserStore()
-const { t } = useI18n()
 
 const router = useRouter()
 const route = useRoute()
 
 const pageTitle = computed<string>(() => {
-  return customerStore.selectedViewCustomer.customer
-    ? (customerStore.selectedViewCustomer.customer as { name: string }).name
-    : ''
+  return customerStore.selectedViewCustomer.name ?? ''
 })
 
 const isLoading = computed<boolean>(() => customerStore.isFetchingViewData)
diff --git a/resources/scripts-v2/features/company/dashboard/components/DashboardTable.vue b/resources/scripts-v2/features/company/dashboard/components/DashboardTable.vue
index 51a61d60..5e55ed84 100644
--- a/resources/scripts-v2/features/company/dashboard/components/DashboardTable.vue
+++ b/resources/scripts-v2/features/company/dashboard/components/DashboardTable.vue
@@ -16,12 +16,15 @@ interface TableColumn {
 
 const ABILITIES = {
   VIEW_INVOICE: 'view-invoice',
-  VIEW_ESTIMATE: 'view-estimate',
-  DELETE_INVOICE: 'delete-invoice',
+  CREATE_INVOICE: 'create-invoice',
   EDIT_INVOICE: 'edit-invoice',
+  DELETE_INVOICE: 'delete-invoice',
   SEND_INVOICE: 'send-invoice',
+  CREATE_PAYMENT: 'create-payment',
+  VIEW_ESTIMATE: 'view-estimate',
   CREATE_ESTIMATE: 'create-estimate',
   EDIT_ESTIMATE: 'edit-estimate',
+  DELETE_ESTIMATE: 'delete-estimate',
   SEND_ESTIMATE: 'send-estimate',
 } as const
 
@@ -91,6 +94,22 @@ function hasAtleastOneEstimateAbility(): boolean {
     ABILITIES.SEND_ESTIMATE,
   ])
 }
+
+// Invoice ability props
+const canViewInvoice = computed(() => userStore.hasAbilities(ABILITIES.VIEW_INVOICE))
+const canCreateInvoice = computed(() => userStore.hasAbilities(ABILITIES.CREATE_INVOICE))
+const canEditInvoice = computed(() => userStore.hasAbilities(ABILITIES.EDIT_INVOICE))
+const canDeleteInvoice = computed(() => userStore.hasAbilities(ABILITIES.DELETE_INVOICE))
+const canSendInvoice = computed(() => userStore.hasAbilities(ABILITIES.SEND_INVOICE))
+const canCreatePayment = computed(() => userStore.hasAbilities(ABILITIES.CREATE_PAYMENT))
+
+// Estimate ability props
+const canViewEstimate = computed(() => userStore.hasAbilities(ABILITIES.VIEW_ESTIMATE))
+const canCreateEstimate = computed(() => userStore.hasAbilities(ABILITIES.CREATE_ESTIMATE))
+const canEditEstimate = computed(() => userStore.hasAbilities(ABILITIES.EDIT_ESTIMATE))
+const canDeleteEstimate = computed(() => userStore.hasAbilities(ABILITIES.DELETE_ESTIMATE))
+const canSendEstimate = computed(() => userStore.hasAbilities(ABILITIES.SEND_ESTIMATE))
+const canCreateInvoiceFromEstimate = computed(() => userStore.hasAbilities(ABILITIES.CREATE_INVOICE))
 </script>
 
 <template>
@@ -140,7 +159,16 @@ function hasAtleastOneEstimateAbility(): boolean {
             v-if="hasAtleastOneInvoiceAbility()"
             #cell-actions="{ row }"
           >
-            <InvoiceDropdown :row="row.data" :table="invoiceTableComponent" />
+            <InvoiceDropdown
+              :row="row.data"
+              :table="invoiceTableComponent"
+              :can-edit="canEditInvoice"
+              :can-view="canViewInvoice"
+              :can-create="canCreateInvoice"
+              :can-delete="canDeleteInvoice"
+              :can-send="canSendInvoice"
+              :can-create-payment="canCreatePayment"
+            />
           </template>
         </BaseTable>
       </div>
@@ -189,7 +217,16 @@ function hasAtleastOneEstimateAbility(): boolean {
             v-if="hasAtleastOneEstimateAbility()"
             #cell-actions="{ row }"
           >
-            <EstimateDropdown :row="row.data" :table="estimateTableComponent" />
+            <EstimateDropdown
+              :row="row.data"
+              :table="estimateTableComponent"
+              :can-edit="canEditEstimate"
+              :can-view="canViewEstimate"
+              :can-create="canCreateEstimate"
+              :can-delete="canDeleteEstimate"
+              :can-send="canSendEstimate"
+              :can-create-invoice="canCreateInvoiceFromEstimate"
+            />
           </template>
         </BaseTable>
       </div>
diff --git a/resources/scripts-v2/features/company/dashboard/routes.ts b/resources/scripts-v2/features/company/dashboard/routes.ts
index 1f5db512..719ae0e2 100644
--- a/resources/scripts-v2/features/company/dashboard/routes.ts
+++ b/resources/scripts-v2/features/company/dashboard/routes.ts
@@ -6,6 +6,7 @@ const dashboardRoutes: RouteRecordRaw[] = [
     name: 'dashboard',
     component: () => import('./views/DashboardView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'dashboard',
     },
   },
diff --git a/resources/scripts-v2/features/company/dashboard/views/DashboardView.vue b/resources/scripts-v2/features/company/dashboard/views/DashboardView.vue
index fc00afb7..8d087e1d 100644
--- a/resources/scripts-v2/features/company/dashboard/views/DashboardView.vue
+++ b/resources/scripts-v2/features/company/dashboard/views/DashboardView.vue
@@ -14,9 +14,9 @@ onMounted(() => {
   const meta = route.meta as { ability?: string; isOwner?: boolean }
 
   if (meta.ability && !userStore.hasAbilities(meta.ability)) {
-    router.push({ name: 'account.settings' })
+    router.push({ name: 'settings.account' })
   } else if (meta.isOwner && !userStore.isOwner) {
-    router.push({ name: 'account.settings' })
+    router.push({ name: 'settings.account' })
   }
 })
 </script>
diff --git a/resources/scripts-v2/features/company/estimates/components/EstimateBasicFields.vue b/resources/scripts-v2/features/company/estimates/components/EstimateBasicFields.vue
index d41e889b..3a7d5164 100644
--- a/resources/scripts-v2/features/company/estimates/components/EstimateBasicFields.vue
+++ b/resources/scripts-v2/features/company/estimates/components/EstimateBasicFields.vue
@@ -1,15 +1,14 @@
 <template>
   <div class="md:grid-cols-12 grid-cols-1 md:gap-x-6 mt-6 mb-8 grid gap-y-5">
     <BaseCustomerSelectPopup
-      v-model="estimateStore.newEstimate.customer"
       :valid="v.customer_id"
       :content-loading="isLoading"
       type="estimate"
-      class="col-span-5 pr-0"
+      class="col-span-6 pr-0"
     />
 
     <BaseInputGrid
-      class="col-span-7 rounded-xl shadow border border-line-light bg-surface p-5"
+      class="col-span-6 rounded-xl shadow border border-line-light bg-surface p-5"
     >
       <BaseInputGroup
         :label="$t('reports.estimates.estimate_date')"
diff --git a/resources/scripts-v2/features/company/estimates/components/EstimateDropdown.vue b/resources/scripts-v2/features/company/estimates/components/EstimateDropdown.vue
index 8780b0a0..24750cbf 100644
--- a/resources/scripts-v2/features/company/estimates/components/EstimateDropdown.vue
+++ b/resources/scripts-v2/features/company/estimates/components/EstimateDropdown.vue
@@ -135,6 +135,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useEstimateStore } from '../store'
+import { useDialogStore } from '../../../../stores/dialog.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { Estimate } from '../../../../types/domain/estimate'
 
 interface TableRef {
@@ -163,6 +165,8 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const estimateStore = useEstimateStore()
+const dialogStore = useDialogStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
@@ -177,46 +181,70 @@ const canResendEstimate = computed<boolean>(() => {
   )
 })
 
-async function removeEstimate(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await estimateStore.deleteEstimate({ ids: [props.row.id] })
-  if (res.data) {
-    props.table?.refresh()
-    if (res.data.success) {
-      router.push('/admin/estimates')
+function removeEstimate(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_delete'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const response = await estimateStore.deleteEstimate({ ids: [props.row.id] })
+      if (response.data) {
+        props.table?.refresh()
+        if (response.data.success) {
+          router.push('/admin/estimates')
+        }
+        estimateStore.$patch((state) => {
+          state.selectedEstimates = []
+          state.selectAllField = false
+        })
+      }
     }
-    estimateStore.$patch((state) => {
-      state.selectedEstimates = []
-      state.selectAllField = false
-    })
-  }
+  })
 }
 
-async function convertToInvoice(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_conversion'))
-  if (!confirmed) return
-
-  const res = await estimateStore.convertToInvoice(props.row.id)
-  if (res.data) {
-    router.push(`/admin/invoices/${res.data.data.id}/edit`)
-  }
+function convertToInvoice(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_conversion'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const response = await estimateStore.convertToInvoice(props.row.id)
+      if (response.data) {
+        router.push(`/admin/invoices/${response.data.data.id}/edit`)
+      }
+    }
+  })
 }
 
-async function onMarkAsSent(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_sent'))
-  if (!confirmed) return
-
-  await estimateStore.markAsSent({ id: props.row.id, status: 'SENT' })
-  props.table?.refresh()
+function onMarkAsSent(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_mark_as_sent'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      await estimateStore.markAsSent({ id: props.row.id, status: 'SENT' })
+      props.table?.refresh()
+    }
+  })
 }
 
 function sendEstimate(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('estimates.send_estimate'),
     componentName: 'SendEstimateModal',
     id: props.row.id,
@@ -225,20 +253,38 @@ function sendEstimate(): void {
   })
 }
 
-async function onMarkAsAccepted(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_accepted'))
-  if (!confirmed) return
-
-  await estimateStore.markAsAccepted({ id: props.row.id, status: 'ACCEPTED' })
-  props.table?.refresh()
+function onMarkAsAccepted(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_mark_as_accepted'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      await estimateStore.markAsAccepted({ id: props.row.id, status: 'ACCEPTED' })
+      props.table?.refresh()
+    }
+  })
 }
 
-async function onMarkAsRejected(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_rejected'))
-  if (!confirmed) return
-
-  await estimateStore.markAsRejected({ id: props.row.id, status: 'REJECTED' })
-  props.table?.refresh()
+function onMarkAsRejected(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_mark_as_rejected'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      await estimateStore.markAsRejected({ id: props.row.id, status: 'REJECTED' })
+      props.table?.refresh()
+    }
+  })
 }
 
 function copyPdfUrl(): void {
@@ -253,11 +299,20 @@ function copyPdfUrl(): void {
   })
 }
 
-async function cloneEstimateData(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_clone'))
-  if (!confirmed) return
-
-  const res = await estimateStore.cloneEstimate({ id: props.row.id })
-  router.push(`/admin/estimates/${res.data.data.id}/edit`)
+function cloneEstimateData(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_clone'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const response = await estimateStore.cloneEstimate({ id: props.row.id })
+      router.push(`/admin/estimates/${response.data.data.id}/edit`)
+    }
+  })
 }
 </script>
diff --git a/resources/scripts-v2/features/company/estimates/components/SendEstimateModal.vue b/resources/scripts-v2/features/company/estimates/components/SendEstimateModal.vue
new file mode 100644
index 00000000..fa31f52e
--- /dev/null
+++ b/resources/scripts-v2/features/company/estimates/components/SendEstimateModal.vue
@@ -0,0 +1,321 @@
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closeSendEstimateModal"
+    @open="setInitialData"
+  >
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalStore.title }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="h-6 w-6 text-muted cursor-pointer"
+          @click="closeSendEstimateModal"
+        />
+      </div>
+    </template>
+
+    <form v-if="!isPreview" action="">
+      <div class="px-8 py-8 sm:p-6">
+        <BaseInputGrid layout="one-column">
+          <BaseInputGroup
+            :label="$t('general.from')"
+            required
+            :error="v$.from.$error && v$.from.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="estimateMailForm.from"
+              type="text"
+              :invalid="v$.from.$error"
+              @input="v$.from.$touch()"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.to')"
+            required
+            :error="v$.to.$error && v$.to.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="estimateMailForm.to"
+              type="text"
+              :invalid="v$.to.$error"
+              @input="v$.to.$touch()"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.cc')"
+            :error="v$.cc && v$.cc.$error && v$.cc.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="estimateMailForm.cc"
+              type="email"
+              :invalid="v$.cc && v$.cc.$error"
+              @input="v$.cc && v$.cc.$touch()"
+              placeholder="Optional: CC recipient"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.bcc')"
+            :error="v$.bcc && v$.bcc.$error && v$.bcc.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="estimateMailForm.bcc"
+              type="email"
+              :invalid="v$.bcc && v$.bcc.$error"
+              @input="v$.bcc && v$.bcc.$touch()"
+              placeholder="Optional: BCC recipient"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.subject')"
+            required
+            :error="v$.subject.$error && v$.subject.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="estimateMailForm.subject"
+              type="text"
+              :invalid="v$.subject.$error"
+              @input="v$.subject.$touch()"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.body')"
+            :error="v$.body.$error && v$.body.$errors[0].$message"
+            required
+          >
+            <BaseCustomInput
+              v-model="estimateMailForm.body"
+              :fields="['customer', 'company', 'estimate']"
+            />
+          </BaseInputGroup>
+        </BaseInputGrid>
+      </div>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+      >
+        <BaseButton
+          class="mr-3"
+          variant="primary-outline"
+          type="button"
+          @click="closeSendEstimateModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+
+        <BaseButton
+          :loading="isLoading"
+          :disabled="isLoading"
+          variant="primary"
+          type="button"
+          class="mr-3"
+          @click="submitForm"
+        >
+          <BaseIcon v-if="!isLoading" name="PhotoIcon" class="h-5 mr-2" />
+          {{ $t('general.preview') }}
+        </BaseButton>
+      </div>
+    </form>
+    <div v-else>
+      <div class="my-6 mx-4 border border-line-default relative">
+        <BaseButton
+          class="absolute top-4 right-4"
+          :disabled="isLoading"
+          variant="primary-outline"
+          @click="cancelPreview"
+        >
+          <BaseIcon name="PencilIcon" class="h-5 mr-2" />
+          {{ $t('general.edit') }}
+        </BaseButton>
+        <iframe
+          :src="templateUrl"
+          frameborder="0"
+          class="w-full"
+          style="min-height: 500px"
+        ></iframe>
+      </div>
+
+      <div
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+      >
+        <BaseButton
+          class="mr-3"
+          variant="primary-outline"
+          type="button"
+          @click="closeSendEstimateModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+        <BaseButton
+          :loading="isLoading"
+          :disabled="isLoading"
+          variant="primary"
+          type="button"
+          @click="submitForm"
+        >
+          <BaseIcon
+            v-if="!isLoading"
+            name="PaperAirplaneIcon"
+            class="h-5 mr-2"
+          />
+          {{ $t('general.send') }}
+        </BaseButton>
+      </div>
+    </div>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, email, helpers } from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
+import { useModalStore } from '../../../../stores/modal.store'
+import { useCompanyStore } from '../../../../stores/company.store'
+import { useNotificationStore } from '../../../../stores/notification.store'
+import { useEstimateStore } from '../store'
+
+const modalStore = useModalStore()
+const companyStore = useCompanyStore()
+const notificationStore = useNotificationStore()
+const estimateStore = useEstimateStore()
+
+const { t } = useI18n()
+const isLoading = ref(false)
+const templateUrl = ref<string>('')
+const isPreview = ref(false)
+
+const emit = defineEmits(['update'])
+
+const estimateMailForm = reactive({
+  id: null as number | null,
+  from: null as string | null,
+  to: null as string | null,
+  cc: null as string | null,
+  bcc: null as string | null,
+  subject: t('estimates.new_estimate'),
+  body: null as string | null,
+})
+
+const modalActive = computed(() => {
+  return modalStore.active && modalStore.componentName === 'SendEstimateModal'
+})
+
+const modalData = computed(() => {
+  return modalStore.data as Record<string, unknown> | null
+})
+
+const rules = {
+  from: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  to: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  cc: {
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  bcc: {
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  subject: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  body: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => estimateMailForm),
+)
+
+function cancelPreview() {
+  isPreview.value = false
+}
+
+async function setInitialData() {
+  const admin = await companyStore.fetchBasicMailConfig()
+
+  estimateMailForm.id = modalStore.id as number
+
+  if (admin.data) {
+    estimateMailForm.from = (admin.data as Record<string, string>).from_mail
+  }
+
+  if (modalData.value) {
+    const customer = modalData.value.customer as Record<string, string> | undefined
+    if (customer) {
+      estimateMailForm.to = customer.email
+    }
+  }
+
+  estimateMailForm.body =
+    companyStore.selectedCompanySettings.estimate_mail_body
+  estimateMailForm.subject = t('estimates.new_estimate')
+}
+
+async function submitForm() {
+  v$.value.$touch()
+
+  if (v$.value.$invalid) {
+    return true
+  }
+
+  try {
+    isLoading.value = true
+
+    if (!isPreview.value) {
+      const previewResponse = await estimateStore.previewEstimate(
+        estimateMailForm as unknown as { id: number },
+      )
+      isLoading.value = false
+
+      isPreview.value = true
+      const blob = new Blob([(previewResponse as { data: string }).data], {
+        type: 'text/html',
+      })
+      templateUrl.value = URL.createObjectURL(blob)
+
+      return
+    }
+
+    await estimateStore.sendEstimate(
+      estimateMailForm as unknown as Parameters<typeof estimateStore.sendEstimate>[0],
+    )
+
+    isLoading.value = false
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: 'estimates.estimate_sent_successfully',
+    })
+
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+
+    emit('update')
+    closeSendEstimateModal()
+  } catch (error) {
+    console.error(error)
+    isLoading.value = false
+    notificationStore.showNotification({
+      type: 'error',
+      message: 'estimates.something_went_wrong',
+    })
+  }
+}
+
+function closeSendEstimateModal() {
+  modalStore.closeModal()
+
+  setTimeout(() => {
+    v$.value.$reset()
+    isPreview.value = false
+    templateUrl.value = ''
+  }, 300)
+}
+</script>
diff --git a/resources/scripts-v2/features/company/estimates/routes.ts b/resources/scripts-v2/features/company/estimates/routes.ts
index e1005719..68ab8ac3 100644
--- a/resources/scripts-v2/features/company/estimates/routes.ts
+++ b/resources/scripts-v2/features/company/estimates/routes.ts
@@ -10,6 +10,7 @@ export const estimateRoutes: RouteRecordRaw[] = [
     name: 'estimates.index',
     component: EstimateIndexView,
     meta: {
+      requiresAuth: true,
       ability: 'view-estimate',
       title: 'estimates.title',
     },
@@ -19,6 +20,7 @@ export const estimateRoutes: RouteRecordRaw[] = [
     name: 'estimates.create',
     component: EstimateCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'create-estimate',
       title: 'estimates.new_estimate',
     },
@@ -28,6 +30,7 @@ export const estimateRoutes: RouteRecordRaw[] = [
     name: 'estimates.edit',
     component: EstimateCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'edit-estimate',
       title: 'estimates.edit_estimate',
     },
@@ -37,6 +40,7 @@ export const estimateRoutes: RouteRecordRaw[] = [
     name: 'estimates.view',
     component: EstimateDetailView,
     meta: {
+      requiresAuth: true,
       ability: 'view-estimate',
       title: 'estimates.title',
     },
diff --git a/resources/scripts-v2/features/company/estimates/store.ts b/resources/scripts-v2/features/company/estimates/store.ts
index 192b71f5..8f6c64b6 100644
--- a/resources/scripts-v2/features/company/estimates/store.ts
+++ b/resources/scripts-v2/features/company/estimates/store.ts
@@ -1,4 +1,6 @@
 import { defineStore } from 'pinia'
+import { useNotificationStore } from '../../../stores/notification.store'
+import { useCompanyStore } from '../../../stores/company.store'
 import { estimateService } from '../../../api/services/estimate.service'
 import type {
   EstimateListParams,
@@ -15,6 +17,7 @@ import type { Customer } from '../../../types/domain/customer'
 import type { Note } from '../../../types/domain/note'
 import type { CustomFieldValue } from '../../../types/domain/custom-field'
 import type { DocumentTax, DocumentItem } from '../../shared/document-form/use-document-calculations'
+import { generateClientId } from '../../../utils'
 
 // ----------------------------------------------------------------
 // Stub factories
@@ -22,11 +25,11 @@ import type { DocumentTax, DocumentItem } from '../../shared/document-form/use-d
 
 function createTaxStub(): DocumentTax {
   return {
-    id: crypto.randomUUID(),
+    id: generateClientId(),
     name: '',
     tax_type_id: 0,
     type: 'GENERAL',
-    amount: 0,
+    amount: null,
     percent: null,
     compound_tax: false,
     calculation_type: null,
@@ -36,7 +39,7 @@ function createTaxStub(): DocumentTax {
 
 function createEstimateItemStub(): DocumentItem {
   return {
-    id: crypto.randomUUID(),
+    id: generateClientId(),
     estimate_id: null,
     item_id: null,
     name: '',
@@ -309,6 +312,13 @@ export const useEstimateStore = defineStore('estimate', {
     async addEstimate(data: Record<string, unknown>): Promise<{ data: { data: Estimate } }> {
       const response = await estimateService.create(data as never)
       this.estimates = [...this.estimates, response.data]
+
+      const notificationStore = useNotificationStore()
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'estimates.created_message',
+      })
+
       return { data: response }
     },
 
@@ -342,6 +352,13 @@ export const useEstimateStore = defineStore('estimate', {
       if (pos !== -1) {
         this.estimates[pos] = response.data
       }
+
+      const notificationStore = useNotificationStore()
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'estimates.updated_message',
+      })
+
       return { data: response }
     },
 
@@ -461,14 +478,17 @@ export const useEstimateStore = defineStore('estimate', {
     async fetchEstimateInitialSettings(
       isEdit: boolean,
       routeParams?: { id?: string; query?: Record<string, string> },
-      companySettings?: Record<string, string>,
+      companySettingsParam?: Record<string, string>,
       companyCurrency?: Currency,
       userSettings?: Record<string, string>,
     ): Promise<void> {
       this.isFetchingInitialSettings = true
 
-      if (companyCurrency) {
-        this.newEstimate.selectedCurrency = companyCurrency
+      const companyStore = useCompanyStore()
+      const companySettings = companySettingsParam ?? companyStore.selectedCompanySettings
+
+      if (companyCurrency || companyStore.selectedCompanyCurrency) {
+        this.newEstimate.selectedCurrency = companyCurrency ?? companyStore.selectedCompanyCurrency!
       }
 
       // If customer is specified in route query
diff --git a/resources/scripts-v2/features/company/estimates/views/EstimateCreateView.vue b/resources/scripts-v2/features/company/estimates/views/EstimateCreateView.vue
index 0aa829dd..ad5ddd91 100644
--- a/resources/scripts-v2/features/company/estimates/views/EstimateCreateView.vue
+++ b/resources/scripts-v2/features/company/estimates/views/EstimateCreateView.vue
@@ -85,6 +85,7 @@
               store-prop="newEstimate"
               :is-mark-as-default="isMarkAsDefault"
             />
+            <SelectTemplateModal />
           </div>
 
           <DocumentTotals
@@ -104,6 +105,7 @@
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import cloneDeep from 'lodash/cloneDeep'
 import {
   required,
   maxLength,
@@ -119,6 +121,7 @@ import {
   DocumentTotals,
   DocumentNotes,
   TemplateSelectButton,
+  SelectTemplateModal,
 } from '../../../shared/document-form'
 
 const estimateStore = useEstimateStore()
@@ -130,7 +133,7 @@ const estimateValidationScope = 'newEstimate'
 const isSaving = ref<boolean>(false)
 const isMarkAsDefault = ref<boolean>(false)
 
-const estimateNoteFieldList = ref<Record<string, unknown> | null>(null)
+const estimateNoteFieldList = ref<string[]>(['customer', 'company', 'estimate'])
 
 const isLoadingContent = computed<boolean>(
   () => estimateStore.isFetchingInitialSettings,
@@ -156,11 +159,7 @@ const rules = {
     required: helpers.withMessage(t('validation.required'), required),
   },
   exchange_rate: {
-    required: requiredIf(() => {
-      helpers.withMessage(t('validation.required'), required)
-      return estimateStore.showExchangeRate
-    }),
-    decimal: helpers.withMessage(t('validation.valid_exchange_rate'), decimal),
+    required: requiredIf(() => estimateStore.showExchangeRate),
   },
 }
 
@@ -193,13 +192,16 @@ async function submitForm(): Promise<void> {
   v$.value.$touch()
 
   if (v$.value.$invalid) {
+    console.log('Estimate form invalid. Errors:', JSON.stringify(
+      v$.value.$errors.map((e: { $property: string; $message: string }) => `${e.$property}: ${e.$message}`)
+    ))
     return
   }
 
   isSaving.value = true
 
   const data: Record<string, unknown> = {
-    ...structuredClone(estimateStore.newEstimate),
+    ...cloneDeep(estimateStore.newEstimate),
     sub_total: estimateStore.getSubTotal,
     total: estimateStore.getTotal,
     tax: estimateStore.getTotalTax,
diff --git a/resources/scripts-v2/features/company/estimates/views/EstimateDetailView.vue b/resources/scripts-v2/features/company/estimates/views/EstimateDetailView.vue
index 5734d651..c7bd0de0 100644
--- a/resources/scripts-v2/features/company/estimates/views/EstimateDetailView.vue
+++ b/resources/scripts-v2/features/company/estimates/views/EstimateDetailView.vue
@@ -191,12 +191,9 @@
     </div>
 
     <!-- PDF Preview -->
-    <div class="flex flex-col min-h-0 mt-8 overflow-hidden" style="height: 75vh">
-      <iframe
-        :src="shareableLink"
-        class="flex-1 border border-gray-400 border-solid rounded-xl bg-surface frame-style"
-      />
-    </div>
+    <BasePdfPreview :src="shareableLink" />
+
+    <SendEstimateModal @update="updateSentEstimate" />
   </BasePage>
 </template>
 
@@ -206,7 +203,11 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useEstimateStore } from '../store'
 import EstimateDropdown from '../components/EstimateDropdown.vue'
+import SendEstimateModal from '../components/SendEstimateModal.vue'
 import LoadingIcon from '@v2/components/icons/LoadingIcon.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useDialogStore } from '../../../../stores/dialog.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { Estimate } from '../../../../types/domain/estimate'
 
 interface Props {
@@ -227,10 +228,48 @@ const props = withDefaults(defineProps<Props>(), {
   canCreateInvoice: false,
 })
 
+const ABILITIES = {
+  EDIT: 'edit-estimate',
+  VIEW: 'view-estimate',
+  CREATE: 'create-estimate',
+  DELETE: 'delete-estimate',
+  SEND: 'send-estimate',
+  CREATE_INVOICE: 'create-invoice',
+} as const
+
 const estimateStore = useEstimateStore()
+const userStore = useUserStore()
+const dialogStore = useDialogStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canView = computed<boolean>(() => {
+  return props.canView || userStore.hasAbilities(ABILITIES.VIEW)
+})
+
+const canCreate = computed<boolean>(() => {
+  return props.canCreate || userStore.hasAbilities(ABILITIES.CREATE)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
+const canSend = computed<boolean>(() => {
+  return props.canSend || userStore.hasAbilities(ABILITIES.SEND)
+})
+
+const canCreateInvoice = computed<boolean>(() => {
+  return (
+    props.canCreateInvoice || userStore.hasAbilities(ABILITIES.CREATE_INVOICE)
+  )
+})
+
 const estimateData = ref<Estimate | null>(null)
 const isMarkAsSent = ref<boolean>(false)
 const isLoading = ref<boolean>(false)
@@ -373,29 +412,36 @@ function sortData(): void {
   onSearched()
 }
 
-async function onMarkAsSent(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_sent'))
-  if (!confirmed) return
-
-  isMarkAsSent.value = false
-  await estimateStore.markAsSent({
-    id: estimateData.value!.id,
-    status: 'SENT',
+function onMarkAsSent(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_mark_as_sent'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      isMarkAsSent.value = false
+      await estimateStore.markAsSent({
+        id: estimateData.value!.id,
+        status: 'SENT',
+      })
+      estimateData.value!.status = 'SENT' as Estimate['status']
+      isMarkAsSent.value = true
+      isMarkAsSent.value = false
+    }
   })
-  estimateData.value!.status = 'SENT' as Estimate['status']
-  isMarkAsSent.value = true
-  isMarkAsSent.value = false
 }
 
 function onSendEstimate(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('estimates.send_estimate'),
     componentName: 'SendEstimateModal',
     id: estimateData.value!.id,
     data: estimateData.value,
+    refreshData: () => loadEstimate(),
   })
 }
 
diff --git a/resources/scripts-v2/features/company/estimates/views/EstimateIndexView.vue b/resources/scripts-v2/features/company/estimates/views/EstimateIndexView.vue
index 59332e00..86ccd2ba 100644
--- a/resources/scripts-v2/features/company/estimates/views/EstimateIndexView.vue
+++ b/resources/scripts-v2/features/company/estimates/views/EstimateIndexView.vue
@@ -113,9 +113,9 @@
     <!-- Table -->
     <div v-show="!showEmptyScreen" class="relative table-container">
       <div
-        class="relative flex items-center justify-between h-10 mt-5 list-none border-b-2 border-line-default border-solid"
+        class="relative flex items-center justify-between mt-5 list-none"
       >
-        <BaseTabGroup class="-mb-5" @change="setStatusFilter">
+        <BaseTabGroup @change="setStatusFilter">
           <BaseTab :title="$t('general.all')" filter="" />
           <BaseTab :title="$t('general.draft')" filter="DRAFT" />
           <BaseTab :title="$t('general.sent')" filter="SENT" />
@@ -147,7 +147,7 @@
         :columns="estimateColumns"
         :placeholder-count="estimateStore.totalEstimateCount >= 20 ? 10 : 5"
         :key="tableKey"
-        class="mt-10"
+        class="mt-4"
       >
         <template #header>
           <div class="absolute items-center left-6 top-2.5 select-none">
@@ -183,7 +183,14 @@
         </template>
 
         <template #cell-name="{ row }">
-          <BaseText :text="row.data.customer.name" />
+          <router-link
+            v-if="row.data.customer?.id"
+            :to="`/admin/customers/${row.data.customer.id}/view`"
+            class="font-medium text-primary-500 hover:text-primary-600"
+          >
+            {{ row.data.customer.name }}
+          </router-link>
+          <span v-else>{{ row.data.customer?.name ?? '-' }}</span>
         </template>
 
         <template #cell-status="{ row }">
@@ -221,6 +228,8 @@ import { useI18n } from 'vue-i18n'
 import { debouncedWatch } from '@vueuse/core'
 import { useEstimateStore } from '../store'
 import EstimateDropdown from '../components/EstimateDropdown.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useDialogStore } from '../../../../stores/dialog.store'
 import type { Estimate } from '../../../../types/domain/estimate'
 
 interface Props {
@@ -239,7 +248,17 @@ const props = withDefaults(defineProps<Props>(), {
   canSend: false,
 })
 
+const ABILITIES = {
+  CREATE: 'create-estimate',
+  EDIT: 'edit-estimate',
+  VIEW: 'view-estimate',
+  DELETE: 'delete-estimate',
+  SEND: 'send-estimate',
+} as const
+
 const estimateStore = useEstimateStore()
+const userStore = useUserStore()
+const dialogStore = useDialogStore()
 const { t } = useI18n()
 
 const tableRef = ref<{ refresh: () => void } | null>(null)
@@ -289,8 +308,28 @@ const selectField = computed<number[]>({
   },
 })
 
+const canCreate = computed<boolean>(() => {
+  return props.canCreate || userStore.hasAbilities(ABILITIES.CREATE)
+})
+
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canView = computed<boolean>(() => {
+  return props.canView || userStore.hasAbilities(ABILITIES.VIEW)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
+const canSend = computed<boolean>(() => {
+  return props.canSend || userStore.hasAbilities(ABILITIES.SEND)
+})
+
 const hasAtLeastOneAbility = computed<boolean>(() => {
-  return props.canCreate || props.canEdit || props.canView || props.canSend
+  return canCreate.value || canEdit.value || canView.value || canSend.value
 })
 
 interface TableColumn {
@@ -432,18 +471,27 @@ function toggleFilter(): void {
   showFilters.value = !showFilters.value
 }
 
-async function removeMultipleEstimates(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await estimateStore.deleteMultipleEstimates()
-  if (res.data) {
-    refreshTable()
-    estimateStore.$patch((state) => {
-      state.selectedEstimates = []
-      state.selectAllField = false
-    })
-  }
+function removeMultipleEstimates(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_delete'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const response = await estimateStore.deleteMultipleEstimates()
+      if (response.data) {
+        refreshTable()
+        estimateStore.$patch((state) => {
+          state.selectedEstimates = []
+          state.selectAllField = false
+        })
+      }
+    }
+  })
 }
 
 function setActiveTab(val: string): void {
diff --git a/resources/scripts-v2/features/company/expenses/components/ExpenseCategoryDropdown.vue b/resources/scripts-v2/features/company/expenses/components/ExpenseCategoryDropdown.vue
index b2bfe0eb..51212f48 100644
--- a/resources/scripts-v2/features/company/expenses/components/ExpenseCategoryDropdown.vue
+++ b/resources/scripts-v2/features/company/expenses/components/ExpenseCategoryDropdown.vue
@@ -26,6 +26,8 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { useDialogStore } from '../../../../stores/dialog.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { ExpenseCategory } from '../../../../types/domain/expense'
 
 interface TableRef {
@@ -48,12 +50,11 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { t } = useI18n()
+const dialogStore = useDialogStore()
+const modalStore = useModalStore()
 
 function editExpenseCategory(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('settings.expense_category.edit_category'),
     componentName: 'CategoryModal',
     refreshData: props.loadData,
@@ -61,22 +62,31 @@ function editExpenseCategory(): void {
   })
 }
 
-async function removeExpenseCategory(): Promise<void> {
-  const confirmed = window.confirm(
-    t('settings.expense_category.confirm_delete'),
-  )
-  if (!confirmed) return
-
-  try {
-    const { expenseService } = await import(
-      '../../../../api/services/expense.service'
-    )
-    const response = await expenseService.deleteCategory(props.row.id)
-    if (response.success) {
-      props.loadData?.()
-    }
-  } catch {
-    props.loadData?.()
-  }
+function removeExpenseCategory(): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('settings.expense_category.confirm_delete'),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        try {
+          const { expenseService } = await import(
+            '../../../../api/services/expense.service'
+          )
+          const response = await expenseService.deleteCategory(props.row.id)
+          if (response.success) {
+            props.loadData?.()
+          }
+        } catch {
+          props.loadData?.()
+        }
+      }
+    })
 }
 </script>
diff --git a/resources/scripts-v2/features/company/expenses/components/ExpenseDropdown.vue b/resources/scripts-v2/features/company/expenses/components/ExpenseDropdown.vue
index ba19313a..59fb4573 100644
--- a/resources/scripts-v2/features/company/expenses/components/ExpenseDropdown.vue
+++ b/resources/scripts-v2/features/company/expenses/components/ExpenseDropdown.vue
@@ -29,6 +29,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { useExpenseStore } from '../store'
+import { useDialogStore } from '../../../../stores/dialog.store'
 import type { Expense } from '../../../../types/domain/expense'
 
 interface TableRef {
@@ -51,15 +52,27 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const expenseStore = useExpenseStore()
+const dialogStore = useDialogStore()
 const { t } = useI18n()
 
-async function removeExpense(): Promise<void> {
-  const confirmed = window.confirm(t('expenses.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await expenseStore.deleteExpense({ ids: [props.row.id] })
-  if (res) {
-    props.loadData?.()
-  }
+function removeExpense(): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('expenses.confirm_delete'),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        const response = await expenseStore.deleteExpense({ ids: [props.row.id] })
+        if (response) {
+          props.loadData?.()
+        }
+      }
+    })
 }
 </script>
diff --git a/resources/scripts-v2/features/company/expenses/routes.ts b/resources/scripts-v2/features/company/expenses/routes.ts
index 5be9165b..8549ae38 100644
--- a/resources/scripts-v2/features/company/expenses/routes.ts
+++ b/resources/scripts-v2/features/company/expenses/routes.ts
@@ -9,6 +9,7 @@ export const expenseRoutes: RouteRecordRaw[] = [
     name: 'expenses.index',
     component: ExpenseIndexView,
     meta: {
+      requiresAuth: true,
       ability: 'view-expense',
       title: 'expenses.title',
     },
@@ -18,6 +19,7 @@ export const expenseRoutes: RouteRecordRaw[] = [
     name: 'expenses.create',
     component: ExpenseCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'create-expense',
       title: 'expenses.new_expense',
     },
@@ -27,6 +29,7 @@ export const expenseRoutes: RouteRecordRaw[] = [
     name: 'expenses.edit',
     component: ExpenseCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'edit-expense',
       title: 'expenses.edit_expense',
     },
diff --git a/resources/scripts-v2/features/company/expenses/views/ExpenseIndexView.vue b/resources/scripts-v2/features/company/expenses/views/ExpenseIndexView.vue
index 0928f1c9..f1a782fb 100644
--- a/resources/scripts-v2/features/company/expenses/views/ExpenseIndexView.vue
+++ b/resources/scripts-v2/features/company/expenses/views/ExpenseIndexView.vue
@@ -182,9 +182,14 @@
         </template>
 
         <template #cell-user_name="{ row }">
-          <BaseText
-            :text="row.data.customer ? row.data.customer.name : '-'"
-          />
+          <router-link
+            v-if="row.data.customer?.id"
+            :to="`/admin/customers/${row.data.customer.id}/view`"
+            class="font-medium text-primary-500 hover:text-primary-600"
+          >
+            {{ row.data.customer.name }}
+          </router-link>
+          <span v-else>-</span>
         </template>
 
         <template #cell-notes="{ row }">
@@ -215,6 +220,8 @@ import { useI18n } from 'vue-i18n'
 import { debouncedWatch } from '@vueuse/core'
 import { useExpenseStore } from '../store'
 import ExpenseDropdown from '../components/ExpenseDropdown.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useDialogStore } from '../../../../stores/dialog.store'
 import type { Expense, ExpenseCategory } from '../../../../types/domain/expense'
 
 interface Props {
@@ -229,15 +236,35 @@ const props = withDefaults(defineProps<Props>(), {
   canDelete: false,
 })
 
+const ABILITIES = {
+  CREATE: 'create-expense',
+  EDIT: 'edit-expense',
+  DELETE: 'delete-expense',
+} as const
+
 const expenseStore = useExpenseStore()
+const userStore = useUserStore()
+const dialogStore = useDialogStore()
 const { t } = useI18n()
 
 const tableRef = ref<{ refresh: () => void } | null>(null)
 const showFilters = ref<boolean>(false)
 const isFetchingInitialData = ref<boolean>(true)
 
+const canCreate = computed<boolean>(() => {
+  return props.canCreate || userStore.hasAbilities(ABILITIES.CREATE)
+})
+
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
 const hasAtLeastOneAbility = computed<boolean>(() => {
-  return props.canDelete || props.canEdit
+  return canDelete.value || canEdit.value
 })
 
 interface ExpenseFilters {
@@ -402,13 +429,24 @@ function toggleFilter(): void {
   showFilters.value = !showFilters.value
 }
 
-async function removeMultipleExpenses(): Promise<void> {
-  const confirmed = window.confirm(t('expenses.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await expenseStore.deleteMultipleExpenses()
-  if (res.data) {
-    refreshTable()
-  }
+function removeMultipleExpenses(): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('expenses.confirm_delete'),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        const response = await expenseStore.deleteMultipleExpenses()
+        if (response.data) {
+          refreshTable()
+        }
+      }
+    })
 }
 </script>
diff --git a/resources/scripts-v2/features/company/invoices/components/InvoiceBasicFields.vue b/resources/scripts-v2/features/company/invoices/components/InvoiceBasicFields.vue
index 1f8726a1..8836c8a6 100644
--- a/resources/scripts-v2/features/company/invoices/components/InvoiceBasicFields.vue
+++ b/resources/scripts-v2/features/company/invoices/components/InvoiceBasicFields.vue
@@ -1,15 +1,21 @@
 <template>
   <div class="grid grid-cols-12 gap-8 mt-6 mb-8">
     <BaseCustomerSelectPopup
-      v-model="invoiceStore.newInvoice.customer"
       :valid="v.customer_id"
       :content-loading="isLoading"
       type="invoice"
-      class="col-span-12 lg:col-span-5 pr-0"
+      class="col-span-12 lg:col-span-6 pr-0"
+    />
+
+    <RecurringFields
+      v-if="isRecurring"
+      :is-loading="isLoading"
+      :is-edit="isEdit"
     />
 
     <BaseInputGrid
-      class="col-span-12 lg:col-span-7 rounded-xl shadow border border-line-light bg-surface p-5"
+      v-else
+      class="col-span-12 lg:col-span-6 rounded-xl shadow border border-line-light bg-surface p-5"
     >
       <BaseInputGroup
         :label="$t('invoices.invoice_date')"
@@ -68,6 +74,7 @@
 import { computed } from 'vue'
 import { ExchangeRateConverter } from '../../../shared/document-form'
 import { useInvoiceStore } from '../store'
+import RecurringFields from './RecurringFields.vue'
 
 interface ValidationField {
   $error: boolean
@@ -79,12 +86,14 @@ interface Props {
   v: Record<string, ValidationField>
   isLoading?: boolean
   isEdit?: boolean
+  isRecurring?: boolean
   companySettings?: Record<string, string>
 }
 
 const props = withDefaults(defineProps<Props>(), {
   isLoading: false,
   isEdit: false,
+  isRecurring: false,
   companySettings: () => ({}),
 })
 
diff --git a/resources/scripts-v2/features/company/invoices/components/InvoiceDropdown.vue b/resources/scripts-v2/features/company/invoices/components/InvoiceDropdown.vue
index 587fa307..a5c6cb9b 100644
--- a/resources/scripts-v2/features/company/invoices/components/InvoiceDropdown.vue
+++ b/resources/scripts-v2/features/company/invoices/components/InvoiceDropdown.vue
@@ -65,7 +65,7 @@
     <!-- Record Payment -->
     <router-link :to="`/admin/payments/${row.id}/create`">
       <BaseDropdownItem
-        v-if="row.status === 'SENT' && !isDetailView"
+        v-if="row.status === 'SENT' && !isDetailView && canCreatePayment"
       >
         <BaseIcon
           name="CreditCardIcon"
@@ -109,6 +109,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useInvoiceStore } from '../store'
+import { useDialogStore } from '../../../../stores/dialog.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { Invoice } from '../../../../types/domain/invoice'
 
 interface TableRef {
@@ -124,6 +126,7 @@ interface Props {
   canCreate?: boolean
   canDelete?: boolean
   canSend?: boolean
+  canCreatePayment?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -134,9 +137,12 @@ const props = withDefaults(defineProps<Props>(), {
   canCreate: false,
   canDelete: false,
   canSend: false,
+  canCreatePayment: false,
 })
 
 const invoiceStore = useInvoiceStore()
+const dialogStore = useDialogStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
@@ -158,43 +164,66 @@ const canSendInvoice = computed<boolean>(() => {
   )
 })
 
-async function removeInvoice(): Promise<void> {
-  // In v2, use a dialog composable or store
-  const confirmed = window.confirm(t('invoices.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await invoiceStore.deleteInvoice({ ids: [props.row.id] })
-  if (res.data.success) {
-    router.push('/admin/invoices')
-    props.table?.refresh()
-    invoiceStore.$patch((state) => {
-      state.selectedInvoices = []
-      state.selectAllField = false
-    })
-  }
+function removeInvoice(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('invoices.confirm_delete'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const response = await invoiceStore.deleteInvoice({ ids: [props.row.id] })
+      if (response.data.success) {
+        router.push('/admin/invoices')
+        props.table?.refresh()
+        invoiceStore.$patch((state) => {
+          state.selectedInvoices = []
+          state.selectAllField = false
+        })
+      }
+    }
+  })
 }
 
-async function cloneInvoiceData(): Promise<void> {
-  const confirmed = window.confirm(t('invoices.confirm_clone'))
-  if (!confirmed) return
-
-  const res = await invoiceStore.cloneInvoice({ id: props.row.id })
-  router.push(`/admin/invoices/${res.data.data.id}/edit`)
+function cloneInvoiceData(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('invoices.confirm_clone'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const response = await invoiceStore.cloneInvoice({ id: props.row.id })
+      router.push(`/admin/invoices/${response.data.data.id}/edit`)
+    }
+  })
 }
 
-async function onMarkAsSent(): Promise<void> {
-  const confirmed = window.confirm(t('invoices.invoice_mark_as_sent'))
-  if (!confirmed) return
-
-  await invoiceStore.markAsSent({ id: props.row.id, status: 'SENT' })
-  props.table?.refresh()
+function onMarkAsSent(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('invoices.invoice_mark_as_sent'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      await invoiceStore.markAsSent({ id: props.row.id, status: 'SENT' })
+      props.table?.refresh()
+    }
+  })
 }
 
 function sendInvoice(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('invoices.send_invoice'),
     componentName: 'SendInvoiceModal',
     id: props.row.id,
diff --git a/resources/scripts-v2/features/company/invoices/components/RecurringFields.vue b/resources/scripts-v2/features/company/invoices/components/RecurringFields.vue
new file mode 100644
index 00000000..01f8a2be
--- /dev/null
+++ b/resources/scripts-v2/features/company/invoices/components/RecurringFields.vue
@@ -0,0 +1,234 @@
+<template>
+  <div
+    class="col-span-12 lg:col-span-6 rounded-xl shadow border border-line-light bg-surface p-5"
+  >
+    <!-- Send Automatically -->
+    <BaseSwitchSection
+      v-model="recurringInvoiceStore.newRecurringInvoice.send_automatically"
+      :title="$t('recurring_invoices.send_automatically')"
+      :description="$t('recurring_invoices.send_automatically_desc')"
+    />
+
+    <BaseDivider class="my-4" />
+
+    <!-- Schedule -->
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('recurring_invoices.starts_at')"
+        :content-loading="isLoading"
+        required
+      >
+        <BaseDatePicker
+          v-model="recurringInvoiceStore.newRecurringInvoice.starts_at"
+          :content-loading="isLoading"
+          :calendar-button="true"
+          calendar-button-icon="calendar"
+          @change="getNextInvoiceDate()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('recurring_invoices.next_invoice_date')"
+        :content-loading="isLoading"
+      >
+        <BaseDatePicker
+          v-model="recurringInvoiceStore.newRecurringInvoice.next_invoice_at"
+          :content-loading="isLoading"
+          :calendar-button="true"
+          :disabled="true"
+          :loading="isLoadingNextDate"
+          calendar-button-icon="calendar"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('recurring_invoices.frequency.select_frequency')"
+        required
+        :content-loading="isLoading"
+      >
+        <BaseMultiselect
+          v-model="recurringInvoiceStore.newRecurringInvoice.selectedFrequency"
+          :content-loading="isLoading"
+          :options="recurringInvoiceStore.frequencies"
+          label="label"
+          object
+          @change="getNextInvoiceDate"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        v-if="isCustomFrequency"
+        :label="$t('recurring_invoices.frequency.title')"
+        :content-loading="isLoading"
+        required
+      >
+        <BaseInput
+          v-model="recurringInvoiceStore.newRecurringInvoice.frequency"
+          :content-loading="isLoading"
+          :disabled="!isCustomFrequency"
+          :loading="isLoadingNextDate"
+          @update:model-value="debounceNextDate"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('recurring_invoices.limit_by')"
+        :content-loading="isLoading"
+        required
+      >
+        <BaseMultiselect
+          v-model="recurringInvoiceStore.newRecurringInvoice.limit_by"
+          :content-loading="isLoading"
+          :options="limits"
+          label="label"
+          value-prop="value"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        v-if="hasLimitBy('DATE')"
+        :label="$t('recurring_invoices.limit_date')"
+        :content-loading="isLoading"
+        :required="hasLimitBy('DATE')"
+      >
+        <BaseDatePicker
+          v-model="recurringInvoiceStore.newRecurringInvoice.limit_date"
+          :content-loading="isLoading"
+          calendar-button-icon="calendar"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        v-if="hasLimitBy('COUNT')"
+        :label="$t('recurring_invoices.count')"
+        :content-loading="isLoading"
+        :required="hasLimitBy('COUNT')"
+      >
+        <BaseInput
+          v-model="recurringInvoiceStore.newRecurringInvoice.limit_count"
+          :content-loading="isLoading"
+          type="number"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('recurring_invoices.status')"
+        required
+        :content-loading="isLoading"
+      >
+        <BaseMultiselect
+          v-model="recurringInvoiceStore.newRecurringInvoice.status"
+          :options="statusOptions"
+          :content-loading="isLoading"
+          :placeholder="$t('recurring_invoices.select_a_status')"
+          value-prop="value"
+          label="key"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useDebounceFn } from '@vueuse/core'
+import { useRecurringInvoiceStore } from '@v2/features/company/recurring-invoices/store'
+import type { FrequencyOption } from '@v2/features/company/recurring-invoices/store'
+
+interface Props {
+  isLoading?: boolean
+  isEdit?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLoading: false,
+  isEdit: false,
+})
+
+const recurringInvoiceStore = useRecurringInvoiceStore()
+const { t } = useI18n()
+
+const isLoadingNextDate = ref<boolean>(false)
+
+interface LimitOption {
+  label: string
+  value: string
+}
+
+const limits = reactive<LimitOption[]>([
+  { label: t('recurring_invoices.limit.none'), value: 'NONE' },
+  { label: t('recurring_invoices.limit.date'), value: 'DATE' },
+  { label: t('recurring_invoices.limit.count'), value: 'COUNT' },
+])
+
+interface StatusOption {
+  key: string
+  value: string
+}
+
+const statusOptions = computed<StatusOption[]>(() => {
+  if (props.isEdit) {
+    return [
+      { key: t('recurring_invoices.active'), value: 'ACTIVE' },
+      { key: t('recurring_invoices.on_hold'), value: 'ON_HOLD' },
+      { key: t('recurring_invoices.completed'), value: 'COMPLETED' },
+    ]
+  }
+  return [
+    { key: t('recurring_invoices.active'), value: 'ACTIVE' },
+    { key: t('recurring_invoices.on_hold'), value: 'ON_HOLD' },
+  ]
+})
+
+const isCustomFrequency = computed<boolean>(() => {
+  return (
+    recurringInvoiceStore.newRecurringInvoice.selectedFrequency != null &&
+    recurringInvoiceStore.newRecurringInvoice.selectedFrequency.value ===
+      'CUSTOM'
+  )
+})
+
+watch(
+  () => recurringInvoiceStore.newRecurringInvoice.selectedFrequency,
+  (newValue: FrequencyOption | null) => {
+    if (!recurringInvoiceStore.isFetchingInitialSettings) {
+      if (newValue && newValue.value !== 'CUSTOM') {
+        recurringInvoiceStore.newRecurringInvoice.frequency = newValue.value
+      } else {
+        recurringInvoiceStore.newRecurringInvoice.frequency = null
+      }
+    }
+  },
+)
+
+onMounted(() => {
+  getNextInvoiceDate()
+})
+
+function hasLimitBy(limitBy: string): boolean {
+  return recurringInvoiceStore.newRecurringInvoice.limit_by === limitBy
+}
+
+const debounceNextDate = useDebounceFn(() => {
+  getNextInvoiceDate()
+}, 500)
+
+async function getNextInvoiceDate(): Promise<void> {
+  const val = recurringInvoiceStore.newRecurringInvoice.frequency
+  if (!val) return
+
+  isLoadingNextDate.value = true
+
+  try {
+    await recurringInvoiceStore.fetchRecurringInvoiceFrequencyDate({
+      starts_at: recurringInvoiceStore.newRecurringInvoice.starts_at,
+      frequency: val,
+    })
+  } catch {
+    // Error handled in store
+  } finally {
+    isLoadingNextDate.value = false
+  }
+}
+</script>
diff --git a/resources/scripts-v2/features/company/invoices/components/SendInvoiceModal.vue b/resources/scripts-v2/features/company/invoices/components/SendInvoiceModal.vue
new file mode 100644
index 00000000..f3e4440f
--- /dev/null
+++ b/resources/scripts-v2/features/company/invoices/components/SendInvoiceModal.vue
@@ -0,0 +1,378 @@
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closeModal"
+    @open="setInitialData"
+  >
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalTitle }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="w-6 h-6 text-muted cursor-pointer"
+          @click="closeModal"
+        />
+      </div>
+    </template>
+
+    <form v-if="!isPreview" @submit.prevent>
+      <div class="px-8 py-8 sm:p-6">
+        <BaseInputGrid layout="one-column" class="col-span-7">
+          <BaseInputGroup
+            :label="$t('general.from')"
+            required
+            :error="
+              v$.from.$error ? (v$.from.$errors[0]?.$message as string) : undefined
+            "
+          >
+            <BaseInput
+              v-model="form.from"
+              type="text"
+              :invalid="v$.from.$error"
+              @input="v$.from.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('general.to')"
+            required
+            :error="
+              v$.to.$error ? (v$.to.$errors[0]?.$message as string) : undefined
+            "
+          >
+            <BaseInput
+              v-model="form.to"
+              type="text"
+              :invalid="v$.to.$error"
+              @input="v$.to.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('general.cc')"
+            :error="
+              v$.cc.$error ? (v$.cc.$errors[0]?.$message as string) : undefined
+            "
+          >
+            <BaseInput
+              v-model="form.cc"
+              type="text"
+              :invalid="v$.cc.$error"
+              @input="v$.cc.$touch()"
+              placeholder="Optional: CC recipient"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('general.bcc')"
+            :error="
+              v$.bcc.$error ? (v$.bcc.$errors[0]?.$message as string) : undefined
+            "
+          >
+            <BaseInput
+              v-model="form.bcc"
+              type="text"
+              :invalid="v$.bcc.$error"
+              @input="v$.bcc.$touch()"
+              placeholder="Optional: BCC recipient"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('general.subject')"
+            required
+            :error="
+              v$.subject.$error
+                ? (v$.subject.$errors[0]?.$message as string)
+                : undefined
+            "
+          >
+            <BaseInput
+              v-model="form.subject"
+              type="text"
+              :invalid="v$.subject.$error"
+              @input="v$.subject.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('general.body')"
+            required
+            :error="
+              v$.body.$error ? (v$.body.$errors[0]?.$message as string) : undefined
+            "
+          >
+            <BaseCustomInput
+              v-model="form.body"
+              :fields="invoiceMailFields"
+            />
+          </BaseInputGroup>
+        </BaseInputGrid>
+      </div>
+
+      <div
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+      >
+        <BaseButton
+          class="mr-3"
+          variant="primary-outline"
+          type="button"
+          @click="closeModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+
+        <BaseButton
+          :loading="isLoading"
+          :disabled="isLoading"
+          variant="primary"
+          type="button"
+          class="mr-3"
+          @click="submitForm"
+        >
+          <template #left="slotProps">
+            <BaseIcon
+              v-if="!isLoading"
+              :class="slotProps.class"
+              name="PhotoIcon"
+            />
+          </template>
+          {{ $t('general.preview') }}
+        </BaseButton>
+      </div>
+    </form>
+
+    <div v-else>
+      <div class="my-6 mx-4 border border-line-default relative">
+        <BaseButton
+          class="absolute top-4 right-4"
+          :disabled="isLoading"
+          variant="primary-outline"
+          @click="cancelPreview"
+        >
+          <BaseIcon name="PencilIcon" class="h-5 mr-2" />
+          {{ $t('general.edit') }}
+        </BaseButton>
+
+        <iframe
+          :src="templateUrl"
+          frameborder="0"
+          class="w-full"
+          style="min-height: 500px"
+        />
+      </div>
+
+      <div
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+      >
+        <BaseButton
+          class="mr-3"
+          variant="primary-outline"
+          type="button"
+          @click="closeModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+
+        <BaseButton
+          :loading="isLoading"
+          :disabled="isLoading"
+          variant="primary"
+          type="button"
+          @click="submitForm"
+        >
+          <BaseIcon
+            v-if="!isLoading"
+            name="PaperAirplaneIcon"
+            class="h-5 mr-2"
+          />
+          {{ $t('general.send') }}
+        </BaseButton>
+      </div>
+    </div>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useVuelidate } from '@vuelidate/core'
+import { required, email, helpers } from '@vuelidate/validators'
+import { useModalStore } from '../../../../stores/modal.store'
+import { useCompanyStore } from '../../../../stores/company.store'
+import { useNotificationStore } from '../../../../stores/notification.store'
+import { useInvoiceStore } from '../store'
+
+interface InvoiceMailForm {
+  id: number | string | null
+  from: string | null
+  to: string | null
+  cc: string | null
+  bcc: string | null
+  subject: string
+  body: string | null
+}
+
+type FieldType = 'customer' | 'customerCustom' | 'invoice' | 'invoiceCustom' | 'company'
+
+const modalStore = useModalStore()
+const companyStore = useCompanyStore()
+const notificationStore = useNotificationStore()
+const invoiceStore = useInvoiceStore()
+const { t } = useI18n()
+
+const isLoading = ref<boolean>(false)
+const templateUrl = ref<string>('')
+const isPreview = ref<boolean>(false)
+
+const invoiceMailFields = ref<FieldType[]>([
+  'customer',
+  'customerCustom',
+  'invoice',
+  'invoiceCustom',
+  'company',
+])
+
+const form = reactive<InvoiceMailForm>({
+  id: null,
+  from: null,
+  to: null,
+  cc: null,
+  bcc: null,
+  subject: t('invoices.new_invoice'),
+  body: null,
+})
+
+const modalActive = computed<boolean>(() => {
+  return modalStore.active && modalStore.componentName === 'SendInvoiceModal'
+})
+
+const modalTitle = computed<string>(() => {
+  return modalStore.title
+})
+
+const modalData = computed<Record<string, unknown> | null>(() => {
+  return modalStore.data as Record<string, unknown> | null
+})
+
+const rules = computed(() => ({
+  from: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  to: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  cc: {
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  bcc: {
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  subject: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  body: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, form)
+
+function cancelPreview(): void {
+  isPreview.value = false
+}
+
+async function setInitialData(): Promise<void> {
+  try {
+    const admin = await companyStore.fetchBasicMailConfig()
+
+    form.id = modalStore.id
+
+    if (admin?.data) {
+      form.from = (admin.data as Record<string, unknown>).from_mail as string
+    }
+
+    if (modalData.value?.customer) {
+      const customer = modalData.value.customer as Record<string, unknown>
+      form.to = (customer.email as string) ?? null
+    }
+
+    form.body = companyStore.selectedCompanySettings.invoice_mail_body ?? null
+  } catch {
+    // Silently handle initialization errors
+  }
+}
+
+async function submitForm(): Promise<void> {
+  v$.value.$touch()
+
+  if (v$.value.$invalid) {
+    return
+  }
+
+  try {
+    isLoading.value = true
+
+    if (!isPreview.value) {
+      const previewResponse = await invoiceStore.previewInvoice({
+        id: form.id as number,
+        from: form.from,
+        to: form.to,
+        cc: form.cc,
+        bcc: form.bcc,
+        subject: form.subject,
+        body: form.body,
+      })
+      isLoading.value = false
+
+      isPreview.value = true
+      const blob = new Blob(
+        [(previewResponse as { data: string }).data ?? previewResponse],
+        { type: 'text/html' },
+      )
+      templateUrl.value = URL.createObjectURL(blob)
+      return
+    }
+
+    await invoiceStore.sendInvoice({
+      id: form.id as number,
+      from: form.from,
+      to: form.to,
+      cc: form.cc,
+      bcc: form.bcc,
+      subject: form.subject,
+      body: form.body,
+    })
+
+    isLoading.value = false
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: 'invoices.invoice_sent_successfully',
+    })
+
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+
+    closeModal()
+  } catch {
+    isLoading.value = false
+    notificationStore.showNotification({
+      type: 'error',
+      message: t('invoices.something_went_wrong'),
+    })
+  }
+}
+
+function closeModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    v$.value.$reset()
+    isPreview.value = false
+    templateUrl.value = ''
+  }, 300)
+}
+</script>
diff --git a/resources/scripts-v2/features/company/invoices/routes.ts b/resources/scripts-v2/features/company/invoices/routes.ts
index 27bbfb35..75b2b0a0 100644
--- a/resources/scripts-v2/features/company/invoices/routes.ts
+++ b/resources/scripts-v2/features/company/invoices/routes.ts
@@ -10,6 +10,7 @@ export const invoiceRoutes: RouteRecordRaw[] = [
     name: 'invoices.index',
     component: InvoiceIndexView,
     meta: {
+      requiresAuth: true,
       ability: 'view-invoice',
       title: 'invoices.title',
     },
@@ -19,6 +20,7 @@ export const invoiceRoutes: RouteRecordRaw[] = [
     name: 'invoices.create',
     component: InvoiceCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'create-invoice',
       title: 'invoices.new_invoice',
     },
@@ -28,6 +30,7 @@ export const invoiceRoutes: RouteRecordRaw[] = [
     name: 'invoices.edit',
     component: InvoiceCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'edit-invoice',
       title: 'invoices.edit_invoice',
     },
@@ -37,6 +40,7 @@ export const invoiceRoutes: RouteRecordRaw[] = [
     name: 'invoices.view',
     component: InvoiceDetailView,
     meta: {
+      requiresAuth: true,
       ability: 'view-invoice',
       title: 'invoices.title',
     },
diff --git a/resources/scripts-v2/features/company/invoices/store.ts b/resources/scripts-v2/features/company/invoices/store.ts
index 51f2e2c4..90169978 100644
--- a/resources/scripts-v2/features/company/invoices/store.ts
+++ b/resources/scripts-v2/features/company/invoices/store.ts
@@ -1,4 +1,6 @@
 import { defineStore } from 'pinia'
+import { useNotificationStore } from '../../../stores/notification.store'
+import { useCompanyStore } from '../../../stores/company.store'
 import { invoiceService } from '../../../api/services/invoice.service'
 import type {
   InvoiceListParams,
@@ -14,6 +16,7 @@ import type { Customer } from '../../../types/domain/customer'
 import type { Note } from '../../../types/domain/note'
 import type { CustomFieldValue } from '../../../types/domain/custom-field'
 import type { DocumentTax, DocumentItem } from '../../shared/document-form/use-document-calculations'
+import { generateClientId } from '../../../utils'
 
 // ----------------------------------------------------------------
 // Stub factories
@@ -21,11 +24,11 @@ import type { DocumentTax, DocumentItem } from '../../shared/document-form/use-d
 
 function createTaxStub(): DocumentTax {
   return {
-    id: crypto.randomUUID(),
+    id: generateClientId(),
     name: '',
     tax_type_id: 0,
     type: 'GENERAL',
-    amount: 0,
+    amount: null,
     percent: null,
     compound_tax: false,
     calculation_type: null,
@@ -35,7 +38,7 @@ function createTaxStub(): DocumentTax {
 
 function createInvoiceItemStub(): DocumentItem {
   return {
-    id: crypto.randomUUID(),
+    id: generateClientId(),
     invoice_id: null,
     item_id: null,
     name: '',
@@ -219,7 +222,7 @@ export const useInvoiceStore = defineStore('invoice', {
       this.newInvoice = createInvoiceStub()
     },
 
-    async previewInvoice(params: { id: number }): Promise<unknown> {
+    async previewInvoice(params: SendInvoicePayload): Promise<unknown> {
       return invoiceService.sendPreview(params)
     },
 
@@ -305,6 +308,13 @@ export const useInvoiceStore = defineStore('invoice', {
     async addInvoice(data: Record<string, unknown>): Promise<{ data: { data: Invoice } }> {
       const response = await invoiceService.create(data as never)
       this.invoices = [...this.invoices, response.data]
+
+      const notificationStore = useNotificationStore()
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'invoices.created_message',
+      })
+
       return { data: response }
     },
 
@@ -336,6 +346,13 @@ export const useInvoiceStore = defineStore('invoice', {
       if (pos !== -1) {
         this.invoices[pos] = response.data
       }
+
+      const notificationStore = useNotificationStore()
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'invoices.updated_message',
+      })
+
       return { data: response }
     },
 
@@ -440,14 +457,17 @@ export const useInvoiceStore = defineStore('invoice', {
     async fetchInvoiceInitialSettings(
       isEdit: boolean,
       routeParams?: { id?: string; query?: Record<string, string> },
-      companySettings?: Record<string, string>,
+      companySettingsParam?: Record<string, string>,
       companyCurrency?: Currency,
       userSettings?: Record<string, string>,
     ): Promise<void> {
       this.isFetchingInitialSettings = true
 
-      if (companyCurrency) {
-        this.newInvoice.selectedCurrency = companyCurrency
+      const companyStore = useCompanyStore()
+      const companySettings = companySettingsParam ?? companyStore.selectedCompanySettings
+
+      if (companyCurrency || companyStore.selectedCompanyCurrency) {
+        this.newInvoice.selectedCurrency = companyCurrency ?? companyStore.selectedCompanyCurrency!
       }
 
       // If customer is specified in route query
diff --git a/resources/scripts-v2/features/company/invoices/views/InvoiceCreateView.vue b/resources/scripts-v2/features/company/invoices/views/InvoiceCreateView.vue
index 2a805aa2..19cd2080 100644
--- a/resources/scripts-v2/features/company/invoices/views/InvoiceCreateView.vue
+++ b/resources/scripts-v2/features/company/invoices/views/InvoiceCreateView.vue
@@ -15,6 +15,12 @@
         </BaseBreadcrumb>
 
         <template #actions>
+          <!-- Make Recurring Toggle -->
+          <div v-if="!isEdit" class="flex items-center mr-4">
+            <BaseSwitch v-model="isRecurring" class="mr-2" />
+            <span class="text-sm font-medium text-heading whitespace-nowrap">{{ $t('recurring_invoices.make_recurring') }}</span>
+          </div>
+
           <router-link
             v-if="isEdit"
             :to="`/invoices/pdf/${invoiceStore.newInvoice.unique_hash}`"
@@ -40,7 +46,7 @@
                 :class="slotProps.class"
               />
             </template>
-            {{ $t('invoices.save_invoice') }}
+            {{ isRecurring ? $t('recurring_invoices.save_invoice') : $t('invoices.save_invoice') }}
           </BaseButton>
         </template>
       </BasePageHeader>
@@ -50,6 +56,7 @@
         :v="v$"
         :is-loading="isLoadingContent"
         :is-edit="isEdit"
+        :is-recurring="isRecurring"
       />
 
       <BaseScrollPane>
@@ -81,6 +88,7 @@
               store-prop="newInvoice"
               :is-mark-as-default="isMarkAsDefault"
             />
+            <SelectTemplateModal />
           </div>
 
           <DocumentTotals
@@ -100,6 +108,7 @@
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import cloneDeep from 'lodash/cloneDeep'
 import {
   required,
   maxLength,
@@ -109,15 +118,18 @@ import {
 } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useInvoiceStore } from '../store'
+import { useRecurringInvoiceStore } from '@v2/features/company/recurring-invoices/store'
 import InvoiceBasicFields from '../components/InvoiceBasicFields.vue'
 import {
   DocumentItemsTable,
   DocumentTotals,
   DocumentNotes,
   TemplateSelectButton,
+  SelectTemplateModal,
 } from '../../../shared/document-form'
 
 const invoiceStore = useInvoiceStore()
+const recurringInvoiceStore = useRecurringInvoiceStore()
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
@@ -125,40 +137,54 @@ const router = useRouter()
 const invoiceValidationScope = 'newInvoice'
 const isSaving = ref<boolean>(false)
 const isMarkAsDefault = ref<boolean>(false)
+const isRecurring = ref<boolean>(false)
 
-const invoiceNoteFieldList = ref<Record<string, unknown> | null>(null)
+const invoiceNoteFieldList = ref<string[]>(['customer', 'company', 'invoice'])
 
 const isLoadingContent = computed<boolean>(
   () => invoiceStore.isFetchingInvoice || invoiceStore.isFetchingInitialSettings,
 )
 
-const pageTitle = computed<string>(() =>
-  isEdit.value ? t('invoices.edit_invoice') : t('invoices.new_invoice'),
+const pageTitle = computed<string>(() => {
+  if (isRecurringEdit.value) return t('recurring_invoices.edit_invoice')
+  if (isEdit.value) return t('invoices.edit_invoice')
+  return t('invoices.new_invoice')
+})
+
+const isEdit = computed<boolean>(() =>
+  route.name === 'invoices.edit' || route.name === 'recurring-invoices.edit',
 )
 
-const isEdit = computed<boolean>(() => route.name === 'invoices.edit')
+const isRecurringEdit = computed<boolean>(() =>
+  route.name === 'recurring-invoices.edit',
+)
 
-const rules = {
-  invoice_date: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  reference_number: {
-    maxLength: helpers.withMessage(t('validation.price_maxlength'), maxLength(255)),
-  },
-  customer_id: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  invoice_number: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  exchange_rate: {
-    required: requiredIf(() => {
-      helpers.withMessage(t('validation.required'), required)
-      return invoiceStore.showExchangeRate
-    }),
-    decimal: helpers.withMessage(t('validation.valid_exchange_rate'), decimal),
-  },
-}
+const rules = computed(() => {
+  if (isRecurring.value) {
+    return {
+      customer_id: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+    }
+  }
+  return {
+    invoice_date: {
+      required: helpers.withMessage(t('validation.required'), required),
+    },
+    reference_number: {
+      maxLength: helpers.withMessage(t('validation.price_maxlength'), maxLength(255)),
+    },
+    customer_id: {
+      required: helpers.withMessage(t('validation.required'), required),
+    },
+    invoice_number: {
+      required: helpers.withMessage(t('validation.required'), required),
+    },
+    exchange_rate: {
+      required: requiredIf(() => invoiceStore.showExchangeRate),
+    },
+  }
+})
 
 const v$ = useVuelidate(
   rules,
@@ -169,10 +195,61 @@ const v$ = useVuelidate(
 // Initialization
 invoiceStore.resetCurrentInvoice()
 v$.value.$reset
-invoiceStore.fetchInvoiceInitialSettings(
-  isEdit.value,
-  { id: route.params.id as string, query: route.query as Record<string, string> },
-)
+
+// Check for recurring mode
+if (route.query.recurring === '1' || isRecurringEdit.value) {
+  isRecurring.value = true
+}
+
+// Initialize recurring store
+recurringInvoiceStore.initFrequencies(t)
+
+if (isRecurringEdit.value) {
+  // Editing a recurring invoice — load its data into both stores
+  recurringInvoiceStore.resetCurrentRecurringInvoice()
+  recurringInvoiceStore.fetchRecurringInvoiceInitialSettings(
+    true,
+    { id: route.params.id as string, query: route.query as Record<string, string> },
+  ).then(() => {
+    // Sync recurring data to invoice store for the shared form fields
+    const ri = recurringInvoiceStore.newRecurringInvoice
+    invoiceStore.newInvoice.customer = ri.customer
+    invoiceStore.newInvoice.customer_id = ri.customer_id
+    invoiceStore.newInvoice.items = ri.items as typeof invoiceStore.newInvoice.items
+    invoiceStore.newInvoice.taxes = ri.taxes as typeof invoiceStore.newInvoice.taxes
+    invoiceStore.newInvoice.notes = ri.notes
+    invoiceStore.newInvoice.discount = ri.discount
+    invoiceStore.newInvoice.discount_type = ri.discount_type as typeof invoiceStore.newInvoice.discount_type
+    invoiceStore.newInvoice.discount_val = ri.discount_val
+    invoiceStore.newInvoice.discount_per_item = ri.discount_per_item
+    invoiceStore.newInvoice.tax_per_item = ri.tax_per_item
+    invoiceStore.newInvoice.tax_included = ri.tax_included
+    invoiceStore.newInvoice.template_name = ri.template_name
+    invoiceStore.newInvoice.currency_id = ri.currency_id as typeof invoiceStore.newInvoice.currency_id
+    invoiceStore.newInvoice.exchange_rate = ri.exchange_rate as typeof invoiceStore.newInvoice.exchange_rate
+    invoiceStore.newInvoice.customFields = ri.customFields as typeof invoiceStore.newInvoice.customFields
+  })
+} else if (!isRecurring.value) {
+  // Normal invoice create/edit
+  invoiceStore.fetchInvoiceInitialSettings(
+    isEdit.value,
+    { id: route.params.id as string, query: route.query as Record<string, string> },
+  )
+} else {
+  // New recurring invoice — just initialize
+  recurringInvoiceStore.resetCurrentRecurringInvoice()
+  invoiceStore.fetchInvoiceInitialSettings(
+    false,
+    { query: route.query as Record<string, string> },
+  )
+}
+
+// Initialize recurring store when toggled on manually
+watch(isRecurring, (newVal) => {
+  if (newVal && !isRecurringEdit.value) {
+    recurringInvoiceStore.resetCurrentRecurringInvoice()
+  }
+})
 
 watch(
   () => invoiceStore.newInvoice.customer,
@@ -189,43 +266,95 @@ async function submitForm(): Promise<void> {
   v$.value.$touch()
 
   if (v$.value.$invalid) {
+    console.log('Invoice form invalid. Errors:', JSON.stringify(
+      v$.value.$errors.map((e: { $property: string; $message: string }) => `${e.$property}: ${e.$message}`)
+    ))
     return
   }
 
   isSaving.value = true
 
-  const data: Record<string, unknown> = {
-    ...structuredClone(invoiceStore.newInvoice),
-    sub_total: invoiceStore.getSubTotal,
-    total: invoiceStore.getTotal,
-    tax: invoiceStore.getTotalTax,
-  }
-
-  const items = data.items as Array<Record<string, unknown>>
-  if (data.discount_per_item === 'YES') {
-    items.forEach((item, index) => {
-      if (item.discount_type === 'fixed') {
-        items[index].discount = (item.discount as number) * 100
-      }
-    })
-  } else {
-    if (data.discount_type === 'fixed') {
-      data.discount = (data.discount as number) * 100
-    }
-  }
-
-  const taxes = data.taxes as Array<Record<string, unknown>>
-  if (data.tax_per_item !== 'YES' && taxes.length) {
-    data.tax_type_ids = taxes.map((tax) => tax.tax_type_id)
-  }
-
   try {
-    const action = isEdit.value
-      ? invoiceStore.updateInvoice
-      : invoiceStore.addInvoice
+    if (isRecurring.value) {
+      const recurringData = recurringInvoiceStore.newRecurringInvoice
+      const invoiceData = invoiceStore.newInvoice
 
-    const response = await action(data)
-    router.push(`/admin/invoices/${response.data.data.id}/view`)
+      // Build clean payload with only backend-expected fields
+      const data: Record<string, unknown> = {
+        // Recurring-specific fields
+        starts_at: recurringData.starts_at,
+        send_automatically: recurringData.send_automatically ? 1 : 0,
+        frequency: recurringData.frequency,
+        status: recurringData.status || 'ACTIVE',
+        limit_by: recurringData.limit_by || 'NONE',
+        limit_count: recurringData.limit_count,
+        limit_date: recurringData.limit_date,
+
+        // Shared fields from invoice form
+        customer_id: invoiceData.customer_id,
+        discount: invoiceData.discount,
+        discount_type: invoiceData.discount_type,
+        discount_val: invoiceData.discount_val,
+        discount_per_item: invoiceData.discount_per_item,
+        tax_per_item: invoiceData.tax_per_item,
+        tax_included: invoiceData.tax_included,
+        sales_tax_type: invoiceData.sales_tax_type,
+        sales_tax_address_type: invoiceData.sales_tax_address_type,
+        notes: invoiceData.notes,
+        template_name: invoiceData.template_name,
+        items: cloneDeep(invoiceData.items),
+        taxes: cloneDeep(invoiceData.taxes),
+        currency_id: invoiceData.currency_id,
+        exchange_rate: invoiceData.exchange_rate,
+        customFields: invoiceData.customFields,
+
+        // Calculated totals
+        sub_total: invoiceStore.getSubTotal,
+        total: invoiceStore.getTotal,
+        tax: invoiceStore.getTotalTax,
+      }
+
+      let response
+      if (isRecurringEdit.value) {
+        data.id = recurringData.id
+        response = await recurringInvoiceStore.updateRecurringInvoice(data)
+      } else {
+        response = await recurringInvoiceStore.addRecurringInvoice(data)
+      }
+      router.push(`/admin/recurring-invoices/${response.data.data.id}/view`)
+    } else {
+      const data: Record<string, unknown> = {
+        ...cloneDeep(invoiceStore.newInvoice),
+        sub_total: invoiceStore.getSubTotal,
+        total: invoiceStore.getTotal,
+        tax: invoiceStore.getTotalTax,
+      }
+
+      const items = data.items as Array<Record<string, unknown>>
+      if (data.discount_per_item === 'YES') {
+        items.forEach((item, index) => {
+          if (item.discount_type === 'fixed') {
+            items[index].discount = (item.discount as number) * 100
+          }
+        })
+      } else {
+        if (data.discount_type === 'fixed') {
+          data.discount = (data.discount as number) * 100
+        }
+      }
+
+      const taxes = data.taxes as Array<Record<string, unknown>>
+      if (data.tax_per_item !== 'YES' && taxes.length) {
+        data.tax_type_ids = taxes.map((tax) => tax.tax_type_id)
+      }
+
+      const action = isEdit.value
+        ? invoiceStore.updateInvoice
+        : invoiceStore.addInvoice
+
+      const response = await action(data)
+      router.push(`/admin/invoices/${response.data.data.id}/view`)
+    }
   } catch (err) {
     console.error(err)
   }
diff --git a/resources/scripts-v2/features/company/invoices/views/InvoiceDetailView.vue b/resources/scripts-v2/features/company/invoices/views/InvoiceDetailView.vue
index 42f90539..cc1b5b88 100644
--- a/resources/scripts-v2/features/company/invoices/views/InvoiceDetailView.vue
+++ b/resources/scripts-v2/features/company/invoices/views/InvoiceDetailView.vue
@@ -16,7 +16,7 @@
         <BaseButton
           v-if="invoiceData.status === 'DRAFT' && canSend"
           variant="primary"
-          class="text-sm"
+          class="text-sm mr-3"
           @click="onSendInvoice"
         >
           {{ $t('invoices.send_invoice') }}
@@ -197,12 +197,9 @@
     </div>
 
     <!-- PDF Preview -->
-    <div class="flex flex-col min-h-0 mt-8 overflow-hidden" style="height: 75vh">
-      <iframe
-        :src="shareableLink"
-        class="flex-1 border border-gray-400 border-solid bg-surface rounded-xl frame-style"
-      />
-    </div>
+    <BasePdfPreview :src="shareableLink" />
+
+    <SendInvoiceModal />
   </BasePage>
 </template>
 
@@ -212,7 +209,11 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useInvoiceStore } from '../store'
 import InvoiceDropdown from '../components/InvoiceDropdown.vue'
+import SendInvoiceModal from '../components/SendInvoiceModal.vue'
 import LoadingIcon from '@v2/components/icons/LoadingIcon.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useDialogStore } from '../../../../stores/dialog.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { Invoice } from '../../../../types/domain/invoice'
 
 interface Props {
@@ -233,10 +234,48 @@ const props = withDefaults(defineProps<Props>(), {
   canCreatePayment: false,
 })
 
+const ABILITIES = {
+  EDIT: 'edit-invoice',
+  VIEW: 'view-invoice',
+  CREATE: 'create-invoice',
+  DELETE: 'delete-invoice',
+  SEND: 'send-invoice',
+  CREATE_PAYMENT: 'create-payment',
+} as const
+
 const invoiceStore = useInvoiceStore()
+const userStore = useUserStore()
+const dialogStore = useDialogStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canView = computed<boolean>(() => {
+  return props.canView || userStore.hasAbilities(ABILITIES.VIEW)
+})
+
+const canCreate = computed<boolean>(() => {
+  return props.canCreate || userStore.hasAbilities(ABILITIES.CREATE)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
+const canSend = computed<boolean>(() => {
+  return props.canSend || userStore.hasAbilities(ABILITIES.SEND)
+})
+
+const canCreatePayment = computed<boolean>(() => {
+  return (
+    props.canCreatePayment || userStore.hasAbilities(ABILITIES.CREATE_PAYMENT)
+  )
+})
+
 const invoiceData = ref<Invoice | null>(null)
 const isMarkAsSent = ref<boolean>(false)
 const isLoading = ref<boolean>(false)
@@ -274,29 +313,36 @@ watch(route, (to) => {
   }
 })
 
-async function onMarkAsSent(): Promise<void> {
-  const confirmed = window.confirm(t('invoices.invoice_mark_as_sent'))
-  if (!confirmed) return
-
-  isMarkAsSent.value = false
-  await invoiceStore.markAsSent({
-    id: invoiceData.value!.id,
-    status: 'SENT',
+function onMarkAsSent(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('invoices.invoice_mark_as_sent'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      isMarkAsSent.value = false
+      await invoiceStore.markAsSent({
+        id: invoiceData.value!.id,
+        status: 'SENT',
+      })
+      invoiceData.value!.status = 'SENT' as Invoice['status']
+      isMarkAsSent.value = true
+      isMarkAsSent.value = false
+    }
   })
-  invoiceData.value!.status = 'SENT' as Invoice['status']
-  isMarkAsSent.value = true
-  isMarkAsSent.value = false
 }
 
 function onSendInvoice(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('invoices.send_invoice'),
     componentName: 'SendInvoiceModal',
     id: invoiceData.value!.id,
     data: invoiceData.value,
+    refreshData: () => loadInvoice(),
   })
 }
 
diff --git a/resources/scripts-v2/features/company/invoices/views/InvoiceIndexView.vue b/resources/scripts-v2/features/company/invoices/views/InvoiceIndexView.vue
index e7dfa93d..29701567 100644
--- a/resources/scripts-v2/features/company/invoices/views/InvoiceIndexView.vue
+++ b/resources/scripts-v2/features/company/invoices/views/InvoiceIndexView.vue
@@ -1,14 +1,50 @@
 <template>
   <BasePage>
-    <BasePageHeader :title="$t('invoices.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem :title="$t('invoices.invoice', 2)" to="#" active />
-      </BaseBreadcrumb>
+    <BasePageHeader>
+      <template #default>
+        <div class="flex items-center gap-2">
+          <h1 class="text-2xl font-semibold text-heading">
+            {{ $t('invoices.title') }}
+          </h1>
+          <BaseDropdown position="bottom-start" width-class="w-44">
+            <template #activator>
+              <button
+                class="flex items-center gap-1 px-2 py-1 text-sm font-medium text-muted hover:text-heading rounded-md hover:bg-surface-secondary transition-colors"
+              >
+                <span class="text-xs text-primary-500 bg-primary-50 px-2 py-0.5 rounded-full">
+                  {{ viewMode === 'one-time' ? $t('invoices.one_time') : $t('recurring_invoices.recurring') }}
+                </span>
+                <BaseIcon name="ChevronDownIcon" class="w-4 h-4 text-muted" />
+              </button>
+            </template>
+            <BaseDropdownItem
+              :class="{ 'bg-primary-50 text-primary-600': viewMode === 'one-time' }"
+              @click="setViewMode('one-time')"
+            >
+              <BaseIcon name="DocumentTextIcon" class="w-4 h-4 mr-2 text-subtle" />
+              {{ $t('invoices.one_time') }}
+              <BaseIcon v-if="viewMode === 'one-time'" name="CheckIcon" class="w-4 h-4 ml-auto text-primary-500" />
+            </BaseDropdownItem>
+            <BaseDropdownItem
+              v-if="canViewRecurring"
+              :class="{ 'bg-primary-50 text-primary-600': viewMode === 'recurring' }"
+              @click="setViewMode('recurring')"
+            >
+              <BaseIcon name="ArrowPathIcon" class="w-4 h-4 mr-2 text-subtle" />
+              {{ $t('recurring_invoices.recurring') }}
+              <BaseIcon v-if="viewMode === 'recurring'" name="CheckIcon" class="w-4 h-4 ml-auto text-primary-500" />
+            </BaseDropdownItem>
+          </BaseDropdown>
+        </div>
+        <BaseBreadcrumb>
+          <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
+          <BaseBreadcrumbItem :title="$t('invoices.invoice', 2)" to="#" active />
+        </BaseBreadcrumb>
+      </template>
 
       <template #actions>
         <BaseButton
-          v-show="invoiceStore.invoiceTotalCount"
+          v-show="viewMode === 'one-time' ? invoiceStore.invoiceTotalCount : recurringInvoiceStore.totalRecurringInvoices"
           variant="primary-outline"
           @click="toggleFilter"
         >
@@ -23,7 +59,10 @@
           </template>
         </BaseButton>
 
-        <router-link v-if="canCreate" to="invoices/create">
+        <router-link
+          v-if="canCreate"
+          :to="viewMode === 'recurring' ? 'invoices/create?recurring=1' : 'invoices/create'"
+        >
           <BaseButton variant="primary" class="ml-4">
             <template #left="slotProps">
               <BaseIcon name="PlusIcon" :class="slotProps.class" />
@@ -34,9 +73,9 @@
       </template>
     </BasePageHeader>
 
-    <!-- Filters -->
+    <!-- Filters (one-time) -->
     <BaseFilterWrapper
-      v-show="showFilters"
+      v-show="showFilters && viewMode === 'one-time'"
       :row-on-xl="true"
       @clear="clearFilter"
     >
@@ -91,162 +130,360 @@
       </BaseInputGroup>
     </BaseFilterWrapper>
 
-    <!-- Empty State -->
-    <BaseEmptyPlaceholder
-      v-show="showEmptyScreen"
-      :title="$t('invoices.no_invoices')"
-      :description="$t('invoices.list_of_invoices')"
+    <!-- Filters (recurring) -->
+    <BaseFilterWrapper
+      v-show="showFilters && viewMode === 'recurring'"
+      @clear="clearRecurringFilter"
     >
-      <template v-if="canCreate" #actions>
-        <BaseButton
-          variant="primary-outline"
-          @click="$router.push('/admin/invoices/create')"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="PlusIcon" :class="slotProps.class" />
-          </template>
-          {{ $t('invoices.add_new_invoice') }}
-        </BaseButton>
-      </template>
-    </BaseEmptyPlaceholder>
+      <BaseInputGroup :label="$t('customers.customer', 1)">
+        <BaseCustomerSelectInput
+          v-model="recurringFilters.customer_id"
+          :placeholder="$t('customers.type_or_click')"
+          value-prop="id"
+          label="name"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup :label="$t('recurring_invoices.status')">
+        <BaseMultiselect
+          v-model="recurringFilters.status"
+          :options="recurringStatusList"
+          searchable
+          :placeholder="$t('general.select_a_status')"
+          @update:model-value="setRecurringActiveTab"
+          @remove="clearRecurringStatusSearch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup :label="$t('general.from')">
+        <BaseDatePicker
+          v-model="recurringFilters.from_date"
+          :calendar-button="true"
+          calendar-button-icon="calendar"
+        />
+      </BaseInputGroup>
 
-    <!-- Table -->
-    <div v-show="!showEmptyScreen" class="relative table-container">
       <div
-        class="relative flex items-center justify-between h-10 mt-5 list-none border-b-2 border-line-default border-solid"
-      >
-        <BaseTabGroup class="-mb-5" @change="setStatusFilter">
-          <BaseTab :title="$t('general.all')" filter="" />
-          <BaseTab :title="$t('general.draft')" filter="DRAFT" />
-          <BaseTab :title="$t('general.sent')" filter="SENT" />
-          <BaseTab :title="$t('general.due')" filter="DUE" />
-        </BaseTabGroup>
+        class="hidden w-8 h-0 mx-4 border border-gray-400 border-solid xl:block"
+        style="margin-top: 1.5rem"
+      />
 
-        <BaseDropdown
-          v-if="invoiceStore.selectedInvoices.length && canDelete"
-          class="absolute float-right"
+      <BaseInputGroup :label="$t('general.to')">
+        <BaseDatePicker
+          v-model="recurringFilters.to_date"
+          :calendar-button="true"
+          calendar-button-icon="calendar"
+        />
+      </BaseInputGroup>
+    </BaseFilterWrapper>
+
+    <!-- One-time invoices section -->
+    <template v-if="viewMode === 'one-time'">
+      <!-- Empty State -->
+      <BaseEmptyPlaceholder
+        v-show="showEmptyScreen"
+        :title="$t('invoices.no_invoices')"
+        :description="$t('invoices.list_of_invoices')"
+      >
+        <template v-if="canCreate" #actions>
+          <BaseButton
+            variant="primary-outline"
+            @click="$router.push('/admin/invoices/create')"
+          >
+            <template #left="slotProps">
+              <BaseIcon name="PlusIcon" :class="slotProps.class" />
+            </template>
+            {{ $t('invoices.add_new_invoice') }}
+          </BaseButton>
+        </template>
+      </BaseEmptyPlaceholder>
+
+      <!-- Table -->
+      <div v-show="!showEmptyScreen" class="relative table-container">
+        <div
+          class="relative flex items-center justify-between mt-5 list-none"
         >
-          <template #activator>
-            <span
-              class="flex text-sm font-medium cursor-pointer select-none text-primary-400"
-            >
-              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" />
-            </span>
+          <BaseTabGroup @change="setStatusFilter">
+            <BaseTab :title="$t('general.all')" filter="" />
+            <BaseTab :title="$t('general.draft')" filter="DRAFT" />
+            <BaseTab :title="$t('general.sent')" filter="SENT" />
+            <BaseTab :title="$t('general.due')" filter="DUE" />
+          </BaseTabGroup>
+
+          <BaseDropdown
+            v-if="invoiceStore.selectedInvoices.length && canDelete"
+            class="absolute float-right"
+          >
+            <template #activator>
+              <span
+                class="flex text-sm font-medium cursor-pointer select-none text-primary-400"
+              >
+                {{ $t('general.actions') }}
+                <BaseIcon name="ChevronDownIcon" />
+              </span>
+            </template>
+
+            <BaseDropdownItem @click="removeMultipleInvoices">
+              <BaseIcon name="TrashIcon" class="mr-3 text-body" />
+              {{ $t('general.delete') }}
+            </BaseDropdownItem>
+          </BaseDropdown>
+        </div>
+
+        <BaseTable
+          ref="tableRef"
+          :data="fetchData"
+          :columns="invoiceColumns"
+          :placeholder-count="invoiceStore.invoiceTotalCount >= 20 ? 10 : 5"
+          :key="tableKey"
+          class="mt-4"
+        >
+          <template #header>
+            <div class="absolute items-center left-6 top-2.5 select-none">
+              <BaseCheckbox
+                v-model="invoiceStore.selectAllField"
+                variant="primary"
+                @change="invoiceStore.selectAllInvoices"
+              />
+            </div>
           </template>
 
-          <BaseDropdownItem @click="removeMultipleInvoices">
-            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </div>
+          <template #cell-checkbox="{ row }">
+            <div class="relative block">
+              <BaseCheckbox
+                :id="row.id"
+                v-model="selectField"
+                :value="row.data.id"
+              />
+            </div>
+          </template>
 
-      <BaseTable
-        ref="tableRef"
-        :data="fetchData"
-        :columns="invoiceColumns"
-        :placeholder-count="invoiceStore.invoiceTotalCount >= 20 ? 10 : 5"
-        :key="tableKey"
-        class="mt-10"
-      >
-        <template #header>
-          <div class="absolute items-center left-6 top-2.5 select-none">
-            <BaseCheckbox
-              v-model="invoiceStore.selectAllField"
-              variant="primary"
-              @change="invoiceStore.selectAllInvoices"
-            />
-          </div>
-        </template>
+          <template #cell-name="{ row }">
+            <router-link
+              v-if="row.data.customer?.id"
+              :to="`/admin/customers/${row.data.customer.id}/view`"
+              class="font-medium text-primary-500 hover:text-primary-600"
+            >
+              {{ row.data.customer.name }}
+            </router-link>
+            <span v-else>{{ row.data.customer?.name ?? '-' }}</span>
+          </template>
 
-        <template #cell-checkbox="{ row }">
-          <div class="relative block">
-            <BaseCheckbox
-              :id="row.id"
-              v-model="selectField"
-              :value="row.data.id"
-            />
-          </div>
-        </template>
+          <template #cell-invoice_number="{ row }">
+            <router-link
+              :to="{ path: `invoices/${row.data.id}/view` }"
+              class="font-medium text-primary-500"
+            >
+              {{ row.data.invoice_number }}
+            </router-link>
+          </template>
 
-        <template #cell-name="{ row }">
-          <BaseText :text="row.data.customer.name" />
-        </template>
+          <template #cell-invoice_date="{ row }">
+            {{ row.data.formatted_invoice_date }}
+          </template>
 
-        <template #cell-invoice_number="{ row }">
-          <router-link
-            :to="{ path: `invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.invoice_number }}
-          </router-link>
-        </template>
-
-        <template #cell-invoice_date="{ row }">
-          {{ row.data.formatted_invoice_date }}
-        </template>
-
-        <template #cell-total="{ row }">
-          <BaseFormatMoney
-            :amount="row.data.total"
-            :currency="row.data.customer.currency"
-          />
-        </template>
-
-        <template #cell-status="{ row }">
-          <BaseInvoiceStatusBadge :status="row.data.status" class="px-3 py-1">
-            <BaseInvoiceStatusLabel :status="row.data.status" />
-          </BaseInvoiceStatusBadge>
-        </template>
-
-        <template #cell-due_amount="{ row }">
-          <div class="flex justify-between">
+          <template #cell-total="{ row }">
             <BaseFormatMoney
-              :amount="row.data.due_amount"
-              :currency="row.data.currency"
+              :amount="row.data.total"
+              :currency="row.data.customer.currency"
             />
+          </template>
 
-            <BasePaidStatusBadge
-              v-if="row.data.overdue"
-              status="OVERDUE"
-              class="px-1 py-0.5 ml-2"
-            >
-              {{ $t('invoices.overdue') }}
-            </BasePaidStatusBadge>
+          <template #cell-status="{ row }">
+            <BaseInvoiceStatusBadge :status="row.data.status" class="px-3 py-1">
+              <BaseInvoiceStatusLabel :status="row.data.status" />
+            </BaseInvoiceStatusBadge>
+          </template>
 
-            <BasePaidStatusBadge
-              :status="row.data.paid_status"
-              class="px-1 py-0.5 ml-2"
-            >
-              <BaseInvoiceStatusLabel :status="row.data.paid_status" />
-            </BasePaidStatusBadge>
-          </div>
+          <template #cell-due_amount="{ row }">
+            <div class="flex justify-between">
+              <BaseFormatMoney
+                :amount="row.data.due_amount"
+                :currency="row.data.currency"
+              />
+
+              <BasePaidStatusBadge
+                v-if="row.data.overdue"
+                status="OVERDUE"
+                class="px-1 py-0.5 ml-2"
+              >
+                {{ $t('invoices.overdue') }}
+              </BasePaidStatusBadge>
+
+              <BasePaidStatusBadge
+                :status="row.data.paid_status"
+                class="px-1 py-0.5 ml-2"
+              >
+                <BaseInvoiceStatusLabel :status="row.data.paid_status" />
+              </BasePaidStatusBadge>
+            </div>
+          </template>
+
+          <template v-if="hasAtLeastOneAbility" #cell-actions="{ row }">
+            <InvoiceDropdown
+              :row="row.data"
+              :table="tableRef"
+              :can-edit="canEdit"
+              :can-view="canView"
+              :can-create="canCreate"
+              :can-delete="canDelete"
+              :can-send="canSend"
+              :can-create-payment="canCreatePayment"
+            />
+          </template>
+        </BaseTable>
+      </div>
+    </template>
+
+    <!-- Recurring invoices section -->
+    <template v-else-if="canViewRecurring">
+      <!-- Empty State -->
+      <BaseEmptyPlaceholder
+        v-show="showRecurringEmptyScreen"
+        :title="$t('recurring_invoices.no_invoices')"
+        :description="$t('recurring_invoices.list_of_invoices')"
+      >
+        <template v-if="canCreate" #actions>
+          <BaseButton
+            variant="primary-outline"
+            @click="$router.push('/admin/invoices/create?recurring=1')"
+          >
+            <template #left="slotProps">
+              <BaseIcon name="PlusIcon" :class="slotProps.class" />
+            </template>
+            {{ $t('recurring_invoices.add_new_invoice') }}
+          </BaseButton>
         </template>
+      </BaseEmptyPlaceholder>
 
-        <template v-if="hasAtLeastOneAbility" #cell-actions="{ row }">
-          <InvoiceDropdown
-            :row="row.data"
-            :table="tableRef"
-            :can-edit="canEdit"
-            :can-view="canView"
-            :can-create="canCreate"
-            :can-delete="canDelete"
-            :can-send="canSend"
-          />
-        </template>
-      </BaseTable>
-    </div>
+      <div v-show="!showRecurringEmptyScreen" class="relative table-container">
+        <!-- Recurring tabs -->
+        <div class="relative flex items-center justify-between mt-5 list-none">
+          <BaseTabGroup @change="setRecurringStatusFilter">
+            <BaseTab :title="$t('recurring_invoices.all')" filter="ALL" />
+            <BaseTab :title="$t('recurring_invoices.active')" filter="ACTIVE" />
+            <BaseTab :title="$t('recurring_invoices.on_hold')" filter="ON_HOLD" />
+          </BaseTabGroup>
+
+          <BaseDropdown
+            v-if="recurringInvoiceStore.selectedRecurringInvoices.length && canRecurringDelete"
+            class="absolute float-right"
+          >
+            <template #activator>
+              <span
+                class="flex text-sm font-medium cursor-pointer select-none text-primary-400"
+              >
+                {{ $t('general.actions') }}
+                <BaseIcon name="ChevronDownIcon" class="h-5" />
+              </span>
+            </template>
+
+            <BaseDropdownItem @click="removeMultipleRecurringInvoices">
+              <BaseIcon name="TrashIcon" class="mr-3 text-body" />
+              {{ $t('general.delete') }}
+            </BaseDropdownItem>
+          </BaseDropdown>
+        </div>
+
+        <!-- Recurring table -->
+        <BaseTable
+          ref="recurringTableRef"
+          :data="fetchRecurringData"
+          :columns="recurringColumns"
+          :placeholder-count="recurringInvoiceStore.totalRecurringInvoices >= 20 ? 10 : 5"
+          class="mt-4"
+        >
+          <template #header>
+            <div class="absolute items-center left-6 top-2.5 select-none">
+              <BaseCheckbox
+                v-model="recurringInvoiceStore.selectAllField"
+                variant="primary"
+                @change="recurringInvoiceStore.selectAllRecurringInvoices"
+              />
+            </div>
+          </template>
+
+          <template #cell-checkbox="{ row }">
+            <div class="relative block">
+              <BaseCheckbox
+                :id="row.id"
+                v-model="recurringSelectField"
+                :value="row.data.id"
+              />
+            </div>
+          </template>
+
+          <!-- starts_at column -->
+          <template #cell-starts_at="{ row }">
+            {{ row.data.formatted_starts_at }}
+          </template>
+
+          <!-- customer column -->
+          <template #cell-customer="{ row }">
+            <router-link
+              v-if="row.data.customer?.id"
+              :to="`/admin/customers/${row.data.customer.id}/view`"
+              class="flex flex-col"
+            >
+              <span class="font-medium text-primary-500 hover:text-primary-600">
+                {{ row.data.customer.name }}
+              </span>
+              <span v-if="row.data.customer.contact_name" class="text-xs text-subtle">
+                {{ row.data.customer.contact_name }}
+              </span>
+            </router-link>
+            <span v-else>-</span>
+          </template>
+
+          <!-- frequency column -->
+          <template #cell-frequency="{ row }">
+            {{ getFrequencyLabel(row.data.frequency) }}
+          </template>
+
+          <!-- status column -->
+          <template #cell-status="{ row }">
+            <BaseRecurringInvoiceStatusBadge :status="row.data.status" class="px-3 py-1">
+              <BaseRecurringInvoiceStatusLabel :status="row.data.status" />
+            </BaseRecurringInvoiceStatusBadge>
+          </template>
+
+          <!-- total column -->
+          <template #cell-total="{ row }">
+            <BaseFormatMoney
+              :amount="row.data.total"
+              :currency="row.data.customer?.currency"
+            />
+          </template>
+
+          <!-- actions column -->
+          <template v-if="hasRecurringAtLeastOneAbility" #cell-actions="{ row }">
+            <RecurringInvoiceDropdown
+              :row="row.data"
+              :table="recurringTableRef"
+              :can-edit="canRecurringEdit"
+              :can-view="canRecurringView"
+              :can-delete="canRecurringDelete"
+            />
+          </template>
+        </BaseTable>
+      </div>
+    </template>
   </BasePage>
 </template>
 
 <script setup lang="ts">
-import { computed, onUnmounted, reactive, ref } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
 import { debouncedWatch } from '@vueuse/core'
 import { useInvoiceStore } from '../store'
+import { useRecurringInvoiceStore } from '../../recurring-invoices/store'
 import InvoiceDropdown from '../components/InvoiceDropdown.vue'
+import RecurringInvoiceDropdown from '../../recurring-invoices/components/RecurringInvoiceDropdown.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useDialogStore } from '../../../../stores/dialog.store'
 import type { Invoice } from '../../../../types/domain/invoice'
+import type { RecurringInvoice } from '../../../../types/domain/recurring-invoice'
 
 interface Props {
   canCreate?: boolean
@@ -264,9 +501,66 @@ const props = withDefaults(defineProps<Props>(), {
   canSend: false,
 })
 
+const ABILITIES = {
+  CREATE: 'create-invoice',
+  EDIT: 'edit-invoice',
+  VIEW: 'view-invoice',
+  DELETE: 'delete-invoice',
+  SEND: 'send-invoice',
+} as const
+
+const RECURRING_ABILITIES = {
+  CREATE: 'create-recurring-invoice',
+  EDIT: 'edit-recurring-invoice',
+  VIEW: 'view-recurring-invoice',
+  DELETE: 'delete-recurring-invoice',
+} as const
+
 const invoiceStore = useInvoiceStore()
+const recurringInvoiceStore = useRecurringInvoiceStore()
+const userStore = useUserStore()
+const dialogStore = useDialogStore()
+const route = useRoute()
+const router = useRouter()
 const { t } = useI18n()
 
+// ----------------------------------------------------------------
+// Recurring invoice ability
+// ----------------------------------------------------------------
+
+const canViewRecurring = computed<boolean>(() => {
+  return userStore.hasAbilities(RECURRING_ABILITIES.VIEW)
+})
+
+// ----------------------------------------------------------------
+// View mode toggle
+// ----------------------------------------------------------------
+
+const storedViewMode = localStorage.getItem('invoiceViewMode') as 'one-time' | 'recurring' | null
+const viewMode = ref<'one-time' | 'recurring'>(
+  storedViewMode === 'recurring' && !canViewRecurring.value ? 'one-time' : (storedViewMode ?? 'one-time')
+)
+
+onMounted(() => {
+  if (route.query.view === 'recurring' && canViewRecurring.value) {
+    viewMode.value = 'recurring'
+  }
+  recurringInvoiceStore.initFrequencies(t)
+})
+
+function setViewMode(mode: 'one-time' | 'recurring'): void {
+  if (mode === 'recurring' && !canViewRecurring.value) return
+  viewMode.value = mode
+  localStorage.setItem('invoiceViewMode', mode)
+  router.replace({
+    query: mode === 'recurring' ? { view: 'recurring' } : {},
+  })
+}
+
+// ----------------------------------------------------------------
+// One-time invoice state
+// ----------------------------------------------------------------
+
 const tableRef = ref<{ refresh: () => void } | null>(null)
 const tableKey = ref<number>(0)
 const showFilters = ref<boolean>(false)
@@ -331,8 +625,32 @@ const selectField = computed<number[]>({
   },
 })
 
+const canCreate = computed<boolean>(() => {
+  return props.canCreate || userStore.hasAbilities(ABILITIES.CREATE)
+})
+
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canView = computed<boolean>(() => {
+  return props.canView || userStore.hasAbilities(ABILITIES.VIEW)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
+const canSend = computed<boolean>(() => {
+  return props.canSend || userStore.hasAbilities(ABILITIES.SEND)
+})
+
+const canCreatePayment = computed<boolean>(() => {
+  return userStore.hasAbilities('create-payment')
+})
+
 const hasAtLeastOneAbility = computed<boolean>(() => {
-  return props.canDelete || props.canEdit || props.canView || props.canSend
+  return canDelete.value || canEdit.value || canView.value || canSend.value
 })
 
 interface TableColumn {
@@ -385,6 +703,9 @@ onUnmounted(() => {
   if (invoiceStore.selectAllField) {
     invoiceStore.selectAllInvoices()
   }
+  if (recurringInvoiceStore.selectAllField) {
+    recurringInvoiceStore.selectAllRecurringInvoices()
+  }
 })
 
 function clearStatusSearch(): void {
@@ -477,23 +798,36 @@ function clearFilter(): void {
   activeTab.value = t('general.all')
 }
 
-async function removeMultipleInvoices(): Promise<void> {
-  const confirmed = window.confirm(t('invoices.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await invoiceStore.deleteMultipleInvoices()
-  if (res.data.success) {
-    refreshTable()
-    invoiceStore.$patch((state) => {
-      state.selectedInvoices = []
-      state.selectAllField = false
-    })
-  }
+function removeMultipleInvoices(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('invoices.confirm_delete'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const response = await invoiceStore.deleteMultipleInvoices()
+      if (response.data.success) {
+        refreshTable()
+        invoiceStore.$patch((state) => {
+          state.selectedInvoices = []
+          state.selectAllField = false
+        })
+      }
+    }
+  })
 }
 
 function toggleFilter(): void {
   if (showFilters.value) {
-    clearFilter()
+    if (viewMode.value === 'one-time') {
+      clearFilter()
+    } else {
+      clearRecurringFilter()
+    }
   }
   showFilters.value = !showFilters.value
 }
@@ -511,4 +845,214 @@ function setActiveTab(val: string): void {
   }
   activeTab.value = tabMap[val] ?? t('general.all')
 }
+
+// ----------------------------------------------------------------
+// Recurring invoice state
+// ----------------------------------------------------------------
+
+const recurringTableRef = ref<{ refresh: () => void } | null>(null)
+const isRecurringRequestOngoing = ref<boolean>(true)
+const recurringActiveTab = ref<string>('recurring_invoices.all')
+
+const recurringStatusList = ref<StatusOption[]>([
+  { label: t('recurring_invoices.active'), value: 'ACTIVE' },
+  { label: t('recurring_invoices.on_hold'), value: 'ON_HOLD' },
+  { label: t('recurring_invoices.all'), value: 'ALL' },
+])
+
+interface RecurringInvoiceFilters {
+  customer_id: string | number
+  status: string
+  from_date: string
+  to_date: string
+}
+
+const recurringFilters = reactive<RecurringInvoiceFilters>({
+  customer_id: '',
+  status: '',
+  from_date: '',
+  to_date: '',
+})
+
+const showRecurringEmptyScreen = computed<boolean>(
+  () =>
+    !recurringInvoiceStore.totalRecurringInvoices &&
+    !isRecurringRequestOngoing.value,
+)
+
+const recurringSelectField = computed<number[]>({
+  get: () => recurringInvoiceStore.selectedRecurringInvoices,
+  set: (value: number[]) => {
+    recurringInvoiceStore.selectRecurringInvoice(value)
+  },
+})
+
+const canRecurringEdit = computed<boolean>(() => {
+  return userStore.hasAbilities(RECURRING_ABILITIES.EDIT)
+})
+
+const canRecurringView = computed<boolean>(() => {
+  return userStore.hasAbilities(RECURRING_ABILITIES.VIEW)
+})
+
+const canRecurringDelete = computed<boolean>(() => {
+  return userStore.hasAbilities(RECURRING_ABILITIES.DELETE)
+})
+
+const hasRecurringAtLeastOneAbility = computed<boolean>(() => {
+  return canRecurringDelete.value || canRecurringEdit.value || canRecurringView.value
+})
+
+const recurringColumns = computed<TableColumn[]>(() => [
+  {
+    key: 'checkbox',
+    thClass: 'extra',
+    tdClass: 'font-medium text-heading',
+    sortable: false,
+  },
+  {
+    key: 'starts_at',
+    label: t('recurring_invoices.starts_at'),
+    thClass: 'extra',
+    tdClass: 'font-medium',
+  },
+  { key: 'customer', label: t('invoices.customer') },
+  { key: 'frequency', label: t('recurring_invoices.frequency.title') },
+  { key: 'status', label: t('invoices.status') },
+  { key: 'total', label: t('invoices.total') },
+  {
+    key: 'actions',
+    label: t('recurring_invoices.action'),
+    tdClass: 'text-right text-sm font-medium',
+    thClass: 'text-right',
+    sortable: false,
+  },
+])
+
+debouncedWatch(recurringFilters, () => setRecurringFilters(), { debounce: 500 })
+
+interface RecurringFetchResult {
+  data: RecurringInvoice[]
+  pagination: {
+    totalPages: number
+    currentPage: number
+    totalCount: number
+    limit: number
+  }
+}
+
+async function fetchRecurringData({
+  page,
+  sort,
+}: FetchParams): Promise<RecurringFetchResult> {
+  const data = {
+    customer_id: recurringFilters.customer_id
+      ? Number(recurringFilters.customer_id)
+      : undefined,
+    status: recurringFilters.status || undefined,
+    from_date: recurringFilters.from_date || undefined,
+    to_date: recurringFilters.to_date || undefined,
+    orderByField: sort.fieldName || 'created_at',
+    orderBy: sort.order || 'desc',
+    page,
+  }
+
+  isRecurringRequestOngoing.value = true
+  const response = await recurringInvoiceStore.fetchRecurringInvoices(
+    data as never,
+  )
+  isRecurringRequestOngoing.value = false
+
+  return {
+    data: response.data.data,
+    pagination: {
+      totalPages: response.data.meta.last_page,
+      currentPage: page,
+      totalCount: response.data.meta.total,
+      limit: 10,
+    },
+  }
+}
+
+function getFrequencyLabel(frequencyFormat: string): string {
+  const frequencyObj = recurringInvoiceStore.frequencies.find(
+    (f) => f.value === frequencyFormat,
+  )
+  return frequencyObj ? frequencyObj.label : `CUSTOM: ${frequencyFormat}`
+}
+
+function refreshRecurringTable(): void {
+  recurringTableRef.value?.refresh()
+}
+
+function setRecurringStatusFilter(val: { title: string }): void {
+  if (recurringActiveTab.value === val.title) return
+  recurringActiveTab.value = val.title
+
+  switch (val.title) {
+    case t('recurring_invoices.active'):
+      recurringFilters.status = 'ACTIVE'
+      break
+    case t('recurring_invoices.on_hold'):
+      recurringFilters.status = 'ON_HOLD'
+      break
+    default:
+      recurringFilters.status = ''
+      break
+  }
+}
+
+function setRecurringFilters(): void {
+  recurringInvoiceStore.$patch((state) => {
+    state.selectedRecurringInvoices = []
+    state.selectAllField = false
+  })
+  refreshRecurringTable()
+}
+
+function clearRecurringFilter(): void {
+  recurringFilters.customer_id = ''
+  recurringFilters.status = ''
+  recurringFilters.from_date = ''
+  recurringFilters.to_date = ''
+  recurringActiveTab.value = t('recurring_invoices.all')
+}
+
+function clearRecurringStatusSearch(): void {
+  recurringFilters.status = ''
+  refreshRecurringTable()
+}
+
+function setRecurringActiveTab(val: string): void {
+  const tabMap: Record<string, string> = {
+    ACTIVE: t('recurring_invoices.active'),
+    ON_HOLD: t('recurring_invoices.on_hold'),
+    ALL: t('recurring_invoices.all'),
+  }
+  recurringActiveTab.value = tabMap[val] ?? t('recurring_invoices.all')
+}
+
+function removeMultipleRecurringInvoices(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('invoices.confirm_delete'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const response =
+        await recurringInvoiceStore.deleteMultipleRecurringInvoices()
+      if (response.data.success) {
+        refreshRecurringTable()
+        recurringInvoiceStore.$patch((state) => {
+          state.selectedRecurringInvoices = []
+          state.selectAllField = false
+        })
+      }
+    }
+  })
+}
 </script>
diff --git a/resources/scripts-v2/features/company/items/components/ItemModal.vue b/resources/scripts-v2/features/company/items/components/ItemModal.vue
index 0abd8fd4..212443c8 100644
--- a/resources/scripts-v2/features/company/items/components/ItemModal.vue
+++ b/resources/scripts-v2/features/company/items/components/ItemModal.vue
@@ -10,10 +10,11 @@ import {
 import useVuelidate from '@vuelidate/core'
 import { useModalStore } from '../../../../stores/modal.store'
 import { useCompanyStore } from '../../../../stores/company.store'
+import { useUserStore } from '../../../../stores/user.store'
 import { useItemStore } from '../store'
-
-// Tax type store - imported from original location
-import { taxTypeService } from '@v2/api/services/tax-type.service'
+import { useTaxTypes } from '../use-tax-types'
+import ItemUnitModal from '@v2/features/company/settings/components/ItemUnitModal.vue'
+import type { TaxType } from '@v2/types/domain/tax'
 
 interface TaxOption {
   id: number
@@ -24,6 +25,10 @@ interface TaxOption {
   tax_name: string
 }
 
+const ABILITIES = {
+  VIEW_TAX_TYPE: 'view-tax-type',
+} as const
+
 interface Emits {
   (e: 'newItem', item: unknown): void
 }
@@ -33,7 +38,8 @@ const emit = defineEmits<Emits>()
 const modalStore = useModalStore()
 const itemStore = useItemStore()
 const companyStore = useCompanyStore()
-// Tax types fetched via service
+const userStore = useUserStore()
+const { taxTypes, fetchTaxTypes } = useTaxTypes()
 
 const { t } = useI18n()
 const isLoading = ref<boolean>(false)
@@ -54,7 +60,7 @@ const price = computed<number>({
 
 const taxes = computed({
   get: () =>
-    itemStore.currentItem.taxes.map((tax) => {
+    itemStore.currentItem.taxes?.map((tax) => {
       if (tax) {
         const currencySymbol = companyStore.selectedCompanyCurrency?.symbol ?? '$'
         return {
@@ -68,7 +74,7 @@ const taxes = computed({
         }
       }
       return tax
-    }),
+    }) ?? [],
   set: (value: TaxOption[]) => {
     itemStore.currentItem.taxes = value as unknown as typeof itemStore.currentItem.taxes
   },
@@ -100,7 +106,7 @@ const v$ = useVuelidate(
 )
 
 const getTaxTypes = computed<TaxOption[]>(() => {
-  return taxTypeStore.taxTypes.map((tax) => {
+  return taxTypes.value.map((tax: TaxType) => {
     const currencyCode = companyStore.selectedCompanyCurrency?.code ?? 'USD'
     const amount =
       tax.calculation_type === 'fixed'
@@ -117,9 +123,13 @@ const getTaxTypes = computed<TaxOption[]>(() => {
   }) as TaxOption[]
 })
 
-onMounted(() => {
+onMounted(async () => {
   v$.value.$reset()
-  itemStore.fetchItemUnits({ limit: 'all' })
+  await itemStore.fetchItemUnits({ limit: 'all' })
+
+  if (userStore.hasAbilities(ABILITIES.VIEW_TAX_TYPE)) {
+    await fetchTaxTypes()
+  }
 })
 
 async function submitItemData(): Promise<void> {
@@ -163,6 +173,17 @@ async function submitItemData(): Promise<void> {
   }
 }
 
+function addItemUnit(): void {
+  modalStore.openModal({
+    title: t('settings.customization.items.add_item_unit'),
+    componentName: 'ItemUnitModal',
+    size: 'sm',
+    refreshData: (unit: { id: number }) => {
+      itemStore.currentItem.unit_id = unit.id
+    },
+  })
+}
+
 function closeItemModal(): void {
   modalStore.closeModal()
   setTimeout(() => {
@@ -225,7 +246,18 @@ function closeItemModal(): void {
                 :placeholder="$t('items.select_a_unit')"
                 searchable
                 track-by="name"
-              />
+              >
+                <template #action>
+                  <BaseSelectAction @click="addItemUnit">
+                    <BaseIcon
+                      name="PlusCircleIcon"
+                      class="h-4 mr-2 -ml-2 text-center text-primary-400"
+                    />
+                    {{ $t('settings.customization.items.add_item_unit') }}
+                  </BaseSelectAction>
+                </template>
+              </BaseMultiselect>
+              <ItemUnitModal />
             </BaseInputGroup>
 
             <BaseInputGroup
diff --git a/resources/scripts-v2/features/company/items/routes.ts b/resources/scripts-v2/features/company/items/routes.ts
index bdbee5f2..1f77e3ba 100644
--- a/resources/scripts-v2/features/company/items/routes.ts
+++ b/resources/scripts-v2/features/company/items/routes.ts
@@ -6,6 +6,7 @@ const itemRoutes: RouteRecordRaw[] = [
     name: 'items.index',
     component: () => import('./views/ItemIndexView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'view-item',
     },
   },
@@ -14,6 +15,7 @@ const itemRoutes: RouteRecordRaw[] = [
     name: 'items.create',
     component: () => import('./views/ItemCreateView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'create-item',
     },
   },
@@ -22,6 +24,7 @@ const itemRoutes: RouteRecordRaw[] = [
     name: 'items.edit',
     component: () => import('./views/ItemCreateView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'edit-item',
     },
   },
diff --git a/resources/scripts-v2/features/company/items/use-tax-types.ts b/resources/scripts-v2/features/company/items/use-tax-types.ts
new file mode 100644
index 00000000..4be06e0e
--- /dev/null
+++ b/resources/scripts-v2/features/company/items/use-tax-types.ts
@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import { taxTypeService } from '@v2/api/services/tax-type.service'
+import type { TaxType } from '@v2/types/domain/tax'
+import { handleApiError } from '@v2/utils/error-handling'
+
+export function useTaxTypes(): {
+  taxTypes: Ref<TaxType[]>
+  fetchTaxTypes: () => Promise<TaxType[]>
+} {
+  const taxTypes = ref<TaxType[]>([])
+
+  async function fetchTaxTypes(): Promise<TaxType[]> {
+    try {
+      const response = await taxTypeService.list({ limit: 'all' })
+      taxTypes.value = response.data
+      return taxTypes.value
+    } catch (error: unknown) {
+      handleApiError(error)
+      throw error
+    }
+  }
+
+  return {
+    taxTypes,
+    fetchTaxTypes,
+  }
+}
diff --git a/resources/scripts-v2/features/company/items/views/ItemCreateView.vue b/resources/scripts-v2/features/company/items/views/ItemCreateView.vue
index 01103980..d6827834 100644
--- a/resources/scripts-v2/features/company/items/views/ItemCreateView.vue
+++ b/resources/scripts-v2/features/company/items/views/ItemCreateView.vue
@@ -10,13 +10,12 @@ import {
 } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useItemStore } from '../store'
+import { useTaxTypes } from '../use-tax-types'
 import { useCompanyStore } from '../../../../stores/company.store'
 import { useModalStore } from '../../../../stores/modal.store'
 import { useUserStore } from '../../../../stores/user.store'
 import ItemUnitModal from '@v2/features/company/settings/components/ItemUnitModal.vue'
-
-// Tax type store - imported from original location
-import { taxTypeService } from '@v2/api/services/tax-type.service'
+import type { TaxType } from '@v2/types/domain/tax'
 
 interface TaxOption {
   id: number
@@ -33,7 +32,7 @@ const ABILITIES = {
 } as const
 
 const itemStore = useItemStore()
-// Tax types fetched via service
+const { taxTypes, fetchTaxTypes } = useTaxTypes()
 const modalStore = useModalStore()
 const companyStore = useCompanyStore()
 const userStore = useUserStore()
@@ -45,6 +44,7 @@ const router = useRouter()
 const isSaving = ref<boolean>(false)
 const taxPerItem = ref<string>(companyStore.selectedCompanySettings.tax_per_item || 'NO')
 const isFetchingInitialData = ref<boolean>(false)
+const isEdit = computed<boolean>(() => route.name === 'items.edit')
 
 itemStore.resetCurrentItem()
 loadData()
@@ -81,14 +81,12 @@ const taxes = computed({
   },
 })
 
-const isEdit = computed<boolean>(() => route.name === 'items.edit')
-
 const pageTitle = computed<string>(() =>
   isEdit.value ? t('items.edit_item') : t('items.new_item')
 )
 
 const getTaxTypes = computed<TaxOption[]>(() => {
-  return taxTypeStore.taxTypes.map((tax) => {
+  return taxTypes.value.map((tax: TaxType) => {
     const currencyCode = companyStore.selectedCompanyCurrency?.code ?? 'USD'
     return {
       ...tax,
@@ -132,6 +130,9 @@ async function addItemUnit(): Promise<void> {
     title: t('settings.customization.items.add_item_unit'),
     componentName: 'ItemUnitModal',
     size: 'sm',
+    refreshData: (unit: { id: number }) => {
+      itemStore.currentItem.unit_id = unit.id
+    },
   })
 }
 
@@ -140,7 +141,7 @@ async function loadData(): Promise<void> {
 
   await itemStore.fetchItemUnits({ limit: 'all' })
   if (userStore.hasAbilities(ABILITIES.VIEW_TAX_TYPE)) {
-    await taxTypeStore.fetchTaxTypes({ limit: 'all' })
+    await fetchTaxTypes()
   }
 
   if (isEdit.value) {
diff --git a/resources/scripts-v2/features/company/members/components/InviteMemberModal.vue b/resources/scripts-v2/features/company/members/components/InviteMemberModal.vue
index 4b8e5bad..6410a1ae 100644
--- a/resources/scripts-v2/features/company/members/components/InviteMemberModal.vue
+++ b/resources/scripts-v2/features/company/members/components/InviteMemberModal.vue
@@ -64,7 +64,7 @@ async function submitInvitation(): Promise<void> {
   try {
     await memberStore.inviteMember({
       email: form.email,
-      role: form.role_id !== null ? String(form.role_id) : undefined,
+      role_id: form.role_id,
     })
     form.email = ''
     form.role_id = null
diff --git a/resources/scripts-v2/features/company/members/routes.ts b/resources/scripts-v2/features/company/members/routes.ts
index 05770aa6..a011d7bd 100644
--- a/resources/scripts-v2/features/company/members/routes.ts
+++ b/resources/scripts-v2/features/company/members/routes.ts
@@ -6,7 +6,8 @@ const memberRoutes: RouteRecordRaw[] = [
     name: 'members.index',
     component: () => import('./views/MemberIndexView.vue'),
     meta: {
-      ability: 'view-member',
+      requiresAuth: true,
+      isOwner: true,
     },
   },
 ]
diff --git a/resources/scripts-v2/features/company/members/views/MemberIndexView.vue b/resources/scripts-v2/features/company/members/views/MemberIndexView.vue
index 5f25d644..6cc4f0c7 100644
--- a/resources/scripts-v2/features/company/members/views/MemberIndexView.vue
+++ b/resources/scripts-v2/features/company/members/views/MemberIndexView.vue
@@ -37,7 +37,7 @@ interface FetchResult {
 interface MemberFilters {
   name: string
   email: string
-  phone: string
+  role: string
 }
 
 const notificationStore = useNotificationStore()
@@ -54,7 +54,7 @@ const { t } = useI18n()
 const filters = reactive<MemberFilters>({
   name: '',
   email: '',
-  phone: '',
+  role: '',
 })
 
 const userTableColumns = computed<TableColumn[]>(() => [
@@ -76,10 +76,6 @@ const userTableColumns = computed<TableColumn[]>(() => [
     label: t('members.role'),
     sortable: false,
   },
-  {
-    key: 'phone',
-    label: t('members.phone'),
-  },
   {
     key: 'created_at',
     label: t('members.added_on'),
@@ -136,8 +132,8 @@ function refreshTable(): void {
 async function fetchData({ page, sort }: FetchParams): Promise<FetchResult> {
   const data = {
     display_name: filters.name,
-    phone: filters.phone,
     email: filters.email,
+    role: filters.role || undefined,
     orderByField: sort.fieldName || 'created_at',
     orderBy: sort.order || 'desc',
     page,
@@ -161,7 +157,7 @@ async function fetchData({ page, sort }: FetchParams): Promise<FetchResult> {
 function clearFilter(): void {
   filters.name = ''
   filters.email = ''
-  filters.phone = ''
+  filters.role = ''
 }
 
 function toggleFilter(): void {
@@ -261,12 +257,16 @@ function removeMultipleUsers(): void {
         />
       </BaseInputGroup>
 
-      <BaseInputGroup class="flex-1 mt-2" :label="$t('members.phone')">
-        <BaseInput
-          v-model="filters.phone"
-          type="text"
-          name="phone"
-          autocomplete="off"
+      <BaseInputGroup class="flex-1 mt-2" :label="$t('members.role')">
+        <BaseMultiselect
+          v-model="filters.role"
+          :options="memberStore.roles"
+          label="title"
+          value-prop="id"
+          :placeholder="$t('members.select_role')"
+          :can-clear="true"
+          :can-deselect="true"
+          searchable
         />
       </BaseInputGroup>
     </BaseFilterWrapper>
@@ -341,10 +341,6 @@ function removeMultipleUsers(): void {
           <span>{{ row.data.roles?.length ? row.data.roles[0].title : '-' }}</span>
         </template>
 
-        <template #cell-phone="{ row }">
-          <span>{{ row.data.phone ? row.data.phone : '-' }}</span>
-        </template>
-
         <template #cell-created_at="{ row }">
           <span>{{ row.data.formatted_created_at }}</span>
         </template>
diff --git a/resources/scripts-v2/features/company/modules/routes.ts b/resources/scripts-v2/features/company/modules/routes.ts
index 079a543d..52df3e43 100644
--- a/resources/scripts-v2/features/company/modules/routes.ts
+++ b/resources/scripts-v2/features/company/modules/routes.ts
@@ -9,6 +9,7 @@ export const moduleRoutes: RouteRecordRaw[] = [
     name: 'modules.index',
     component: ModuleIndexView,
     meta: {
+      requiresAuth: true,
       ability: 'manage-module',
       title: 'modules.title',
     },
@@ -18,6 +19,7 @@ export const moduleRoutes: RouteRecordRaw[] = [
     name: 'modules.view',
     component: ModuleDetailView,
     meta: {
+      requiresAuth: true,
       ability: 'manage-module',
       title: 'modules.title',
     },
diff --git a/resources/scripts-v2/features/company/modules/views/ModuleDetailView.vue b/resources/scripts-v2/features/company/modules/views/ModuleDetailView.vue
index 62b1ce12..1d9a2c0a 100644
--- a/resources/scripts-v2/features/company/modules/views/ModuleDetailView.vue
+++ b/resources/scripts-v2/features/company/modules/views/ModuleDetailView.vue
@@ -316,6 +316,7 @@ import { useI18n } from 'vue-i18n'
 import { useModuleStore } from '../store'
 import type { InstallationStep } from '../store'
 import ModuleCard from '../components/ModuleCard.vue'
+import { useDialogStore } from '../../../../stores/dialog.store'
 import type { Module, ModuleLink } from '../../../../types/domain/module'
 
 interface ModuleLinkItem {
@@ -330,6 +331,7 @@ interface TabItem {
 }
 
 const moduleStore = useModuleStore()
+const dialogStore = useDialogStore()
 const route = useRoute()
 const router = useRouter()
 const { t } = useI18n()
@@ -449,18 +451,30 @@ async function handleInstall(): Promise<void> {
   }
 }
 
-async function handleDisable(): Promise<void> {
+function handleDisable(): void {
   if (!moduleData.value) return
-  const confirmed = window.confirm(t('modules.disable_warning'))
-  if (!confirmed) return
 
-  isDisabling.value = true
-  const res = await moduleStore.disableModule(moduleData.value.module_name)
-  isDisabling.value = false
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('modules.disable_warning'),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        isDisabling.value = true
+        const response = await moduleStore.disableModule(moduleData.value!.module_name)
+        isDisabling.value = false
 
-  if (res.success) {
-    setTimeout(() => location.reload(), 1500)
-  }
+        if (response.success) {
+          setTimeout(() => location.reload(), 1500)
+        }
+      }
+    })
 }
 
 async function handleEnable(): Promise<void> {
diff --git a/resources/scripts-v2/features/company/modules/views/ModuleIndexView.vue b/resources/scripts-v2/features/company/modules/views/ModuleIndexView.vue
index cc50d082..a5d6eb51 100644
--- a/resources/scripts-v2/features/company/modules/views/ModuleIndexView.vue
+++ b/resources/scripts-v2/features/company/modules/views/ModuleIndexView.vue
@@ -9,7 +9,7 @@
 
     <!-- Connected: module listing -->
     <div v-if="hasApiToken && moduleStore.modules">
-      <BaseTabGroup class="-mb-5" @change="setStatusFilter">
+      <BaseTabGroup @change="setStatusFilter">
         <BaseTab :title="$t('general.all')" filter="" />
         <BaseTab :title="$t('modules.installed')" filter="INSTALLED" />
       </BaseTabGroup>
diff --git a/resources/scripts-v2/features/company/payments/components/PaymentDropdown.vue b/resources/scripts-v2/features/company/payments/components/PaymentDropdown.vue
index eccba0a2..a8df678a 100644
--- a/resources/scripts-v2/features/company/payments/components/PaymentDropdown.vue
+++ b/resources/scripts-v2/features/company/payments/components/PaymentDropdown.vue
@@ -76,6 +76,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { usePaymentStore } from '../store'
+import { useDialogStore } from '../../../../stores/dialog.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { Payment } from '../../../../types/domain/payment'
 
 interface TableRef {
@@ -102,20 +104,33 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const paymentStore = usePaymentStore()
+const dialogStore = useDialogStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 
 const isDetailView = computed<boolean>(() => route.name === 'payments.view')
 
-async function removePayment(): Promise<void> {
-  const confirmed = window.confirm(t('payments.confirm_delete'))
-  if (!confirmed) return
-
-  const payment = props.row as Payment
-  await paymentStore.deletePayment({ ids: [payment.id] })
-  router.push('/admin/payments')
-  props.table?.refresh()
+function removePayment(): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('payments.confirm_delete'),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        const payment = props.row as Payment
+        await paymentStore.deletePayment({ ids: [payment.id] })
+        router.push('/admin/payments')
+        props.table?.refresh()
+      }
+    })
 }
 
 function copyPdfUrl(): void {
@@ -133,10 +148,7 @@ function copyPdfUrl(): void {
 
 function sendPayment(): void {
   const payment = props.row as Payment
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('payments.send_payment'),
     componentName: 'SendPaymentModal',
     id: payment.id,
diff --git a/resources/scripts-v2/features/company/payments/components/SendPaymentModal.vue b/resources/scripts-v2/features/company/payments/components/SendPaymentModal.vue
new file mode 100644
index 00000000..2083caed
--- /dev/null
+++ b/resources/scripts-v2/features/company/payments/components/SendPaymentModal.vue
@@ -0,0 +1,321 @@
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closeSendPaymentModal"
+    @open="setInitialData"
+  >
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalTitle }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="w-6 h-6 text-muted cursor-pointer"
+          @click="closeSendPaymentModal"
+        />
+      </div>
+    </template>
+    <form v-if="!isPreview" action="">
+      <div class="px-8 py-8 sm:p-6">
+        <BaseInputGrid layout="one-column" class="col-span-7">
+          <BaseInputGroup
+            :label="$t('general.from')"
+            required
+            :error="v$.from.$error && v$.from.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="paymentMailForm.from"
+              type="text"
+              :invalid="v$.from.$error"
+              @input="v$.from.$touch()"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.to')"
+            required
+            :error="v$.to.$error && v$.to.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="paymentMailForm.to"
+              type="text"
+              :invalid="v$.to.$error"
+              @input="v$.to.$touch()"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.cc')"
+            :error="v$.cc && v$.cc.$error && v$.cc.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="paymentMailForm.cc"
+              type="email"
+              :invalid="v$.cc && v$.cc.$error"
+              @input="v$.cc && v$.cc.$touch()"
+              placeholder="Optional: CC recipient"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.bcc')"
+            :error="v$.bcc && v$.bcc.$error && v$.bcc.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="paymentMailForm.bcc"
+              type="email"
+              :invalid="v$.bcc && v$.bcc.$error"
+              @input="v$.bcc && v$.bcc.$touch()"
+              placeholder="Optional: BCC recipient"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :error="v$.subject.$error && v$.subject.$errors[0].$message"
+            :label="$t('general.subject')"
+            required
+          >
+            <BaseInput
+              v-model="paymentMailForm.subject"
+              type="text"
+              :invalid="v$.subject.$error"
+              @input="v$.subject.$touch()"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.body')"
+            :error="v$.body.$error && v$.body.$errors[0].$message"
+            required
+          >
+            <BaseCustomInput
+              v-model="paymentMailForm.body"
+              :fields="['customer', 'company', 'payment']"
+            />
+          </BaseInputGroup>
+        </BaseInputGrid>
+      </div>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+      >
+        <BaseButton
+          class="mr-3"
+          variant="primary-outline"
+          type="button"
+          @click="closeSendPaymentModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+        <BaseButton
+          :loading="isLoading"
+          :disabled="isLoading"
+          variant="primary"
+          type="button"
+          class="mr-3"
+          @click="sendPaymentData"
+        >
+          <template #left="slotProps">
+            <BaseIcon
+              v-if="!isLoading"
+              :class="slotProps.class"
+              name="PhotoIcon"
+            />
+          </template>
+          {{ $t('general.preview') }}
+        </BaseButton>
+      </div>
+    </form>
+    <div v-else>
+      <div class="my-6 mx-4 border border-line-default relative">
+        <BaseButton
+          class="absolute top-4 right-4"
+          :disabled="isLoading"
+          variant="primary-outline"
+          @click="cancelPreview"
+        >
+          <BaseIcon name="PencilIcon" class="h-5 mr-2" />
+          {{ $t('general.edit') }}
+        </BaseButton>
+
+        <iframe
+          :src="templateUrl"
+          frameborder="0"
+          class="w-full"
+          style="min-height: 500px"
+        ></iframe>
+      </div>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+      >
+        <BaseButton
+          class="mr-3"
+          variant="primary-outline"
+          type="button"
+          @click="closeSendPaymentModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+
+        <BaseButton
+          :loading="isLoading"
+          :disabled="isLoading"
+          variant="primary"
+          type="button"
+          @click="sendPaymentData()"
+        >
+          <BaseIcon
+            v-if="!isLoading"
+            name="PaperAirplaneIcon"
+            class="h-5 mr-2"
+          />
+          {{ $t('general.send') }}
+        </BaseButton>
+      </div>
+    </div>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, email, helpers } from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
+import { useModalStore } from '../../../../stores/modal.store'
+import { useCompanyStore } from '../../../../stores/company.store'
+import { useNotificationStore } from '../../../../stores/notification.store'
+import { usePaymentStore } from '../store'
+
+const modalStore = useModalStore()
+const companyStore = useCompanyStore()
+const notificationStore = useNotificationStore()
+const paymentStore = usePaymentStore()
+
+const { t } = useI18n()
+const isLoading = ref(false)
+const templateUrl = ref<string>('')
+const isPreview = ref(false)
+
+const paymentMailForm = reactive({
+  id: null as number | null,
+  from: null as string | null,
+  to: null as string | null,
+  cc: null as string | null,
+  bcc: null as string | null,
+  subject: t('payments.new_payment'),
+  body: null as string | null,
+})
+
+const modalActive = computed(() => {
+  return modalStore.active && modalStore.componentName === 'SendPaymentModal'
+})
+
+const modalTitle = computed(() => {
+  return modalStore.title
+})
+
+const modalData = computed(() => {
+  return modalStore.data as Record<string, unknown> | null
+})
+
+const rules = {
+  from: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  to: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  cc: {
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  bcc: {
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  subject: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  body: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}
+
+const v$ = useVuelidate(rules, paymentMailForm)
+
+function cancelPreview() {
+  isPreview.value = false
+}
+
+async function setInitialData() {
+  const admin = await companyStore.fetchBasicMailConfig()
+  paymentMailForm.id = modalStore.id as number
+
+  if (admin.data) {
+    paymentMailForm.from = (admin.data as Record<string, string>).from_mail
+  }
+
+  if (modalData.value) {
+    const customer = modalData.value.customer as Record<string, string> | undefined
+    if (customer) {
+      paymentMailForm.to = customer.email
+    }
+  }
+
+  paymentMailForm.body = companyStore.selectedCompanySettings.payment_mail_body
+  paymentMailForm.subject = t('payments.new_payment')
+}
+
+async function sendPaymentData() {
+  v$.value.$touch()
+  if (v$.value.$invalid) {
+    return true
+  }
+
+  try {
+    isLoading.value = true
+
+    if (!isPreview.value) {
+      const previewResponse = await paymentStore.previewPayment(
+        paymentMailForm as unknown as { id: number } & Record<string, unknown>,
+      )
+      isLoading.value = false
+
+      isPreview.value = true
+      const blob = new Blob([(previewResponse as { data: string }).data], {
+        type: 'text/html',
+      })
+      templateUrl.value = URL.createObjectURL(blob)
+
+      return
+    }
+
+    await paymentStore.sendEmail(
+      paymentMailForm as unknown as Parameters<typeof paymentStore.sendEmail>[0],
+    )
+
+    isLoading.value = false
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: 'payments.payment_sent_successfully',
+    })
+
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+
+    closeSendPaymentModal()
+  } catch (error) {
+    console.error(error)
+    isLoading.value = false
+    notificationStore.showNotification({
+      type: 'error',
+      message: 'payments.something_went_wrong',
+    })
+  }
+}
+
+function closeSendPaymentModal() {
+  modalStore.closeModal()
+
+  setTimeout(() => {
+    v$.value.$reset()
+    isPreview.value = false
+    templateUrl.value = ''
+  }, 300)
+}
+</script>
diff --git a/resources/scripts-v2/features/company/payments/routes.ts b/resources/scripts-v2/features/company/payments/routes.ts
index c0fa6b7c..432cb448 100644
--- a/resources/scripts-v2/features/company/payments/routes.ts
+++ b/resources/scripts-v2/features/company/payments/routes.ts
@@ -10,6 +10,7 @@ export const paymentRoutes: RouteRecordRaw[] = [
     name: 'payments.index',
     component: PaymentIndexView,
     meta: {
+      requiresAuth: true,
       ability: 'view-payment',
       title: 'payments.title',
     },
@@ -19,6 +20,7 @@ export const paymentRoutes: RouteRecordRaw[] = [
     name: 'payments.create',
     component: PaymentCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'create-payment',
       title: 'payments.new_payment',
     },
@@ -28,6 +30,7 @@ export const paymentRoutes: RouteRecordRaw[] = [
     name: 'payments.edit',
     component: PaymentCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'edit-payment',
       title: 'payments.edit_payment',
     },
@@ -37,6 +40,7 @@ export const paymentRoutes: RouteRecordRaw[] = [
     name: 'payments.view',
     component: PaymentDetailView,
     meta: {
+      requiresAuth: true,
       ability: 'view-payment',
       title: 'payments.title',
     },
@@ -46,6 +50,7 @@ export const paymentRoutes: RouteRecordRaw[] = [
     name: 'payments.create-from-invoice',
     component: PaymentCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'create-payment',
       title: 'payments.new_payment',
     },
diff --git a/resources/scripts-v2/features/company/payments/store.ts b/resources/scripts-v2/features/company/payments/store.ts
index 908985f5..120b1ca1 100644
--- a/resources/scripts-v2/features/company/payments/store.ts
+++ b/resources/scripts-v2/features/company/payments/store.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { useNotificationStore } from '../../../stores/notification.store'
 import { paymentService } from '../../../api/services/payment.service'
 import type {
   PaymentListParams,
@@ -129,6 +130,13 @@ export const usePaymentStore = defineStore('payment', {
     ): Promise<{ data: { data: Payment } }> {
       const response = await paymentService.create(data as never)
       this.payments.push(response.data)
+
+      const notificationStore = useNotificationStore()
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'payments.created_message',
+      })
+
       return { data: response }
     },
 
@@ -143,6 +151,13 @@ export const usePaymentStore = defineStore('payment', {
       if (pos !== -1) {
         this.payments[pos] = response.data
       }
+
+      const notificationStore = useNotificationStore()
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'payments.updated_message',
+      })
+
       return { data: response }
     },
 
@@ -176,8 +191,8 @@ export const usePaymentStore = defineStore('payment', {
       return paymentService.send(data)
     },
 
-    async previewPayment(id: number): Promise<unknown> {
-      return paymentService.sendPreview(id)
+    async previewPayment(params: { id: number } & Record<string, unknown>): Promise<unknown> {
+      return paymentService.sendPreview(params.id, params)
     },
 
     async getNextNumber(
diff --git a/resources/scripts-v2/features/company/payments/views/PaymentCreateView.vue b/resources/scripts-v2/features/company/payments/views/PaymentCreateView.vue
index 43613417..7e225613 100644
--- a/resources/scripts-v2/features/company/payments/views/PaymentCreateView.vue
+++ b/resources/scripts-v2/features/company/payments/views/PaymentCreateView.vue
@@ -78,9 +78,7 @@
               :content-loading="isLoadingContent"
               :placeholder="$t('customers.select_a_customer')"
               show-action
-              @update:model-value="
-                selectNewCustomer(paymentStore.currentPayment.customer_id)
-              "
+              @update:model-value="onManualCustomerSelect"
             />
           </BaseInputGroup>
 
@@ -177,10 +175,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onBeforeUnmount } from 'vue'
+import { ref, computed, watchEffect, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import cloneDeep from 'lodash/cloneDeep'
 import { usePaymentStore } from '../store'
+import { invoiceService } from '../../../../api/services/invoice.service'
 import type { Invoice } from '../../../../types/domain/invoice'
 
 const route = useRoute()
@@ -226,9 +226,90 @@ if (route.query.customer) {
 }
 
 paymentStore.fetchPaymentInitialData(isEdit.value, {
-  id: route.params.id as string | undefined,
+  id: isEdit.value ? (route.params.id as string) : undefined,
 })
 
+// Create-from-invoice: pre-select the invoice and its customer
+if (route.params.id && !isEdit.value) {
+  setInvoiceFromUrl()
+}
+
+async function setInvoiceFromUrl(): Promise<void> {
+  try {
+    const response = await invoiceService.get(Number(route.params.id))
+    const invoice = response.data
+    paymentStore.currentPayment.customer_id = invoice.customer_id ?? (invoice.customer as Record<string, unknown>)?.id as number
+    paymentStore.currentPayment.invoice_id = invoice.id
+  } catch {
+    // Invoice not found
+  }
+}
+
+// Reactively fetch invoices whenever customer_id changes
+// Handles: edit data load, manual selection, create-from-invoice
+watchEffect(() => {
+  if (paymentStore.currentPayment.customer_id) {
+    onCustomerChange(paymentStore.currentPayment.customer_id)
+  }
+})
+
+async function onCustomerChange(customerId: number): Promise<void> {
+  const params: Record<string, unknown> = {
+    customer_id: customerId,
+    status: isEdit.value ? '' : 'DUE',
+    limit: 'all',
+  }
+
+  isLoadingInvoices.value = true
+  try {
+    const response = await invoiceService.list(params as never)
+    invoiceList.value = [...(response.data as unknown as Invoice[])]
+
+    if (paymentStore.currentPayment.invoice_id) {
+      selectedInvoice.value =
+        invoiceList.value.find(
+          (inv) => inv.id === paymentStore.currentPayment.invoice_id,
+        ) ?? null
+
+      if (selectedInvoice.value) {
+        paymentStore.currentPayment.maxPayableAmount =
+          selectedInvoice.value.due_amount +
+          paymentStore.currentPayment.amount
+
+        if (amount.value === 0) {
+          amount.value = selectedInvoice.value.due_amount / 100
+        }
+      }
+    }
+
+    if (isEdit.value) {
+      invoiceList.value = invoiceList.value.filter(
+        (v) =>
+          v.due_amount > 0 ||
+          v.id === paymentStore.currentPayment.invoice_id,
+      )
+    }
+  } catch {
+    invoiceList.value = []
+  } finally {
+    isLoadingInvoices.value = false
+  }
+}
+
+function onManualCustomerSelect(): void {
+  const params: Record<string, unknown> = {
+    userId: paymentStore.currentPayment.customer_id,
+  }
+  if (route.params.id) {
+    params.model_id = route.params.id
+  }
+
+  paymentStore.currentPayment.invoice_id = null
+  selectedInvoice.value = null
+  paymentStore.currentPayment.amount = 0
+  paymentStore.getNextNumber(params, true)
+}
+
 function onSelectInvoice(id: number): void {
   if (id) {
     selectedInvoice.value =
@@ -241,26 +322,11 @@ function onSelectInvoice(id: number): void {
   }
 }
 
-function selectNewCustomer(id: number | null): void {
-  if (!id) return
-
-  const params: Record<string, unknown> = { userId: id }
-  if (route.params.id) {
-    params.model_id = route.params.id
-  }
-
-  paymentStore.currentPayment.invoice_id = null
-  selectedInvoice.value = null
-  paymentStore.currentPayment.amount = 0
-  invoiceList.value = []
-  paymentStore.getNextNumber(params, true)
-}
-
 async function submitPaymentData(): Promise<void> {
   isSaving.value = true
 
   const data = {
-    ...paymentStore.currentPayment,
+    ...cloneDeep(paymentStore.currentPayment),
   }
 
   try {
diff --git a/resources/scripts-v2/features/company/payments/views/PaymentDetailView.vue b/resources/scripts-v2/features/company/payments/views/PaymentDetailView.vue
index b9626830..ffb11efe 100644
--- a/resources/scripts-v2/features/company/payments/views/PaymentDetailView.vue
+++ b/resources/scripts-v2/features/company/payments/views/PaymentDetailView.vue
@@ -151,16 +151,9 @@
     </div>
 
     <!-- PDF Preview -->
-    <div
-      class="flex flex-col min-h-0 mt-8 overflow-hidden"
-      style="height: 75vh"
-    >
-      <iframe
-        v-if="shareableLink"
-        :src="shareableLink"
-        class="flex-1 border border-gray-400 border-solid rounded-md"
-      />
-    </div>
+    <BasePdfPreview :src="shareableLink" />
+
+    <SendPaymentModal />
   </BasePage>
 </template>
 
@@ -170,7 +163,10 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { usePaymentStore } from '../store'
 import PaymentDropdown from '../components/PaymentDropdown.vue'
+import SendPaymentModal from '../components/SendPaymentModal.vue'
 import LoadingIcon from '@v2/components/icons/LoadingIcon.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { Payment } from '../../../../types/domain/payment'
 
 interface Props {
@@ -187,10 +183,35 @@ const props = withDefaults(defineProps<Props>(), {
   canSend: false,
 })
 
+const ABILITIES = {
+  EDIT: 'edit-payment',
+  VIEW: 'view-payment',
+  DELETE: 'delete-payment',
+  SEND: 'send-payment',
+} as const
+
 const paymentStore = usePaymentStore()
+const userStore = useUserStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canView = computed<boolean>(() => {
+  return props.canView || userStore.hasAbilities(ABILITIES.VIEW)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
+const canSend = computed<boolean>(() => {
+  return props.canSend || userStore.hasAbilities(ABILITIES.SEND)
+})
+
 const paymentData = ref<Payment | Record<string, unknown>>({})
 const isFetching = ref<boolean>(false)
 const isLoading = ref<boolean>(false)
@@ -340,15 +361,13 @@ function sortData(): void {
 }
 
 function onPaymentSend(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('payments.send_payment'),
     componentName: 'SendPaymentModal',
     id: (paymentData.value as Payment).id,
     data: paymentData.value,
     variant: 'lg',
+    refreshData: () => loadPayment(),
   })
 }
 </script>
diff --git a/resources/scripts-v2/features/company/payments/views/PaymentIndexView.vue b/resources/scripts-v2/features/company/payments/views/PaymentIndexView.vue
index f08700e8..d7598ff8 100644
--- a/resources/scripts-v2/features/company/payments/views/PaymentIndexView.vue
+++ b/resources/scripts-v2/features/company/payments/views/PaymentIndexView.vue
@@ -155,7 +155,14 @@
         </template>
 
         <template #cell-name="{ row }">
-          <BaseText :text="row.data.customer.name" tag="span" />
+          <router-link
+            v-if="row.data.customer?.id"
+            :to="`/admin/customers/${row.data.customer.id}/view`"
+            class="font-medium text-primary-500 hover:text-primary-600"
+          >
+            {{ row.data.customer.name }}
+          </router-link>
+          <span v-else>{{ row.data.customer?.name ?? '-' }}</span>
         </template>
 
         <template #cell-payment_mode="{ row }">
@@ -165,9 +172,14 @@
         </template>
 
         <template #cell-invoice_number="{ row }">
-          <span>
-            {{ row.data.invoice?.invoice_number ?? '-' }}
-          </span>
+          <router-link
+            v-if="row.data.invoice?.id"
+            :to="`/admin/invoices/${row.data.invoice.id}/view`"
+            class="font-medium text-primary-500 hover:text-primary-600"
+          >
+            {{ row.data.invoice.invoice_number }}
+          </router-link>
+          <span v-else>-</span>
         </template>
 
         <template #cell-amount="{ row }">
@@ -198,6 +210,8 @@ import { useI18n } from 'vue-i18n'
 import { debouncedWatch } from '@vueuse/core'
 import { usePaymentStore } from '../store'
 import PaymentDropdown from '../components/PaymentDropdown.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useDialogStore } from '../../../../stores/dialog.store'
 import type { Payment, PaymentMethod } from '../../../../types/domain/payment'
 
 interface Props {
@@ -216,7 +230,17 @@ const props = withDefaults(defineProps<Props>(), {
   canSend: false,
 })
 
+const ABILITIES = {
+  CREATE: 'create-payment',
+  EDIT: 'edit-payment',
+  VIEW: 'view-payment',
+  DELETE: 'delete-payment',
+  SEND: 'send-payment',
+} as const
+
 const paymentStore = usePaymentStore()
+const userStore = useUserStore()
+const dialogStore = useDialogStore()
 const { t } = useI18n()
 
 const tableRef = ref<{ refresh: () => void } | null>(null)
@@ -239,8 +263,28 @@ const showEmptyScreen = computed<boolean>(
   () => !paymentStore.paymentTotalCount && !isFetchingInitialData.value,
 )
 
+const canCreate = computed<boolean>(() => {
+  return props.canCreate || userStore.hasAbilities(ABILITIES.CREATE)
+})
+
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canView = computed<boolean>(() => {
+  return props.canView || userStore.hasAbilities(ABILITIES.VIEW)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
+const canSend = computed<boolean>(() => {
+  return props.canSend || userStore.hasAbilities(ABILITIES.SEND)
+})
+
 const hasAtLeastOneAbility = computed<boolean>(() => {
-  return props.canDelete || props.canEdit || props.canView || props.canSend
+  return canDelete.value || canEdit.value || canView.value || canSend.value
 })
 
 interface TableColumn {
@@ -370,13 +414,24 @@ function toggleFilter(): void {
   showFilters.value = !showFilters.value
 }
 
-async function removeMultiplePayments(): Promise<void> {
-  const confirmed = window.confirm(t('payments.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await paymentStore.deleteMultiplePayments()
-  if (res.data.success) {
-    refreshTable()
-  }
+function removeMultiplePayments(): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('payments.confirm_delete'),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        const response = await paymentStore.deleteMultiplePayments()
+        if (response.data.success) {
+          refreshTable()
+        }
+      }
+    })
 }
 </script>
diff --git a/resources/scripts-v2/features/company/recurring-invoices/components/RecurringInvoiceBasicFields.vue b/resources/scripts-v2/features/company/recurring-invoices/components/RecurringInvoiceBasicFields.vue
index 661060f2..dc64bd7f 100644
--- a/resources/scripts-v2/features/company/recurring-invoices/components/RecurringInvoiceBasicFields.vue
+++ b/resources/scripts-v2/features/company/recurring-invoices/components/RecurringInvoiceBasicFields.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="col-span-5 pr-0">
+  <div class="col-span-6 pr-0">
     <BaseCustomerSelectPopup
-      v-model="recurringInvoiceStore.newRecurringInvoice.customer"
       :content-loading="isLoading"
       type="recurring-invoice"
     />
diff --git a/resources/scripts-v2/features/company/recurring-invoices/components/RecurringInvoiceDropdown.vue b/resources/scripts-v2/features/company/recurring-invoices/components/RecurringInvoiceDropdown.vue
index ec130e30..c77e3c9e 100644
--- a/resources/scripts-v2/features/company/recurring-invoices/components/RecurringInvoiceDropdown.vue
+++ b/resources/scripts-v2/features/company/recurring-invoices/components/RecurringInvoiceDropdown.vue
@@ -51,6 +51,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useRecurringInvoiceStore } from '../store'
+import { useDialogStore } from '../../../../stores/dialog.store'
 import type { RecurringInvoice } from '../../../../types/domain/recurring-invoice'
 
 interface TableRef {
@@ -75,6 +76,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const recurringInvoiceStore = useRecurringInvoiceStore()
+const dialogStore = useDialogStore()
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
@@ -83,25 +85,34 @@ const isDetailView = computed<boolean>(
   () => route.name === 'recurring-invoices.view',
 )
 
-async function removeRecurringInvoice(): Promise<void> {
-  const confirmed = window.confirm(t('invoices.confirm_delete'))
-  if (!confirmed) return
+function removeRecurringInvoice(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('invoices.confirm_delete'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const invoiceRow = props.row as RecurringInvoice
+      const response = await recurringInvoiceStore.deleteMultipleRecurringInvoices(
+        invoiceRow.id,
+      )
 
-  const invoiceRow = props.row as RecurringInvoice
-  const res = await recurringInvoiceStore.deleteMultipleRecurringInvoices(
-    invoiceRow.id,
-  )
+      if (response.data.success) {
+        props.table?.refresh()
+        recurringInvoiceStore.$patch((state) => {
+          state.selectedRecurringInvoices = []
+          state.selectAllField = false
+        })
 
-  if (res.data.success) {
-    props.table?.refresh()
-    recurringInvoiceStore.$patch((state) => {
-      state.selectedRecurringInvoices = []
-      state.selectAllField = false
-    })
-
-    if (isDetailView.value) {
-      router.push('/admin/recurring-invoices')
+        if (isDetailView.value) {
+          router.push('/admin/recurring-invoices')
+        }
+      }
     }
-  }
+  })
 }
 </script>
diff --git a/resources/scripts-v2/features/company/recurring-invoices/routes.ts b/resources/scripts-v2/features/company/recurring-invoices/routes.ts
index 12a6312a..6e5cbc27 100644
--- a/resources/scripts-v2/features/company/recurring-invoices/routes.ts
+++ b/resources/scripts-v2/features/company/recurring-invoices/routes.ts
@@ -1,36 +1,26 @@
 import type { RouteRecordRaw } from 'vue-router'
 
-const RecurringInvoiceIndexView = () =>
-  import('./views/RecurringInvoiceIndexView.vue')
-const RecurringInvoiceCreateView = () =>
-  import('./views/RecurringInvoiceCreateView.vue')
+const InvoiceCreateView = () =>
+  import('../invoices/views/InvoiceCreateView.vue')
 const RecurringInvoiceDetailView = () =>
   import('./views/RecurringInvoiceDetailView.vue')
 
 export const recurringInvoiceRoutes: RouteRecordRaw[] = [
   {
     path: 'recurring-invoices',
-    name: 'recurring-invoices.index',
-    component: RecurringInvoiceIndexView,
-    meta: {
-      ability: 'view-recurring-invoice',
-      title: 'recurring_invoices.title',
-    },
+    redirect: '/admin/invoices?view=recurring',
   },
   {
     path: 'recurring-invoices/create',
     name: 'recurring-invoices.create',
-    component: RecurringInvoiceCreateView,
-    meta: {
-      ability: 'create-recurring-invoice',
-      title: 'recurring_invoices.new_invoice',
-    },
+    redirect: '/admin/invoices/create?recurring=1',
   },
   {
     path: 'recurring-invoices/:id/edit',
     name: 'recurring-invoices.edit',
-    component: RecurringInvoiceCreateView,
+    component: InvoiceCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'edit-recurring-invoice',
       title: 'recurring_invoices.edit_invoice',
     },
@@ -40,6 +30,7 @@ export const recurringInvoiceRoutes: RouteRecordRaw[] = [
     name: 'recurring-invoices.view',
     component: RecurringInvoiceDetailView,
     meta: {
+      requiresAuth: true,
       ability: 'view-recurring-invoice',
       title: 'recurring_invoices.title',
     },
diff --git a/resources/scripts-v2/features/company/recurring-invoices/store.ts b/resources/scripts-v2/features/company/recurring-invoices/store.ts
index b715dfdf..00ee042e 100644
--- a/resources/scripts-v2/features/company/recurring-invoices/store.ts
+++ b/resources/scripts-v2/features/company/recurring-invoices/store.ts
@@ -1,4 +1,6 @@
 import { defineStore } from 'pinia'
+import { useNotificationStore } from '../../../stores/notification.store'
+import { useCompanyStore } from '../../../stores/company.store'
 import { recurringInvoiceService } from '../../../api/services/recurring-invoice.service'
 import type {
   RecurringInvoiceListParams,
@@ -19,6 +21,7 @@ import type {
   DocumentTax,
   DocumentItem,
 } from '../../shared/document-form/use-document-calculations'
+import { generateClientId } from '../../../utils'
 
 // ----------------------------------------------------------------
 // Frequency options
@@ -35,11 +38,11 @@ export interface FrequencyOption {
 
 function createTaxStub(): DocumentTax {
   return {
-    id: crypto.randomUUID(),
+    id: generateClientId(),
     name: '',
     tax_type_id: 0,
     type: 'GENERAL',
-    amount: 0,
+    amount: null,
     percent: null,
     compound_tax: false,
     calculation_type: null,
@@ -49,7 +52,7 @@ function createTaxStub(): DocumentTax {
 
 function createRecurringInvoiceItemStub(): DocumentItem {
   return {
-    id: crypto.randomUUID(),
+    id: generateClientId(),
     item_id: null,
     name: '',
     description: null,
@@ -240,56 +243,21 @@ export const useRecurringInvoiceStore = defineStore('recurring-invoice', {
   actions: {
     initFrequencies(t: (key: string) => string): void {
       this.frequencies = [
-        {
-          label: t('recurring_invoices.frequency.every_minute'),
-          value: '* * * * *',
-        },
-        {
-          label: t('recurring_invoices.frequency.every_30_minute'),
-          value: '*/30 * * * *',
-        },
-        {
-          label: t('recurring_invoices.frequency.every_hour'),
-          value: '0 * * * *',
-        },
-        {
-          label: t('recurring_invoices.frequency.every_2_hour'),
-          value: '0 */2 * * *',
-        },
-        {
-          label: t('recurring_invoices.frequency.every_day_at_midnight'),
-          value: '0 0 * * *',
-        },
-        {
-          label: t('recurring_invoices.frequency.every_week'),
-          value: '0 0 * * 0',
-        },
-        {
-          label: t(
-            'recurring_invoices.frequency.every_15_days_at_midnight',
-          ),
-          value: '0 5 */15 * *',
-        },
-        {
-          label: t(
-            'recurring_invoices.frequency.on_the_first_day_of_every_month_at_midnight',
-          ),
-          value: '0 0 1 * *',
-        },
-        {
-          label: t('recurring_invoices.frequency.every_6_month'),
-          value: '0 0 1 */6 *',
-        },
-        {
-          label: t(
-            'recurring_invoices.frequency.every_year_on_the_first_day_of_january_at_midnight',
-          ),
-          value: '0 0 1 1 *',
-        },
-        {
-          label: t('recurring_invoices.frequency.custom'),
-          value: 'CUSTOM',
-        },
+        // Common business intervals
+        { label: t('recurring_invoices.frequency.every_week'), value: '0 0 * * 0' },
+        { label: t('recurring_invoices.frequency.every_2_weeks'), value: '0 0 */14 * *' },
+        { label: t('recurring_invoices.frequency.every_month'), value: '0 0 1 * *' },
+        { label: t('recurring_invoices.frequency.every_2_months'), value: '0 0 1 */2 *' },
+        { label: t('recurring_invoices.frequency.every_quarter'), value: '0 0 1 */3 *' },
+        { label: t('recurring_invoices.frequency.every_6_month'), value: '0 0 1 */6 *' },
+        { label: t('recurring_invoices.frequency.every_year'), value: '0 0 1 1 *' },
+        // Less common intervals
+        { label: t('recurring_invoices.frequency.every_day'), value: '0 0 * * *' },
+        { label: t('recurring_invoices.frequency.every_15_days_at_midnight'), value: '0 5 */15 * *' },
+        { label: t('recurring_invoices.frequency.every_hour'), value: '0 * * * *' },
+        { label: t('recurring_invoices.frequency.every_minute'), value: '* * * * *' },
+        // Custom cron expression
+        { label: t('recurring_invoices.frequency.custom'), value: 'CUSTOM' },
       ]
     },
 
@@ -400,6 +368,13 @@ export const useRecurringInvoiceStore = defineStore('recurring-invoice', {
         ...this.recurringInvoices,
         response.data,
       ]
+
+      const notificationStore = useNotificationStore()
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'recurring_invoices.created_message',
+      })
+
       return { data: response }
     },
 
@@ -416,6 +391,13 @@ export const useRecurringInvoiceStore = defineStore('recurring-invoice', {
       if (pos !== -1) {
         this.recurringInvoices[pos] = response.data
       }
+
+      const notificationStore = useNotificationStore()
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'recurring_invoices.updated_message',
+      })
+
       return { data: response }
     },
 
@@ -502,13 +484,16 @@ export const useRecurringInvoiceStore = defineStore('recurring-invoice', {
     async fetchRecurringInvoiceInitialSettings(
       isEdit: boolean,
       routeParams?: { id?: string; query?: Record<string, string> },
-      companySettings?: Record<string, string>,
+      companySettingsParam?: Record<string, string>,
       companyCurrency?: Currency,
     ): Promise<void> {
       this.isFetchingInitialSettings = true
 
-      if (companyCurrency) {
-        this.newRecurringInvoice.currency = companyCurrency
+      const companyStore = useCompanyStore()
+      const companySettings = companySettingsParam ?? companyStore.selectedCompanySettings
+
+      if (companyCurrency || companyStore.selectedCompanyCurrency) {
+        this.newRecurringInvoice.currency = companyCurrency ?? companyStore.selectedCompanyCurrency!
       }
 
       if (routeParams?.query?.customer) {
diff --git a/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceCreateView.vue b/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceCreateView.vue
index bd017686..5a660b49 100644
--- a/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceCreateView.vue
+++ b/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceCreateView.vue
@@ -48,6 +48,7 @@
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import cloneDeep from 'lodash/cloneDeep'
 import { useRecurringInvoiceStore } from '../store'
 import RecurringInvoiceBasicFields from '../components/RecurringInvoiceBasicFields.vue'
 
@@ -99,7 +100,7 @@ async function submitForm(): Promise<void> {
   isSaving.value = true
 
   const data: Record<string, unknown> = {
-    ...recurringInvoiceStore.newRecurringInvoice,
+    ...cloneDeep(recurringInvoiceStore.newRecurringInvoice),
     sub_total: recurringInvoiceStore.getSubTotal,
     total: recurringInvoiceStore.getTotal,
     tax: recurringInvoiceStore.getTotalTax,
diff --git a/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceDetailView.vue b/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceDetailView.vue
index bbd041b2..93814ffb 100644
--- a/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceDetailView.vue
+++ b/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceDetailView.vue
@@ -1,5 +1,5 @@
 <template>
-  <BasePage class="xl:pl-96 xl:ml-8">
+  <BasePage class="xl:pl-96">
     <BasePageHeader :title="pageTitle">
       <template #actions>
         <RecurringInvoiceDropdown
@@ -12,86 +12,266 @@
       </template>
     </BasePageHeader>
 
-    <!-- Content loaded from partials / child components would go here -->
-    <div class="mt-8">
+    <!-- LEFT SIDEBAR (fixed) -->
+    <div
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-[6.4rem] ml-56 bg-surface xl:ml-64 w-88 xl:block"
+    >
       <div
-        v-if="recurringInvoiceStore.isFetchingViewData"
-        class="flex justify-center p-12"
+        class="flex items-center justify-between px-4 pt-8 pb-2 border border-line-default border-solid height-full"
       >
-        <LoadingIcon class="h-8 animate-spin text-primary-400" />
-      </div>
+        <div class="mb-6">
+          <BaseInput
+            v-model="searchData.searchText"
+            :placeholder="$t('general.search')"
+            type="text"
+            variant="gray"
+            @input="onSearched()"
+          >
+            <template #right>
+              <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
+            </template>
+          </BaseInput>
+        </div>
 
-      <div v-else>
-        <!-- Invoice details info would be rendered here -->
-        <div class="bg-surface rounded-xl border border-line-default p-6">
-          <div class="grid grid-cols-2 gap-4 text-sm">
-            <div>
-              <span class="text-muted">{{ $t('recurring_invoices.starts_at') }}:</span>
-              <span class="ml-2 text-heading">
-                {{ recurringInvoiceStore.newRecurringInvoice.starts_at }}
-              </span>
+        <div class="flex mb-6 ml-3" role="group" aria-label="First group">
+          <BaseDropdown class="ml-3" position="bottom-start">
+            <template #activator>
+              <BaseButton size="md" variant="gray">
+                <BaseIcon name="FunnelIcon" class="h-5" />
+              </BaseButton>
+            </template>
+            <div
+              class="px-2 py-1 pb-2 mb-1 mb-2 text-sm border-b border-line-default border-solid"
+            >
+              {{ $t('general.sort_by') }}
             </div>
-            <div>
-              <span class="text-muted">{{ $t('recurring_invoices.next_invoice_date') }}:</span>
-              <span class="ml-2 text-heading">
-                {{ recurringInvoiceStore.newRecurringInvoice.next_invoice_at }}
-              </span>
-            </div>
-            <div>
-              <span class="text-muted">{{ $t('recurring_invoices.frequency.title') }}:</span>
-              <span class="ml-2 text-heading">
-                {{ recurringInvoiceStore.newRecurringInvoice.frequency }}
-              </span>
-            </div>
-            <div>
-              <span class="text-muted">{{ $t('recurring_invoices.status') }}:</span>
-              <span class="ml-2">
-                <BaseRecurringInvoiceStatusBadge
-                  :status="recurringInvoiceStore.newRecurringInvoice.status"
-                  class="px-2 py-0.5"
-                >
-                  {{ recurringInvoiceStore.newRecurringInvoice.status }}
-                </BaseRecurringInvoiceStatusBadge>
-              </span>
-            </div>
-            <div>
-              <span class="text-muted">{{ $t('recurring_invoices.limit_by') }}:</span>
-              <span class="ml-2 text-heading">
-                {{ recurringInvoiceStore.newRecurringInvoice.limit_by }}
-              </span>
-            </div>
-            <div v-if="recurringInvoiceStore.newRecurringInvoice.limit_by === 'COUNT'">
-              <span class="text-muted">{{ $t('recurring_invoices.count') }}:</span>
-              <span class="ml-2 text-heading">
-                {{ recurringInvoiceStore.newRecurringInvoice.limit_count }}
-              </span>
-            </div>
-            <div v-if="recurringInvoiceStore.newRecurringInvoice.limit_by === 'DATE'">
-              <span class="text-muted">{{ $t('recurring_invoices.limit_date') }}:</span>
-              <span class="ml-2 text-heading">
-                {{ recurringInvoiceStore.newRecurringInvoice.limit_date }}
-              </span>
-            </div>
-            <div>
-              <span class="text-muted">{{ $t('recurring_invoices.send_automatically') }}:</span>
-              <span class="ml-2 text-heading">
-                {{ recurringInvoiceStore.newRecurringInvoice.send_automatically ? $t('general.yes') : $t('general.no') }}
-              </span>
-            </div>
-          </div>
+
+            <BaseDropdownItem class="flex px-1 py-2 cursor-pointer">
+              <BaseInputGroup class="-mt-3 font-normal">
+                <BaseRadio
+                  id="filter_next_invoice_date"
+                  v-model="searchData.orderByField"
+                  :label="$t('recurring_invoices.next_invoice_date')"
+                  size="sm"
+                  name="filter"
+                  value="next_invoice_at"
+                  @update:model-value="onSearched"
+                />
+              </BaseInputGroup>
+            </BaseDropdownItem>
+
+            <BaseDropdownItem class="flex px-1 py-2 cursor-pointer">
+              <BaseInputGroup class="-mt-3 font-normal">
+                <BaseRadio
+                  id="filter_start_date"
+                  v-model="searchData.orderByField"
+                  :label="$t('recurring_invoices.starts_at')"
+                  value="starts_at"
+                  size="sm"
+                  name="filter"
+                  @update:model-value="onSearched"
+                />
+              </BaseInputGroup>
+            </BaseDropdownItem>
+          </BaseDropdown>
+
+          <BaseButton class="ml-1" size="md" variant="gray" @click="sortData">
+            <BaseIcon v-if="getOrderBy" name="BarsArrowUpIcon" class="h-5" />
+            <BaseIcon v-else name="BarsArrowDownIcon" class="h-5" />
+          </BaseButton>
         </div>
       </div>
+
+      <div
+        ref="invoiceListSection"
+        class="h-full overflow-y-scroll border-l border-line-default border-solid base-scroll"
+      >
+        <div v-for="(invoice, index) in invoiceList" :key="index">
+          <router-link
+            v-if="invoice"
+            :id="'recurring-invoice-' + invoice.id"
+            :to="`/admin/recurring-invoices/${invoice.id}/view`"
+            :class="[
+              'flex justify-between side-invoice p-4 cursor-pointer hover:bg-hover-strong items-center border-l-4 border-l-transparent',
+              {
+                'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
+                  hasActiveUrl(invoice.id),
+              },
+            ]"
+            style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
+          >
+            <div class="flex-2">
+              <BaseText
+                :text="invoice.customer?.name ?? ''"
+                class="pr-2 mb-2 text-sm not-italic font-normal leading-5 text-heading capitalize truncate"
+              />
+
+              <div
+                class="mt-1 mb-2 text-xs not-italic font-medium leading-5 text-body"
+              >
+                {{ invoice.invoice_number }}
+              </div>
+              <BaseRecurringInvoiceStatusBadge
+                :status="invoice.status"
+                class="px-1 text-xs"
+              >
+                <BaseRecurringInvoiceStatusLabel :status="invoice.status" />
+              </BaseRecurringInvoiceStatusBadge>
+            </div>
+
+            <div class="flex-1 whitespace-nowrap right">
+              <BaseFormatMoney
+                class="block mb-2 text-xl not-italic font-semibold leading-8 text-right text-heading"
+                :amount="invoice.total"
+                :currency="invoice.customer?.currency"
+              />
+
+              <div
+                class="text-sm not-italic font-normal leading-5 text-right text-body est-date"
+              >
+                {{ invoice.formatted_starts_at }}
+              </div>
+            </div>
+          </router-link>
+        </div>
+        <div v-if="isSidebarLoading" class="flex justify-center p-4 items-center">
+          <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
+        </div>
+        <p
+          v-if="!invoiceList?.length && !isSidebarLoading"
+          class="flex justify-center px-4 mt-5 text-sm text-body"
+        >
+          {{ $t('invoices.no_matching_invoices') }}
+        </p>
+      </div>
     </div>
+
+    <!-- MAIN CONTENT -->
+    <div
+      v-if="recurringInvoiceStore.isFetchingViewData"
+      class="flex justify-center p-12"
+    >
+      <LoadingIcon class="h-8 animate-spin text-primary-400" />
+    </div>
+
+    <BaseCard v-else class="mt-10">
+      <BaseHeading>
+        {{ $t('customers.basic_info') }}
+      </BaseHeading>
+
+      <BaseDescriptionList class="mt-5">
+        <BaseDescriptionListItem
+          :label="$t('recurring_invoices.starts_at')"
+          :content-loading="recurringInvoiceStore.isFetchingViewData"
+          :value="recurringInvoiceStore.newRecurringInvoice?.formatted_starts_at"
+        />
+
+        <BaseDescriptionListItem
+          :label="$t('recurring_invoices.next_invoice_date')"
+          :content-loading="recurringInvoiceStore.isFetchingViewData"
+          :value="recurringInvoiceStore.newRecurringInvoice?.formatted_next_invoice_at"
+        />
+
+        <BaseDescriptionListItem
+          v-if="selectedFrequencyLabel"
+          :label="$t('recurring_invoices.frequency.title')"
+          :value="selectedFrequencyLabel"
+          :content-loading="recurringInvoiceStore.isFetchingViewData"
+        />
+
+        <BaseDescriptionListItem
+          v-if="
+            recurringInvoiceStore.newRecurringInvoice?.limit_by !== 'NONE'
+          "
+          :label="$t('recurring_invoices.limit_by')"
+          :content-loading="recurringInvoiceStore.isFetchingViewData"
+          :value="recurringInvoiceStore.newRecurringInvoice?.limit_by"
+        />
+
+        <BaseDescriptionListItem
+          v-if="
+            recurringInvoiceStore.newRecurringInvoice?.limit_date &&
+            recurringInvoiceStore.newRecurringInvoice?.limit_by !== 'NONE'
+          "
+          :label="$t('recurring_invoices.limit_date')"
+          :content-loading="recurringInvoiceStore.isFetchingViewData"
+          :value="recurringInvoiceStore.newRecurringInvoice?.limit_date"
+        />
+
+        <BaseDescriptionListItem
+          v-if="recurringInvoiceStore.newRecurringInvoice?.limit_by === 'COUNT'"
+          :label="$t('recurring_invoices.limit_count')"
+          :value="recurringInvoiceStore.newRecurringInvoice?.limit_count"
+          :content-loading="recurringInvoiceStore.isFetchingViewData"
+        />
+
+        <BaseDescriptionListItem
+          :label="$t('recurring_invoices.send_automatically')"
+          :content-loading="recurringInvoiceStore.isFetchingViewData"
+          :value="
+            recurringInvoiceStore.newRecurringInvoice?.send_automatically
+              ? $t('general.yes')
+              : $t('general.no')
+          "
+        />
+      </BaseDescriptionList>
+
+      <BaseHeading class="mt-8">
+        {{ $t('invoices.title', 2) }}
+      </BaseHeading>
+
+      <div class="relative table-container">
+        <BaseTable
+          :data="recurringInvoiceStore.newRecurringInvoice.invoices"
+          :columns="invoiceColumns"
+          :loading="recurringInvoiceStore.isFetchingViewData"
+          :placeholder-count="5"
+          class="mt-5"
+        >
+          <!-- Invoice date -->
+          <template #cell-invoice_date="{ row }">
+            {{ row.data.formatted_invoice_date }}
+          </template>
+
+          <!-- Invoice Number -->
+          <template #cell-invoice_number="{ row }">
+            <router-link
+              :to="{ path: `/admin/invoices/${row.data.id}/view` }"
+              class="font-medium text-primary-500"
+            >
+              {{ row.data.invoice_number }}
+            </router-link>
+          </template>
+
+          <!-- Invoice total -->
+          <template #cell-total="{ row }">
+            <BaseFormatMoney
+              :amount="row.data.due_amount"
+              :currency="row.data.currency"
+            />
+          </template>
+
+          <!-- Invoice status -->
+          <template #cell-status="{ row }">
+            <BaseInvoiceStatusBadge :status="row.data.status" class="px-3 py-1">
+              <BaseInvoiceStatusLabel :status="row.data.status" />
+            </BaseInvoiceStatusBadge>
+          </template>
+        </BaseTable>
+      </div>
+    </BaseCard>
   </BasePage>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useRecurringInvoiceStore } from '../store'
 import RecurringInvoiceDropdown from '../components/RecurringInvoiceDropdown.vue'
 import LoadingIcon from '@v2/components/icons/LoadingIcon.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import type { RecurringInvoice } from '../../../../types/domain/recurring-invoice'
 
 interface Props {
   canEdit?: boolean
@@ -105,23 +285,229 @@ const props = withDefaults(defineProps<Props>(), {
   canDelete: false,
 })
 
+const ABILITIES = {
+  EDIT: 'edit-recurring-invoice',
+  VIEW: 'view-recurring-invoice',
+  DELETE: 'delete-recurring-invoice',
+} as const
+
 const recurringInvoiceStore = useRecurringInvoiceStore()
+const userStore = useUserStore()
 const { t } = useI18n()
 const route = useRoute()
 
+// ---------------------------------------------------------------------------
+// Ability checks
+// ---------------------------------------------------------------------------
+
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canView = computed<boolean>(() => {
+  return props.canView || userStore.hasAbilities(ABILITIES.VIEW)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
+const hasAtLeastOneAbility = computed<boolean>(() => {
+  return canDelete.value || canEdit.value
+})
+
+// ---------------------------------------------------------------------------
+// Page title
+// ---------------------------------------------------------------------------
+
 const pageTitle = computed<string>(() => {
   return recurringInvoiceStore.newRecurringInvoice?.customer?.name ?? ''
 })
 
-const hasAtLeastOneAbility = computed<boolean>(() => {
-  return props.canDelete || props.canEdit
+// ---------------------------------------------------------------------------
+// Frequency label
+// ---------------------------------------------------------------------------
+
+const selectedFrequencyLabel = computed<string>(() => {
+  const inv = recurringInvoiceStore.newRecurringInvoice
+  if (inv?.selectedFrequency?.label) {
+    return inv.selectedFrequency.label
+  }
+  return inv?.frequency ?? ''
 })
 
-// Initialize frequencies
-recurringInvoiceStore.initFrequencies(t)
+// ---------------------------------------------------------------------------
+// Invoices table columns
+// ---------------------------------------------------------------------------
 
-// Load the recurring invoice
-if (route.params.id) {
-  recurringInvoiceStore.fetchRecurringInvoice(Number(route.params.id))
+const invoiceColumns = computed(() => {
+  return [
+    {
+      key: 'invoice_date',
+      label: t('invoices.date'),
+      thClass: 'extra',
+      tdClass: 'font-medium text-heading',
+    },
+    { key: 'invoice_number', label: t('invoices.invoice') },
+    { key: 'customer.name', label: t('invoices.customer') },
+    { key: 'status', label: t('invoices.status') },
+    { key: 'total', label: t('invoices.total') },
+  ]
+})
+
+// ---------------------------------------------------------------------------
+// Sidebar state
+// ---------------------------------------------------------------------------
+
+const isSidebarLoading = ref<boolean>(false)
+const invoiceList = ref<RecurringInvoice[] | null>(null)
+const currentPageNumber = ref<number>(1)
+const lastPageNumber = ref<number>(1)
+const invoiceListSection = ref<HTMLElement | null>(null)
+
+interface SearchData {
+  orderBy: string | null
+  orderByField: string | null
+  searchText: string | null
 }
+
+const searchData = reactive<SearchData>({
+  orderBy: null,
+  orderByField: null,
+  searchText: null,
+})
+
+const getOrderBy = computed<boolean>(() => {
+  return searchData.orderBy === 'asc' || searchData.orderBy === null
+})
+
+function hasActiveUrl(id: number): boolean {
+  return Number(route.params.id) === id
+}
+
+// ---------------------------------------------------------------------------
+// Sidebar data loading
+// ---------------------------------------------------------------------------
+
+async function loadRecurringInvoices(
+  pageNumber?: number,
+  fromScrollListener = false,
+): Promise<void> {
+  if (isSidebarLoading.value) return
+
+  const params: Record<string, unknown> = {}
+
+  if (searchData.searchText) {
+    params.search = searchData.searchText
+  }
+  if (searchData.orderBy != null) {
+    params.orderBy = searchData.orderBy
+  }
+  if (searchData.orderByField != null) {
+    params.orderByField = searchData.orderByField
+  }
+
+  isSidebarLoading.value = true
+  const response = await recurringInvoiceStore.fetchRecurringInvoices({
+    page: pageNumber,
+    ...params,
+  } as never)
+  isSidebarLoading.value = false
+
+  invoiceList.value = invoiceList.value ?? []
+  invoiceList.value = [...invoiceList.value, ...response.data.data]
+
+  currentPageNumber.value = pageNumber ?? 1
+  lastPageNumber.value = response.data.meta.last_page
+
+  const invoiceFound = invoiceList.value.find(
+    (inv) => inv.id === Number(route.params.id),
+  )
+
+  if (
+    !fromScrollListener &&
+    !invoiceFound &&
+    currentPageNumber.value < lastPageNumber.value &&
+    Object.keys(params).length === 0
+  ) {
+    loadRecurringInvoices(++currentPageNumber.value)
+  }
+
+  if (invoiceFound && !fromScrollListener) {
+    setTimeout(() => scrollToRecurringInvoice(), 500)
+  }
+}
+
+function scrollToRecurringInvoice(): void {
+  const el = document.getElementById(`recurring-invoice-${route.params.id}`)
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth' })
+    el.classList.add('shake')
+    addScrollListener()
+  }
+}
+
+function addScrollListener(): void {
+  invoiceListSection.value?.addEventListener('scroll', (ev) => {
+    const target = ev.target as HTMLElement
+    if (
+      target.scrollTop > 0 &&
+      target.scrollTop + target.clientHeight > target.scrollHeight - 200
+    ) {
+      if (currentPageNumber.value < lastPageNumber.value) {
+        loadRecurringInvoices(++currentPageNumber.value, true)
+      }
+    }
+  })
+}
+
+let searchTimeout: ReturnType<typeof setTimeout> | null = null
+
+function onSearched(): void {
+  if (searchTimeout) clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    invoiceList.value = []
+    loadRecurringInvoices()
+  }, 500)
+}
+
+function sortData(): void {
+  if (searchData.orderBy === 'asc') {
+    searchData.orderBy = 'desc'
+  } else {
+    searchData.orderBy = 'asc'
+  }
+  onSearched()
+}
+
+// ---------------------------------------------------------------------------
+// Main content loading
+// ---------------------------------------------------------------------------
+
+async function loadRecurringInvoice(): Promise<void> {
+  if (route.params.id) {
+    await recurringInvoiceStore.fetchRecurringInvoice(Number(route.params.id))
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Watch route changes to reload data
+// ---------------------------------------------------------------------------
+
+watch(
+  () => route.params.id,
+  (newId) => {
+    if (newId && route.name === 'recurring-invoices.view') {
+      loadRecurringInvoice()
+    }
+  },
+)
+
+// ---------------------------------------------------------------------------
+// Initialize
+// ---------------------------------------------------------------------------
+
+recurringInvoiceStore.initFrequencies(t)
+loadRecurringInvoices()
+loadRecurringInvoice()
 </script>
diff --git a/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceIndexView.vue b/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceIndexView.vue
index ff6a44d2..1722ebc3 100644
--- a/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceIndexView.vue
+++ b/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceIndexView.vue
@@ -107,10 +107,9 @@
     <!-- Table -->
     <div v-show="!showEmptyScreen" class="relative table-container">
       <div
-        class="relative flex items-center justify-between h-10 mt-5 list-none border-b-2 border-line-default border-solid"
+        class="relative flex items-center justify-between mt-5 list-none"
       >
         <BaseTabGroup
-          class="-mb-5"
           :default-index="currentStatusIndex"
           @change="setStatusFilter"
         >
@@ -149,7 +148,7 @@
         :placeholder-count="
           recurringInvoiceStore.totalRecurringInvoices >= 20 ? 10 : 5
         "
-        class="mt-10"
+        class="mt-4"
       >
         <template #header>
           <div class="absolute items-center left-6 top-2.5 select-none">
@@ -232,6 +231,8 @@ import { useI18n } from 'vue-i18n'
 import { debouncedWatch } from '@vueuse/core'
 import { useRecurringInvoiceStore } from '../store'
 import RecurringInvoiceDropdown from '../components/RecurringInvoiceDropdown.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useDialogStore } from '../../../../stores/dialog.store'
 import type { RecurringInvoice } from '../../../../types/domain/recurring-invoice'
 
 interface Props {
@@ -248,7 +249,16 @@ const props = withDefaults(defineProps<Props>(), {
   canDelete: false,
 })
 
+const ABILITIES = {
+  CREATE: 'create-recurring-invoice',
+  EDIT: 'edit-recurring-invoice',
+  VIEW: 'view-recurring-invoice',
+  DELETE: 'delete-recurring-invoice',
+} as const
+
 const recurringInvoiceStore = useRecurringInvoiceStore()
+const userStore = useUserStore()
+const dialogStore = useDialogStore()
 const { t } = useI18n()
 
 // Initialize frequencies with translations
@@ -289,8 +299,24 @@ const showEmptyScreen = computed<boolean>(
     !recurringInvoiceStore.totalRecurringInvoices && !isRequestOngoing.value,
 )
 
+const canCreate = computed<boolean>(() => {
+  return props.canCreate || userStore.hasAbilities(ABILITIES.CREATE)
+})
+
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canView = computed<boolean>(() => {
+  return props.canView || userStore.hasAbilities(ABILITIES.VIEW)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
 const hasAtLeastOneAbility = computed<boolean>(() => {
-  return props.canDelete || props.canEdit || props.canView
+  return canDelete.value || canEdit.value || canView.value
 })
 
 const selectField = computed<number[]>({
@@ -461,17 +487,26 @@ function setActiveTab(val: string): void {
   activeTab.value = tabMap[val] ?? t('general.all')
 }
 
-async function removeMultipleRecurringInvoices(): Promise<void> {
-  const confirmed = window.confirm(t('invoices.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await recurringInvoiceStore.deleteMultipleRecurringInvoices()
-  if (res.data.success) {
-    refreshTable()
-    recurringInvoiceStore.$patch((state) => {
-      state.selectedRecurringInvoices = []
-      state.selectAllField = false
-    })
-  }
+function removeMultipleRecurringInvoices(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('invoices.confirm_delete'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const response = await recurringInvoiceStore.deleteMultipleRecurringInvoices()
+      if (response.data.success) {
+        refreshTable()
+        recurringInvoiceStore.$patch((state) => {
+          state.selectedRecurringInvoices = []
+          state.selectAllField = false
+        })
+      }
+    }
+  })
 }
 </script>
diff --git a/resources/scripts-v2/features/company/reports/routes.ts b/resources/scripts-v2/features/company/reports/routes.ts
index fde43b3d..2cb51fc2 100644
--- a/resources/scripts-v2/features/company/reports/routes.ts
+++ b/resources/scripts-v2/features/company/reports/routes.ts
@@ -2,35 +2,12 @@ import type { RouteRecordRaw } from 'vue-router'
 
 const reportRoutes: RouteRecordRaw[] = [
   {
-    path: 'reports/sales',
-    name: 'reports.sales',
-    component: () => import('./views/SalesReportView.vue'),
+    path: 'reports',
+    name: 'reports',
+    component: () => import('./views/ReportsLayoutView.vue'),
     meta: {
-      ability: 'view-financial-report',
-    },
-  },
-  {
-    path: 'reports/profit-loss',
-    name: 'reports.profit-loss',
-    component: () => import('./views/ProfitLossReportView.vue'),
-    meta: {
-      ability: 'view-financial-report',
-    },
-  },
-  {
-    path: 'reports/expenses',
-    name: 'reports.expenses',
-    component: () => import('./views/ExpensesReportView.vue'),
-    meta: {
-      ability: 'view-financial-report',
-    },
-  },
-  {
-    path: 'reports/taxes',
-    name: 'reports.taxes',
-    component: () => import('./views/TaxReportView.vue'),
-    meta: {
-      ability: 'view-financial-report',
+      requiresAuth: true,
+      ability: 'view-financial-reports',
     },
   },
 ]
diff --git a/resources/scripts-v2/features/company/reports/views/ExpensesReportView.vue b/resources/scripts-v2/features/company/reports/views/ExpensesReportView.vue
index f2fdd787..de072bec 100644
--- a/resources/scripts-v2/features/company/reports/views/ExpensesReportView.vue
+++ b/resources/scripts-v2/features/company/reports/views/ExpensesReportView.vue
@@ -51,7 +51,7 @@ const dateRangeUrl = computed<string>(() => {
   )}&to_date=${moment(formData.to_date).format('YYYY-MM-DD')}`
 })
 
-globalStore.downloadReport = downloadReport as unknown as string | null
+globalStore.downloadReport = downloadReport
 
 onMounted(() => {
   siteURL.value = `/reports/expenses/${selectedCompany.value?.unique_hash}`
@@ -163,11 +163,14 @@ function downloadReport(): void {
       </div>
 
       <BaseButton
-        variant="primary-outline"
-        class="content-center hidden mt-0 w-md md:flex md:mt-8"
+        variant="primary"
+        class="hidden w-full mt-6 md:flex justify-center"
         type="submit"
         @click.prevent="getReports"
       >
+        <template #left="slotProps">
+          <BaseIcon name="ArrowPathIcon" :class="slotProps.class" />
+        </template>
         {{ $t('reports.update_report') }}
       </BaseButton>
     </div>
diff --git a/resources/scripts-v2/features/company/reports/views/ProfitLossReportView.vue b/resources/scripts-v2/features/company/reports/views/ProfitLossReportView.vue
index c95c6b55..7362ff4c 100644
--- a/resources/scripts-v2/features/company/reports/views/ProfitLossReportView.vue
+++ b/resources/scripts-v2/features/company/reports/views/ProfitLossReportView.vue
@@ -51,7 +51,7 @@ const dateRangeUrl = computed<string>(() => {
   )}&to_date=${moment(formData.to_date).format('YYYY-MM-DD')}`
 })
 
-globalStore.downloadReport = downloadReport as unknown as string | null
+globalStore.downloadReport = downloadReport
 
 onMounted(() => {
   siteURL.value = `/reports/profit-loss/${selectedCompany.value?.unique_hash}`
@@ -163,11 +163,14 @@ function downloadReport(): void {
       </div>
 
       <BaseButton
-        variant="primary-outline"
-        class="content-center hidden mt-0 w-md md:flex md:mt-8"
+        variant="primary"
+        class="hidden w-full mt-6 md:flex justify-center"
         type="submit"
         @click.prevent="getReports"
       >
+        <template #left="slotProps">
+          <BaseIcon name="ArrowPathIcon" :class="slotProps.class" />
+        </template>
         {{ $t('reports.update_report') }}
       </BaseButton>
     </div>
diff --git a/resources/scripts-v2/features/company/reports/views/ReportsLayoutView.vue b/resources/scripts-v2/features/company/reports/views/ReportsLayoutView.vue
new file mode 100644
index 00000000..d7451244
--- /dev/null
+++ b/resources/scripts-v2/features/company/reports/views/ReportsLayoutView.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useGlobalStore } from '../../../../stores/global.store'
+import SalesReportView from './SalesReportView.vue'
+import ProfitLossReportView from './ProfitLossReportView.vue'
+import ExpensesReportView from './ExpensesReportView.vue'
+import TaxReportView from './TaxReportView.vue'
+
+const globalStore = useGlobalStore()
+
+function onDownload(): void {
+  if (globalStore.downloadReport) {
+    globalStore.downloadReport()
+  }
+}
+</script>
+
+<template>
+  <BasePage>
+    <BasePageHeader :title="$t('reports.report', 2)">
+      <BaseBreadcrumb>
+        <BaseBreadcrumbItem
+          :title="$t('general.home')"
+          to="/admin/dashboard"
+        />
+        <BaseBreadcrumbItem
+          :title="$t('reports.report', 2)"
+          to="#"
+          active
+        />
+      </BaseBreadcrumb>
+
+      <template #actions>
+        <BaseButton variant="primary" class="ml-4" @click="onDownload">
+          <template #left="slotProps">
+            <BaseIcon name="ArrowDownTrayIcon" :class="slotProps.class" />
+          </template>
+          {{ $t('reports.download_pdf') }}
+        </BaseButton>
+      </template>
+    </BasePageHeader>
+
+    <BaseTabGroup class="p-2">
+      <BaseTab
+        :title="$t('reports.sales.sales')"
+        tab-panel-container="px-0 py-0"
+      >
+        <SalesReportView />
+      </BaseTab>
+
+      <BaseTab
+        :title="$t('reports.profit_loss.profit_loss')"
+        tab-panel-container="px-0 py-0"
+      >
+        <ProfitLossReportView />
+      </BaseTab>
+
+      <BaseTab
+        :title="$t('reports.expenses.expenses')"
+        tab-panel-container="px-0 py-0"
+      >
+        <ExpensesReportView />
+      </BaseTab>
+
+      <BaseTab
+        :title="$t('reports.taxes.taxes')"
+        tab-panel-container="px-0 py-0"
+      >
+        <TaxReportView />
+      </BaseTab>
+    </BaseTabGroup>
+  </BasePage>
+</template>
diff --git a/resources/scripts-v2/features/company/reports/views/SalesReportView.vue b/resources/scripts-v2/features/company/reports/views/SalesReportView.vue
index 2d69b25e..b1e4ccac 100644
--- a/resources/scripts-v2/features/company/reports/views/SalesReportView.vue
+++ b/resources/scripts-v2/features/company/reports/views/SalesReportView.vue
@@ -68,7 +68,7 @@ const itemDateRangeUrl = computed<string>(() => {
   )}&to_date=${moment(formData.to_date).format('YYYY-MM-DD')}`
 })
 
-globalStore.downloadReport = downloadReport as unknown as string | null
+globalStore.downloadReport = downloadReport
 
 onMounted(() => {
   customerSiteURL.value = `/reports/sales/customers/${selectedCompany.value?.unique_hash}`
@@ -211,11 +211,14 @@ function downloadReport(): void {
       </BaseInputGroup>
 
       <BaseButton
-        variant="primary-outline"
-        class="content-center hidden mt-0 w-md md:flex md:mt-8"
+        variant="primary"
+        class="hidden w-full mt-6 md:flex justify-center"
         type="submit"
         @click.prevent="getReports"
       >
+        <template #left="slotProps">
+          <BaseIcon name="ArrowPathIcon" :class="slotProps.class" />
+        </template>
         {{ $t('reports.update_report') }}
       </BaseButton>
     </div>
diff --git a/resources/scripts-v2/features/company/reports/views/TaxReportView.vue b/resources/scripts-v2/features/company/reports/views/TaxReportView.vue
index 96311f55..285051e1 100644
--- a/resources/scripts-v2/features/company/reports/views/TaxReportView.vue
+++ b/resources/scripts-v2/features/company/reports/views/TaxReportView.vue
@@ -51,7 +51,7 @@ const dateRangeUrl = computed<string>(() => {
   )}&to_date=${moment(formData.to_date).format('YYYY-MM-DD')}`
 })
 
-globalStore.downloadReport = downloadReport as unknown as string | null
+globalStore.downloadReport = downloadReport
 
 onMounted(() => {
   siteURL.value = `/reports/tax-summary/${selectedCompany.value?.unique_hash}`
@@ -163,11 +163,14 @@ function downloadReport(): void {
       </div>
 
       <BaseButton
-        variant="primary-outline"
-        class="content-center hidden mt-0 w-md md:flex md:mt-8"
+        variant="primary"
+        class="hidden w-full mt-6 md:flex justify-center"
         type="submit"
         @click.prevent="getReports"
       >
+        <template #left="slotProps">
+          <BaseIcon name="ArrowPathIcon" :class="slotProps.class" />
+        </template>
         {{ $t('reports.update_report') }}
       </BaseButton>
     </div>
diff --git a/resources/scripts-v2/features/company/settings/components/CategoryModal.vue b/resources/scripts-v2/features/company/settings/components/CategoryModal.vue
index b74a5797..dfbd5d82 100644
--- a/resources/scripts-v2/features/company/settings/components/CategoryModal.vue
+++ b/resources/scripts-v2/features/company/settings/components/CategoryModal.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { required, minLength, maxLength, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
 import { expenseService } from '@v2/api/services/expense.service'
 
 interface CategoryForm {
@@ -13,6 +14,7 @@ interface CategoryForm {
 }
 
 const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
 const { t } = useI18n()
 
 const isSaving = ref<boolean>(false)
@@ -77,11 +79,19 @@ async function submitCategoryData(): Promise<void> {
         name: currentCategory.value.name,
         description: currentCategory.value.description || null,
       })
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.expense_category.updated_message',
+      })
     } else {
       await expenseService.createCategory({
         name: currentCategory.value.name,
         description: currentCategory.value.description || null,
       })
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.expense_category.created_message',
+      })
     }
 
     isSaving.value = false
diff --git a/resources/scripts-v2/features/company/settings/components/CompanyModal.vue b/resources/scripts-v2/features/company/settings/components/CompanyModal.vue
new file mode 100644
index 00000000..6ed6a8d1
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/CompanyModal.vue
@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { computed, ref, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { required, minLength, helpers } from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useCompanyStore } from '@v2/stores/company.store'
+import { useGlobalStore } from '@v2/stores/global.store'
+
+const router = useRouter()
+const modalStore = useModalStore()
+const companyStore = useCompanyStore()
+const globalStore = useGlobalStore()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+const isFetchingInitialData = ref<boolean>(false)
+const previewLogo = ref<string | null>(null)
+const companyLogoFileBlob = ref<string | null>(null)
+const companyLogoName = ref<string | null>(null)
+
+const newCompanyForm = reactive<{
+  name: string
+  currency: string | number
+  address: { country_id: number | null }
+}>({
+  name: '',
+  currency: '',
+  address: {
+    country_id: null,
+  },
+})
+
+const modalActive = computed<boolean>(
+  () => modalStore.active && modalStore.componentName === 'CompanyModal',
+)
+
+const rules = computed(() => ({
+  newCompanyForm: {
+    name: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3),
+      ),
+    },
+    address: {
+      country_id: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+    },
+    currency: {
+      required: helpers.withMessage(t('validation.required'), required),
+    },
+  },
+}))
+
+const v$ = useVuelidate(rules, { newCompanyForm })
+
+async function getInitials(): Promise<void> {
+  isFetchingInitialData.value = true
+  await globalStore.fetchCurrencies()
+  await globalStore.fetchCountries()
+
+  newCompanyForm.currency = companyStore.selectedCompanyCurrency?.id ?? ''
+  newCompanyForm.address.country_id =
+    (companyStore.selectedCompany as Record<string, unknown>)?.address
+      ? ((companyStore.selectedCompany as Record<string, unknown>).address as Record<string, unknown>)?.country_id as number | null
+      : null
+
+  isFetchingInitialData.value = false
+}
+
+function onFileInputChange(fileName: string, file: string): void {
+  companyLogoName.value = fileName
+  companyLogoFileBlob.value = file
+}
+
+function onFileInputRemove(): void {
+  companyLogoName.value = null
+  companyLogoFileBlob.value = null
+}
+
+async function submitCompanyData(): Promise<void> {
+  v$.value.newCompanyForm.$touch()
+  if (v$.value.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+  try {
+    const res = await companyStore.addNewCompany(newCompanyForm as never)
+    if (res.data) {
+      companyStore.setSelectedCompany(res.data)
+
+      if (companyLogoFileBlob.value) {
+        const logoData = new FormData()
+        logoData.append(
+          'company_logo',
+          JSON.stringify({
+            name: companyLogoName.value,
+            data: companyLogoFileBlob.value,
+          }),
+        )
+        await companyStore.updateCompanyLogo(logoData)
+      }
+
+      globalStore.setIsAppLoaded(false)
+      await globalStore.bootstrap()
+      closeCompanyModal()
+      router.push('/admin/dashboard')
+    }
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function resetNewCompanyForm(): void {
+  newCompanyForm.name = ''
+  newCompanyForm.currency = ''
+  newCompanyForm.address.country_id = null
+  v$.value.$reset()
+}
+
+function closeCompanyModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    resetNewCompanyForm()
+  }, 300)
+}
+</script>
+
+<template>
+  <BaseModal :show="modalActive" @close="closeCompanyModal" @open="getInitials">
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalStore.title }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="w-6 h-6 text-muted cursor-pointer"
+          @click="closeCompanyModal"
+        />
+      </div>
+    </template>
+
+    <form action="" @submit.prevent="submitCompanyData">
+      <div class="p-4 mb-16 sm:p-6 space-y-4">
+        <BaseInputGrid layout="one-column">
+          <BaseInputGroup
+            :content-loading="isFetchingInitialData"
+            :label="$t('settings.company_info.company_logo')"
+          >
+            <BaseContentPlaceholders v-if="isFetchingInitialData">
+              <BaseContentPlaceholdersBox :rounded="true" class="w-full h-24" />
+            </BaseContentPlaceholders>
+            <div v-else class="flex flex-col items-center">
+              <BaseFileUploader
+                :preview-image="previewLogo"
+                base64
+                @remove="onFileInputRemove"
+                @change="onFileInputChange"
+              />
+            </div>
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('settings.company_info.company_name')"
+            :error="
+              v$.newCompanyForm.name.$error &&
+              v$.newCompanyForm.name.$errors[0].$message
+            "
+            :content-loading="isFetchingInitialData"
+            required
+          >
+            <BaseInput
+              v-model="newCompanyForm.name"
+              :invalid="v$.newCompanyForm.name.$error"
+              :content-loading="isFetchingInitialData"
+              @input="v$.newCompanyForm.name.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :content-loading="isFetchingInitialData"
+            :label="$t('settings.company_info.country')"
+            :error="
+              v$.newCompanyForm.address.country_id.$error &&
+              v$.newCompanyForm.address.country_id.$errors[0].$message
+            "
+            required
+          >
+            <BaseMultiselect
+              v-model="newCompanyForm.address.country_id"
+              :content-loading="isFetchingInitialData"
+              label="name"
+              :invalid="v$.newCompanyForm.address.country_id.$error"
+              :options="globalStore.countries"
+              value-prop="id"
+              :can-deselect="true"
+              :can-clear="false"
+              searchable
+              track-by="name"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('wizard.currency')"
+            :error="
+              v$.newCompanyForm.currency.$error &&
+              v$.newCompanyForm.currency.$errors[0].$message
+            "
+            :content-loading="isFetchingInitialData"
+            :help-text="$t('wizard.currency_set_alert')"
+            required
+          >
+            <BaseMultiselect
+              v-model="newCompanyForm.currency"
+              :content-loading="isFetchingInitialData"
+              :options="globalStore.currencies"
+              label="name"
+              value-prop="id"
+              :searchable="true"
+              track-by="name"
+              :placeholder="$t('settings.currencies.select_currency')"
+              :invalid="v$.newCompanyForm.currency.$error"
+              class="w-full"
+            />
+          </BaseInputGroup>
+        </BaseInputGrid>
+      </div>
+
+      <div class="z-0 flex justify-end p-4 bg-surface-secondary border-t border-line-default">
+        <BaseButton
+          class="mr-3 text-sm"
+          variant="primary-outline"
+          type="button"
+          @click="closeCompanyModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+        <BaseButton
+          :loading="isSaving"
+          :disabled="isSaving"
+          variant="primary"
+          type="submit"
+        >
+          <template #left="slotProps">
+            <BaseIcon
+              v-if="!isSaving"
+              name="ArrowDownOnSquareIcon"
+              :class="slotProps.class"
+            />
+          </template>
+          {{ $t('general.save') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/CustomFieldModal.vue b/resources/scripts-v2/features/company/settings/components/CustomFieldModal.vue
index 82ef5962..e51497b5 100644
--- a/resources/scripts-v2/features/company/settings/components/CustomFieldModal.vue
+++ b/resources/scripts-v2/features/company/settings/components/CustomFieldModal.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import useVuelidate from '@vuelidate/core'
 import { required, numeric, helpers } from '@vuelidate/validators'
 import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
 import { customFieldService } from '@v2/api/services/custom-field.service'
 import type { CreateCustomFieldPayload } from '@v2/api/services/custom-field.service'
 
@@ -32,6 +33,7 @@ interface CustomFieldForm {
 }
 
 const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
 const { t } = useI18n()
 
 const isSaving = ref<boolean>(false)
@@ -178,6 +180,13 @@ async function submitCustomFieldData(): Promise<void> {
 
   isSaving.value = true
 
+  let defaultAnswer = currentCustomField.value.default_answer
+  // Handle Time type — convert object {HH, mm, ss} to 'HH:mm' string
+  if (currentCustomField.value.type === 'Time' && typeof defaultAnswer === 'object' && defaultAnswer !== null) {
+    const timeObj = defaultAnswer as Record<string, string>
+    defaultAnswer = `${timeObj.HH ?? '00'}:${timeObj.mm ?? '00'}`
+  }
+
   const payload: CreateCustomFieldPayload = {
     name: currentCustomField.value.name,
     label: currentCustomField.value.label,
@@ -189,13 +198,22 @@ async function submitCustomFieldData(): Promise<void> {
       ? currentCustomField.value.options.map((o) => o.name)
       : null,
     order: currentCustomField.value.order,
+    default_answer: defaultAnswer as string ?? null,
   }
 
   try {
     if (isEdit.value && currentCustomField.value.id) {
       await customFieldService.update(currentCustomField.value.id, payload)
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.custom_fields.updated_message',
+      })
     } else {
       await customFieldService.create(payload)
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.custom_fields.created_message',
+      })
     }
 
     isSaving.value = false
@@ -208,6 +226,17 @@ async function submitCustomFieldData(): Promise<void> {
   }
 }
 
+const newOptionValue = ref<string>('')
+
+function onAddOption(): void {
+  if (!newOptionValue.value?.trim()) return
+  currentCustomField.value.options = [
+    { name: newOptionValue.value.trim() },
+    ...currentCustomField.value.options,
+  ]
+  newOptionValue.value = ''
+}
+
 function addNewOption(option: string): void {
   currentCustomField.value.options = [
     { name: option },
@@ -357,6 +386,22 @@ function closeCustomFieldModal(): void {
               v-if="isDropdownSelected"
               :label="$t('settings.custom_fields.options')"
             >
+              <!-- Add Option Input -->
+              <div class="flex items-center mt-1">
+                <BaseInput
+                  v-model="newOptionValue"
+                  type="text"
+                  class="w-full md:w-96"
+                  :placeholder="$t('settings.custom_fields.press_enter_to_add')"
+                  @keydown.enter.prevent.stop="onAddOption"
+                />
+                <BaseIcon
+                  name="PlusCircleIcon"
+                  class="ml-1 text-primary-500 cursor-pointer"
+                  @click="onAddOption"
+                />
+              </div>
+
               <div
                 v-for="(option, index) in currentCustomField.options"
                 :key="index"
diff --git a/resources/scripts-v2/features/company/settings/components/DeleteCompanyModal.vue b/resources/scripts-v2/features/company/settings/components/DeleteCompanyModal.vue
new file mode 100644
index 00000000..570a43a1
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/DeleteCompanyModal.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed, ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { required, helpers, sameAs } from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useCompanyStore } from '@v2/stores/company.store'
+import { useGlobalStore } from '@v2/stores/global.store'
+
+const companyStore = useCompanyStore()
+const modalStore = useModalStore()
+const globalStore = useGlobalStore()
+const router = useRouter()
+const { t } = useI18n()
+
+const isDeleting = ref<boolean>(false)
+
+const formData = reactive<{ id: number | null; name: string }>({
+  id: null,
+  name: '',
+})
+
+const modalActive = computed<boolean>(
+  () => modalStore.active && modalStore.componentName === 'DeleteCompanyModal',
+)
+
+const companyName = computed<string>(
+  () => companyStore.selectedCompany?.name ?? '',
+)
+
+const rules = computed(() => ({
+  name: {
+    required: helpers.withMessage(t('validation.required'), required),
+    sameAsName: helpers.withMessage(
+      t('validation.company_name_not_same'),
+      sameAs(companyName.value),
+    ),
+  },
+}))
+
+const v$ = useVuelidate(rules, formData)
+
+function setInitialData(): void {
+  formData.id = companyStore.selectedCompany?.id ?? null
+  formData.name = ''
+}
+
+async function submitDelete(): Promise<void> {
+  v$.value.$touch()
+  if (v$.value.$invalid) return
+
+  isDeleting.value = true
+  try {
+    await companyStore.deleteCompany(formData)
+
+    closeModal()
+
+    const remaining = companyStore.companies.filter(
+      (c) => c.id !== formData.id,
+    )
+    if (remaining.length) {
+      companyStore.setSelectedCompany(remaining[0])
+    }
+
+    router.push('/admin/dashboard')
+    globalStore.setIsAppLoaded(false)
+    await globalStore.bootstrap()
+  } catch {
+    // Error handled
+  } finally {
+    isDeleting.value = false
+  }
+}
+
+function closeModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    formData.id = null
+    formData.name = ''
+    v$.value.$reset()
+  }, 300)
+}
+</script>
+
+<template>
+  <BaseModal :show="modalActive" @close="closeModal" @open="setInitialData">
+    <div class="px-6 pt-6">
+      <h6 class="font-medium text-lg text-heading">
+        {{ $t('settings.company_info.are_you_absolutely_sure') }}
+      </h6>
+      <p class="mt-2 text-sm text-muted" style="max-width: 680px">
+        {{ $t('settings.company_info.delete_company_modal_desc', { company: companyName }) }}
+      </p>
+    </div>
+
+    <form @submit.prevent="submitDelete">
+      <div class="p-4 sm:p-6 space-y-4">
+        <BaseInputGroup
+          :label="$t('settings.company_info.delete_company_modal_label', { company: companyName })"
+          :error="v$.name.$error ? String(v$.name.$errors[0]?.$message) : undefined"
+          required
+        >
+          <BaseInput
+            v-model="formData.name"
+            :invalid="v$.name.$error"
+            @input="v$.name.$touch()"
+          />
+        </BaseInputGroup>
+      </div>
+
+      <div class="z-0 flex justify-end p-4 bg-surface-secondary border-t border-line-default">
+        <BaseButton
+          class="mr-3 text-sm"
+          variant="primary-outline"
+          type="button"
+          @click="closeModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+        <BaseButton
+          :loading="isDeleting"
+          :disabled="isDeleting"
+          variant="danger"
+          type="submit"
+        >
+          <template #left="slotProps">
+            <BaseIcon
+              v-if="!isDeleting"
+              name="TrashIcon"
+              :class="slotProps.class"
+            />
+          </template>
+          {{ $t('general.delete') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/EstimatesTab.vue b/resources/scripts-v2/features/company/settings/components/EstimatesTab.vue
index 18b3cf98..8398d4fe 100644
--- a/resources/scripts-v2/features/company/settings/components/EstimatesTab.vue
+++ b/resources/scripts-v2/features/company/settings/components/EstimatesTab.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { computed, reactive, inject } from 'vue'
 import { useCompanyStore } from '@v2/stores/company.store'
+import { useEstimateStore } from '@v2/features/company/estimates/store'
 import NumberCustomizer from './NumberCustomizer.vue'
+import EstimatesTabExpiryDate from './EstimatesTabExpiryDate.vue'
+import EstimatesTabConvertEstimate from './EstimatesTabConvertEstimate.vue'
+import EstimatesTabDefaultFormats from './EstimatesTabDefaultFormats.vue'
 
 interface Utils {
   mergeSettings: (target: Record<string, unknown>, source: Record<string, unknown>) => void
@@ -9,6 +13,7 @@ interface Utils {
 
 const utils = inject<Utils>('utils')!
 const companyStore = useCompanyStore()
+const estimateStore = useEstimateStore()
 
 const estimateSettings = reactive<{ estimate_email_attachment: string | null }>({
   estimate_email_attachment: null,
@@ -41,8 +46,14 @@ const sendAsAttachmentField = computed<boolean>({
 </script>
 
 <template>
-  <NumberCustomizer type="estimate" :type-store="companyStore" />
+  <NumberCustomizer type="estimate" :type-store="estimateStore" />
 
+  <BaseDivider class="mt-6 mb-2" />
+  <EstimatesTabExpiryDate />
+  <BaseDivider class="mt-6 mb-2" />
+  <EstimatesTabConvertEstimate />
+  <BaseDivider class="mt-6 mb-2" />
+  <EstimatesTabDefaultFormats />
   <BaseDivider class="mt-6 mb-2" />
 
   <ul class="divide-y divide-line-default">
diff --git a/resources/scripts-v2/features/company/settings/components/EstimatesTabConvertEstimate.vue b/resources/scripts-v2/features/company/settings/components/EstimatesTabConvertEstimate.vue
new file mode 100644
index 00000000..c30b76da
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/EstimatesTabConvertEstimate.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { reactive, inject } from 'vue'
+import { useCompanyStore } from '@v2/stores/company.store'
+import { useGlobalStore } from '@v2/stores/global.store'
+
+interface Utils {
+  mergeSettings: (target: Record<string, unknown>, source: Record<string, unknown>) => void
+}
+
+const companyStore = useCompanyStore()
+const globalStore = useGlobalStore()
+const utils = inject<Utils>('utils')!
+
+const settingsForm = reactive<{ estimate_convert_action: string | null }>({
+  estimate_convert_action: null,
+})
+
+utils.mergeSettings(
+  settingsForm as unknown as Record<string, unknown>,
+  { ...companyStore.selectedCompanySettings }
+)
+
+const convertEstimateOptions = [
+  { key: 'settings.customization.estimates.no_action', value: 'no_action' },
+  { key: 'settings.customization.estimates.delete_estimate', value: 'delete_estimate' },
+  { key: 'settings.customization.estimates.mark_estimate_as_accepted', value: 'mark_estimate_as_accepted' },
+]
+
+async function submitForm() {
+  const data = {
+    settings: {
+      ...settingsForm,
+    },
+  }
+
+  await companyStore.updateCompanySettings({
+    data,
+    message: 'settings.customization.estimates.estimate_settings_updated',
+  })
+
+  return true
+}
+</script>
+
+<template>
+  <h6 class="text-heading text-lg font-medium">
+    {{ $t('settings.customization.estimates.convert_estimate_setting') }}
+  </h6>
+  <p class="mt-1 text-sm text-muted">
+    {{ $t('settings.customization.estimates.convert_estimate_description') }}
+  </p>
+
+  <BaseInputGroup required>
+    <BaseRadio
+      v-for="option in convertEstimateOptions"
+      :id="option.value"
+      :key="option.value"
+      v-model="settingsForm.estimate_convert_action"
+      :label="$t(option.key)"
+      size="sm"
+      name="estimate_convert_action"
+      :value="option.value"
+      class="mt-2"
+      @update:modelValue="submitForm"
+    />
+  </BaseInputGroup>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/EstimatesTabDefaultFormats.vue b/resources/scripts-v2/features/company/settings/components/EstimatesTabDefaultFormats.vue
new file mode 100644
index 00000000..ee809e79
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/EstimatesTabDefaultFormats.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref, reactive, inject } from 'vue'
+import { useCompanyStore } from '@v2/stores/company.store'
+
+interface Utils {
+  mergeSettings: (target: Record<string, unknown>, source: Record<string, unknown>) => void
+}
+
+const companyStore = useCompanyStore()
+const utils = inject<Utils>('utils')!
+
+const estimateMailFields = ref(['customer', 'company', 'estimate'])
+const companyFields = ref(['company'])
+const shippingFields = ref(['shipping', 'customer'])
+const billingFields = ref(['billing', 'customer'])
+
+const isSaving = ref(false)
+
+const formatSettings = reactive<{
+  estimate_mail_body: string | null
+  estimate_company_address_format: string | null
+  estimate_shipping_address_format: string | null
+  estimate_billing_address_format: string | null
+}>({
+  estimate_mail_body: null,
+  estimate_company_address_format: null,
+  estimate_shipping_address_format: null,
+  estimate_billing_address_format: null,
+})
+
+utils.mergeSettings(
+  formatSettings as unknown as Record<string, unknown>,
+  { ...companyStore.selectedCompanySettings }
+)
+
+async function submitForm() {
+  isSaving.value = true
+
+  const data = {
+    settings: {
+      ...formatSettings,
+    },
+  }
+
+  await companyStore.updateCompanySettings({
+    data,
+    message: 'settings.customization.estimates.estimate_settings_updated',
+  })
+
+  isSaving.value = false
+
+  return true
+}
+</script>
+
+<template>
+  <form @submit.prevent="submitForm">
+    <h6 class="text-heading text-lg font-medium">
+      {{ $t('settings.customization.estimates.default_formats') }}
+    </h6>
+    <p class="mt-1 text-sm text-muted mb-2">
+      {{ $t('settings.customization.estimates.default_formats_description') }}
+    </p>
+
+    <BaseInputGroup
+      :label="
+        $t('settings.customization.estimates.default_estimate_email_body')
+      "
+      class="mt-6 mb-4"
+    >
+      <BaseCustomInput
+        v-model="formatSettings.estimate_mail_body"
+        :fields="estimateMailFields"
+      />
+    </BaseInputGroup>
+
+    <BaseInputGroup
+      :label="$t('settings.customization.estimates.company_address_format')"
+      class="mt-6 mb-4"
+    >
+      <BaseCustomInput
+        v-model="formatSettings.estimate_company_address_format"
+        :fields="companyFields"
+      />
+    </BaseInputGroup>
+
+    <BaseInputGroup
+      :label="$t('settings.customization.estimates.shipping_address_format')"
+      class="mt-6 mb-4"
+    >
+      <BaseCustomInput
+        v-model="formatSettings.estimate_shipping_address_format"
+        :fields="shippingFields"
+      />
+    </BaseInputGroup>
+
+    <BaseInputGroup
+      :label="$t('settings.customization.estimates.billing_address_format')"
+      class="mt-6 mb-4"
+    >
+      <BaseCustomInput
+        v-model="formatSettings.estimate_billing_address_format"
+        :fields="billingFields"
+      />
+    </BaseInputGroup>
+
+    <BaseButton
+      :loading="isSaving"
+      :disabled="isSaving"
+      variant="primary"
+      type="submit"
+      class="mt-4"
+    >
+      <template #left="slotProps">
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
+      </template>
+      {{ $t('settings.customization.save') }}
+    </BaseButton>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/EstimatesTabExpiryDate.vue b/resources/scripts-v2/features/company/settings/components/EstimatesTabExpiryDate.vue
new file mode 100644
index 00000000..2a96f05c
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/EstimatesTabExpiryDate.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, computed, reactive, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useCompanyStore } from '@v2/stores/company.store'
+import { numeric, helpers, requiredIf } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+
+interface Utils {
+  mergeSettings: (target: Record<string, unknown>, source: Record<string, unknown>) => void
+}
+
+const { t } = useI18n()
+const companyStore = useCompanyStore()
+const utils = inject<Utils>('utils')!
+
+const isSaving = ref(false)
+
+const expiryDateSettings = reactive<{
+  estimate_set_expiry_date_automatically: string | null
+  estimate_expiry_date_days: string | null
+}>({
+  estimate_set_expiry_date_automatically: null,
+  estimate_expiry_date_days: null,
+})
+
+utils.mergeSettings(
+  expiryDateSettings as unknown as Record<string, unknown>,
+  { ...companyStore.selectedCompanySettings }
+)
+
+const expiryDateAutoField = computed<boolean>({
+  get: () => expiryDateSettings.estimate_set_expiry_date_automatically === 'YES',
+  set: (newValue: boolean) => {
+    const value = newValue ? 'YES' : 'NO'
+    expiryDateSettings.estimate_set_expiry_date_automatically = value
+  },
+})
+
+const rules = computed(() => {
+  return {
+    expiryDateSettings: {
+      estimate_expiry_date_days: {
+        required: helpers.withMessage(
+          t('validation.required'),
+          requiredIf(expiryDateAutoField.value)
+        ),
+        numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
+      },
+    },
+  }
+})
+
+const v$ = useVuelidate(rules, { expiryDateSettings })
+
+async function submitForm() {
+  v$.value.expiryDateSettings.$touch()
+
+  if (v$.value.expiryDateSettings.$invalid) {
+    return false
+  }
+
+  isSaving.value = true
+
+  const data = {
+    settings: {
+      ...expiryDateSettings,
+    },
+  }
+
+  // Don't pass expiry_date_days if setting is not enabled
+  if (!expiryDateAutoField.value) {
+    delete data.settings.estimate_expiry_date_days
+  }
+
+  await companyStore.updateCompanySettings({
+    data,
+    message: 'settings.customization.estimates.estimate_settings_updated',
+  })
+
+  isSaving.value = false
+
+  return true
+}
+</script>
+
+<template>
+  <form @submit.prevent="submitForm">
+    <h6 class="text-heading text-lg font-medium">
+      {{ $t('settings.customization.estimates.expiry_date_setting') }}
+    </h6>
+    <p class="mt-1 text-sm text-muted mb-2">
+      {{ $t('settings.customization.estimates.expiry_date_description') }}
+    </p>
+
+    <BaseSwitchSection
+      v-model="expiryDateAutoField"
+      :title="
+        $t('settings.customization.estimates.set_expiry_date_automatically')
+      "
+      :description="
+        $t(
+          'settings.customization.estimates.set_expiry_date_automatically_description'
+        )
+      "
+    />
+
+    <BaseInputGroup
+      v-if="expiryDateAutoField"
+      :label="$t('settings.customization.estimates.expiry_date_days')"
+      :error="
+        v$.expiryDateSettings.estimate_expiry_date_days.$error &&
+        v$.expiryDateSettings.estimate_expiry_date_days.$errors[0].$message
+      "
+      class="mt-2 mb-4"
+    >
+      <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/5">
+        <BaseInput
+          v-model="expiryDateSettings.estimate_expiry_date_days"
+          :invalid="v$.expiryDateSettings.estimate_expiry_date_days.$error"
+          type="number"
+          @input="v$.expiryDateSettings.estimate_expiry_date_days.$touch()"
+        />
+      </div>
+    </BaseInputGroup>
+
+    <BaseButton
+      :loading="isSaving"
+      :disabled="isSaving"
+      variant="primary"
+      type="submit"
+      class="mt-4"
+    >
+      <template #left="slotProps">
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
+      </template>
+      {{ $t('settings.customization.save') }}
+    </BaseButton>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/ExchangeRateProviderModal.vue b/resources/scripts-v2/features/company/settings/components/ExchangeRateProviderModal.vue
index 83cc9663..c8f67b4c 100644
--- a/resources/scripts-v2/features/company/settings/components/ExchangeRateProviderModal.vue
+++ b/resources/scripts-v2/features/company/settings/components/ExchangeRateProviderModal.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import useVuelidate from '@vuelidate/core'
 import { required, helpers, requiredIf, url } from '@vuelidate/validators'
 import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
 import { exchangeRateService } from '@v2/api/services/exchange-rate.service'
 import { useDebounceFn } from '@vueuse/core'
 
@@ -31,6 +32,7 @@ interface CurrencyConverterForm {
 
 const { t } = useI18n()
 const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
 
 const isSaving = ref<boolean>(false)
 const isFetchingInitialData = ref<boolean>(false)
@@ -243,10 +245,18 @@ async function submitExchangeRate(): Promise<void> {
         currentExchangeRate.value.id,
         data as Parameters<typeof exchangeRateService.updateProvider>[1]
       )
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.exchange_rate.updated_message',
+      })
     } else {
       await exchangeRateService.createProvider(
         data as Parameters<typeof exchangeRateService.createProvider>[0]
       )
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.exchange_rate.created_message',
+      })
     }
 
     if (modalStore.refreshData) {
diff --git a/resources/scripts-v2/features/company/settings/components/ExpenseCategoryDropdown.vue b/resources/scripts-v2/features/company/settings/components/ExpenseCategoryDropdown.vue
index c5bc9fe4..4f311c36 100644
--- a/resources/scripts-v2/features/company/settings/components/ExpenseCategoryDropdown.vue
+++ b/resources/scripts-v2/features/company/settings/components/ExpenseCategoryDropdown.vue
@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router'
 import { useDialogStore } from '@v2/stores/dialog.store'
 import { useUserStore } from '@v2/stores/user.store'
 import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
 import { expenseService } from '@v2/api/services/expense.service'
 
 const ABILITIES = {
@@ -24,6 +25,7 @@ const props = defineProps<{
 }>()
 
 const dialogStore = useDialogStore()
+const notificationStore = useNotificationStore()
 const { t } = useI18n()
 const route = useRoute()
 const userStore = useUserStore()
@@ -54,6 +56,10 @@ function removeExpenseCategory(id: number): void {
       if (res) {
         const response = await expenseService.deleteCategory(id)
         if (response.success) {
+          notificationStore.showNotification({
+            type: 'success',
+            message: 'settings.expense_category.deleted_message',
+          })
           props.loadData?.()
         }
       }
@@ -65,7 +71,7 @@ function removeExpenseCategory(id: number): void {
   <BaseDropdown>
     <template #activator>
       <BaseButton
-        v-if="route.name === 'expenseCategorys.view'"
+        v-if="route.name === 'settings.expense-categories'"
         variant="primary"
       >
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
diff --git a/resources/scripts-v2/features/company/settings/components/InvoicesTab.vue b/resources/scripts-v2/features/company/settings/components/InvoicesTab.vue
index 900b9fdb..5eb80489 100644
--- a/resources/scripts-v2/features/company/settings/components/InvoicesTab.vue
+++ b/resources/scripts-v2/features/company/settings/components/InvoicesTab.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { computed, reactive, inject } from 'vue'
 import { useCompanyStore } from '@v2/stores/company.store'
+import { useInvoiceStore } from '@v2/features/company/invoices/store'
 import NumberCustomizer from './NumberCustomizer.vue'
+import InvoicesTabDueDate from './InvoicesTabDueDate.vue'
+import InvoicesTabRetrospective from './InvoicesTabRetrospective.vue'
+import InvoicesTabDefaultFormats from './InvoicesTabDefaultFormats.vue'
 
 interface Utils {
   mergeSettings: (target: Record<string, unknown>, source: Record<string, unknown>) => void
@@ -9,6 +13,7 @@ interface Utils {
 
 const utils = inject<Utils>('utils')!
 const companyStore = useCompanyStore()
+const invoiceStore = useInvoiceStore()
 
 const invoiceSettings = reactive<{ invoice_email_attachment: string | null }>({
   invoice_email_attachment: null,
@@ -41,7 +46,19 @@ const sendAsAttachmentField = computed<boolean>({
 </script>
 
 <template>
-  <NumberCustomizer type="invoice" :type-store="companyStore" />
+  <NumberCustomizer type="invoice" :type-store="invoiceStore" />
+
+  <BaseDivider class="mt-6 mb-2" />
+
+  <InvoicesTabDueDate />
+
+  <BaseDivider class="mt-6 mb-2" />
+
+  <InvoicesTabRetrospective />
+
+  <BaseDivider class="mt-6 mb-2" />
+
+  <InvoicesTabDefaultFormats />
 
   <BaseDivider class="mt-6 mb-2" />
 
diff --git a/resources/scripts-v2/features/company/settings/components/InvoicesTabDefaultFormats.vue b/resources/scripts-v2/features/company/settings/components/InvoicesTabDefaultFormats.vue
new file mode 100644
index 00000000..bee045f9
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/InvoicesTabDefaultFormats.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useCompanyStore } from '@v2/stores/company.store'
+
+const companyStore = useCompanyStore()
+
+const isSaving = ref<boolean>(false)
+
+const settingsForm = reactive<{
+  invoice_mail_body: string
+  invoice_company_address_format: string
+  invoice_shipping_address_format: string
+  invoice_billing_address_format: string
+}>({
+  invoice_mail_body:
+    companyStore.selectedCompanySettings.invoice_mail_body ?? '',
+  invoice_company_address_format:
+    companyStore.selectedCompanySettings.invoice_company_address_format ?? '',
+  invoice_shipping_address_format:
+    companyStore.selectedCompanySettings.invoice_shipping_address_format ?? '',
+  invoice_billing_address_format:
+    companyStore.selectedCompanySettings.invoice_billing_address_format ?? '',
+})
+
+async function submitForm(): Promise<void> {
+  isSaving.value = true
+
+  const data = {
+    settings: {
+      ...settingsForm,
+    },
+  }
+
+  await companyStore.updateCompanySettings({
+    data,
+    message: 'settings.customization.invoices.invoice_settings_updated',
+  })
+
+  isSaving.value = false
+}
+</script>
+
+<template>
+  <form @submit.prevent="submitForm">
+    <BaseSettingCard
+      :title="$t('settings.customization.invoices.default_formats')"
+      :description="
+        $t('settings.customization.invoices.default_formats_description')
+      "
+    >
+      <BaseInputGroup
+        :label="
+          $t('settings.customization.invoices.default_invoice_email_body')
+        "
+        class="mt-6 mb-4"
+      >
+        <BaseCustomInput
+          v-model="settingsForm.invoice_mail_body"
+          :fields="['customer', 'company', 'invoice']"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="
+          $t('settings.customization.invoices.company_address_format')
+        "
+        class="mt-6 mb-4"
+      >
+        <BaseCustomInput
+          v-model="settingsForm.invoice_company_address_format"
+          :fields="['company']"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="
+          $t('settings.customization.invoices.shipping_address_format')
+        "
+        class="mt-6 mb-4"
+      >
+        <BaseCustomInput
+          v-model="settingsForm.invoice_shipping_address_format"
+          :fields="['shipping', 'customer']"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="
+          $t('settings.customization.invoices.billing_address_format')
+        "
+        class="mt-6 mb-4"
+      >
+        <BaseCustomInput
+          v-model="settingsForm.invoice_billing_address_format"
+          :fields="['billing', 'customer']"
+        />
+      </BaseInputGroup>
+
+      <BaseButton
+        :loading="isSaving"
+        :disabled="isSaving"
+        variant="primary"
+        type="submit"
+        class="mt-4"
+      >
+        <template #left="slotProps">
+          <BaseIcon
+            v-if="!isSaving"
+            :class="slotProps.class"
+            name="ArrowDownOnSquareIcon"
+          />
+        </template>
+        {{ $t('settings.customization.save') }}
+      </BaseButton>
+    </BaseSettingCard>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/InvoicesTabDueDate.vue b/resources/scripts-v2/features/company/settings/components/InvoicesTabDueDate.vue
new file mode 100644
index 00000000..f88bbc8f
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/InvoicesTabDueDate.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { numeric, helpers, requiredIf } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import { useCompanyStore } from '@v2/stores/company.store'
+
+const { t } = useI18n()
+const companyStore = useCompanyStore()
+
+const isSaving = ref<boolean>(false)
+
+const dueDateSettings = reactive<{
+  invoice_set_due_date_automatically: string
+  invoice_due_date_days: string
+}>({
+  invoice_set_due_date_automatically:
+    companyStore.selectedCompanySettings.invoice_set_due_date_automatically ??
+    'NO',
+  invoice_due_date_days:
+    companyStore.selectedCompanySettings.invoice_due_date_days ?? '',
+})
+
+const dueDateAutoField = computed<boolean>({
+  get: () => dueDateSettings.invoice_set_due_date_automatically === 'YES',
+  set: (newValue: boolean) => {
+    dueDateSettings.invoice_set_due_date_automatically = newValue
+      ? 'YES'
+      : 'NO'
+  },
+})
+
+const rules = computed(() => ({
+  dueDateSettings: {
+    invoice_due_date_days: {
+      required: helpers.withMessage(
+        t('validation.required'),
+        requiredIf(dueDateAutoField.value)
+      ),
+      numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
+    },
+  },
+}))
+
+const v$ = useVuelidate(rules, { dueDateSettings })
+
+async function submitForm(): Promise<void> {
+  v$.value.dueDateSettings.$touch()
+
+  if (v$.value.dueDateSettings.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+
+  const data: { settings: Record<string, string> } = {
+    settings: {
+      invoice_set_due_date_automatically:
+        dueDateSettings.invoice_set_due_date_automatically,
+    },
+  }
+
+  if (dueDateAutoField.value) {
+    data.settings.invoice_due_date_days =
+      dueDateSettings.invoice_due_date_days
+  }
+
+  await companyStore.updateCompanySettings({
+    data,
+    message: 'settings.customization.invoices.invoice_settings_updated',
+  })
+
+  isSaving.value = false
+}
+</script>
+
+<template>
+  <form @submit.prevent="submitForm">
+    <BaseSettingCard
+      :title="$t('settings.customization.invoices.due_date')"
+      :description="
+        $t('settings.customization.invoices.due_date_description')
+      "
+    >
+      <BaseSwitchSection
+        v-model="dueDateAutoField"
+        :title="
+          $t('settings.customization.invoices.set_due_date_automatically')
+        "
+        :description="
+          $t(
+            'settings.customization.invoices.set_due_date_automatically_description'
+          )
+        "
+      />
+
+      <BaseInputGroup
+        v-if="dueDateAutoField"
+        :label="$t('settings.customization.invoices.due_date_days')"
+        :error="
+          v$.dueDateSettings.invoice_due_date_days.$error &&
+          v$.dueDateSettings.invoice_due_date_days.$errors[0].$message
+        "
+        class="mt-2 mb-4"
+      >
+        <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/5">
+          <BaseInput
+            v-model="dueDateSettings.invoice_due_date_days"
+            :invalid="v$.dueDateSettings.invoice_due_date_days.$error"
+            type="number"
+            @input="v$.dueDateSettings.invoice_due_date_days.$touch()"
+          />
+        </div>
+      </BaseInputGroup>
+
+      <BaseButton
+        :loading="isSaving"
+        :disabled="isSaving"
+        variant="primary"
+        type="submit"
+        class="mt-4"
+      >
+        <template #left="slotProps">
+          <BaseIcon
+            v-if="!isSaving"
+            :class="slotProps.class"
+            name="ArrowDownOnSquareIcon"
+          />
+        </template>
+        {{ $t('settings.customization.save') }}
+      </BaseButton>
+    </BaseSettingCard>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/InvoicesTabRetrospective.vue b/resources/scripts-v2/features/company/settings/components/InvoicesTabRetrospective.vue
new file mode 100644
index 00000000..9ee13129
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/InvoicesTabRetrospective.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { reactive, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useCompanyStore } from '@v2/stores/company.store'
+import { useGlobalStore } from '@v2/stores/global.store'
+
+const { t } = useI18n()
+const companyStore = useCompanyStore()
+const globalStore = useGlobalStore()
+
+const settingsForm = reactive<{ retrospective_edits: string | null }>({
+  retrospective_edits:
+    companyStore.selectedCompanySettings.retrospective_edits ?? null,
+})
+
+const retrospectiveEditOptions = [
+  { key: 'settings.customization.invoices.allow', value: 'allow' },
+  { key: 'settings.customization.invoices.disable_on_invoice_partial_paid', value: 'disable_on_invoice_partial_paid' },
+  { key: 'settings.customization.invoices.disable_on_invoice_paid', value: 'disable_on_invoice_paid' },
+  { key: 'settings.customization.invoices.disable_on_invoice_sent', value: 'disable_on_invoice_sent' },
+]
+
+async function submitForm(): Promise<void> {
+  const data = {
+    settings: {
+      ...settingsForm,
+    },
+  }
+
+  await companyStore.updateCompanySettings({
+    data,
+    message: 'settings.customization.invoices.invoice_settings_updated',
+  })
+}
+</script>
+
+<template>
+  <BaseSettingCard
+    :title="$t('settings.customization.invoices.retrospective_edits')"
+    :description="
+      $t('settings.customization.invoices.retrospective_edits_description')
+    "
+  >
+    <BaseInputGroup required>
+      <BaseRadio
+        v-for="option in retrospectiveEditOptions"
+        :id="option.value"
+        :key="option.value"
+        v-model="settingsForm.retrospective_edits"
+        :label="$t(option.key)"
+        size="sm"
+        name="retrospective_edits"
+        :value="option.value"
+        class="mt-2"
+        @update:modelValue="submitForm"
+      />
+    </BaseInputGroup>
+  </BaseSettingCard>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/ItemUnitModal.vue b/resources/scripts-v2/features/company/settings/components/ItemUnitModal.vue
index 9df279db..57499712 100644
--- a/resources/scripts-v2/features/company/settings/components/ItemUnitModal.vue
+++ b/resources/scripts-v2/features/company/settings/components/ItemUnitModal.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { required, minLength, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useModalStore } from '@v2/stores/modal.store'
-import { itemService } from '@v2/api/services/item.service'
+import { useItemStore } from '@v2/features/company/items/store'
 
 interface ItemUnitForm {
   id: number | null
@@ -12,6 +12,7 @@ interface ItemUnitForm {
 }
 
 const modalStore = useModalStore()
+const itemStore = useItemStore()
 const { t } = useI18n()
 
 const isSaving = ref<boolean>(false)
@@ -41,12 +42,10 @@ const v$ = useVuelidate(rules, currentItemUnit)
 async function setInitialData(): Promise<void> {
   if (modalStore.data && typeof modalStore.data === 'number') {
     isEdit.value = true
-    const response = await itemService.getUnit(modalStore.data)
-    if (response.data) {
-      currentItemUnit.value = {
-        id: response.data.id,
-        name: response.data.name,
-      }
+    await itemStore.fetchItemUnit(modalStore.data)
+    currentItemUnit.value = {
+      id: itemStore.currentItemUnit.id ?? null,
+      name: itemStore.currentItemUnit.name,
     }
   } else {
     isEdit.value = false
@@ -63,18 +62,20 @@ async function submitItemUnit(): Promise<void> {
 
   isSaving.value = true
   try {
+    let res
     if (isEdit.value && currentItemUnit.value.id) {
-      await itemService.updateUnit(currentItemUnit.value.id, {
+      res = await itemStore.updateItemUnit({
+        id: currentItemUnit.value.id,
         name: currentItemUnit.value.name,
       })
     } else {
-      await itemService.createUnit({
+      res = await itemStore.addItemUnit({
         name: currentItemUnit.value.name,
       })
     }
 
-    if (modalStore.refreshData) {
-      modalStore.refreshData()
+    if (modalStore.refreshData && res?.data) {
+      modalStore.refreshData(res.data)
     }
     closeItemUnitModal()
   } catch {
diff --git a/resources/scripts-v2/features/company/settings/components/MailTestModal.vue b/resources/scripts-v2/features/company/settings/components/MailTestModal.vue
index 97ad5dcf..477a3d63 100644
--- a/resources/scripts-v2/features/company/settings/components/MailTestModal.vue
+++ b/resources/scripts-v2/features/company/settings/components/MailTestModal.vue
@@ -15,7 +15,7 @@ interface MailTestForm {
 
 const props = withDefaults(
   defineProps<{
-    storeType?: string
+    storeType?: 'company' | 'global'
   }>(),
   {
     storeType: 'global',
@@ -74,7 +74,18 @@ async function onTestMailSend(): Promise<void> {
 
   isSaving.value = true
   try {
-    await mailService.testEmail({ to: formData.to })
+    const payload = {
+      to: formData.to,
+      subject: formData.subject,
+      message: formData.message,
+    }
+
+    if (props.storeType === 'company') {
+      await companyService.testMailConfig(payload)
+    } else {
+      await mailService.testEmail(payload)
+    }
+
     closeTestModal()
   } finally {
     isSaving.value = false
diff --git a/resources/scripts-v2/features/company/settings/components/NoteDropdown.vue b/resources/scripts-v2/features/company/settings/components/NoteDropdown.vue
index 01795c12..eaf92eb4 100644
--- a/resources/scripts-v2/features/company/settings/components/NoteDropdown.vue
+++ b/resources/scripts-v2/features/company/settings/components/NoteDropdown.vue
@@ -6,10 +6,7 @@ import { useNotificationStore } from '@v2/stores/notification.store'
 import { useUserStore } from '@v2/stores/user.store'
 import { useModalStore } from '@v2/stores/modal.store'
 import { noteService } from '@v2/api/services/note.service'
-
-const ABILITIES = {
-  MANAGE_NOTE: 'manage-note',
-} as const
+import { ABILITIES } from '@v2/config/abilities'
 
 interface NoteRow {
   id: number
@@ -51,7 +48,11 @@ function removeNote(id: number): void {
       hideNoButton: false,
       size: 'lg',
     })
-    .then(async () => {
+    .then(async (confirmed: boolean) => {
+      if (!confirmed) {
+        return
+      }
+
       const response = await noteService.delete(id)
       if (response.success) {
         notificationStore.showNotification({
@@ -72,7 +73,7 @@ function removeNote(id: number): void {
 <template>
   <BaseDropdown>
     <template #activator>
-      <BaseButton v-if="route.name === 'notes.view'" variant="primary">
+      <BaseButton v-if="route.name === 'settings.notes'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
       <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
diff --git a/resources/scripts-v2/features/company/settings/components/NumberCustomizer.vue b/resources/scripts-v2/features/company/settings/components/NumberCustomizer.vue
index 9332b294..a8758be9 100644
--- a/resources/scripts-v2/features/company/settings/components/NumberCustomizer.vue
+++ b/resources/scripts-v2/features/company/settings/components/NumberCustomizer.vue
@@ -157,12 +157,12 @@ async function setInitialFields(): Promise<void> {
   const res = await globalStore.fetchPlaceholders(data as { key: string })
 
   res.placeholders.forEach((placeholder) => {
-    const found = allFields.value.find((field) => field.name === placeholder.value)
+    const found = allFields.value.find((field) => field.name === placeholder.name)
     if (!found) return
 
     selectedFields.value.push({
       ...found,
-      value: placeholder.value ?? '',
+      value: placeholder.value ?? found.value,
       id: Guid.raw(),
     })
   })
diff --git a/resources/scripts-v2/features/company/settings/components/PaymentModeDropdown.vue b/resources/scripts-v2/features/company/settings/components/PaymentModeDropdown.vue
index f620bb36..f65af911 100644
--- a/resources/scripts-v2/features/company/settings/components/PaymentModeDropdown.vue
+++ b/resources/scripts-v2/features/company/settings/components/PaymentModeDropdown.vue
@@ -55,7 +55,7 @@ function removePaymentMode(id: number): void {
 <template>
   <BaseDropdown>
     <template #activator>
-      <BaseButton v-if="route.name === 'paymentModes.view'" variant="primary">
+      <BaseButton v-if="route.name === 'settings.payment-modes'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
       <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
diff --git a/resources/scripts-v2/features/company/settings/components/PaymentModeModal.vue b/resources/scripts-v2/features/company/settings/components/PaymentModeModal.vue
index 02d20e26..708ce55c 100644
--- a/resources/scripts-v2/features/company/settings/components/PaymentModeModal.vue
+++ b/resources/scripts-v2/features/company/settings/components/PaymentModeModal.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { required, minLength, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
 import { paymentService } from '@v2/api/services/payment.service'
 
 interface PaymentModeForm {
@@ -12,6 +13,7 @@ interface PaymentModeForm {
 }
 
 const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
 const { t } = useI18n()
 
 const isSaving = ref<boolean>(false)
@@ -63,10 +65,18 @@ async function submitPaymentMode(): Promise<void> {
       await paymentService.updateMethod(currentPaymentMode.value.id, {
         name: currentPaymentMode.value.name,
       })
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.payment_modes.updated_message',
+      })
     } else {
       await paymentService.createMethod({
         name: currentPaymentMode.value.name,
       })
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.payment_modes.created_message',
+      })
     }
 
     isSaving.value = false
diff --git a/resources/scripts-v2/features/company/settings/components/PaymentsTab.vue b/resources/scripts-v2/features/company/settings/components/PaymentsTab.vue
index e5306673..57334dad 100644
--- a/resources/scripts-v2/features/company/settings/components/PaymentsTab.vue
+++ b/resources/scripts-v2/features/company/settings/components/PaymentsTab.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, reactive, inject } from 'vue'
 import { useCompanyStore } from '@v2/stores/company.store'
+import { usePaymentStore } from '@v2/features/company/payments/store'
 import NumberCustomizer from './NumberCustomizer.vue'
+import PaymentsTabDefaultFormats from './PaymentsTabDefaultFormats.vue'
 
 interface Utils {
   mergeSettings: (target: Record<string, unknown>, source: Record<string, unknown>) => void
@@ -9,6 +11,7 @@ interface Utils {
 
 const utils = inject<Utils>('utils')!
 const companyStore = useCompanyStore()
+const paymentStore = usePaymentStore()
 
 const paymentSettings = reactive<{ payment_email_attachment: string | null }>({
   payment_email_attachment: null,
@@ -41,8 +44,10 @@ const sendAsAttachmentField = computed<boolean>({
 </script>
 
 <template>
-  <NumberCustomizer type="payment" :type-store="companyStore" />
+  <NumberCustomizer type="payment" :type-store="paymentStore" />
 
+  <BaseDivider class="mt-6 mb-2" />
+  <PaymentsTabDefaultFormats />
   <BaseDivider class="mt-6 mb-2" />
 
   <ul class="divide-y divide-line-default">
diff --git a/resources/scripts-v2/features/company/settings/components/PaymentsTabDefaultFormats.vue b/resources/scripts-v2/features/company/settings/components/PaymentsTabDefaultFormats.vue
new file mode 100644
index 00000000..d78fb93e
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/PaymentsTabDefaultFormats.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, reactive, inject } from 'vue'
+import { useCompanyStore } from '@v2/stores/company.store'
+
+interface Utils {
+  mergeSettings: (target: Record<string, unknown>, source: Record<string, unknown>) => void
+}
+
+const companyStore = useCompanyStore()
+const utils = inject<Utils>('utils')!
+
+const mailFields = ref(['customer', 'company', 'payment'])
+const companyFields = ref(['company'])
+const customerAddressFields = ref(['billing', 'customer'])
+
+const isSaving = ref(false)
+
+const formatSettings = reactive<{
+  payment_mail_body: string | null
+  payment_company_address_format: string | null
+  payment_from_customer_address_format: string | null
+}>({
+  payment_mail_body: null,
+  payment_company_address_format: null,
+  payment_from_customer_address_format: null,
+})
+
+utils.mergeSettings(
+  formatSettings as unknown as Record<string, unknown>,
+  { ...companyStore.selectedCompanySettings }
+)
+
+async function submitForm() {
+  isSaving.value = true
+
+  const data = {
+    settings: {
+      ...formatSettings,
+    },
+  }
+
+  await companyStore.updateCompanySettings({
+    data,
+    message: 'settings.customization.payments.payment_settings_updated',
+  })
+
+  isSaving.value = false
+
+  return true
+}
+</script>
+
+<template>
+  <form @submit.prevent="submitForm">
+    <h6 class="text-heading text-lg font-medium">
+      {{ $t('settings.customization.payments.default_formats') }}
+    </h6>
+    <p class="mt-1 text-sm text-muted mb-2">
+      {{ $t('settings.customization.payments.default_formats_description') }}
+    </p>
+
+    <BaseInputGroup
+      :label="$t('settings.customization.payments.default_payment_email_body')"
+      class="mt-6 mb-4"
+    >
+      <BaseCustomInput
+        v-model="formatSettings.payment_mail_body"
+        :fields="mailFields"
+      />
+    </BaseInputGroup>
+
+    <BaseInputGroup
+      :label="$t('settings.customization.payments.company_address_format')"
+      class="mt-6 mb-4"
+    >
+      <BaseCustomInput
+        v-model="formatSettings.payment_company_address_format"
+        :fields="companyFields"
+      />
+    </BaseInputGroup>
+
+    <BaseInputGroup
+      :label="
+        $t('settings.customization.payments.from_customer_address_format')
+      "
+      class="mt-6 mb-4"
+    >
+      <BaseCustomInput
+        v-model="formatSettings.payment_from_customer_address_format"
+        :fields="customerAddressFields"
+      />
+    </BaseInputGroup>
+
+    <BaseButton
+      :loading="isSaving"
+      :disabled="isSaving"
+      variant="primary"
+      type="submit"
+      class="mt-4"
+    >
+      <template #left="slotProps">
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
+      </template>
+      {{ $t('settings.customization.save') }}
+    </BaseButton>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/RoleDropdown.vue b/resources/scripts-v2/features/company/settings/components/RoleDropdown.vue
index b631d62e..77c7b5be 100644
--- a/resources/scripts-v2/features/company/settings/components/RoleDropdown.vue
+++ b/resources/scripts-v2/features/company/settings/components/RoleDropdown.vue
@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router'
 import { useDialogStore } from '@v2/stores/dialog.store'
 import { useUserStore } from '@v2/stores/user.store'
 import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
 import { roleService } from '@v2/api/services/role.service'
 
 interface RoleRow {
@@ -19,12 +20,16 @@ const props = defineProps<{
 }>()
 
 const dialogStore = useDialogStore()
+const notificationStore = useNotificationStore()
 const { t } = useI18n()
 const route = useRoute()
 const userStore = useUserStore()
 const modalStore = useModalStore()
 
+const PROTECTED_ROLES = ['owner', 'super admin']
+
 async function editRole(id: number): Promise<void> {
+  if (PROTECTED_ROLES.includes(props.row.name)) return
   modalStore.openModal({
     title: t('settings.roles.edit_role'),
     componentName: 'RolesModal',
@@ -35,6 +40,7 @@ async function editRole(id: number): Promise<void> {
 }
 
 async function removeRole(id: number): Promise<void> {
+  if (PROTECTED_ROLES.includes(props.row.name)) return
   dialogStore
     .openDialog({
       title: t('general.are_you_sure'),
@@ -48,6 +54,10 @@ async function removeRole(id: number): Promise<void> {
     .then(async (res: boolean) => {
       if (res) {
         await roleService.delete(id)
+        notificationStore.showNotification({
+          type: 'success',
+          message: 'settings.roles.deleted_message',
+        })
         props.loadData?.()
       }
     })
@@ -57,7 +67,7 @@ async function removeRole(id: number): Promise<void> {
 <template>
   <BaseDropdown>
     <template #activator>
-      <BaseButton v-if="route.name === 'roles.view'" variant="primary">
+      <BaseButton v-if="route.name === 'settings.roles'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
       <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
diff --git a/resources/scripts-v2/features/company/settings/components/RolesModal.vue b/resources/scripts-v2/features/company/settings/components/RolesModal.vue
index b2a8390a..4cca0736 100644
--- a/resources/scripts-v2/features/company/settings/components/RolesModal.vue
+++ b/resources/scripts-v2/features/company/settings/components/RolesModal.vue
@@ -4,14 +4,17 @@ import { useI18n } from 'vue-i18n'
 import { required, minLength, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
 import { roleService } from '@v2/api/services/role.service'
 import type { CreateRolePayload } from '@v2/api/services/role.service'
 import type { Ability } from '@v2/types/domain/role'
 
-interface AbilityItem extends Ability {
+interface AbilityItem {
+  name: string
   ability: string
   disabled: boolean
   depends_on?: string[]
+  model?: string
 }
 
 interface AbilitiesList {
@@ -25,6 +28,7 @@ interface RoleForm {
 }
 
 const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
 const { t } = useI18n()
 
 const isSaving = ref<boolean>(false)
@@ -67,15 +71,20 @@ async function setInitialData(): Promise<void> {
   const abilitiesRes = await roleService.getAbilities()
   if (abilitiesRes.abilities) {
     const grouped: AbilitiesList = {}
-    abilitiesRes.abilities.forEach((a) => {
-      const group = a.title || 'General'
-      if (!grouped[group]) grouped[group] = []
-      grouped[group].push({
-        ...a,
-        ability: a.name,
+    abilitiesRes.abilities.forEach((a: Record<string, unknown>) => {
+      // Extract model name from PHP class path (e.g., "App\Models\Customer" → "Customer")
+      const modelPath = (a.model as string) ?? ''
+      const modelName = modelPath
+        ? modelPath.substring(modelPath.lastIndexOf('\\') + 1)
+        : 'Common'
+
+      if (!grouped[modelName]) grouped[modelName] = []
+      grouped[modelName].push({
+        name: a.name as string,
+        ability: a.ability as string,
         disabled: false,
-        depends_on: [],
-      })
+        depends_on: (a.depends_on as string[]) ?? [],
+      } as AbilityItem)
     })
     abilitiesList.value = grouped
   }
@@ -87,13 +96,33 @@ async function setInitialData(): Promise<void> {
       currentRole.value = {
         id: response.data.id,
         name: response.data.name,
-        abilities: response.data.abilities.map((a) => ({
-          ...a,
-          ability: a.name,
-          disabled: false,
-          depends_on: [],
-        })),
+        abilities: [],
       }
+
+      // Match role's abilities with the full ability objects from abilitiesList
+      const roleAbilities = (response.data.abilities ?? []) as Array<Record<string, unknown>>
+      roleAbilities.forEach((ra) => {
+        Object.keys(abilitiesList.value).forEach((group) => {
+          abilitiesList.value[group].forEach((_p) => {
+            if (_p.ability === ra.name) {
+              currentRole.value.abilities.push(_p)
+            }
+          })
+        })
+      })
+
+      // Set disabled state for dependent abilities
+      currentRole.value.abilities.forEach((ab) => {
+        ab.depends_on?.forEach((_d) => {
+          Object.keys(abilitiesList.value).forEach((group) => {
+            abilitiesList.value[group].forEach((_a) => {
+              if (_d === _a.ability) {
+                _a.disabled = true
+              }
+            })
+          })
+        })
+      })
     }
   } else {
     isEdit.value = false
@@ -121,8 +150,16 @@ async function submitRoleData(): Promise<void> {
 
     if (isEdit.value && currentRole.value.id) {
       await roleService.update(currentRole.value.id, payload)
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.roles.updated_message',
+      })
     } else {
       await roleService.create(payload)
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.roles.created_message',
+      })
     }
 
     isSaving.value = false
diff --git a/resources/scripts-v2/features/company/settings/components/TaxTypeDropdown.vue b/resources/scripts-v2/features/company/settings/components/TaxTypeDropdown.vue
index 3db2e6b6..6129734b 100644
--- a/resources/scripts-v2/features/company/settings/components/TaxTypeDropdown.vue
+++ b/resources/scripts-v2/features/company/settings/components/TaxTypeDropdown.vue
@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router'
 import { useDialogStore } from '@v2/stores/dialog.store'
 import { useUserStore } from '@v2/stores/user.store'
 import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
 import { taxTypeService } from '@v2/api/services/tax-type.service'
 
 const ABILITIES = {
@@ -24,6 +25,7 @@ const props = defineProps<{
 }>()
 
 const dialogStore = useDialogStore()
+const notificationStore = useNotificationStore()
 const { t } = useI18n()
 const route = useRoute()
 const userStore = useUserStore()
@@ -54,6 +56,10 @@ function removeTaxType(id: number): void {
       if (res) {
         const response = await taxTypeService.delete(id)
         if (response.success) {
+          notificationStore.showNotification({
+            type: 'success',
+            message: 'settings.tax_types.deleted_message',
+          })
           props.loadData?.()
         }
       }
@@ -64,7 +70,7 @@ function removeTaxType(id: number): void {
 <template>
   <BaseDropdown>
     <template #activator>
-      <BaseButton v-if="route.name === 'tax-types.view'" variant="primary">
+      <BaseButton v-if="route.name === 'settings.tax-types'" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
       <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
diff --git a/resources/scripts-v2/features/company/settings/components/TaxTypeModal.vue b/resources/scripts-v2/features/company/settings/components/TaxTypeModal.vue
index 52f7bbb1..7d7c39e9 100644
--- a/resources/scripts-v2/features/company/settings/components/TaxTypeModal.vue
+++ b/resources/scripts-v2/features/company/settings/components/TaxTypeModal.vue
@@ -11,6 +11,7 @@ import {
 import useVuelidate from '@vuelidate/core'
 import { useModalStore } from '@v2/stores/modal.store'
 import { useCompanyStore } from '@v2/stores/company.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
 import { taxTypeService } from '@v2/api/services/tax-type.service'
 import type { CreateTaxTypePayload } from '@v2/api/services/tax-type.service'
 
@@ -25,6 +26,7 @@ interface TaxTypeForm {
 
 const modalStore = useModalStore()
 const companyStore = useCompanyStore()
+const notificationStore = useNotificationStore()
 const { t } = useI18n()
 
 const isSaving = ref<boolean>(false)
@@ -122,8 +124,16 @@ async function submitTaxTypeData(): Promise<void> {
 
     if (isEdit.value && currentTaxType.value.id) {
       await taxTypeService.update(currentTaxType.value.id, payload)
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.tax_types.updated_message',
+      })
     } else {
       await taxTypeService.create(payload)
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.tax_types.created_message',
+      })
     }
 
     isSaving.value = false
diff --git a/resources/scripts-v2/features/company/settings/routes.ts b/resources/scripts-v2/features/company/settings/routes.ts
index b88e9e92..79f2d8c9 100644
--- a/resources/scripts-v2/features/company/settings/routes.ts
+++ b/resources/scripts-v2/features/company/settings/routes.ts
@@ -1,81 +1,235 @@
 import type { RouteRecordRaw } from 'vue-router'
+import { ABILITIES } from '@v2/config/abilities'
 
 const settingsRoutes: RouteRecordRaw[] = [
+  // User account settings — standalone page with sidebar tabs (General, Profile Photo, Security)
+  {
+    path: 'account-settings',
+    component: () => import('./views/UserSettingsLayoutView.vue'),
+    meta: {
+      requiresAuth: true,
+    },
+    children: [
+      {
+        path: '',
+        name: 'settings.account',
+        redirect: { name: 'settings.account.general' },
+      },
+      {
+        path: 'general',
+        name: 'settings.account.general',
+        component: () => import('./views/UserGeneralView.vue'),
+      },
+      {
+        path: 'profile-photo',
+        name: 'settings.account.profile-photo',
+        component: () => import('./views/UserProfilePhotoView.vue'),
+      },
+      {
+        path: 'security',
+        name: 'settings.account.security',
+        component: () => import('./views/UserSecurityView.vue'),
+      },
+    ],
+  },
   {
     path: 'settings',
     component: () => import('./views/SettingsLayoutView.vue'),
     children: [
       {
-        path: '',
-        redirect: 'company-info',
+        path: 'roles-settings',
+        redirect: { name: 'settings.roles' },
       },
       {
-        path: 'account-settings',
-        name: 'settings.account',
-        component: () => import('./views/AccountSettingsView.vue'),
+        path: 'exchange-rate-provider',
+        redirect: { name: 'settings.exchange-rate' },
+      },
+      {
+        path: 'payment-mode',
+        redirect: { name: 'settings.payment-modes' },
+      },
+      {
+        path: 'expense-category',
+        redirect: { name: 'settings.expense-categories' },
+      },
+      {
+        path: 'mail-configuration',
+        redirect: { name: 'settings.mail-config' },
       },
       {
         path: 'company-info',
         name: 'settings.company-info',
+        meta: {
+          requiresAuth: true,
+          isOwner: true,
+        },
         component: () => import('./views/CompanyInfoView.vue'),
       },
       {
         path: 'preferences',
         name: 'settings.preferences',
+        meta: {
+          requiresAuth: true,
+          isOwner: true,
+        },
         component: () => import('./views/PreferencesView.vue'),
       },
       {
         path: 'customization',
         name: 'settings.customization',
+        meta: {
+          requiresAuth: true,
+          isOwner: true,
+        },
         component: () => import('./views/CustomizationView.vue'),
       },
       {
         path: 'tax-types',
         name: 'settings.tax-types',
+        meta: {
+          requiresAuth: true,
+          ability: ABILITIES.VIEW_TAX_TYPE,
+        },
         component: () => import('./views/TaxTypesView.vue'),
       },
       {
         path: 'payment-modes',
         name: 'settings.payment-modes',
+        meta: {
+          requiresAuth: true,
+        },
         component: () => import('./views/PaymentModesView.vue'),
       },
       {
         path: 'custom-fields',
         name: 'settings.custom-fields',
+        meta: {
+          requiresAuth: true,
+          ability: ABILITIES.VIEW_CUSTOM_FIELDS,
+        },
         component: () => import('./views/CustomFieldsView.vue'),
       },
       {
         path: 'notes',
         name: 'settings.notes',
+        meta: {
+          requiresAuth: true,
+          ability: ABILITIES.VIEW_NOTE,
+        },
         component: () => import('./views/NotesView.vue'),
       },
       {
         path: 'notifications',
         name: 'settings.notifications',
+        meta: {
+          requiresAuth: true,
+          isOwner: true,
+        },
         component: () => import('./views/NotificationsView.vue'),
       },
       {
         path: 'expense-categories',
         name: 'settings.expense-categories',
+        meta: {
+          requiresAuth: true,
+          ability: ABILITIES.VIEW_EXPENSE,
+        },
         component: () => import('./views/ExpenseCategoriesView.vue'),
       },
       {
         path: 'exchange-rate',
         name: 'settings.exchange-rate',
+        meta: {
+          requiresAuth: true,
+          ability: ABILITIES.VIEW_EXCHANGE_RATE,
+        },
         component: () => import('./views/ExchangeRateView.vue'),
       },
       {
         path: 'mail-config',
         name: 'settings.mail-config',
+        meta: {
+          requiresAuth: true,
+          isOwner: true,
+        },
         component: () => import('./views/MailConfigView.vue'),
       },
       {
         path: 'roles',
         name: 'settings.roles',
+        meta: {
+          requiresAuth: true,
+          isOwner: true,
+        },
         component: () => import('./views/RolesView.vue'),
       },
+      {
+        path: 'danger-zone',
+        name: 'settings.danger-zone',
+        meta: {
+          requiresAuth: true,
+          isOwner: true,
+        },
+        component: () => import('./views/DangerZoneView.vue'),
+      },
     ],
   },
+  {
+    path: 'user-settings/:tab?',
+    redirect: { name: 'settings.account' },
+  },
+  {
+    path: 'settings/account-settings',
+    redirect: { name: 'settings.account' },
+  },
+  {
+    path: 'company-info',
+    redirect: { name: 'settings.company-info' },
+  },
+  {
+    path: 'preferences',
+    redirect: { name: 'settings.preferences' },
+  },
+  {
+    path: 'customization',
+    redirect: { name: 'settings.customization' },
+  },
+  {
+    path: 'notifications',
+    redirect: { name: 'settings.notifications' },
+  },
+  {
+    path: 'roles-settings',
+    redirect: { name: 'settings.roles' },
+  },
+  {
+    path: 'exchange-rate-provider',
+    redirect: { name: 'settings.exchange-rate' },
+  },
+  {
+    path: 'tax-types',
+    redirect: { name: 'settings.tax-types' },
+  },
+  {
+    path: 'payment-mode',
+    redirect: { name: 'settings.payment-modes' },
+  },
+  {
+    path: 'custom-fields',
+    redirect: { name: 'settings.custom-fields' },
+  },
+  {
+    path: 'notes',
+    redirect: { name: 'settings.notes' },
+  },
+  {
+    path: 'expense-category',
+    redirect: { name: 'settings.expense-categories' },
+  },
+  {
+    path: 'mail-configuration',
+    redirect: { name: 'settings.mail-config' },
+  },
 ]
 
 export default settingsRoutes
diff --git a/resources/scripts-v2/features/company/settings/views/AccountSettingsView.vue b/resources/scripts-v2/features/company/settings/views/AccountSettingsView.vue
index d9f453e2..987f8818 100644
--- a/resources/scripts-v2/features/company/settings/views/AccountSettingsView.vue
+++ b/resources/scripts-v2/features/company/settings/views/AccountSettingsView.vue
@@ -53,11 +53,22 @@ async function updateAccount(): Promise<void> {
 </script>
 
 <template>
-  <form @submit.prevent="updateAccount">
-    <BaseSettingCard
-      :title="$t('settings.account_settings.account_settings')"
-      :description="$t('settings.account_settings.section_description')"
-    >
+  <BasePage>
+    <BasePageHeader :title="$t('settings.account_settings.account_settings')">
+      <BaseBreadcrumb>
+        <BaseBreadcrumbItem :title="$t('general.home')" to="/admin/dashboard" />
+        <BaseBreadcrumbItem
+          :title="$t('settings.account_settings.account_settings')"
+          to="#"
+          active
+        />
+      </BaseBreadcrumb>
+    </BasePageHeader>
+
+    <form @submit.prevent="updateAccount">
+      <BaseSettingCard
+        :description="$t('settings.account_settings.section_description')"
+      >
       <BaseInputGrid class="mt-5">
         <BaseInputGroup
           :label="$t('settings.account_settings.name')"
@@ -128,5 +139,6 @@ async function updateAccount(): Promise<void> {
         {{ $t('settings.account_settings.save') }}
       </BaseButton>
     </BaseSettingCard>
-  </form>
+    </form>
+  </BasePage>
 </template>
diff --git a/resources/scripts-v2/features/company/settings/views/CompanyInfoView.vue b/resources/scripts-v2/features/company/settings/views/CompanyInfoView.vue
index 5c2d8ea6..b4d31e71 100644
--- a/resources/scripts-v2/features/company/settings/views/CompanyInfoView.vue
+++ b/resources/scripts-v2/features/company/settings/views/CompanyInfoView.vue
@@ -131,14 +131,6 @@ async function updateCompanyData(): Promise<void> {
 
   isSaving.value = false
 }
-
-function removeCompany(): void {
-  modalStore.openModal({
-    title: t('settings.company_info.are_you_absolutely_sure'),
-    componentName: 'DeleteCompanyModal',
-    size: 'sm',
-  })
-}
 </script>
 
 <template>
@@ -245,24 +237,6 @@ function removeCompany(): void {
         {{ $t('settings.company_info.save') }}
       </BaseButton>
 
-      <div v-if="companyStore.companies.length !== 1" class="py-5">
-        <BaseDivider class="my-4" />
-        <h3 class="text-lg leading-6 font-medium text-heading">
-          {{ $t('settings.company_info.delete_company') }}
-        </h3>
-        <div class="mt-2 max-w-xl text-sm text-muted">
-          <p>{{ $t('settings.company_info.delete_company_description') }}</p>
-        </div>
-        <div class="mt-5">
-          <button
-            type="button"
-            class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
-            @click="removeCompany"
-          >
-            {{ $t('general.delete') }}
-          </button>
-        </div>
-      </div>
     </BaseSettingCard>
   </form>
 </template>
diff --git a/resources/scripts-v2/features/company/settings/views/CustomizationView.vue b/resources/scripts-v2/features/company/settings/views/CustomizationView.vue
index 2cfb652d..33822154 100644
--- a/resources/scripts-v2/features/company/settings/views/CustomizationView.vue
+++ b/resources/scripts-v2/features/company/settings/views/CustomizationView.vue
@@ -1,8 +1,19 @@
 <script setup lang="ts">
+import { provide } from 'vue'
 import InvoicesTab from '@v2/features/company/settings/components/InvoicesTab.vue'
 import EstimatesTab from '@v2/features/company/settings/components/EstimatesTab.vue'
 import PaymentsTab from '@v2/features/company/settings/components/PaymentsTab.vue'
 import ItemsTab from '@v2/features/company/settings/components/ItemsTab.vue'
+
+provide('utils', {
+  mergeSettings(target: Record<string, unknown>, source: Record<string, unknown>): void {
+    Object.keys(source).forEach((key) => {
+      if (key in target) {
+        target[key] = source[key]
+      }
+    })
+  },
+})
 </script>
 
 <template>
diff --git a/resources/scripts-v2/features/company/settings/views/DangerZoneView.vue b/resources/scripts-v2/features/company/settings/views/DangerZoneView.vue
new file mode 100644
index 00000000..f3e69b64
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/views/DangerZoneView.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useCompanyStore } from '../../../../stores/company.store'
+import { useModalStore } from '../../../../stores/modal.store'
+import DeleteCompanyModal from '../components/DeleteCompanyModal.vue'
+
+const { t } = useI18n()
+const companyStore = useCompanyStore()
+const modalStore = useModalStore()
+
+function removeCompany(): void {
+  modalStore.openModal({
+    title: t('settings.company_info.are_you_absolutely_sure'),
+    componentName: 'DeleteCompanyModal',
+    size: 'sm',
+  })
+}
+</script>
+
+<template>
+  <BaseSettingCard
+    :title="$t('settings.company_info.danger_zone')"
+    :description="$t('settings.company_info.delete_company_description')"
+  >
+    <div v-if="companyStore.companies.length > 1" class="mt-6">
+      <BaseButton
+        variant="danger"
+        type="button"
+        @click="removeCompany"
+      >
+        <template #left="slotProps">
+          <BaseIcon name="TrashIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('settings.company_info.delete_company') }}
+      </BaseButton>
+    </div>
+  </BaseSettingCard>
+
+  <DeleteCompanyModal />
+</template>
diff --git a/resources/scripts-v2/features/company/settings/views/NotesView.vue b/resources/scripts-v2/features/company/settings/views/NotesView.vue
index e25f1c3d..05e16f8d 100644
--- a/resources/scripts-v2/features/company/settings/views/NotesView.vue
+++ b/resources/scripts-v2/features/company/settings/views/NotesView.vue
@@ -6,6 +6,7 @@ import { useUserStore } from '../../../../stores/user.store'
 import { noteService } from '../../../../api/services/note.service'
 import NoteDropdown from '@v2/features/company/settings/components/NoteDropdown.vue'
 import NoteModal from '@v2/features/company/settings/components/NoteModal.vue'
+import { ABILITIES } from '@v2/config/abilities'
 
 interface TableColumn {
   key: string
@@ -31,10 +32,6 @@ interface FetchResult {
   }
 }
 
-const ABILITIES = {
-  MANAGE_NOTE: 'manage-note',
-} as const
-
 const { t } = useI18n()
 const modalStore = useModalStore()
 const userStore = useUserStore()
diff --git a/resources/scripts-v2/features/company/settings/views/PreferencesView.vue b/resources/scripts-v2/features/company/settings/views/PreferencesView.vue
index 5ab71d25..a4d3083b 100644
--- a/resources/scripts-v2/features/company/settings/views/PreferencesView.vue
+++ b/resources/scripts-v2/features/company/settings/views/PreferencesView.vue
@@ -57,8 +57,14 @@ watch(
 
 const invoiceUseTimeField = computed<boolean>({
   get: () => settingsForm.invoice_use_time === 'YES',
-  set: (newValue: boolean) => {
-    settingsForm.invoice_use_time = newValue ? 'YES' : 'NO'
+  set: async (newValue: boolean) => {
+    const value = newValue ? 'YES' : 'NO'
+    settingsForm.invoice_use_time = value
+
+    await companyStore.updateCompanySettings({
+      data: { settings: { invoice_use_time: value } },
+      message: 'general.setting_updated',
+    })
   },
 })
 
@@ -303,12 +309,6 @@ async function submitData(): Promise<void> {
         </BaseInputGroup>
       </BaseInputGrid>
 
-      <BaseSwitchSection
-        v-model="invoiceUseTimeField"
-        :title="$t('settings.preferences.invoice_use_time')"
-        :description="$t('settings.preferences.invoice_use_time_description')"
-      />
-
       <BaseButton
         :content-loading="isFetchingInitialData"
         :disabled="isSaving"
@@ -362,6 +362,12 @@ async function submitData(): Promise<void> {
 
         <BaseDivider class="mt-6 mb-2" />
 
+        <BaseSwitchSection
+          v-model="invoiceUseTimeField"
+          :title="$t('settings.preferences.invoice_use_time')"
+          :description="$t('settings.preferences.invoice_use_time_description')"
+        />
+
         <BaseSwitchSection
           v-model="discountPerItemField"
           :title="$t('settings.preferences.discount_per_item')"
diff --git a/resources/scripts-v2/features/company/settings/views/RolesView.vue b/resources/scripts-v2/features/company/settings/views/RolesView.vue
index bfb34551..4a5e8685 100644
--- a/resources/scripts-v2/features/company/settings/views/RolesView.vue
+++ b/resources/scripts-v2/features/company/settings/views/RolesView.vue
@@ -112,12 +112,20 @@ async function openRoleModal(): Promise<void> {
       <template #cell-actions="{ row }">
         <RoleDropdown
           v-if="
-            userStore.currentUser?.is_owner && row.data.name !== 'super admin'
+            userStore.currentUser?.is_owner &&
+            row.data.name !== 'super admin' &&
+            row.data.name !== 'owner'
           "
           :row="row.data"
           :table="table"
           :load-data="refreshTable"
         />
+        <span
+          v-else-if="row.data.name === 'owner' || row.data.name === 'super admin'"
+          class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 ring-1 ring-inset ring-gray-300/50"
+        >
+          {{ $t('settings.roles.system_role') }}
+        </span>
       </template>
     </BaseTable>
   </BaseSettingCard>
diff --git a/resources/scripts-v2/features/company/settings/views/SettingsLayoutView.vue b/resources/scripts-v2/features/company/settings/views/SettingsLayoutView.vue
index ebc35719..725faa07 100644
--- a/resources/scripts-v2/features/company/settings/views/SettingsLayoutView.vue
+++ b/resources/scripts-v2/features/company/settings/views/SettingsLayoutView.vue
@@ -3,6 +3,8 @@ import { ref, computed, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useGlobalStore } from '../../../../stores/global.store'
+import { useCompanyStore } from '../../../../stores/company.store'
+import { useUserStore } from '../../../../stores/user.store'
 
 interface SettingMenuItem {
   title: string
@@ -16,21 +18,42 @@ interface DropdownMenuItem extends SettingMenuItem {
 
 const { t } = useI18n()
 const globalStore = useGlobalStore()
+const companyStore = useCompanyStore()
+const userStore = useUserStore()
 const route = useRoute()
 const router = useRouter()
 
+const showDangerZone = computed<boolean>(() => {
+  return (
+    userStore.currentUser?.is_owner === true &&
+    companyStore.companies.length > 1
+  )
+})
+
 const currentSetting = ref<DropdownMenuItem | undefined>(undefined)
 
 const dropdownMenuItems = computed<DropdownMenuItem[]>(() => {
-  return (globalStore.settingMenu as SettingMenuItem[]).map((item) => ({
+  const items = (globalStore.settingMenu as SettingMenuItem[]).map((item) => ({
     ...item,
     title: t(item.title),
   }))
+
+  if (showDangerZone.value) {
+    items.push({
+      title: t('settings.company_info.danger_zone'),
+      link: '/admin/settings/danger-zone',
+      icon: 'ExclamationTriangleIcon',
+    })
+  }
+
+  return items
 })
 
 watchEffect(() => {
   if (route.path === '/admin/settings') {
-    router.push('/admin/settings/company-info')
+    // Redirect to first available setting menu item, or account settings as fallback
+    const firstItem = globalStore.settingMenu?.[0]
+    router.push(firstItem?.link ?? '/admin/settings/account-settings')
   }
 
   const item = dropdownMenuItems.value.find((item) => item.link === route.path)
@@ -44,6 +67,7 @@ function hasActiveUrl(url: string): boolean {
 function navigateToSetting(setting: DropdownMenuItem): void {
   router.push(setting.link)
 }
+
 </script>
 
 <template>
@@ -53,7 +77,7 @@ function navigateToSetting(setting: DropdownMenuItem): void {
         <BaseBreadcrumbItem :title="$t('general.home')" to="/admin/dashboard" />
         <BaseBreadcrumbItem
           :title="$t('settings.setting', 2)"
-          to="/admin/settings/company-info"
+          to="/admin/settings"
           active
         />
       </BaseBreadcrumb>
@@ -89,6 +113,22 @@ function navigateToSetting(setting: DropdownMenuItem): void {
             </template>
           </BaseListItem>
         </BaseList>
+
+        <router-link
+          v-if="showDangerZone"
+          to="/admin/settings/danger-zone"
+          :class="[
+            'cursor-pointer px-3 py-2 mt-1 text-sm font-medium leading-5 flex items-center rounded-lg transition-colors',
+            hasActiveUrl('/admin/settings/danger-zone')
+              ? 'text-red-600 bg-red-50 font-semibold'
+              : 'text-red-500 hover:bg-red-50 hover:text-red-600',
+          ]"
+        >
+          <span class="mr-3">
+            <BaseIcon name="ExclamationTriangleIcon" />
+          </span>
+          <span>{{ $t('settings.company_info.danger_zone') }}</span>
+        </router-link>
       </div>
 
       <div class="w-full overflow-hidden">
diff --git a/resources/scripts-v2/features/company/settings/views/UserGeneralView.vue b/resources/scripts-v2/features/company/settings/views/UserGeneralView.vue
new file mode 100644
index 00000000..c75dc6d1
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/views/UserGeneralView.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, minLength, email, helpers } from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
+import { useUserStore } from '../../../../stores/user.store'
+import { useGlobalStore } from '../../../../stores/global.store'
+
+const userStore = useUserStore()
+const globalStore = useGlobalStore()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+const userForm = computed(() => userStore.userForm)
+
+const rules = computed(() => ({
+  name: {
+    required: helpers.withMessage(t('validation.required'), required),
+    minLength: helpers.withMessage(t('validation.name_min_length'), minLength(3)),
+  },
+  email: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+}))
+
+const v$ = useVuelidate(rules, userForm)
+
+async function updateGeneral(): Promise<void> {
+  v$.value.$touch()
+  if (v$.value.$invalid) return
+
+  isSaving.value = true
+  try {
+    await userStore.updateCurrentUser({
+      name: userForm.value.name,
+      email: userForm.value.email,
+      language: userForm.value.language || undefined,
+    })
+  } finally {
+    isSaving.value = false
+  }
+}
+</script>
+
+<template>
+  <form @submit.prevent="updateGeneral">
+    <BaseSettingCard
+      :title="$t('settings.account_settings.general')"
+      :description="$t('settings.account_settings.section_description')"
+    >
+      <BaseInputGrid class="mt-5">
+        <BaseInputGroup
+          :label="$t('settings.account_settings.name')"
+          :error="v$.name.$error && v$.name.$errors[0]?.$message"
+          required
+        >
+          <BaseInput
+            v-model="userForm.name"
+            :invalid="v$.name.$error"
+            @blur="v$.name.$touch()"
+          />
+        </BaseInputGroup>
+
+        <BaseInputGroup
+          :label="$t('settings.account_settings.email')"
+          :error="v$.email.$error && v$.email.$errors[0]?.$message"
+          required
+        >
+          <BaseInput
+            v-model="userForm.email"
+            type="email"
+            :invalid="v$.email.$error"
+            @blur="v$.email.$touch()"
+          />
+        </BaseInputGroup>
+
+        <BaseInputGroup :label="$t('settings.language')">
+          <BaseMultiselect
+            v-model="userForm.language"
+            :options="(globalStore.config as Record<string, unknown>)?.languages as Array<{ name: string; code: string }> ?? []"
+            label="name"
+            value-prop="code"
+            track-by="name"
+            :searchable="true"
+          />
+        </BaseInputGroup>
+      </BaseInputGrid>
+
+      <BaseButton :loading="isSaving" :disabled="isSaving" type="submit" class="mt-6">
+        <template #left="slotProps">
+          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('settings.company_info.save') }}
+      </BaseButton>
+    </BaseSettingCard>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/views/UserProfilePhotoView.vue b/resources/scripts-v2/features/company/settings/views/UserProfilePhotoView.vue
new file mode 100644
index 00000000..2fc54584
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/views/UserProfilePhotoView.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useNotificationStore } from '../../../../stores/notification.store'
+import { useI18n } from 'vue-i18n'
+
+interface AvatarFile {
+  image: string
+}
+
+const userStore = useUserStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+const imgFiles = ref<AvatarFile[]>([])
+const avatarFileBlob = ref<File | null>(null)
+
+if (userStore.currentUser?.avatar) {
+  imgFiles.value.push({ image: userStore.currentUser.avatar as string })
+}
+
+function onFileInputChange(_fileName: string, file: File): void {
+  avatarFileBlob.value = file
+}
+
+function onFileInputRemove(): void {
+  avatarFileBlob.value = null
+}
+
+async function updateAvatar(): Promise<void> {
+  if (!avatarFileBlob.value) return
+
+  isSaving.value = true
+  try {
+    const formData = new FormData()
+    formData.append('admin_avatar', avatarFileBlob.value)
+
+    await userStore.uploadAvatar(formData)
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: 'settings.account_settings.updated_message',
+    })
+
+    avatarFileBlob.value = null
+  } finally {
+    isSaving.value = false
+  }
+}
+</script>
+
+<template>
+  <form @submit.prevent="updateAvatar">
+    <BaseSettingCard
+      :title="$t('settings.account_settings.profile_picture')"
+      :description="$t('settings.account_settings.profile_picture_description')"
+    >
+      <BaseInputGrid class="mt-5">
+        <BaseInputGroup :label="$t('settings.account_settings.profile_picture')">
+          <BaseFileUploader
+            v-model="imgFiles"
+            :avatar="true"
+            accept="image/*"
+            @change="onFileInputChange"
+            @remove="onFileInputRemove"
+          />
+        </BaseInputGroup>
+      </BaseInputGrid>
+
+      <BaseButton :loading="isSaving" :disabled="isSaving" type="submit" class="mt-6">
+        <template #left="slotProps">
+          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('settings.company_info.save') }}
+      </BaseButton>
+    </BaseSettingCard>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/views/UserSecurityView.vue b/resources/scripts-v2/features/company/settings/views/UserSecurityView.vue
new file mode 100644
index 00000000..bbf80788
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/views/UserSecurityView.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { minLength, sameAs, helpers } from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
+import { useUserStore } from '../../../../stores/user.store'
+
+const userStore = useUserStore()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+
+const form = reactive({
+  password: '',
+  confirm_password: '',
+})
+
+const rules = computed(() => ({
+  password: {
+    minLength: helpers.withMessage(
+      t('validation.password_min_length', { count: 8 }),
+      minLength(8),
+    ),
+  },
+  confirm_password: {
+    sameAsPassword: helpers.withMessage(
+      t('validation.password_incorrect'),
+      sameAs(form.password),
+    ),
+  },
+}))
+
+const v$ = useVuelidate(rules, form)
+
+async function updatePassword(): Promise<void> {
+  v$.value.$touch()
+  if (v$.value.$invalid) return
+
+  isSaving.value = true
+  try {
+    await userStore.updateCurrentUser({
+      name: userStore.currentUser?.name ?? '',
+      email: userStore.currentUser?.email ?? '',
+      password: form.password,
+      confirm_password: form.confirm_password,
+    })
+    form.password = ''
+    form.confirm_password = ''
+    v$.value.$reset()
+  } finally {
+    isSaving.value = false
+  }
+}
+</script>
+
+<template>
+  <form @submit.prevent="updatePassword">
+    <BaseSettingCard
+      :title="$t('settings.account_settings.security')"
+      :description="$t('settings.account_settings.security_description')"
+    >
+      <BaseInputGrid class="mt-5">
+        <BaseInputGroup
+          :label="$t('settings.account_settings.password')"
+          :error="v$.password.$error && v$.password.$errors[0]?.$message"
+        >
+          <BaseInput
+            v-model="form.password"
+            type="password"
+            :invalid="v$.password.$error"
+            @blur="v$.password.$touch()"
+          />
+        </BaseInputGroup>
+
+        <BaseInputGroup
+          :label="$t('settings.account_settings.confirm_password')"
+          :error="v$.confirm_password.$error && v$.confirm_password.$errors[0]?.$message"
+        >
+          <BaseInput
+            v-model="form.confirm_password"
+            type="password"
+            :invalid="v$.confirm_password.$error"
+            @blur="v$.confirm_password.$touch()"
+          />
+        </BaseInputGroup>
+      </BaseInputGrid>
+
+      <BaseButton :loading="isSaving" :disabled="isSaving" type="submit" class="mt-6">
+        <template #left="slotProps">
+          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('settings.company_info.save') }}
+      </BaseButton>
+    </BaseSettingCard>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/views/UserSettingsLayoutView.vue b/resources/scripts-v2/features/company/settings/views/UserSettingsLayoutView.vue
new file mode 100644
index 00000000..008974a9
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/views/UserSettingsLayoutView.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+interface MenuItem {
+  title: string
+  link: string
+  icon: string
+}
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+
+const currentSetting = ref<MenuItem | undefined>(undefined)
+
+const menuItems = computed<MenuItem[]>(() => [
+  {
+    title: t('settings.account_settings.general'),
+    link: '/admin/account-settings/general',
+    icon: 'UserIcon',
+  },
+  {
+    title: t('settings.account_settings.profile_picture'),
+    link: '/admin/account-settings/profile-photo',
+    icon: 'PhotoIcon',
+  },
+  {
+    title: t('settings.account_settings.security'),
+    link: '/admin/account-settings/security',
+    icon: 'LockClosedIcon',
+  },
+])
+
+watchEffect(() => {
+  if (route.path === '/admin/account-settings') {
+    router.push('/admin/account-settings/general')
+  }
+
+  const item = menuItems.value.find((item) => item.link === route.path)
+  currentSetting.value = item
+})
+
+function hasActiveUrl(url: string): boolean {
+  return route.path.indexOf(url) > -1
+}
+
+function navigateToSetting(setting: MenuItem): void {
+  router.push(setting.link)
+}
+</script>
+
+<template>
+  <BasePage>
+    <BasePageHeader
+      :title="$t('settings.account_settings.account_settings')"
+      class="mb-6"
+    >
+      <BaseBreadcrumb>
+        <BaseBreadcrumbItem :title="$t('general.home')" to="/admin/dashboard" />
+        <BaseBreadcrumbItem
+          :title="$t('settings.account_settings.account_settings')"
+          to="#"
+          active
+        />
+      </BaseBreadcrumb>
+    </BasePageHeader>
+
+    <div class="w-full mb-6 select-wrapper xl:hidden">
+      <BaseMultiselect
+        v-model="currentSetting"
+        :options="menuItems"
+        :can-deselect="false"
+        value-prop="title"
+        track-by="title"
+        label="title"
+        object
+        @update:model-value="navigateToSetting"
+      />
+    </div>
+
+    <div class="flex gap-8">
+      <div class="hidden mt-1 xl:block min-w-[240px] sticky top-20 self-start">
+        <BaseList>
+          <BaseListItem
+            v-for="(menuItem, index) in menuItems"
+            :key="index"
+            :title="menuItem.title"
+            :to="menuItem.link"
+            :active="hasActiveUrl(menuItem.link)"
+            :index="index"
+            class="py-3"
+          >
+            <template #icon>
+              <BaseIcon :name="menuItem.icon" />
+            </template>
+          </BaseListItem>
+        </BaseList>
+      </div>
+
+      <div class="w-full overflow-hidden">
+        <RouterView />
+      </div>
+    </div>
+  </BasePage>
+</template>
diff --git a/resources/scripts-v2/features/customer-portal/components/CustomerPortalAuthLayout.vue b/resources/scripts-v2/features/customer-portal/components/CustomerPortalAuthLayout.vue
new file mode 100644
index 00000000..7d178d1e
--- /dev/null
+++ b/resources/scripts-v2/features/customer-portal/components/CustomerPortalAuthLayout.vue
@@ -0,0 +1,84 @@
+<template>
+  <div
+    class="
+      flex min-h-screen items-center justify-center bg-surface-tertiary px-4 py-12
+      sm:px-6 lg:px-8
+    "
+  >
+    <NotificationRoot />
+
+    <div class="w-full max-w-md">
+      <div class="mb-10 flex justify-center">
+        <MainLogo
+          v-if="!customerLogo"
+          class="block h-auto w-44 max-w-full text-primary-500"
+        />
+
+        <img
+          v-else
+          :src="customerLogo"
+          class="block h-auto w-44 max-w-full"
+        />
+      </div>
+
+      <div class="rounded-2xl border border-line-default bg-surface px-6 py-8 shadow-sm sm:px-8">
+        <div class="mb-8 text-left">
+          <h1 class="text-2xl font-semibold tracking-tight text-heading">
+            {{ pageTitle }}
+          </h1>
+          <p class="mt-2 text-sm leading-6 text-muted">
+            {{ pageDescription }}
+          </p>
+        </div>
+
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import NotificationRoot from '@v2/components/notifications/NotificationRoot.vue'
+import MainLogo from '@v2/components/icons/MainLogo.vue'
+
+declare global {
+  interface Window {
+    customer_logo?: string
+    customer_page_title?: string
+  }
+}
+
+const route = useRoute()
+const { t } = useI18n()
+
+const customerLogo = computed<string | false>(() => {
+  return window.customer_logo || false
+})
+
+const pageTitle = computed<string>(() => {
+  if (route.name === 'customer-portal.forgot-password') {
+    return t('login.forgot_password')
+  }
+
+  if (route.name === 'customer-portal.reset-password') {
+    return t('login.reset_password')
+  }
+
+  return window.customer_page_title || t('customers.portal_access')
+})
+
+const pageDescription = computed<string>(() => {
+  if (route.name === 'customer-portal.forgot-password') {
+    return t('login.enter_email')
+  }
+
+  if (route.name === 'customer-portal.reset-password') {
+    return t('customers.portal_access_text')
+  }
+
+  return t('customers.portal_access_text')
+})
+</script>
diff --git a/resources/scripts-v2/features/customer-portal/components/CustomerPortalHeader.vue b/resources/scripts-v2/features/customer-portal/components/CustomerPortalHeader.vue
new file mode 100644
index 00000000..c8257cf5
--- /dev/null
+++ b/resources/scripts-v2/features/customer-portal/components/CustomerPortalHeader.vue
@@ -0,0 +1,166 @@
+<template>
+  <header
+    class="
+      fixed top-0 left-0 z-20 flex w-full items-center justify-between border-b
+      border-line-default bg-surface px-4 py-3 shadow-xs md:px-8
+    "
+  >
+    <div class="flex min-w-0 items-center gap-6">
+      <router-link
+        :to="dashboardPath"
+        class="shrink-0"
+      >
+        <MainLogo
+          v-if="!customerLogo"
+          class="h-6 w-auto text-primary-500"
+        />
+        <img
+          v-else
+          :src="customerLogo"
+          class="h-6 w-auto"
+        />
+      </router-link>
+
+      <nav class="hidden items-center gap-5 md:flex">
+        <router-link
+          v-for="item in store.mainMenu"
+          :key="item.link"
+          :to="menuLink(item.link)"
+          :class="[
+            isActiveLink(item.link)
+              ? 'text-primary-500'
+              : 'text-muted hover:text-heading',
+            'text-sm font-medium transition-colors',
+          ]"
+        >
+          {{ $t(item.title) }}
+        </router-link>
+      </nav>
+    </div>
+
+    <div class="flex items-center gap-3">
+      <div class="hidden text-right sm:block">
+        <p class="text-sm font-medium text-heading">
+          {{ store.currentUser?.name ?? '' }}
+        </p>
+        <p class="text-xs text-muted">
+          {{ store.currentUser?.email ?? '' }}
+        </p>
+      </div>
+
+      <BaseDropdown width-class="w-56">
+        <template #activator>
+          <button
+            class="flex items-center gap-2 rounded-full p-1 transition-colors hover:bg-surface-tertiary"
+            type="button"
+          >
+            <img
+              :src="previewAvatar"
+              class="h-9 w-9 rounded-full object-cover"
+            />
+            <BaseIcon
+              class="hidden h-4 w-4 text-muted md:block"
+              name="ChevronDownIcon"
+            />
+          </button>
+        </template>
+
+        <div class="px-2 pb-2 md:hidden">
+          <router-link
+            v-for="item in store.mainMenu"
+            :key="`${item.link}-mobile`"
+            :to="menuLink(item.link)"
+          >
+            <BaseDropdownItem>
+              {{ $t(item.title) }}
+            </BaseDropdownItem>
+          </router-link>
+        </div>
+
+        <router-link :to="settingsPath">
+          <BaseDropdownItem>
+            <BaseIcon
+              class="mr-3 h-5 w-5 text-subtle group-hover:text-muted"
+              name="CogIcon"
+            />
+            {{ $t('navigation.settings') }}
+          </BaseDropdownItem>
+        </router-link>
+
+        <BaseDropdownItem @click="logout">
+          <BaseIcon
+            class="mr-3 h-5 w-5 text-subtle group-hover:text-muted"
+            name="ArrowRightOnRectangleIcon"
+          />
+          {{ $t('navigation.logout') }}
+        </BaseDropdownItem>
+      </BaseDropdown>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useCustomerPortalStore } from '../store'
+import { buildCustomerPortalPath, prefixCustomerPortalMenuLink } from '../utils/routes'
+import MainLogo from '@v2/components/icons/MainLogo.vue'
+
+declare global {
+  interface Window {
+    customer_logo?: string
+  }
+}
+
+const store = useCustomerPortalStore()
+const route = useRoute()
+const router = useRouter()
+
+const customerLogo = computed<string | false>(() => {
+  return window.customer_logo || false
+})
+
+const dashboardPath = computed<string>(() => {
+  return buildCustomerPortalPath(store.companySlug, 'dashboard')
+})
+
+const settingsPath = computed<string>(() => {
+  return buildCustomerPortalPath(store.companySlug, 'settings')
+})
+
+const previewAvatar = computed<string>(() => {
+  if (typeof store.currentUser?.avatar === 'string' && store.currentUser.avatar) {
+    return store.currentUser.avatar
+  }
+
+  return getDefaultAvatar()
+})
+
+function getDefaultAvatar(): string {
+  const imageUrl = new URL('$images/default-avatar.jpg', import.meta.url)
+  return imageUrl.href
+}
+
+function menuLink(link: string): string {
+  return prefixCustomerPortalMenuLink(store.companySlug, link)
+}
+
+function isActiveLink(link: string): boolean {
+  const resolvedLink = menuLink(link)
+
+  if (resolvedLink.endsWith('/dashboard')) {
+    return route.path === resolvedLink
+  }
+
+  return route.path.startsWith(resolvedLink)
+}
+
+async function logout(): Promise<void> {
+  const companySlug = store.companySlug
+  await store.logout()
+  await router.push({
+    name: 'customer-portal.login',
+    params: { company: companySlug },
+  })
+}
+</script>
diff --git a/resources/scripts-v2/features/customer-portal/components/CustomerPortalLayout.vue b/resources/scripts-v2/features/customer-portal/components/CustomerPortalLayout.vue
index eac7ea22..f25fa4ca 100644
--- a/resources/scripts-v2/features/customer-portal/components/CustomerPortalLayout.vue
+++ b/resources/scripts-v2/features/customer-portal/components/CustomerPortalLayout.vue
@@ -1,6 +1,7 @@
 <template>
   <div v-if="isAppLoaded" class="h-full">
-    <slot name="header" />
+    <NotificationRoot />
+    <CustomerPortalHeader />
     <main class="mt-16 pb-16 h-screen overflow-y-auto min-h-0">
       <router-view />
     </main>
@@ -8,19 +9,41 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useCustomerPortalStore } from '../store'
+import { resolveCompanySlug } from '../utils/routes'
+import NotificationRoot from '@v2/components/notifications/NotificationRoot.vue'
+import CustomerPortalHeader from './CustomerPortalHeader.vue'
 
 const store = useCustomerPortalStore()
 const route = useRoute()
+const router = useRouter()
 
 const isAppLoaded = computed<boolean>(() => store.isAppLoaded)
 
-onMounted(async () => {
-  const companySlug = route.params.company as string
-  if (companySlug && !store.isAppLoaded) {
-    await store.bootstrap(companySlug)
-  }
-})
+watch(
+  () => route.params.company,
+  async (companyParam) => {
+    const companySlug = resolveCompanySlug(companyParam)
+
+    if (!companySlug) {
+      return
+    }
+
+    if (store.isAppLoaded && store.companySlug === companySlug) {
+      return
+    }
+
+    try {
+      await store.bootstrap(companySlug)
+    } catch {
+      await router.push({
+        name: 'customer-portal.login',
+        params: { company: companySlug },
+      })
+    }
+  },
+  { immediate: true }
+)
 </script>
diff --git a/resources/scripts-v2/features/customer-portal/routes.ts b/resources/scripts-v2/features/customer-portal/routes.ts
index 099ef5c6..c3831f6c 100644
--- a/resources/scripts-v2/features/customer-portal/routes.ts
+++ b/resources/scripts-v2/features/customer-portal/routes.ts
@@ -1,6 +1,10 @@
 import type { RouteRecordRaw } from 'vue-router'
 
+const CustomerPortalAuthLayout = () => import('./components/CustomerPortalAuthLayout.vue')
 const CustomerPortalLayout = () => import('./components/CustomerPortalLayout.vue')
+const CustomerPortalLoginView = () => import('./views/auth/CustomerPortalLoginView.vue')
+const CustomerPortalForgotPasswordView = () => import('./views/auth/CustomerPortalForgotPasswordView.vue')
+const CustomerPortalResetPasswordView = () => import('./views/auth/CustomerPortalResetPasswordView.vue')
 const CustomerDashboardView = () => import('./views/CustomerDashboardView.vue')
 const CustomerInvoicesView = () => import('./views/CustomerInvoicesView.vue')
 const CustomerInvoiceDetailView = () => import('./views/CustomerInvoiceDetailView.vue')
@@ -11,10 +15,38 @@ const CustomerPaymentDetailView = () => import('./views/CustomerPaymentDetailVie
 const CustomerSettingsView = () => import('./views/CustomerSettingsView.vue')
 
 export const customerPortalRoutes: RouteRecordRaw[] = [
+  {
+    path: '/:company/customer',
+    component: CustomerPortalAuthLayout,
+    meta: {
+      isCustomerPortal: true,
+      customerPortalGuest: true,
+    },
+    children: [
+      {
+        path: 'login',
+        alias: '',
+        name: 'customer-portal.login',
+        component: CustomerPortalLoginView,
+      },
+      {
+        path: 'forgot-password',
+        name: 'customer-portal.forgot-password',
+        component: CustomerPortalForgotPasswordView,
+      },
+      {
+        path: 'reset/password/:token',
+        name: 'customer-portal.reset-password',
+        component: CustomerPortalResetPasswordView,
+      },
+    ],
+  },
   {
     path: '/:company/customer',
     component: CustomerPortalLayout,
-    meta: { requiresAuth: true },
+    meta: {
+      isCustomerPortal: true,
+    },
     children: [
       {
         path: 'dashboard',
diff --git a/resources/scripts-v2/features/customer-portal/store.ts b/resources/scripts-v2/features/customer-portal/store.ts
index 4564a665..e7028efa 100644
--- a/resources/scripts-v2/features/customer-portal/store.ts
+++ b/resources/scripts-v2/features/customer-portal/store.ts
@@ -18,7 +18,7 @@ export interface CustomerPortalMenuItem {
 }
 
 export interface CustomerUserForm {
-  avatar: string | null
+  avatar: string | number | null
   name: string
   email: string
   password: string
@@ -73,6 +73,31 @@ export interface PaginatedResponse<T> {
   }
 }
 
+export interface CustomerPortalBootstrapMeta {
+  menu: CustomerPortalMenuItem[]
+  modules: string[]
+  current_customer_currency?: Currency | null
+  current_company_language?: string
+}
+
+export interface CustomerPortalBootstrapResponse {
+  data: Customer
+  meta: CustomerPortalBootstrapMeta
+}
+
+export interface CustomerPortalLoginResponse {
+  success: boolean
+}
+
+export interface CustomerPortalForgotPasswordResponse {
+  message: string
+  data: string
+}
+
+export interface CustomerPortalResetPasswordResponse {
+  message: string
+}
+
 // ----------------------------------------------------------------
 // Address stub
 // ----------------------------------------------------------------
@@ -104,6 +129,49 @@ function createUserFormStub(): CustomerUserForm {
   }
 }
 
+function createLoginDataStub(company: string = ''): CustomerLoginData {
+  return {
+    email: '',
+    password: '',
+    device_name: 'customer-portal-web',
+    company,
+  }
+}
+
+function normalizeAddress(
+  address: Customer['billing'] | Customer['shipping'] | undefined,
+  type: CustomerAddress['type'],
+): CustomerAddress {
+  return {
+    name: address?.name ?? null,
+    address_street_1: address?.address_street_1 ?? null,
+    address_street_2: address?.address_street_2 ?? null,
+    city: address?.city ?? null,
+    state: address?.state ?? null,
+    country_id: address?.country_id ?? null,
+    zip: address?.zip ?? null,
+    phone: address?.phone ?? null,
+    type,
+  }
+}
+
+function hydrateUserForm(customer: Customer): CustomerUserForm {
+  return {
+    avatar: customer.avatar ?? null,
+    name: customer.name,
+    email: customer.email ?? '',
+    password: '',
+    confirm_password: '',
+    company: customer.company_name ?? customer.company?.name ?? '',
+    billing: normalizeAddress(customer.billing, 'billing'),
+    shipping: normalizeAddress(customer.shipping, 'shipping'),
+  }
+}
+
+interface ResourceResponse<T> {
+  data: T
+}
+
 // ----------------------------------------------------------------
 // Helper to build customer API base URL
 // ----------------------------------------------------------------
@@ -120,6 +188,7 @@ export interface CustomerPortalState {
   // Global
   companySlug: string
   isAppLoaded: boolean
+  currentCompanyLanguage: string | null
   currency: Currency | null
   countries: Country[]
   currentUser: Customer | null
@@ -161,6 +230,7 @@ export const useCustomerPortalStore = defineStore('customerPortal', {
   state: (): CustomerPortalState => ({
     companySlug: '',
     isAppLoaded: false,
+    currentCompanyLanguage: null,
     currency: null,
     countries: [],
     currentUser: null,
@@ -189,31 +259,44 @@ export const useCustomerPortalStore = defineStore('customerPortal', {
     totalPayments: 0,
     selectedViewPayment: null,
 
-    loginData: {
-      email: '',
-      password: '',
-      device_name: 'xyz',
-      company: '',
-    },
+    loginData: createLoginDataStub(),
   }),
 
   actions: {
     // ---- Bootstrap ----
 
-    async bootstrap(slug: string): Promise<void> {
-      this.companySlug = slug
-      const { data } = await client.get(customerApi(slug, '/bootstrap'))
+    resetState(companySlug: string = ''): void {
+      this.$reset()
+      this.companySlug = companySlug
+      this.loginData = createLoginDataStub(companySlug)
+    },
+
+    async bootstrap(slug: string): Promise<CustomerPortalBootstrapResponse> {
+      this.resetState(slug)
+
+      const { data } = await client.get<CustomerPortalBootstrapResponse>(
+        customerApi(slug, '/bootstrap'),
+      )
+
       this.currentUser = data.data
       this.mainMenu = data.meta.menu ?? []
-      this.currency = data.data.currency ?? null
+      this.currency = data.data.currency ?? data.meta.current_customer_currency ?? null
       this.enabledModules = data.meta.modules ?? []
-      Object.assign(this.userForm, data.data)
+      this.currentCompanyLanguage = data.meta.current_company_language ?? 'en'
+      this.userForm = hydrateUserForm(data.data)
       this.isAppLoaded = true
+
+      await window.loadLanguage?.(this.currentCompanyLanguage)
+
+      return data
     },
 
     async fetchCountries(): Promise<Country[]> {
-      if (this.countries.length) return this.countries
-      const { data } = await client.get(
+      if (this.countries.length) {
+        return this.countries
+      }
+
+      const { data } = await client.get<ResourceResponse<Country[]>>(
         customerApi(this.companySlug, '/countries'),
       )
       this.countries = data.data
@@ -365,19 +448,20 @@ export const useCustomerPortalStore = defineStore('customerPortal', {
     // ---- User / Settings ----
 
     async fetchCurrentUser(): Promise<void> {
-      const { data } = await client.get(
+      const { data } = await client.get<ResourceResponse<Customer>>(
         customerApi(this.companySlug, '/me'),
       )
-      Object.assign(this.userForm, data.data)
+      this.currentUser = data.data
+      this.userForm = hydrateUserForm(data.data)
     },
 
-    async updateCurrentUser(formData: FormData): Promise<{ data: { data: Customer } }> {
-      const { data } = await client.post(
+    async updateCurrentUser(formData: FormData): Promise<{ data: ResourceResponse<Customer> }> {
+      const { data } = await client.post<ResourceResponse<Customer>>(
         customerApi(this.companySlug, '/profile'),
         formData,
       )
-      this.userForm = data.data
       this.currentUser = data.data
+      this.userForm = hydrateUserForm(data.data)
       return { data }
     },
 
@@ -390,22 +474,23 @@ export const useCustomerPortalStore = defineStore('customerPortal', {
 
     // ---- Auth ----
 
-    async login(loginData: CustomerLoginData): Promise<unknown> {
+    async login(loginData: CustomerLoginData): Promise<CustomerPortalLoginResponse> {
       await client.get('/sanctum/csrf-cookie')
-      const { data } = await client.post(
+      const { data } = await client.post<CustomerPortalLoginResponse>(
         `/${loginData.company}/customer/login`,
         loginData,
       )
       this.loginData.email = ''
       this.loginData.password = ''
+      this.loginData.company = loginData.company
       return data
     },
 
     async forgotPassword(payload: {
       email: string
       company: string
-    }): Promise<unknown> {
-      const { data } = await client.post(
+    }): Promise<CustomerPortalForgotPasswordResponse> {
+      const { data } = await client.post<CustomerPortalForgotPasswordResponse>(
         `/api/v1/${payload.company}/customer/auth/password/email`,
         payload,
       )
@@ -415,8 +500,8 @@ export const useCustomerPortalStore = defineStore('customerPortal', {
     async resetPassword(
       payload: { email: string; password: string; password_confirmation: string; token: string },
       company: string,
-    ): Promise<unknown> {
-      const { data } = await client.post(
+    ): Promise<CustomerPortalResetPasswordResponse> {
+      const { data } = await client.post<CustomerPortalResetPasswordResponse>(
         `/api/v1/${company}/customer/auth/reset/password`,
         payload,
       )
@@ -424,7 +509,13 @@ export const useCustomerPortalStore = defineStore('customerPortal', {
     },
 
     async logout(): Promise<void> {
-      await client.post(`/${this.companySlug}/customer/logout`)
+      const companySlug = this.companySlug
+
+      try {
+        await client.post(`/${companySlug}/customer/logout`)
+      } finally {
+        this.resetState(companySlug)
+      }
     },
   },
 })
diff --git a/resources/scripts-v2/features/customer-portal/utils/routes.ts b/resources/scripts-v2/features/customer-portal/utils/routes.ts
new file mode 100644
index 00000000..f20b375c
--- /dev/null
+++ b/resources/scripts-v2/features/customer-portal/utils/routes.ts
@@ -0,0 +1,41 @@
+import type { RouteParamValue } from 'vue-router'
+
+export function resolveCompanySlug(
+  companyParam: RouteParamValue | RouteParamValue[] | undefined
+): string {
+  if (Array.isArray(companyParam)) {
+    return companyParam[0] ?? ''
+  }
+
+  return companyParam ?? ''
+}
+
+export function buildCustomerPortalPath(
+  companySlug: string,
+  path: string = ''
+): string {
+  const normalizedPath = path.replace(/^\/+/, '')
+
+  if (!normalizedPath) {
+    return `/${companySlug}/customer`
+  }
+
+  return `/${companySlug}/customer/${normalizedPath}`
+}
+
+export function prefixCustomerPortalMenuLink(
+  companySlug: string,
+  link: string
+): string {
+  const normalizedLink = link.replace(/^\/+/, '')
+
+  if (normalizedLink === 'customer') {
+    return `/${companySlug}/customer`
+  }
+
+  if (normalizedLink.startsWith('customer/')) {
+    return `/${companySlug}/${normalizedLink}`
+  }
+
+  return buildCustomerPortalPath(companySlug, normalizedLink)
+}
diff --git a/resources/scripts-v2/features/customer-portal/views/CustomerEstimateDetailView.vue b/resources/scripts-v2/features/customer-portal/views/CustomerEstimateDetailView.vue
index 0be42d52..6d86a9b9 100644
--- a/resources/scripts-v2/features/customer-portal/views/CustomerEstimateDetailView.vue
+++ b/resources/scripts-v2/features/customer-portal/views/CustomerEstimateDetailView.vue
@@ -160,13 +160,7 @@
     </div>
 
     <!-- PDF Preview -->
-    <div class="flex flex-col min-h-0 mt-8 overflow-hidden" style="height: 75vh">
-      <iframe
-        v-if="shareableLink"
-        :src="shareableLink"
-        class="flex-1 border border-gray-400 border-solid rounded-md"
-      />
-    </div>
+    <BasePdfPreview :src="shareableLink" />
   </BasePage>
 </template>
 
@@ -176,10 +170,12 @@ import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useDebounceFn } from '@vueuse/core'
 import { useCustomerPortalStore } from '../store'
+import { useDialogStore } from '../../../stores/dialog.store'
 import { EstimateStatus } from '../../../types/domain/estimate'
 import type { Estimate } from '../../../types/domain/estimate'
 
 const store = useCustomerPortalStore()
+const dialogStore = useDialogStore()
 const route = useRoute()
 const router = useRouter()
 const { t } = useI18n()
@@ -260,23 +256,47 @@ function sortData(): void {
   onSearch()
 }
 
-async function acceptEstimate(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_accepted', 1))
-  if (!confirmed) return
-  await store.updateEstimateStatus(
-    route.params.id as string,
-    EstimateStatus.ACCEPTED,
-  )
-  router.push({ name: 'customer-portal.estimates' })
+function acceptEstimate(): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('estimates.confirm_mark_as_accepted', 1),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        await store.updateEstimateStatus(
+          route.params.id as string,
+          EstimateStatus.ACCEPTED,
+        )
+        router.push({ name: 'customer-portal.estimates' })
+      }
+    })
 }
 
-async function rejectEstimate(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_rejected', 1))
-  if (!confirmed) return
-  await store.updateEstimateStatus(
-    route.params.id as string,
-    EstimateStatus.REJECTED,
-  )
-  router.push({ name: 'customer-portal.estimates' })
+function rejectEstimate(): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('estimates.confirm_mark_as_rejected', 1),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        await store.updateEstimateStatus(
+          route.params.id as string,
+          EstimateStatus.REJECTED,
+        )
+        router.push({ name: 'customer-portal.estimates' })
+      }
+    })
 }
 </script>
diff --git a/resources/scripts-v2/features/customer-portal/views/CustomerInvoiceDetailView.vue b/resources/scripts-v2/features/customer-portal/views/CustomerInvoiceDetailView.vue
index 6af7766e..9dc7dcbf 100644
--- a/resources/scripts-v2/features/customer-portal/views/CustomerInvoiceDetailView.vue
+++ b/resources/scripts-v2/features/customer-portal/views/CustomerInvoiceDetailView.vue
@@ -163,13 +163,7 @@
     </div>
 
     <!-- PDF Preview -->
-    <div class="flex flex-col min-h-0 mt-8 overflow-hidden" style="height: 75vh">
-      <iframe
-        v-if="shareableLink"
-        :src="shareableLink"
-        class="flex-1 border border-gray-400 border-solid rounded-md"
-      />
-    </div>
+    <BasePdfPreview :src="shareableLink" />
   </BasePage>
 </template>
 
diff --git a/resources/scripts-v2/features/customer-portal/views/CustomerPaymentDetailView.vue b/resources/scripts-v2/features/customer-portal/views/CustomerPaymentDetailView.vue
index e8191159..2f1792dd 100644
--- a/resources/scripts-v2/features/customer-portal/views/CustomerPaymentDetailView.vue
+++ b/resources/scripts-v2/features/customer-portal/views/CustomerPaymentDetailView.vue
@@ -151,13 +151,7 @@
     </div>
 
     <!-- PDF Preview -->
-    <div class="flex flex-col min-h-0 mt-8 overflow-hidden" style="height: 75vh">
-      <iframe
-        v-if="shareableLink"
-        :src="shareableLink"
-        class="flex-1 border border-gray-400 border-solid rounded-md"
-      />
-    </div>
+    <BasePdfPreview :src="shareableLink" />
   </BasePage>
 </template>
 
diff --git a/resources/scripts-v2/features/customer-portal/views/CustomerSettingsView.vue b/resources/scripts-v2/features/customer-portal/views/CustomerSettingsView.vue
index 944e178e..03b68931 100644
--- a/resources/scripts-v2/features/customer-portal/views/CustomerSettingsView.vue
+++ b/resources/scripts-v2/features/customer-portal/views/CustomerSettingsView.vue
@@ -1,106 +1,117 @@
 <template>
-  <form class="relative h-full mt-4" @submit.prevent="updateCustomerData">
-    <BaseCard>
-      <div>
-        <h6 class="font-bold text-left">
-          {{ $t('settings.account_settings.account_settings') }}
-        </h6>
+  <BasePage>
+    <BasePageHeader :title="$t('settings.account_settings.account_settings')">
+      <BaseBreadcrumb>
+        <BaseBreadcrumbItem
+          :title="$t('general.home')"
+          :to="`/${store.companySlug}/customer/dashboard`"
+        />
+        <BaseBreadcrumbItem
+          :title="$t('settings.account_settings.account_settings')"
+          to="#"
+          active
+        />
+      </BaseBreadcrumb>
+    </BasePageHeader>
+
+    <form @submit.prevent="updateCustomerData">
+      <BaseCard>
         <p
-          class="mt-2 text-sm leading-snug text-left text-muted"
+          class="text-sm leading-snug text-muted"
           style="max-width: 680px"
         >
           {{ $t('settings.account_settings.section_description') }}
         </p>
-      </div>
 
-      <div class="grid gap-6 sm:grid-col-1 md:grid-cols-2 mt-6">
-        <BaseInputGroup
-          :label="$t('settings.account_settings.profile_picture')"
-        >
-          <BaseFileUploader
-            v-model="imgFiles"
-            :avatar="true"
-            accept="image/*"
-            @change="onFileInputChange"
-            @remove="onFileInputRemove"
-          />
-        </BaseInputGroup>
-
-        <span />
-
-        <BaseInputGroup
-          :label="$t('settings.account_settings.name')"
-          :error="v$.name.$error ? String(v$.name.$errors[0]?.$message) : undefined"
-          required
-        >
-          <BaseInput
-            v-model="formData.name"
-            :invalid="v$.name.$error"
-            @input="v$.name.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.account_settings.email')"
-          :error="v$.email.$error ? String(v$.email.$errors[0]?.$message) : undefined"
-          required
-        >
-          <BaseInput
-            v-model="formData.email"
-            :invalid="v$.email.$error"
-            @input="v$.email.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :error="v$.password.$error ? String(v$.password.$errors[0]?.$message) : undefined"
-          :label="$t('settings.account_settings.password')"
-        >
-          <BaseInput
-            v-model="formData.password"
-            :type="isShowPassword ? 'text' : 'password'"
-            :invalid="v$.password.$error"
-            @input="v$.password.$touch()"
+        <div class="grid gap-6 sm:grid-col-1 md:grid-cols-2 mt-6">
+          <BaseInputGroup
+            :label="$t('settings.account_settings.profile_picture')"
           >
-            <template #right>
-              <BaseIcon
-                :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                class="mr-1 text-muted cursor-pointer"
-                @click="isShowPassword = !isShowPassword"
-              />
-            </template>
-          </BaseInput>
-        </BaseInputGroup>
+            <BaseFileUploader
+              v-model="imgFiles"
+              :avatar="true"
+              accept="image/*"
+              @change="onFileInputChange"
+              @remove="onFileInputRemove"
+            />
+          </BaseInputGroup>
 
-        <BaseInputGroup
-          :label="$t('settings.account_settings.confirm_password')"
-          :error="v$.confirm_password.$error ? String(v$.confirm_password.$errors[0]?.$message) : undefined"
-        >
-          <BaseInput
-            v-model="formData.confirm_password"
-            :type="isShowConfirmPassword ? 'text' : 'password'"
-            :invalid="v$.confirm_password.$error"
-            @input="v$.confirm_password.$touch()"
+          <span />
+
+          <BaseInputGroup
+            :label="$t('settings.account_settings.name')"
+            :error="v$.name.$error ? String(v$.name.$errors[0]?.$message) : undefined"
+            required
           >
-            <template #right>
-              <BaseIcon
-                :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                class="mr-1 text-muted cursor-pointer"
-                @click="isShowConfirmPassword = !isShowConfirmPassword"
-              />
-            </template>
-          </BaseInput>
-        </BaseInputGroup>
-      </div>
+            <BaseInput
+              v-model="formData.name"
+              :invalid="v$.name.$error"
+              @input="v$.name.$touch()"
+            />
+          </BaseInputGroup>
 
-      <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-6">
-        <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('general.save') }}
-      </BaseButton>
-    </BaseCard>
-  </form>
+          <BaseInputGroup
+            :label="$t('settings.account_settings.email')"
+            :error="v$.email.$error ? String(v$.email.$errors[0]?.$message) : undefined"
+            required
+          >
+            <BaseInput
+              v-model="formData.email"
+              :invalid="v$.email.$error"
+              @input="v$.email.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :error="v$.password.$error ? String(v$.password.$errors[0]?.$message) : undefined"
+            :label="$t('settings.account_settings.password')"
+          >
+            <BaseInput
+              v-model="formData.password"
+              :type="isShowPassword ? 'text' : 'password'"
+              :invalid="v$.password.$error"
+              @input="v$.password.$touch()"
+            >
+              <template #right>
+                <BaseIcon
+                  :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
+                  class="mr-1 text-muted cursor-pointer"
+                  @click="isShowPassword = !isShowPassword"
+                />
+              </template>
+            </BaseInput>
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('settings.account_settings.confirm_password')"
+            :error="v$.confirm_password.$error ? String(v$.confirm_password.$errors[0]?.$message) : undefined"
+          >
+            <BaseInput
+              v-model="formData.confirm_password"
+              :type="isShowConfirmPassword ? 'text' : 'password'"
+              :invalid="v$.confirm_password.$error"
+              @input="v$.confirm_password.$touch()"
+            >
+              <template #right>
+                <BaseIcon
+                  :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
+                  class="mr-1 text-muted cursor-pointer"
+                  @click="isShowConfirmPassword = !isShowConfirmPassword"
+                />
+              </template>
+            </BaseInput>
+          </BaseInputGroup>
+        </div>
+
+        <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-6">
+          <template #left="slotProps">
+            <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
+          </template>
+          {{ $t('general.save') }}
+        </BaseButton>
+      </BaseCard>
+    </form>
+  </BasePage>
 </template>
 
 <script setup lang="ts">
@@ -142,7 +153,7 @@ const formData = reactive<{
   confirm_password: '',
 })
 
-if (store.userForm.avatar) {
+if (typeof store.userForm.avatar === 'string' && store.userForm.avatar) {
   imgFiles.value.push({ image: store.userForm.avatar })
 }
 
diff --git a/resources/scripts-v2/features/customer-portal/views/auth/CustomerPortalForgotPasswordView.vue b/resources/scripts-v2/features/customer-portal/views/auth/CustomerPortalForgotPasswordView.vue
new file mode 100644
index 00000000..adfb29af
--- /dev/null
+++ b/resources/scripts-v2/features/customer-portal/views/auth/CustomerPortalForgotPasswordView.vue
@@ -0,0 +1,116 @@
+<template>
+  <form class="space-y-6" @submit.prevent="onSubmit">
+    <BaseInputGroup
+      :error="v$.email.$error ? String(v$.email.$errors[0]?.$message) : undefined"
+      :label="$t('login.enter_email')"
+      required
+    >
+      <BaseInput
+        v-model="formData.email"
+        :invalid="v$.email.$error"
+        focus
+        name="email"
+        type="email"
+        @input="v$.email.$touch()"
+      />
+    </BaseInputGroup>
+
+    <BaseButton
+      :disabled="isLoading"
+      :loading="isLoading"
+      class="w-full justify-center"
+      type="submit"
+    >
+      {{ isSent ? $t('validation.not_yet') : $t('validation.send_reset_link') }}
+    </BaseButton>
+
+    <router-link
+      :to="{
+        name: 'customer-portal.login',
+        params: { company: companySlug },
+      }"
+      class="inline-block text-sm text-primary-500 hover:text-heading"
+    >
+      {{ $t('general.back_to_login') }}
+    </router-link>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useVuelidate } from '@vuelidate/core'
+import { email, helpers, required } from '@vuelidate/validators'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { getErrorTranslationKey, handleApiError } from '@v2/utils/error-handling'
+import { useCustomerPortalStore } from '../../store'
+import { resolveCompanySlug } from '../../utils/routes'
+
+interface CustomerPortalForgotPasswordForm {
+  email: string
+}
+
+const store = useCustomerPortalStore()
+const notificationStore = useNotificationStore()
+const route = useRoute()
+const { t } = useI18n()
+
+const formData = reactive<CustomerPortalForgotPasswordForm>({
+  email: '',
+})
+
+const isSent = ref<boolean>(false)
+const isLoading = ref<boolean>(false)
+
+const companySlug = computed<string>(() => {
+  return resolveCompanySlug(route.params.company)
+})
+
+const rules = computed(() => ({
+  email: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+}))
+
+const v$ = useVuelidate(rules, formData)
+
+async function onSubmit(): Promise<void> {
+  v$.value.$touch()
+
+  if (v$.value.$invalid || !companySlug.value) {
+    return
+  }
+
+  isLoading.value = true
+
+  try {
+    await store.forgotPassword({
+      email: formData.email,
+      company: companySlug.value,
+    })
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: t('general.send_mail_successfully'),
+    })
+
+    isSent.value = true
+  } catch (err: unknown) {
+    showErrorNotification(err)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function showErrorNotification(err: unknown): void {
+  const normalizedError = handleApiError(err)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+</script>
diff --git a/resources/scripts-v2/features/customer-portal/views/auth/CustomerPortalLoginView.vue b/resources/scripts-v2/features/customer-portal/views/auth/CustomerPortalLoginView.vue
new file mode 100644
index 00000000..ca43c9d5
--- /dev/null
+++ b/resources/scripts-v2/features/customer-portal/views/auth/CustomerPortalLoginView.vue
@@ -0,0 +1,158 @@
+<template>
+  <form class="space-y-6" @submit.prevent="onSubmit">
+    <BaseInputGroup
+      :error="v$.email.$error ? String(v$.email.$errors[0]?.$message) : undefined"
+      :label="$t('login.email')"
+      required
+    >
+      <BaseInput
+        v-model="formData.email"
+        :invalid="v$.email.$error"
+        focus
+        name="email"
+        type="email"
+        @input="v$.email.$touch()"
+      />
+    </BaseInputGroup>
+
+    <BaseInputGroup
+      :error="v$.password.$error ? String(v$.password.$errors[0]?.$message) : undefined"
+      :label="$t('login.password')"
+      required
+    >
+      <BaseInput
+        v-model="formData.password"
+        :invalid="v$.password.$error"
+        :type="inputType"
+        name="password"
+        @input="v$.password.$touch()"
+      >
+        <template #right>
+          <BaseIcon
+            :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
+            class="mr-1 cursor-pointer text-muted"
+            @click="isShowPassword = !isShowPassword"
+          />
+        </template>
+      </BaseInput>
+    </BaseInputGroup>
+
+    <div class="flex items-center justify-between">
+      <router-link
+        :to="{
+          name: 'customer-portal.forgot-password',
+          params: { company: companySlug },
+        }"
+        class="text-sm text-primary-500 hover:text-heading"
+      >
+        {{ $t('login.forgot_password') }}
+      </router-link>
+    </div>
+
+    <BaseButton
+      :disabled="isLoading"
+      :loading="isLoading"
+      class="w-full justify-center"
+      type="submit"
+    >
+      <template #left="slotProps">
+        <BaseIcon name="LockClosedIcon" :class="slotProps.class" />
+      </template>
+      {{ $t('login.login') }}
+    </BaseButton>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useVuelidate } from '@vuelidate/core'
+import { email, helpers, required } from '@vuelidate/validators'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { getErrorTranslationKey, handleApiError } from '@v2/utils/error-handling'
+import { useCustomerPortalStore } from '../../store'
+import { resolveCompanySlug } from '../../utils/routes'
+
+interface CustomerPortalLoginForm {
+  email: string
+  password: string
+}
+
+const store = useCustomerPortalStore()
+const notificationStore = useNotificationStore()
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+
+const formData = reactive<CustomerPortalLoginForm>({
+  email: '',
+  password: '',
+})
+
+const isLoading = ref<boolean>(false)
+const isShowPassword = ref<boolean>(false)
+
+const companySlug = computed<string>(() => {
+  return resolveCompanySlug(route.params.company)
+})
+
+const inputType = computed<string>(() => {
+  return isShowPassword.value ? 'text' : 'password'
+})
+
+const rules = computed(() => ({
+  email: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  password: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, formData)
+
+async function onSubmit(): Promise<void> {
+  v$.value.$touch()
+
+  if (v$.value.$invalid || !companySlug.value) {
+    return
+  }
+
+  isLoading.value = true
+
+  try {
+    await store.login({
+      ...formData,
+      company: companySlug.value,
+      device_name: 'customer-portal-web',
+    })
+    await store.bootstrap(companySlug.value)
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: t('general.login_successfully'),
+    })
+
+    await router.push({
+      name: 'customer-portal.dashboard',
+      params: { company: companySlug.value },
+    })
+  } catch (err: unknown) {
+    showErrorNotification(err)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function showErrorNotification(err: unknown): void {
+  const normalizedError = handleApiError(err)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+</script>
diff --git a/resources/scripts-v2/features/customer-portal/views/auth/CustomerPortalResetPasswordView.vue b/resources/scripts-v2/features/customer-portal/views/auth/CustomerPortalResetPasswordView.vue
new file mode 100644
index 00000000..b539d9cc
--- /dev/null
+++ b/resources/scripts-v2/features/customer-portal/views/auth/CustomerPortalResetPasswordView.vue
@@ -0,0 +1,199 @@
+<template>
+  <form class="space-y-6" @submit.prevent="onSubmit">
+    <BaseInputGroup
+      :error="v$.email.$error ? String(v$.email.$errors[0]?.$message) : undefined"
+      :label="$t('login.email')"
+      required
+    >
+      <BaseInput
+        v-model="formData.email"
+        :invalid="v$.email.$error"
+        focus
+        name="email"
+        type="email"
+        @input="v$.email.$touch()"
+      />
+    </BaseInputGroup>
+
+    <BaseInputGroup
+      :error="v$.password.$error ? String(v$.password.$errors[0]?.$message) : undefined"
+      :label="$t('login.password')"
+      required
+    >
+      <BaseInput
+        v-model="formData.password"
+        :invalid="v$.password.$error"
+        :type="passwordInputType"
+        name="password"
+        @input="v$.password.$touch()"
+      >
+        <template #right>
+          <BaseIcon
+            :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
+            class="mr-1 cursor-pointer text-muted"
+            @click="isShowPassword = !isShowPassword"
+          />
+        </template>
+      </BaseInput>
+    </BaseInputGroup>
+
+    <BaseInputGroup
+      :error="v$.password_confirmation.$error ? String(v$.password_confirmation.$errors[0]?.$message) : undefined"
+      :label="$t('login.retype_password')"
+      required
+    >
+      <BaseInput
+        v-model="formData.password_confirmation"
+        :invalid="v$.password_confirmation.$error"
+        :type="confirmPasswordInputType"
+        name="password_confirmation"
+        @input="v$.password_confirmation.$touch()"
+      >
+        <template #right>
+          <BaseIcon
+            :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
+            class="mr-1 cursor-pointer text-muted"
+            @click="isShowConfirmPassword = !isShowConfirmPassword"
+          />
+        </template>
+      </BaseInput>
+    </BaseInputGroup>
+
+    <BaseButton
+      :disabled="isLoading"
+      :loading="isLoading"
+      class="w-full justify-center"
+      type="submit"
+    >
+      {{ $t('login.reset_password') }}
+    </BaseButton>
+
+    <router-link
+      :to="{
+        name: 'customer-portal.login',
+        params: { company: companySlug },
+      }"
+      class="inline-block text-sm text-primary-500 hover:text-heading"
+    >
+      {{ $t('general.back_to_login') }}
+    </router-link>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useVuelidate } from '@vuelidate/core'
+import { email, helpers, minLength, required, sameAs } from '@vuelidate/validators'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { getErrorTranslationKey, handleApiError } from '@v2/utils/error-handling'
+import { useCustomerPortalStore } from '../../store'
+import { resolveCompanySlug } from '../../utils/routes'
+
+interface CustomerPortalResetPasswordForm {
+  email: string
+  password: string
+  password_confirmation: string
+}
+
+const store = useCustomerPortalStore()
+const notificationStore = useNotificationStore()
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+
+const formData = reactive<CustomerPortalResetPasswordForm>({
+  email: '',
+  password: '',
+  password_confirmation: '',
+})
+
+const isLoading = ref<boolean>(false)
+const isShowPassword = ref<boolean>(false)
+const isShowConfirmPassword = ref<boolean>(false)
+
+const companySlug = computed<string>(() => {
+  return resolveCompanySlug(route.params.company)
+})
+
+const passwordInputType = computed<string>(() => {
+  return isShowPassword.value ? 'text' : 'password'
+})
+
+const confirmPasswordInputType = computed<string>(() => {
+  return isShowConfirmPassword.value ? 'text' : 'password'
+})
+
+const rules = computed(() => ({
+  email: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  password: {
+    required: helpers.withMessage(t('validation.required'), required),
+    minLength: helpers.withMessage(
+      t('validation.password_min_length', { count: 8 }),
+      minLength(8),
+    ),
+  },
+  password_confirmation: {
+    sameAsPassword: helpers.withMessage(
+      t('validation.password_incorrect'),
+      sameAs(formData.password),
+    ),
+  },
+}))
+
+const v$ = useVuelidate(rules, formData)
+
+async function onSubmit(): Promise<void> {
+  v$.value.$touch()
+
+  if (
+    v$.value.$invalid ||
+    !companySlug.value ||
+    typeof route.params.token !== 'string'
+  ) {
+    return
+  }
+
+  isLoading.value = true
+
+  try {
+    await store.resetPassword(
+      {
+        email: formData.email,
+        password: formData.password,
+        password_confirmation: formData.password_confirmation,
+        token: route.params.token,
+      },
+      companySlug.value,
+    )
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: t('login.password_reset_successfully'),
+    })
+
+    await router.push({
+      name: 'customer-portal.login',
+      params: { company: companySlug.value },
+    })
+  } catch (err: unknown) {
+    showErrorNotification(err)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function showErrorNotification(err: unknown): void {
+  const normalizedError = handleApiError(err)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+</script>
diff --git a/resources/scripts-v2/features/installation/views/PreferencesView.vue b/resources/scripts-v2/features/installation/views/PreferencesView.vue
index 6a01bd1d..3bfecb94 100644
--- a/resources/scripts-v2/features/installation/views/PreferencesView.vue
+++ b/resources/scripts-v2/features/installation/views/PreferencesView.vue
@@ -133,6 +133,7 @@ import { required, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { client } from '../../../api/client'
 import { API } from '../../../api/endpoints'
+import { useDialogStore } from '../../../stores/dialog.store'
 
 interface PreferencesData {
   currency: number
@@ -167,6 +168,7 @@ interface Emits {
 }
 
 const emit = defineEmits<Emits>()
+const dialogStore = useDialogStore()
 const { t } = useI18n()
 const router = useRouter()
 
@@ -234,37 +236,48 @@ onMounted(async () => {
   }
 })
 
-async function next(): Promise<void> {
+function next(): void {
   v$.value.$touch()
   if (v$.value.$invalid) return
 
-  const confirmed = window.confirm(t('wizard.currency_set_alert'))
-  if (!confirmed) return
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('wizard.currency_set_alert'),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        isSaving.value = true
 
-  isSaving.value = true
+        try {
+          const settingsPayload = {
+            settings: { ...currentPreferences },
+          }
 
-  try {
-    const settingsPayload = {
-      settings: { ...currentPreferences },
-    }
+          const { data: response } = await client.post(API.COMPANY_SETTINGS, settingsPayload)
 
-    const { data: res } = await client.post(API.COMPANY_SETTINGS, settingsPayload)
+          if (response) {
+            const userSettings = {
+              settings: { language: currentPreferences.language },
+            }
+            await client.put(API.ME_SETTINGS, userSettings)
 
-    if (res) {
-      const userSettings = {
-        settings: { language: currentPreferences.language },
+            if (response.token) {
+              localStorage.setItem('auth.token', response.token)
+            }
+
+            emit('next', 'COMPLETED')
+            router.push('/admin/dashboard')
+          }
+        } finally {
+          isSaving.value = false
+        }
       }
-      await client.put(API.ME_SETTINGS, userSettings)
-
-      if (res.token) {
-        localStorage.setItem('auth.token', res.token)
-      }
-
-      emit('next', 'COMPLETED')
-      router.push('/admin/dashboard')
-    }
-  } finally {
-    isSaving.value = false
-  }
+    })
 }
 </script>
diff --git a/resources/scripts-v2/features/shared/document-form/DocumentItemRow.vue b/resources/scripts-v2/features/shared/document-form/DocumentItemRow.vue
index 8176419a..4ff9cf5f 100644
--- a/resources/scripts-v2/features/shared/document-form/DocumentItemRow.vue
+++ b/resources/scripts-v2/features/shared/document-form/DocumentItemRow.vue
@@ -186,6 +186,7 @@ import { required, between, maxLength, helpers, minValue } from '@vuelidate/vali
 import useVuelidate from '@vuelidate/core'
 import DocumentItemRowTax from './DocumentItemRowTax.vue'
 import DragIcon from '@v2/components/icons/DragIcon.vue'
+import { generateClientId } from '../../../utils'
 import type { Currency } from '../../../types/domain/currency'
 import type { DocumentItem, DocumentFormData, DocumentTax } from './use-document-calculations'
 
@@ -329,7 +330,7 @@ function updateTax(data: { index: number; item: DocumentTax }): void {
     props.store.$patch((state: Record<string, unknown>) => {
       const form = state[props.storeProp] as DocumentFormData
       form.items[props.index].taxes!.push({
-        id: crypto.randomUUID(),
+        id: generateClientId(),
         tax_type_id: 0,
         name: '',
         amount: 0,
diff --git a/resources/scripts-v2/features/shared/document-form/DocumentItemRowTax.vue b/resources/scripts-v2/features/shared/document-form/DocumentItemRowTax.vue
index 35d8bf99..a181900b 100644
--- a/resources/scripts-v2/features/shared/document-form/DocumentItemRowTax.vue
+++ b/resources/scripts-v2/features/shared/document-form/DocumentItemRowTax.vue
@@ -73,6 +73,7 @@
 <script setup lang="ts">
 import { computed, ref, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useModalStore } from '../../../stores/modal.store'
 import type { TaxType } from '../../../types/domain/tax'
 import type { Currency } from '../../../types/domain/currency'
 import type { DocumentFormData, DocumentTax } from './use-document-calculations'
@@ -106,6 +107,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>()
 
 const { t } = useI18n()
+const modalStore = useModalStore()
 
 // We assume these stores are available globally or injected
 // In the v2 arch, we'll use a lighter approach
@@ -205,11 +207,7 @@ function updateRowTax(): void {
 }
 
 function openTaxModal(): void {
-  // Modal integration - emit event or use modal store
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('settings.tax_types.add_tax'),
     componentName: 'TaxTypeModal',
     data: { itemIndex: props.itemIndex, taxIndex: props.index },
diff --git a/resources/scripts-v2/features/shared/document-form/DocumentItemsTable.vue b/resources/scripts-v2/features/shared/document-form/DocumentItemsTable.vue
index 9fcb79eb..df8cd2c0 100644
--- a/resources/scripts-v2/features/shared/document-form/DocumentItemsTable.vue
+++ b/resources/scripts-v2/features/shared/document-form/DocumentItemsTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-xl border border-line-light shadow overflow-hidden bg-surface">
+  <div class="rounded-xl border border-line-light shadow bg-surface">
     <!-- Tax Included Toggle -->
     <div
       v-if="taxIncludedSetting === 'YES'"
diff --git a/resources/scripts-v2/features/shared/document-form/DocumentTotals.vue b/resources/scripts-v2/features/shared/document-form/DocumentTotals.vue
index b9332210..5c56e429 100644
--- a/resources/scripts-v2/features/shared/document-form/DocumentTotals.vue
+++ b/resources/scripts-v2/features/shared/document-form/DocumentTotals.vue
@@ -223,6 +223,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import TaxSelectPopup from './TaxSelectPopup.vue'
+import { generateClientId } from '../../../utils'
 import type { Currency } from '../../../types/domain/currency'
 import type { TaxType } from '../../../types/domain/tax'
 import type { DocumentFormData, DocumentTax, DocumentStore, DocumentItem } from './use-document-calculations'
@@ -357,7 +358,7 @@ function onSelectTax(selectedTax: TaxType): void {
   }
 
   const data: DocumentTax = {
-    id: crypto.randomUUID(),
+    id: generateClientId(),
     name: selectedTax.name,
     percent: selectedTax.percent,
     tax_type_id: selectedTax.id,
diff --git a/resources/scripts-v2/features/shared/document-form/ExchangeRateConverter.vue b/resources/scripts-v2/features/shared/document-form/ExchangeRateConverter.vue
index e0e96f93..4743cf4f 100644
--- a/resources/scripts-v2/features/shared/document-form/ExchangeRateConverter.vue
+++ b/resources/scripts-v2/features/shared/document-form/ExchangeRateConverter.vue
@@ -51,6 +51,8 @@
 <script setup lang="ts">
 import { watch, computed, ref, onBeforeUnmount } from 'vue'
 import { exchangeRateService } from '../../../api/services/exchange-rate.service'
+import { useCompanyStore } from '../../../stores/company.store'
+import { useGlobalStore } from '../../../stores/global.store'
 import type { Currency } from '../../../types/domain/currency'
 import type { DocumentFormData } from './use-document-calculations'
 
@@ -63,18 +65,17 @@ interface Props {
   storeProp: string
   isEdit?: boolean
   customerCurrency?: number | string | null
-  companyCurrency?: Currency | null
-  currencies?: Currency[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
   isLoading: false,
   isEdit: false,
   customerCurrency: null,
-  companyCurrency: null,
-  currencies: () => [],
 })
 
+const companyStore = useCompanyStore()
+const globalStore = useGlobalStore()
+
 const hasActiveProvider = ref<boolean>(false)
 const isFetching = ref<boolean>(false)
 
@@ -93,14 +94,18 @@ const exchangeRate = computed<number | null | string>({
   },
 })
 
+const companyCurrency = computed<Currency | null>(() => {
+  return companyStore.selectedCompanyCurrency
+})
+
 const selectedCurrency = computed<Currency | null>(() => {
   return (
-    props.currencies.find((c) => c.id === formData.value.currency_id) ?? null
+    globalStore.currencies.find((c: Currency) => c.id === formData.value.currency_id) ?? null
   )
 })
 
 const isCurrencyDifferent = computed<boolean>(() => {
-  return props.companyCurrency?.id !== props.customerCurrency
+  return companyCurrency.value?.id !== props.customerCurrency
 })
 
 watch(
@@ -150,13 +155,13 @@ function setCustomerCurrency(v: Record<string, unknown> | null): void {
     if (currency) {
       formData.value.currency_id = currency.id
     }
-  } else if (props.companyCurrency) {
-    formData.value.currency_id = props.companyCurrency.id
+  } else if (companyCurrency.value) {
+    formData.value.currency_id = companyCurrency.value.id
   }
 }
 
 async function onChangeCurrency(v: number | undefined): Promise<void> {
-  if (v !== props.companyCurrency?.id) {
+  if (v !== companyCurrency.value?.id) {
     if (!props.isEdit && v) {
       await getCurrentExchangeRate(v)
     }
diff --git a/resources/scripts-v2/features/shared/document-form/NoteSelectPopup.vue b/resources/scripts-v2/features/shared/document-form/NoteSelectPopup.vue
index 60fcef28..c13b5dcc 100644
--- a/resources/scripts-v2/features/shared/document-form/NoteSelectPopup.vue
+++ b/resources/scripts-v2/features/shared/document-form/NoteSelectPopup.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="w-full">
+  <div>
+    <NoteModal />
+    <div class="w-full">
     <Popover v-slot="{ open: isOpen }">
       <PopoverButton
         v-if="canViewNotes"
@@ -77,6 +79,7 @@
         </PopoverPanel>
       </transition>
     </Popover>
+    </div>
   </div>
 </template>
 
@@ -84,13 +87,15 @@
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useModalStore } from '../../../stores/modal.store'
+import { useUserStore } from '../../../stores/user.store'
+import { ABILITIES } from '../../../config/abilities'
+import NoteModal from '../../company/settings/components/NoteModal.vue'
 import type { Note } from '../../../types/domain/note'
 import { noteService } from '../../../api/services/note.service'
 
 interface Props {
   type?: string | null
-  canViewNotes?: boolean
-  canManageNotes?: boolean
 }
 
 interface Emits {
@@ -99,16 +104,24 @@ interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   type: null,
-  canViewNotes: true,
-  canManageNotes: false,
 })
 
 const emit = defineEmits<Emits>()
 
 const { t } = useI18n()
+const modalStore = useModalStore()
+const userStore = useUserStore()
 const textSearch = ref<string | null>(null)
 const notes = ref<Note[]>([])
 
+const canViewNotes = computed<boolean>(() =>
+  userStore.hasAbilities(ABILITIES.VIEW_NOTE),
+)
+
+const canManageNotes = computed<boolean>(() =>
+  userStore.hasAbilities(ABILITIES.MANAGE_NOTE),
+)
+
 const filteredNotes = computed<Note[]>(() => {
   if (textSearch.value) {
     return notes.value.filter((el) =>
@@ -138,14 +151,12 @@ function selectNote(index: number, close: () => void): void {
 }
 
 function openNoteModal(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('settings.customization.notes.add_note'),
     componentName: 'NoteModal',
     size: 'lg',
     data: props.type,
+    refreshData: () => fetchInitialData(),
   })
 }
 </script>
diff --git a/resources/scripts-v2/features/shared/document-form/SelectTemplateModal.vue b/resources/scripts-v2/features/shared/document-form/SelectTemplateModal.vue
new file mode 100644
index 00000000..bda3cb39
--- /dev/null
+++ b/resources/scripts-v2/features/shared/document-form/SelectTemplateModal.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useUserStore } from '@v2/stores/user.store'
+
+interface ModalData {
+  templates: Array<{ name: string; path?: string }>
+  store: { setTemplate: (name: string) => void; isEdit?: boolean; [key: string]: unknown }
+  storeProp: string
+  isMarkAsDefault: boolean
+  markAsDefaultDescription: string
+}
+
+const modalStore = useModalStore()
+const userStore = useUserStore()
+
+const selectedTemplate = ref<string>('')
+
+const modalActive = computed<boolean>(
+  () => modalStore.active && modalStore.componentName === 'SelectTemplate',
+)
+
+const modalData = computed<ModalData | null>(() => {
+  return modalStore.data as ModalData | null
+})
+
+function setData(): void {
+  if (!modalData.value) return
+
+  const currentName =
+    (modalData.value.store[modalData.value.storeProp] as Record<string, unknown>)
+      ?.template_name as string | undefined
+
+  if (currentName) {
+    selectedTemplate.value = currentName
+  } else if (modalData.value.templates.length) {
+    selectedTemplate.value = modalData.value.templates[0].name
+  }
+}
+
+async function chooseTemplate(): Promise<void> {
+  if (!modalData.value) return
+
+  modalData.value.store.setTemplate(selectedTemplate.value)
+
+  if (!modalData.value.store.isEdit && modalData.value.isMarkAsDefault) {
+    if (modalData.value.storeProp === 'newEstimate') {
+      await userStore.updateUserSettings({
+        settings: {
+          default_estimate_template: selectedTemplate.value,
+        },
+      })
+    } else if (modalData.value.storeProp === 'newInvoice') {
+      await userStore.updateUserSettings({
+        settings: {
+          default_invoice_template: selectedTemplate.value,
+        },
+      })
+    }
+  }
+
+  closeModal()
+}
+
+function getTickImage(): string {
+  return new URL('$images/tick.png', import.meta.url).href
+}
+
+function closeModal(): void {
+  modalStore.closeModal()
+}
+</script>
+
+<template>
+  <BaseModal :show="modalActive" @close="closeModal" @open="setData">
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalStore.title }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="h-6 w-6 text-muted cursor-pointer"
+          @click="closeModal"
+        />
+      </div>
+    </template>
+
+    <div class="px-8 py-8 sm:p-6">
+      <div
+        v-if="modalData"
+        class="grid grid-cols-3 gap-2 p-1 overflow-x-auto"
+      >
+        <div
+          v-for="(template, index) in modalData.templates"
+          :key="index"
+          :class="{
+            'border border-solid border-primary-500':
+              selectedTemplate === template.name,
+          }"
+          class="
+            relative
+            flex flex-col
+            m-2
+            border border-line-default border-solid
+            cursor-pointer
+            hover:border-primary-300
+          "
+          @click="selectedTemplate = template.name"
+        >
+          <img
+            :src="template.path"
+            :alt="template.name"
+            class="w-full min-h-[100px]"
+          />
+          <img
+            v-if="selectedTemplate === template.name"
+            :alt="template.name"
+            class="absolute z-10 w-5 h-5 text-primary-500"
+            style="top: -6px; right: -5px"
+            :src="getTickImage()"
+          />
+          <span
+            :class="[
+              'w-full p-1 bg-surface-muted text-sm text-center absolute bottom-0 left-0',
+              {
+                'text-primary-500 bg-primary-100':
+                  selectedTemplate === template.name,
+                'text-body': selectedTemplate !== template.name,
+              },
+            ]"
+          >
+            {{ template.name }}
+          </span>
+        </div>
+      </div>
+
+      <div
+        v-if="modalData && !modalData.store.isEdit"
+        class="z-0 flex ml-3 pt-5"
+      >
+        <BaseCheckbox
+          v-model="modalData.isMarkAsDefault"
+          :set-initial-value="false"
+          variant="primary"
+          :label="$t('general.mark_as_default')"
+          :description="modalData.markAsDefaultDescription"
+        />
+      </div>
+    </div>
+
+    <div
+      class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+    >
+      <BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
+        {{ $t('general.cancel') }}
+      </BaseButton>
+      <BaseButton variant="primary" @click="chooseTemplate">
+        <template #left="slotProps">
+          <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('general.choose') }}
+      </BaseButton>
+    </div>
+  </BaseModal>
+</template>
diff --git a/resources/scripts-v2/features/shared/document-form/TaxSelectPopup.vue b/resources/scripts-v2/features/shared/document-form/TaxSelectPopup.vue
index 23f590bd..d332a194 100644
--- a/resources/scripts-v2/features/shared/document-form/TaxSelectPopup.vue
+++ b/resources/scripts-v2/features/shared/document-form/TaxSelectPopup.vue
@@ -103,6 +103,7 @@
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useModalStore } from '../../../stores/modal.store'
 import type { TaxType } from '../../../types/domain/tax'
 import type { Currency } from '../../../types/domain/currency'
 import type { DocumentFormData, DocumentTax } from './use-document-calculations'
@@ -130,6 +131,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>()
 
 const { t } = useI18n()
+const modalStore = useModalStore()
 const textSearch = ref<string | null>(null)
 
 const formData = computed<DocumentFormData>(() => {
@@ -159,10 +161,7 @@ function selectTaxType(data: TaxType, close: () => void): void {
 }
 
 function openTaxTypeModal(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('settings.tax_types.add_tax'),
     componentName: 'TaxTypeModal',
     size: 'sm',
diff --git a/resources/scripts-v2/features/shared/document-form/TemplateSelectButton.vue b/resources/scripts-v2/features/shared/document-form/TemplateSelectButton.vue
index ce5023b4..f9c588d9 100644
--- a/resources/scripts-v2/features/shared/document-form/TemplateSelectButton.vue
+++ b/resources/scripts-v2/features/shared/document-form/TemplateSelectButton.vue
@@ -21,6 +21,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useModalStore } from '@v2/stores/modal.store'
 import type { DocumentFormData } from './use-document-calculations'
 
 interface Props {
@@ -36,6 +37,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { t } = useI18n()
+const modalStore = useModalStore()
 
 const formData = computed<DocumentFormData>(() => {
   return props.store[props.storeProp] as DocumentFormData
@@ -53,10 +55,7 @@ function openTemplateModal(): void {
     markAsDefaultDescription = t('invoices.mark_as_default_invoice_template_description')
   }
 
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('general.choose_template'),
     componentName: 'SelectTemplate',
     data: {
diff --git a/resources/scripts-v2/features/shared/document-form/index.ts b/resources/scripts-v2/features/shared/document-form/index.ts
index 13bd01f4..acd2b3cf 100644
--- a/resources/scripts-v2/features/shared/document-form/index.ts
+++ b/resources/scripts-v2/features/shared/document-form/index.ts
@@ -6,6 +6,7 @@ export { default as DocumentNotes } from './DocumentNotes.vue'
 export { default as TaxSelectPopup } from './TaxSelectPopup.vue'
 export { default as NoteSelectPopup } from './NoteSelectPopup.vue'
 export { default as TemplateSelectButton } from './TemplateSelectButton.vue'
+export { default as SelectTemplateModal } from './SelectTemplateModal.vue'
 export { default as ExchangeRateConverter } from './ExchangeRateConverter.vue'
 
 export {
diff --git a/resources/scripts-v2/layouts/CompanyLayout.vue b/resources/scripts-v2/layouts/CompanyLayout.vue
index 68f57c7c..592fba9d 100644
--- a/resources/scripts-v2/layouts/CompanyLayout.vue
+++ b/resources/scripts-v2/layouts/CompanyLayout.vue
@@ -44,6 +44,7 @@ interface RouteMeta {
   ability?: string | string[]
   isSuperAdmin?: boolean
   isOwner?: boolean
+  usesAdminBootstrap?: boolean
 }
 
 const globalStore = useGlobalStore()
@@ -62,38 +63,43 @@ const hasCompany = computed<boolean>(() => {
   return !!companyStore.selectedCompany || companyStore.isAdminMode
 })
 
-onMounted(() => {
-  globalStore.bootstrap().then((res) => {
-    if (companyStore.isAdminMode) {
-      return
-    }
-
-    if (!res.current_company) {
-      if (route.name !== 'no.company') {
-        router.push({ name: 'no.company' })
-      }
-      return
-    }
-
-    const meta = route.meta as RouteMeta
-
-    if (meta.ability && !userStore.hasAbilities(meta.ability as string | string[])) {
-      router.push({ name: 'account.settings' })
-    } else if (meta.isSuperAdmin && !userStore.currentUser?.is_super_admin) {
-      router.push({ name: 'dashboard' })
-    } else if (meta.isOwner && !userStore.currentUser?.is_owner) {
-      router.push({ name: 'account.settings' })
-    }
-
-    if (
-      companyStore.selectedCompanySettings.bulk_exchange_rate_configured === 'NO'
-    ) {
-      modalStore.openModal({
-        componentName: 'ExchangeRateBulkUpdateModal',
-        title: t('exchange_rates.bulk_update'),
-        size: 'sm',
-      })
-    }
+async function initializeLayout(): Promise<void> {
+  const meta = route.meta as RouteMeta
+  const res = await globalStore.bootstrap({
+    adminMode: meta.usesAdminBootstrap === true,
   })
+
+  if (res.admin_mode === true) {
+    return
+  }
+
+  if (!res.current_company) {
+    if (route.name !== 'no.company') {
+      router.push({ name: 'no.company' })
+    }
+    return
+  }
+
+  if (meta.ability && !userStore.hasAbilities(meta.ability as string | string[])) {
+    router.push({ name: 'settings.account' })
+  } else if (meta.isSuperAdmin && !userStore.currentUser?.is_super_admin) {
+    router.push({ name: 'dashboard' })
+  } else if (meta.isOwner && !userStore.currentUser?.is_owner) {
+    router.push({ name: 'settings.account' })
+  }
+
+  if (
+    companyStore.selectedCompanySettings.bulk_exchange_rate_configured === 'NO'
+  ) {
+    modalStore.openModal({
+      componentName: 'ExchangeRateBulkUpdateModal',
+      title: t('exchange_rates.bulk_update'),
+      size: 'sm',
+    })
+  }
+}
+
+onMounted(() => {
+  void initializeLayout()
 })
 </script>
diff --git a/resources/scripts-v2/layouts/partials/CompanySwitcher.vue b/resources/scripts-v2/layouts/partials/CompanySwitcher.vue
index 6bf6f3d4..d90e6628 100644
--- a/resources/scripts-v2/layouts/partials/CompanySwitcher.vue
+++ b/resources/scripts-v2/layouts/partials/CompanySwitcher.vue
@@ -178,6 +178,8 @@
         </div>
       </div>
     </transition>
+
+    <CompanyModal />
   </div>
 </template>
 
@@ -190,6 +192,7 @@ import { useCompanyStore } from '@v2/stores/company.store'
 import { useGlobalStore } from '@v2/stores/global.store'
 import { useUserStore } from '@v2/stores/user.store'
 import { useModalStore } from '@v2/stores/modal.store'
+import CompanyModal from '@v2/features/company/settings/components/CompanyModal.vue'
 import type { Company, CompanyInvitation } from '@v2/types/domain/company'
 import type { Role } from '@v2/types/domain/role'
 
diff --git a/resources/scripts-v2/layouts/partials/SiteHeader.vue b/resources/scripts-v2/layouts/partials/SiteHeader.vue
index 82cfa91d..0759ea2f 100644
--- a/resources/scripts-v2/layouts/partials/SiteHeader.vue
+++ b/resources/scripts-v2/layouts/partials/SiteHeader.vue
@@ -133,7 +133,7 @@
             </div>
           </div>
 
-          <router-link to="/admin/user-settings">
+          <router-link to="/admin/settings/account-settings">
             <BaseDropdownItem>
               <BaseIcon
                 name="CogIcon"
diff --git a/resources/scripts-v2/main.ts b/resources/scripts-v2/main.ts
index 706eb048..fc3fa8a8 100644
--- a/resources/scripts-v2/main.ts
+++ b/resources/scripts-v2/main.ts
@@ -8,6 +8,7 @@ declare global {
     InvoiceShelf: InvoiceShelf
     loadLanguage?: (locale: string) => Promise<void>
     customer_logo?: string
+    customer_page_title?: string
     login_page_logo?: string
     login_page_heading?: string
     login_page_description?: string
diff --git a/resources/scripts-v2/router/guards.ts b/resources/scripts-v2/router/guards.ts
index 4c77ecff..81db0756 100644
--- a/resources/scripts-v2/router/guards.ts
+++ b/resources/scripts-v2/router/guards.ts
@@ -2,6 +2,9 @@ import type { NavigationGuardWithThis, RouteLocationNormalized } from 'vue-route
 import { useUserStore } from '@v2/stores/user.store'
 import { useGlobalStore } from '@v2/stores/global.store'
 import { useCompanyStore } from '@v2/stores/company.store'
+import { useCustomerPortalStore } from '@v2/features/customer-portal/store'
+import { handleApiError } from '@v2/utils/error-handling'
+import { resolveCompanySlug } from '@v2/features/customer-portal/utils/routes'
 
 /**
  * Main authentication and authorization guard.
@@ -19,6 +22,10 @@ import { useCompanyStore } from '@v2/stores/company.store'
 export const authGuard: NavigationGuardWithThis<undefined> = (
   to: RouteLocationNormalized
 ) => {
+  if (to.meta.isCustomerPortal) {
+    return handleCustomerPortalRoute(to)
+  }
+
   const userStore = useUserStore()
   const globalStore = useGlobalStore()
   const companyStore = useCompanyStore()
@@ -70,6 +77,65 @@ export const authGuard: NavigationGuardWithThis<undefined> = (
 
 // ---- helpers ----
 
+async function handleCustomerPortalRoute(
+  to: RouteLocationNormalized
+): Promise<{ name: string; params: { company: string } } | void> {
+  const customerPortalStore = useCustomerPortalStore()
+  const companySlug = resolveCompanySlug(to.params.company)
+
+  if (!companySlug) {
+    return
+  }
+
+  const isGuestRoute = to.meta.customerPortalGuest === true
+  const shouldBootstrap =
+    customerPortalStore.companySlug !== companySlug ||
+    !customerPortalStore.isAppLoaded ||
+    customerPortalStore.currentUser === null
+
+  if (!shouldBootstrap) {
+    if (isGuestRoute) {
+      return {
+        name: 'customer-portal.dashboard',
+        params: { company: companySlug },
+      }
+    }
+
+    return
+  }
+
+  try {
+    await customerPortalStore.bootstrap(companySlug)
+
+    if (isGuestRoute) {
+      return {
+        name: 'customer-portal.dashboard',
+        params: { company: companySlug },
+      }
+    }
+  } catch (err: unknown) {
+    customerPortalStore.resetState(companySlug)
+
+    if (isGuestRoute) {
+      return
+    }
+
+    const normalizedError = handleApiError(err)
+
+    if (normalizedError.isUnauthorized || normalizedError.statusCode === 401) {
+      return {
+        name: 'customer-portal.login',
+        params: { company: companySlug },
+      }
+    }
+
+    return {
+      name: 'customer-portal.login',
+      params: { company: companySlug },
+    }
+  }
+}
+
 function currentUserIsSuperAdmin(
   userStore: ReturnType<typeof useUserStore>
 ): boolean {
diff --git a/resources/scripts-v2/router/types.ts b/resources/scripts-v2/router/types.ts
index 696a1fa3..08e83f47 100644
--- a/resources/scripts-v2/router/types.ts
+++ b/resources/scripts-v2/router/types.ts
@@ -3,10 +3,13 @@ import 'vue-router'
 declare module 'vue-router' {
   interface RouteMeta {
     requiresAuth?: boolean
-    ability?: string
+    ability?: string | string[]
     isOwner?: boolean
     isSuperAdmin?: boolean
+    usesAdminBootstrap?: boolean
     redirectIfAuthenticated?: boolean
+    isCustomerPortal?: boolean
+    customerPortalGuest?: boolean
     isInstallation?: boolean
     title?: string
   }
diff --git a/resources/scripts-v2/stores/company.store.ts b/resources/scripts-v2/stores/company.store.ts
index a6f30c01..56d1a6bc 100644
--- a/resources/scripts-v2/stores/company.store.ts
+++ b/resources/scripts-v2/stores/company.store.ts
@@ -19,7 +19,7 @@ export const useCompanyStore = defineStore('company', () => {
   const selectedCompany = ref<Company | null>(null)
   const selectedCompanySettings = ref<Record<string, string>>({})
   const selectedCompanyCurrency = ref<Currency | null>(null)
-  const isAdminMode = ref<boolean>(localStore.get<string>('isAdminMode') === 'true')
+  const isAdminMode = ref<boolean>(localStore.getBoolean('isAdminMode'))
   const defaultCurrency = ref<Currency | null>(null)
 
   // Actions
@@ -37,7 +37,7 @@ export const useCompanyStore = defineStore('company', () => {
   function setAdminMode(enabled: boolean): void {
     isAdminMode.value = enabled
     if (enabled) {
-      localStore.set('isAdminMode', 'true')
+      localStore.set('isAdminMode', true)
       localStore.remove('selectedCompany')
       selectedCompany.value = null
     } else {
diff --git a/resources/scripts-v2/stores/global.store.ts b/resources/scripts-v2/stores/global.store.ts
index 94f6ba70..098ce287 100644
--- a/resources/scripts-v2/stores/global.store.ts
+++ b/resources/scripts-v2/stores/global.store.ts
@@ -38,12 +38,10 @@ export const useGlobalStore = defineStore('global', () => {
 
   const isAppLoaded = ref<boolean>(false)
   const isSidebarOpen = ref<boolean>(false)
-  const isSidebarCollapsed = ref<boolean>(
-    localStore.get<string>('sidebarCollapsed') === 'true'
-  )
+  const isSidebarCollapsed = ref<boolean>(localStore.getBoolean('sidebarCollapsed'))
   const areCurrenciesLoading = ref<boolean>(false)
 
-  const downloadReport = ref<string | null>(null)
+  const downloadReport = ref<(() => void) | null>(null)
 
   // Getters
   const menuGroups = computed<MenuItem[][]>(() => {
@@ -51,12 +49,13 @@ export const useGlobalStore = defineStore('global', () => {
   })
 
   // Actions
-  async function bootstrap(): Promise<BootstrapResponse> {
+  async function bootstrap(options?: { adminMode?: boolean }): Promise<BootstrapResponse> {
     const companyStore = useCompanyStore()
     const userStore = useUserStore()
 
     try {
-      const response = await bootstrapService.bootstrap(companyStore.isAdminMode)
+      const shouldUseAdminBootstrap = options?.adminMode ?? companyStore.isAdminMode
+      const response = await bootstrapService.bootstrap(shouldUseAdminBootstrap)
 
       mainMenu.value = response.main_menu
       settingMenu.value = response.setting_menu
@@ -72,11 +71,18 @@ export const useGlobalStore = defineStore('global', () => {
       // company store
       companyStore.companies = response.companies
 
-      if (response.current_company) {
+      if (response.admin_mode === true) {
+        companyStore.setAdminMode(true)
+        companyStore.setSelectedCompany(null)
+        companyStore.selectedCompanySettings = {}
+        companyStore.selectedCompanyCurrency = null
+      } else if (response.current_company) {
+        companyStore.setAdminMode(false)
         companyStore.setSelectedCompany(response.current_company)
         companyStore.selectedCompanySettings = response.current_company_settings
         companyStore.selectedCompanyCurrency = response.current_company_currency
       } else {
+        companyStore.setAdminMode(false)
         companyStore.setSelectedCompany(null)
         companyStore.selectedCompanySettings = {}
         companyStore.selectedCompanyCurrency = null
@@ -212,10 +218,7 @@ export const useGlobalStore = defineStore('global', () => {
 
   function toggleSidebarCollapse(): void {
     isSidebarCollapsed.value = !isSidebarCollapsed.value
-    localStore.set(
-      'sidebarCollapsed',
-      isSidebarCollapsed.value ? 'true' : 'false'
-    )
+    localStore.set('sidebarCollapsed', isSidebarCollapsed.value)
   }
 
   function setIsAppLoaded(loaded: boolean): void {
diff --git a/resources/scripts-v2/stores/modal.store.ts b/resources/scripts-v2/stores/modal.store.ts
index fc690764..d201e4e9 100644
--- a/resources/scripts-v2/stores/modal.store.ts
+++ b/resources/scripts-v2/stores/modal.store.ts
@@ -9,7 +9,7 @@ export interface OpenModalPayload {
   id?: string | number
   content?: string
   data?: unknown
-  refreshData?: (() => void) | null
+  refreshData?: ((...args: unknown[]) => void) | null
   variant?: string
   size?: ModalSize
 }
@@ -23,7 +23,7 @@ export const useModalStore = defineStore('modal', () => {
   const id = ref<string | number>('')
   const size = ref<ModalSize>('md')
   const data = ref<unknown>(null)
-  const refreshData = ref<(() => void) | null>(null)
+  const refreshData = ref<((...args: unknown[]) => void) | null>(null)
   const variant = ref<string>('')
 
   // Getters
diff --git a/resources/scripts-v2/utils/error-handling.ts b/resources/scripts-v2/utils/error-handling.ts
index 62788600..0966248b 100644
--- a/resources/scripts-v2/utils/error-handling.ts
+++ b/resources/scripts-v2/utils/error-handling.ts
@@ -33,6 +33,7 @@ export interface NormalizedApiError {
  */
 const ERROR_TRANSLATION_MAP: Record<string, string> = {
   'These credentials do not match our records.': 'errors.login_invalid_credentials',
+  'The provided credentials are incorrect.': 'errors.login_invalid_credentials',
   'invalid_key': 'errors.invalid_provider_key',
   'This feature is available on Starter plan and onwards!': 'errors.starter_plan',
   'taxes_attached': 'settings.tax_types.already_in_use',
diff --git a/resources/scripts-v2/utils/generate-client-id.ts b/resources/scripts-v2/utils/generate-client-id.ts
new file mode 100644
index 00000000..2278137d
--- /dev/null
+++ b/resources/scripts-v2/utils/generate-client-id.ts
@@ -0,0 +1,5 @@
+import Guid from 'guid'
+
+export function generateClientId(): string {
+  return Guid.raw()
+}
diff --git a/resources/scripts-v2/utils/index.ts b/resources/scripts-v2/utils/index.ts
index 3ec34f81..d4e4d2cf 100644
--- a/resources/scripts-v2/utils/index.ts
+++ b/resources/scripts-v2/utils/index.ts
@@ -27,3 +27,5 @@ export {
   getErrorTranslationKey,
 } from './error-handling'
 export type { NormalizedApiError } from './error-handling'
+
+export { generateClientId } from './generate-client-id'
diff --git a/resources/scripts-v2/utils/local-storage.ts b/resources/scripts-v2/utils/local-storage.ts
index 35d3795c..b9345e80 100644
--- a/resources/scripts-v2/utils/local-storage.ts
+++ b/resources/scripts-v2/utils/local-storage.ts
@@ -25,6 +25,26 @@ export function get<T>(key: string): T | null {
   }
 }
 
+/**
+ * Retrieve a boolean from localStorage while tolerating legacy string values.
+ *
+ * @param key - The localStorage key
+ * @returns True only when the stored value represents a truthy boolean
+ */
+export function getBoolean(key: string): boolean {
+  const value = get<boolean | string>(key)
+
+  if (typeof value === 'boolean') {
+    return value
+  }
+
+  if (typeof value === 'string') {
+    return value.toLowerCase() === 'true'
+  }
+
+  return false
+}
+
 /**
  * Store a value in localStorage as JSON.
  *
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index a4dad905..70a95524 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -51,6 +51,11 @@
 
         window.customer_logo = "/storage/{{$customer_logo}}"
 
+        @endif
+        @if(isset($customer_page_title))
+
+        window.customer_page_title = "{{$customer_page_title}}"
+
         @endif
         @if(isset($login_page_logo))
 
diff --git a/tests/Feature/Admin/AdminSettingsTest.php b/tests/Feature/Admin/AdminSettingsTest.php
new file mode 100644
index 00000000..71e0e860
--- /dev/null
+++ b/tests/Feature/Admin/AdminSettingsTest.php
@@ -0,0 +1,136 @@
+<?php
+
+use App\Models\User;
+use Illuminate\Support\Facades\Artisan;
+use Laravel\Sanctum\Sanctum;
+
+use function Pest\Laravel\getJson;
+use function Pest\Laravel\postJson;
+
+beforeEach(function () {
+    Artisan::call('db:seed', ['--class' => 'DatabaseSeeder', '--force' => true]);
+    Artisan::call('db:seed', ['--class' => 'DemoSeeder', '--force' => true]);
+
+    $user = User::find(1);
+    $this->withHeaders([
+        'company' => $user->companies()->first()->id,
+    ]);
+    Sanctum::actingAs(
+        $user,
+        ['*']
+    );
+});
+
+test('company settings config uses canonical v2 links', function () {
+    $links = collect(config('invoiceshelf.setting_menu'))->pluck('link');
+
+    expect($links)->toContain('/admin/settings/exchange-rate');
+    expect($links)->toContain('/admin/settings/payment-modes');
+    expect($links)->toContain('/admin/settings/expense-categories');
+    expect($links)->toContain('/admin/settings/roles');
+    expect($links)->toContain('/admin/settings/mail-config');
+
+    expect($links)->not->toContain('/admin/settings/roles-settings');
+    expect($links)->not->toContain('/admin/settings/exchange-rate-provider');
+    expect($links)->not->toContain('/admin/settings/payment-mode');
+    expect($links)->not->toContain('/admin/settings/expense-category');
+    expect($links)->not->toContain('/admin/settings/mail-configuration');
+
+    $bootstrapMenu = json_encode(getJson('/api/v1/bootstrap')
+        ->assertOk()
+        ->json('setting_menu'));
+
+    expect($bootstrapMenu)->not->toContain('roles-settings');
+    expect($bootstrapMenu)->not->toContain('exchange-rate-provider');
+    expect($bootstrapMenu)->not->toContain('payment-mode');
+    expect($bootstrapMenu)->not->toContain('expense-category');
+    expect($bootstrapMenu)->not->toContain('mail-configuration');
+});
+
+test('super admin bootstrap uses administration mode when requested', function () {
+    getJson('/api/v1/bootstrap?admin_mode=1')
+        ->assertOk()
+        ->assertJsonPath('admin_mode', true)
+        ->assertJsonPath('current_company', null)
+        ->assertJsonCount(0, 'setting_menu');
+});
+
+test('bootstrap without administration mode hydrates the selected company', function () {
+    $companyId = User::find(1)->companies()->first()->id;
+
+    getJson('/api/v1/bootstrap')
+        ->assertOk()
+        ->assertJsonPath('current_company.id', $companyId);
+});
+
+test('get global mail configuration', function () {
+    getJson('/api/v1/mail/config')
+        ->assertOk()
+        ->assertJsonStructure([
+            'mail_driver',
+            'from_name',
+            'from_mail',
+        ]);
+});
+
+test('save global mail configuration', function () {
+    postJson('/api/v1/mail/config', [
+        'mail_driver' => 'smtp',
+        'mail_host' => 'smtp.example.com',
+        'mail_port' => 587,
+        'mail_username' => 'demo-user',
+        'mail_password' => 'secret',
+        'mail_encryption' => 'tls',
+        'from_name' => 'InvoiceShelf',
+        'from_mail' => 'hello@example.com',
+    ])
+        ->assertOk()
+        ->assertJson([
+            'success' => 'mail_variables_save_successfully',
+        ]);
+
+    $this->assertDatabaseHas('settings', [
+        'option' => 'mail_driver',
+        'value' => 'smtp',
+    ]);
+
+    $this->assertDatabaseHas('settings', [
+        'option' => 'from_mail',
+        'value' => 'hello@example.com',
+    ]);
+});
+
+test('get pdf configuration', function () {
+    getJson('/api/v1/pdf/config')
+        ->assertOk()
+        ->assertJsonStructure([
+            'pdf_driver',
+            'gotenberg_host',
+            'gotenberg_margins',
+            'gotenberg_papersize',
+        ]);
+});
+
+test('save pdf configuration', function () {
+    postJson('/api/v1/pdf/config', [
+        'pdf_driver' => 'dompdf',
+    ])
+        ->assertOk()
+        ->assertJson([
+            'success' => 'pdf_variables_save_successfully',
+        ]);
+
+    $this->assertDatabaseHas('settings', [
+        'option' => 'pdf_driver',
+        'value' => 'dompdf',
+    ]);
+});
+
+test('get app version', function () {
+    getJson('/api/v1/app/version')
+        ->assertOk()
+        ->assertJsonStructure([
+            'version',
+            'channel',
+        ]);
+});
diff --git a/tests/Feature/Admin/BackupGlobalTest.php b/tests/Feature/Admin/BackupGlobalTest.php
new file mode 100644
index 00000000..2e204ea1
--- /dev/null
+++ b/tests/Feature/Admin/BackupGlobalTest.php
@@ -0,0 +1,48 @@
+<?php
+
+use App\Jobs\CreateBackupJob;
+use App\Models\FileDisk;
+use App\Models\User;
+use App\Services\Backup\BackupConfigurationFactory;
+use Illuminate\Support\Facades\Artisan;
+use Illuminate\Support\Facades\Queue;
+use Laravel\Sanctum\Sanctum;
+use Spatie\Backup\Config\Config;
+
+use function Pest\Laravel\postJson;
+
+beforeEach(function () {
+    Artisan::call('db:seed', ['--class' => 'DatabaseSeeder', '--force' => true]);
+    Artisan::call('db:seed', ['--class' => 'DemoSeeder', '--force' => true]);
+
+    Sanctum::actingAs(
+        User::findOrFail(1),
+        ['*']
+    );
+});
+
+test('create backup does not require company header', function () {
+    Queue::fake();
+
+    $disk = FileDisk::factory()->create();
+
+    postJson('/api/v1/backups', [
+        'option' => 'full',
+        'file_disk_id' => $disk->id,
+    ])->assertOk()->assertJson([
+        'success' => true,
+    ]);
+
+    Queue::assertPushed(CreateBackupJob::class);
+});
+
+test('backup configuration factory does not require company context', function () {
+    $disk = FileDisk::factory()->create();
+
+    $config = BackupConfigurationFactory::make([
+        'option' => 'full',
+        'file_disk_id' => $disk->id,
+    ]);
+
+    expect($config)->toBeInstanceOf(Config::class);
+});
diff --git a/tests/Feature/Admin/CustomerTest.php b/tests/Feature/Admin/CustomerTest.php
index 0e649884..a9dbe36e 100644
--- a/tests/Feature/Admin/CustomerTest.php
+++ b/tests/Feature/Admin/CustomerTest.php
@@ -42,7 +42,31 @@ test('customer stats', function () {
 
     $response = getJson("api/v1/customers/{$customer->id}/stats");
 
-    $response->assertStatus(200);
+    $response
+        ->assertOk()
+        ->assertJsonPath('data.id', $customer->id)
+        ->assertJsonPath('data.name', $customer->name)
+        ->assertJsonPath('data.email', $customer->email)
+        ->assertJsonStructure([
+            'data' => [
+                'id',
+                'name',
+                'email',
+            ],
+            'meta' => [
+                'chartData' => [
+                    'salesTotal',
+                    'totalReceipts',
+                    'totalExpenses',
+                    'netProfit',
+                    'expenseTotals',
+                    'netProfits',
+                    'months',
+                    'receiptTotals',
+                    'invoiceTotals',
+                ],
+            ],
+        ]);
 });
 
 test('create customer', function () {
diff --git a/tests/Feature/Customer/AuthTest.php b/tests/Feature/Customer/AuthTest.php
new file mode 100644
index 00000000..e9bb9a5d
--- /dev/null
+++ b/tests/Feature/Customer/AuthTest.php
@@ -0,0 +1,83 @@
+<?php
+
+use App\Models\Customer;
+use Illuminate\Support\Facades\Artisan;
+
+use function Pest\Laravel\postJson;
+
+beforeEach(function () {
+    Artisan::call('db:seed', ['--class' => 'DatabaseSeeder', '--force' => true]);
+    Artisan::call('db:seed', ['--class' => 'DemoSeeder', '--force' => true]);
+});
+
+test('customer portal guest entrypoints return the spa shell', function () {
+    $customer = Customer::factory()->create();
+    $companySlug = $customer->company->slug;
+
+    $this->followingRedirects()->get("/{$companySlug}/customer")
+        ->assertOk()
+        ->assertSee('window.InvoiceShelf.start()', false);
+
+    $this->followingRedirects()->get("/{$companySlug}/customer/login")
+        ->assertOk()
+        ->assertSee('window.InvoiceShelf.start()', false);
+
+    $this->followingRedirects()->get("/{$companySlug}/customer/forgot-password")
+        ->assertOk()
+        ->assertSee('window.InvoiceShelf.start()', false);
+
+    $this->followingRedirects()->get("/{$companySlug}/customer/reset/password/example-token")
+        ->assertOk()
+        ->assertSee('window.InvoiceShelf.start()', false);
+});
+
+test('customer can login to the customer portal', function () {
+    $customer = Customer::factory()->create([
+        'password' => 'secret123',
+        'enable_portal' => true,
+    ]);
+
+    $response = postJson("/{$customer->company->slug}/customer/login", [
+        'email' => $customer->email,
+        'password' => 'secret123',
+        'device_name' => 'customer-portal-web',
+    ]);
+
+    $response
+        ->assertOk()
+        ->assertJson([
+            'success' => true,
+        ]);
+
+    $this->assertAuthenticatedAs($customer, 'customer');
+});
+
+test('customer portal login rejects invalid credentials', function () {
+    $customer = Customer::factory()->create([
+        'password' => 'secret123',
+        'enable_portal' => true,
+    ]);
+
+    postJson("/{$customer->company->slug}/customer/login", [
+        'email' => $customer->email,
+        'password' => 'wrong-password',
+        'device_name' => 'customer-portal-web',
+    ])
+        ->assertStatus(422)
+        ->assertJsonValidationErrors(['email']);
+});
+
+test('customer portal login rejects portal-disabled customers', function () {
+    $customer = Customer::factory()->create([
+        'password' => 'secret123',
+        'enable_portal' => false,
+    ]);
+
+    postJson("/{$customer->company->slug}/customer/login", [
+        'email' => $customer->email,
+        'password' => 'secret123',
+        'device_name' => 'customer-portal-web',
+    ])
+        ->assertStatus(422)
+        ->assertJsonValidationErrors(['email']);
+});
diff --git a/version.md b/version.md
index c043eea7..0786c6b9 100644
--- a/version.md
+++ b/version.md
@@ -1 +1 @@
-2.2.1
+3.0.0-alpha.1