diff --git a/resources/css/invoiceshelf.css b/resources/css/invoiceshelf.css
index 07673579..abf5ffb4 100644
--- a/resources/css/invoiceshelf.css
+++ b/resources/css/invoiceshelf.css
@@ -9,6 +9,8 @@
 
 @source "../scripts/**/*.vue";
 @source "../scripts/**/*.js";
+@source "../scripts-v2/**/*.vue";
+@source "../scripts-v2/**/*.ts";
 @source "../../resources/views/**/*.php";
 
 @theme inline {
diff --git a/resources/scripts-v2/api/services/auth.service.ts b/resources/scripts-v2/api/services/auth.service.ts
index 2dde66e0..eb5694c5 100644
--- a/resources/scripts-v2/api/services/auth.service.ts
+++ b/resources/scripts-v2/api/services/auth.service.ts
@@ -1,7 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { User } from '../../types/domain/user'
-import type { ApiResponse } from '../../types/api'
+import type { User } from '@v2/types/domain/user'
+import type { ApiResponse } from '@v2/types/api'
 
 export interface LoginPayload {
   email: string
diff --git a/resources/scripts-v2/api/services/backup.service.ts b/resources/scripts-v2/api/services/backup.service.ts
index b8ba2e50..d6f86922 100644
--- a/resources/scripts-v2/api/services/backup.service.ts
+++ b/resources/scripts-v2/api/services/backup.service.ts
@@ -1,6 +1,6 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { ApiResponse, ListParams } from '../../types/api'
+import type { ApiResponse, ListParams } from '@v2/types/api'
 
 export interface Backup {
   id: number
diff --git a/resources/scripts-v2/api/services/bootstrap.service.ts b/resources/scripts-v2/api/services/bootstrap.service.ts
index a12736f2..d8c799ff 100644
--- a/resources/scripts-v2/api/services/bootstrap.service.ts
+++ b/resources/scripts-v2/api/services/bootstrap.service.ts
@@ -1,9 +1,9 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { User, UserSetting } from '../../types/domain/user'
-import type { Company } from '../../types/domain/company'
-import type { Currency } from '../../types/domain/currency'
-import type { Ability } from '../../types/domain/role'
+import type { User, UserSetting } from '@v2/types/domain/user'
+import type { Company } from '@v2/types/domain/company'
+import type { Currency } from '@v2/types/domain/currency'
+import type { Ability } from '@v2/types/domain/role'
 
 export interface MenuItem {
   title: string
diff --git a/resources/scripts-v2/api/services/company.service.ts b/resources/scripts-v2/api/services/company.service.ts
index ff379c4e..e66a2e22 100644
--- a/resources/scripts-v2/api/services/company.service.ts
+++ b/resources/scripts-v2/api/services/company.service.ts
@@ -1,7 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { Company } from '../../types/domain/company'
-import type { ApiResponse } from '../../types/api'
+import type { Company } from '@v2/types/domain/company'
+import type { ApiResponse } from '@v2/types/api'
 
 export interface UpdateCompanyPayload {
   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 eed57f77..2c3b95ac 100644
--- a/resources/scripts-v2/api/services/custom-field.service.ts
+++ b/resources/scripts-v2/api/services/custom-field.service.ts
@@ -1,7 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { CustomField } from '../../types/domain/custom-field'
-import type { ApiResponse, ListParams } from '../../types/api'
+import type { CustomField } from '@v2/types/domain/custom-field'
+import type { ApiResponse, ListParams } from '@v2/types/api'
 
 export interface CustomFieldListParams extends ListParams {
   model_type?: string
diff --git a/resources/scripts-v2/api/services/customer.service.ts b/resources/scripts-v2/api/services/customer.service.ts
index 9d65e505..89f82eb7 100644
--- a/resources/scripts-v2/api/services/customer.service.ts
+++ b/resources/scripts-v2/api/services/customer.service.ts
@@ -1,11 +1,11 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { Customer, CreateCustomerPayload } from '../../types/domain/customer'
+import type { Customer, CreateCustomerPayload } from '@v2/types/domain/customer'
 import type {
   ApiResponse,
   ListParams,
   DeletePayload,
-} from '../../types/api'
+} from '@v2/types/api'
 
 export interface CustomerListParams extends ListParams {
   display_name?: string
diff --git a/resources/scripts-v2/api/services/disk.service.ts b/resources/scripts-v2/api/services/disk.service.ts
index 84d1d55a..78f23937 100644
--- a/resources/scripts-v2/api/services/disk.service.ts
+++ b/resources/scripts-v2/api/services/disk.service.ts
@@ -1,6 +1,6 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { ApiResponse, ListParams } from '../../types/api'
+import type { ApiResponse, ListParams } from '@v2/types/api'
 
 export interface Disk {
   id: number
diff --git a/resources/scripts-v2/api/services/estimate.service.ts b/resources/scripts-v2/api/services/estimate.service.ts
index bc940f39..1f6256fb 100644
--- a/resources/scripts-v2/api/services/estimate.service.ts
+++ b/resources/scripts-v2/api/services/estimate.service.ts
@@ -1,14 +1,14 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { Estimate, CreateEstimatePayload } from '../../types/domain/estimate'
-import type { Invoice } from '../../types/domain/invoice'
+import type { Estimate, CreateEstimatePayload } from '@v2/types/domain/estimate'
+import type { Invoice } from '@v2/types/domain/invoice'
 import type {
   ApiResponse,
   ListParams,
   DateRangeParams,
   NextNumberResponse,
   DeletePayload,
-} from '../../types/api'
+} from '@v2/types/api'
 
 export interface EstimateListParams extends ListParams, DateRangeParams {
   status?: string
diff --git a/resources/scripts-v2/api/services/exchange-rate.service.ts b/resources/scripts-v2/api/services/exchange-rate.service.ts
index 58524320..af00e190 100644
--- a/resources/scripts-v2/api/services/exchange-rate.service.ts
+++ b/resources/scripts-v2/api/services/exchange-rate.service.ts
@@ -1,7 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { ExchangeRateProvider, Currency } from '../../types/domain/currency'
-import type { ApiResponse, ListParams } from '../../types/api'
+import type { ExchangeRateProvider, Currency } from '@v2/types/domain/currency'
+import type { ApiResponse, ListParams } from '@v2/types/api'
 
 export interface CreateExchangeRateProviderPayload {
   driver: string
diff --git a/resources/scripts-v2/api/services/expense.service.ts b/resources/scripts-v2/api/services/expense.service.ts
index fa83794f..a552d776 100644
--- a/resources/scripts-v2/api/services/expense.service.ts
+++ b/resources/scripts-v2/api/services/expense.service.ts
@@ -1,12 +1,12 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { Expense, ExpenseCategory, CreateExpensePayload } from '../../types/domain/expense'
+import type { Expense, ExpenseCategory, CreateExpensePayload } from '@v2/types/domain/expense'
 import type {
   ApiResponse,
   ListParams,
   DateRangeParams,
   DeletePayload,
-} from '../../types/api'
+} from '@v2/types/api'
 
 export interface ExpenseListParams extends ListParams, DateRangeParams {
   expense_category_id?: number
diff --git a/resources/scripts-v2/api/services/invoice.service.ts b/resources/scripts-v2/api/services/invoice.service.ts
index f3ca8509..e6f73e52 100644
--- a/resources/scripts-v2/api/services/invoice.service.ts
+++ b/resources/scripts-v2/api/services/invoice.service.ts
@@ -1,6 +1,6 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { Invoice, CreateInvoicePayload } from '../../types/domain/invoice'
+import type { Invoice, CreateInvoicePayload } from '@v2/types/domain/invoice'
 import type {
   ApiResponse,
   PaginatedResponse,
@@ -8,7 +8,7 @@ import type {
   DateRangeParams,
   NextNumberResponse,
   DeletePayload,
-} from '../../types/api'
+} from '@v2/types/api'
 
 export interface InvoiceListParams extends ListParams, DateRangeParams {
   status?: string
diff --git a/resources/scripts-v2/api/services/item.service.ts b/resources/scripts-v2/api/services/item.service.ts
index a2fdbb34..f587eefa 100644
--- a/resources/scripts-v2/api/services/item.service.ts
+++ b/resources/scripts-v2/api/services/item.service.ts
@@ -1,11 +1,11 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { Item, Unit } from '../../types/domain/item'
+import type { Item, Unit } from '@v2/types/domain/item'
 import type {
   ApiResponse,
   ListParams,
   DeletePayload,
-} from '../../types/api'
+} from '@v2/types/api'
 
 export interface ItemListParams extends ListParams {
   filter?: Record<string, unknown>
diff --git a/resources/scripts-v2/api/services/member.service.ts b/resources/scripts-v2/api/services/member.service.ts
index 228ce6c7..1bfdb4ae 100644
--- a/resources/scripts-v2/api/services/member.service.ts
+++ b/resources/scripts-v2/api/services/member.service.ts
@@ -1,8 +1,8 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { User } from '../../types/domain/user'
-import type { CompanyInvitation } from '../../types/domain/company'
-import type { ApiResponse, PaginatedResponse, ListParams } from '../../types/api'
+import type { User } from '@v2/types/domain/user'
+import type { CompanyInvitation } from '@v2/types/domain/company'
+import type { ApiResponse, PaginatedResponse, ListParams } from '@v2/types/api'
 
 export interface MemberListParams extends ListParams {
   display_name?: string
diff --git a/resources/scripts-v2/api/services/module.service.ts b/resources/scripts-v2/api/services/module.service.ts
index be2c0f6a..45b083e4 100644
--- a/resources/scripts-v2/api/services/module.service.ts
+++ b/resources/scripts-v2/api/services/module.service.ts
@@ -1,6 +1,6 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { ApiResponse } from '../../types/api'
+import type { ApiResponse } from '@v2/types/api'
 
 export interface Module {
   name: string
diff --git a/resources/scripts-v2/api/services/note.service.ts b/resources/scripts-v2/api/services/note.service.ts
index 7858d180..128743c5 100644
--- a/resources/scripts-v2/api/services/note.service.ts
+++ b/resources/scripts-v2/api/services/note.service.ts
@@ -1,7 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { Note } from '../../types/domain/note'
-import type { ApiResponse, ListParams } from '../../types/api'
+import type { Note } from '@v2/types/domain/note'
+import type { ApiResponse, ListParams } from '@v2/types/api'
 
 export interface CreateNotePayload {
   type: string
diff --git a/resources/scripts-v2/api/services/payment.service.ts b/resources/scripts-v2/api/services/payment.service.ts
index 8e413545..2f668dbf 100644
--- a/resources/scripts-v2/api/services/payment.service.ts
+++ b/resources/scripts-v2/api/services/payment.service.ts
@@ -1,12 +1,12 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { Payment, PaymentMethod, CreatePaymentPayload } from '../../types/domain/payment'
+import type { Payment, PaymentMethod, CreatePaymentPayload } from '@v2/types/domain/payment'
 import type {
   ApiResponse,
   ListParams,
   NextNumberResponse,
   DeletePayload,
-} from '../../types/api'
+} from '@v2/types/api'
 
 export interface PaymentListParams extends ListParams {
   customer_id?: number
diff --git a/resources/scripts-v2/api/services/recurring-invoice.service.ts b/resources/scripts-v2/api/services/recurring-invoice.service.ts
index e5e0699a..3bbfb4e0 100644
--- a/resources/scripts-v2/api/services/recurring-invoice.service.ts
+++ b/resources/scripts-v2/api/services/recurring-invoice.service.ts
@@ -1,11 +1,11 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { RecurringInvoice, CreateRecurringInvoicePayload } from '../../types/domain/recurring-invoice'
+import type { RecurringInvoice, CreateRecurringInvoicePayload } from '@v2/types/domain/recurring-invoice'
 import type {
   ApiResponse,
   ListParams,
   DeletePayload,
-} from '../../types/api'
+} from '@v2/types/api'
 
 export interface RecurringInvoiceListParams extends ListParams {
   status?: string
diff --git a/resources/scripts-v2/api/services/report.service.ts b/resources/scripts-v2/api/services/report.service.ts
index 49590023..e39a363b 100644
--- a/resources/scripts-v2/api/services/report.service.ts
+++ b/resources/scripts-v2/api/services/report.service.ts
@@ -1,6 +1,6 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { DateRangeParams } from '../../types/api'
+import type { DateRangeParams } from '@v2/types/api'
 
 export interface ReportParams extends DateRangeParams {
   report_type?: string
diff --git a/resources/scripts-v2/api/services/role.service.ts b/resources/scripts-v2/api/services/role.service.ts
index 3604c6f9..f7eb0220 100644
--- a/resources/scripts-v2/api/services/role.service.ts
+++ b/resources/scripts-v2/api/services/role.service.ts
@@ -1,7 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { Role, Ability } from '../../types/domain/role'
-import type { ApiResponse, ListParams } from '../../types/api'
+import type { Role, Ability } from '@v2/types/domain/role'
+import type { ApiResponse, ListParams } from '@v2/types/api'
 
 export interface CreateRolePayload {
   name: string
diff --git a/resources/scripts-v2/api/services/setting.service.ts b/resources/scripts-v2/api/services/setting.service.ts
index a1149b75..8c153c5f 100644
--- a/resources/scripts-v2/api/services/setting.service.ts
+++ b/resources/scripts-v2/api/services/setting.service.ts
@@ -1,7 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { Country } from '../../types/domain/customer'
-import type { Currency } from '../../types/domain/currency'
+import type { Country } from '@v2/types/domain/customer'
+import type { Currency } from '@v2/types/domain/currency'
 
 export interface DateFormat {
   display_date: string
diff --git a/resources/scripts-v2/api/services/tax-type.service.ts b/resources/scripts-v2/api/services/tax-type.service.ts
index b072e5cf..a0ea12aa 100644
--- a/resources/scripts-v2/api/services/tax-type.service.ts
+++ b/resources/scripts-v2/api/services/tax-type.service.ts
@@ -1,7 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { TaxType } from '../../types/domain/tax'
-import type { ApiResponse, ListParams } from '../../types/api'
+import type { TaxType } from '@v2/types/domain/tax'
+import type { ApiResponse, ListParams } from '@v2/types/api'
 
 export interface CreateTaxTypePayload {
   name: string
diff --git a/resources/scripts-v2/api/services/user.service.ts b/resources/scripts-v2/api/services/user.service.ts
index 49e5ec75..8e85b7ec 100644
--- a/resources/scripts-v2/api/services/user.service.ts
+++ b/resources/scripts-v2/api/services/user.service.ts
@@ -1,7 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { User } from '../../types/domain/user'
-import type { ApiResponse } from '../../types/api'
+import type { User } from '@v2/types/domain/user'
+import type { ApiResponse } from '@v2/types/api'
 
 export interface UpdateProfilePayload {
   name: string
diff --git a/resources/scripts-v2/components/base/BaseButton.vue b/resources/scripts-v2/components/base/BaseButton.vue
index 089d6d8e..22b0c69d 100644
--- a/resources/scripts-v2/components/base/BaseButton.vue
+++ b/resources/scripts-v2/components/base/BaseButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
+import SpinnerIcon from '@v2/components/icons/SpinnerIcon.vue'
 
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 type ButtonVariant =
diff --git a/resources/scripts-v2/components/base/BaseCustomerAddressDisplay.vue b/resources/scripts-v2/components/base/BaseCustomerAddressDisplay.vue
index 638dbdc8..ae6ffb6c 100644
--- a/resources/scripts-v2/components/base/BaseCustomerAddressDisplay.vue
+++ b/resources/scripts-v2/components/base/BaseCustomerAddressDisplay.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Address, Country } from '../../types/domain'
+import type { Address, Country } from '@v2/types/domain'
 
 interface DisplayAddress {
   address_street_1?: string | null
diff --git a/resources/scripts-v2/components/base/BaseCustomerSelectPopup.vue b/resources/scripts-v2/components/base/BaseCustomerSelectPopup.vue
index 6cf59e68..f14c664b 100644
--- a/resources/scripts-v2/components/base/BaseCustomerSelectPopup.vue
+++ b/resources/scripts-v2/components/base/BaseCustomerSelectPopup.vue
@@ -4,10 +4,10 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useDebounceFn } from '@vueuse/core'
 import { useRoute } from 'vue-router'
-import { usePermissions } from '../../composables/use-permissions'
-import { useModal } from '../../composables/use-modal'
-import { ABILITIES } from '../../config/abilities'
-import type { Customer, Address } from '../../types/domain'
+import { usePermissions } from '@v2/composables/use-permissions'
+import { useModal } from '@v2/composables/use-modal'
+import { ABILITIES } from '@v2/config/abilities'
+import type { Customer, Address } from '@v2/types/domain'
 
 type DocumentType = 'estimate' | 'invoice' | 'recurring-invoice'
 
diff --git a/resources/scripts-v2/components/base/BaseDatePicker.vue b/resources/scripts-v2/components/base/BaseDatePicker.vue
index 8aa6d5c5..79fb39d2 100644
--- a/resources/scripts-v2/components/base/BaseDatePicker.vue
+++ b/resources/scripts-v2/components/base/BaseDatePicker.vue
@@ -81,8 +81,8 @@ import { Vietnamese } from 'flatpickr/dist/l10n/vn.js'
 import { Mandarin } from 'flatpickr/dist/l10n/zh.js'
 import type { CustomLocale, Locale } from 'flatpickr/dist/types/locale'
 import { computed, reactive, watch, ref, useSlots } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useUserStore } from '@/scripts/admin/stores/user'
+import { useCompanyStore } from '@v2/stores/company.store'
+import { useUserStore } from '@v2/stores/user.store'
 
 interface FlatPickrInstance {
   fp: { open: () => void }
diff --git a/resources/scripts-v2/components/base/BaseDialog.vue b/resources/scripts-v2/components/base/BaseDialog.vue
index 55298a4b..6bc88c68 100644
--- a/resources/scripts-v2/components/base/BaseDialog.vue
+++ b/resources/scripts-v2/components/base/BaseDialog.vue
@@ -144,7 +144,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useDialogStore } from '@/scripts/stores/dialog'
+import { useDialogStore } from '@v2/stores/dialog.store'
 import {
   Dialog,
   DialogOverlay,
diff --git a/resources/scripts-v2/components/base/BaseDropdown.vue b/resources/scripts-v2/components/base/BaseDropdown.vue
index cc8278b1..fbeaaf13 100644
--- a/resources/scripts-v2/components/base/BaseDropdown.vue
+++ b/resources/scripts-v2/components/base/BaseDropdown.vue
@@ -38,7 +38,7 @@
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItems } from '@headlessui/vue'
 import { computed, ref } from 'vue'
-import { usePopper } from '@/scripts/helpers/use-popper'
+import { usePopper } from '@v2/composables/use-popper'
 
 interface Props {
   containerClass?: string
diff --git a/resources/scripts-v2/components/base/BaseFileUploader.vue b/resources/scripts-v2/components/base/BaseFileUploader.vue
index 22ce0a73..a47bf5e0 100644
--- a/resources/scripts-v2/components/base/BaseFileUploader.vue
+++ b/resources/scripts-v2/components/base/BaseFileUploader.vue
@@ -379,8 +379,8 @@
 
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
-import http from '@/scripts/http'
-import utils from '@/scripts/helpers/utilities'
+import { client as http } from '@v2/api/client'
+import * as utils from '@v2/utils/format-money'
 
 interface LocalFile {
   fileObject?: File
diff --git a/resources/scripts-v2/components/base/BaseGlobalLoader.vue b/resources/scripts-v2/components/base/BaseGlobalLoader.vue
index 4b3c1dd2..3d6753ee 100644
--- a/resources/scripts-v2/components/base/BaseGlobalLoader.vue
+++ b/resources/scripts-v2/components/base/BaseGlobalLoader.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import MainLogo from '@/scripts/components/icons/MainLogo.vue'
+import MainLogo from '@v2/components/icons/MainLogo.vue'
 
 interface Props {
   showBgOverlay?: boolean
diff --git a/resources/scripts-v2/components/base/BaseItemSelect.vue b/resources/scripts-v2/components/base/BaseItemSelect.vue
index a65de5d1..b4cc2627 100644
--- a/resources/scripts-v2/components/base/BaseItemSelect.vue
+++ b/resources/scripts-v2/components/base/BaseItemSelect.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { usePermissions } from '../../composables/use-permissions'
-import { useModal } from '../../composables/use-modal'
-import { ABILITIES } from '../../config/abilities'
-import type { Item } from '../../types/domain'
-import type { Tax } from '../../types/domain'
+import { usePermissions } from '@v2/composables/use-permissions'
+import { useModal } from '@v2/composables/use-modal'
+import { ABILITIES } from '@v2/config/abilities'
+import type { Item } from '@v2/types/domain'
+import type { Tax } from '@v2/types/domain'
 
 interface LineItem {
   item_id: number | null
diff --git a/resources/scripts-v2/components/base/BaseModal.vue b/resources/scripts-v2/components/base/BaseModal.vue
index 94df076a..b084c675 100644
--- a/resources/scripts-v2/components/base/BaseModal.vue
+++ b/resources/scripts-v2/components/base/BaseModal.vue
@@ -92,7 +92,7 @@
 </template>
 
 <script setup lang="ts">
-import { useModalStore } from '@/scripts/stores/modal'
+import { useModalStore } from '@v2/stores/modal.store'
 import { computed, watchEffect, useSlots } from 'vue'
 import {
   Dialog,
diff --git a/resources/scripts-v2/components/base/BaseMoney.vue b/resources/scripts-v2/components/base/BaseMoney.vue
index 81746edf..9dcf6000 100644
--- a/resources/scripts-v2/components/base/BaseMoney.vue
+++ b/resources/scripts-v2/components/base/BaseMoney.vue
@@ -19,7 +19,7 @@
 import { computed } from 'vue'
 import { Money3Component } from 'v-money3'
 
-import { useCompanyStore } from '@/scripts/admin/stores/company'
+import { useCompanyStore } from '@v2/stores/company.store'
 
 const money3 = Money3Component
 
diff --git a/resources/scripts-v2/components/base/EstimateStatusBadge.vue b/resources/scripts-v2/components/base/EstimateStatusBadge.vue
index 65d94ab3..3c76835a 100644
--- a/resources/scripts-v2/components/base/EstimateStatusBadge.vue
+++ b/resources/scripts-v2/components/base/EstimateStatusBadge.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { EstimateStatus } from '../../types/domain'
+import { EstimateStatus } from '@v2/types/domain'
 
 interface Props {
   status?: EstimateStatus | string
diff --git a/resources/scripts-v2/components/base/InvoiceInformationCard.vue b/resources/scripts-v2/components/base/InvoiceInformationCard.vue
index 25fe97f0..c5544a25 100644
--- a/resources/scripts-v2/components/base/InvoiceInformationCard.vue
+++ b/resources/scripts-v2/components/base/InvoiceInformationCard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { Invoice } from '../../types/domain'
-import type { Currency } from '../../types/domain'
-import type { Company } from '../../types/domain'
-import type { Customer } from '../../types/domain'
+import type { Invoice } from '@v2/types/domain'
+import type { Currency } from '@v2/types/domain'
+import type { Company } from '@v2/types/domain'
+import type { Customer } from '@v2/types/domain'
 
 interface InvoiceInfo {
   paid_status: string
diff --git a/resources/scripts-v2/components/base/InvoicePublicPage.vue b/resources/scripts-v2/components/base/InvoicePublicPage.vue
index 73ebae04..039da3a6 100644
--- a/resources/scripts-v2/components/base/InvoicePublicPage.vue
+++ b/resources/scripts-v2/components/base/InvoicePublicPage.vue
@@ -2,9 +2,9 @@
 import { ref, computed } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import type { Currency } from '../../types/domain'
-import type { Company } from '../../types/domain'
-import type { Customer } from '../../types/domain'
+import type { Currency } from '@v2/types/domain'
+import type { Company } from '@v2/types/domain'
+import type { Customer } from '@v2/types/domain'
 
 declare global {
   interface Window {
diff --git a/resources/scripts-v2/components/base/InvoiceStatusBadge.vue b/resources/scripts-v2/components/base/InvoiceStatusBadge.vue
index 96cc136f..fd2b44c7 100644
--- a/resources/scripts-v2/components/base/InvoiceStatusBadge.vue
+++ b/resources/scripts-v2/components/base/InvoiceStatusBadge.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { InvoiceStatus, InvoicePaidStatus } from '../../types/domain'
+import { InvoiceStatus, InvoicePaidStatus } from '@v2/types/domain'
 
 type InvoiceBadgeStatus =
   | InvoiceStatus
diff --git a/resources/scripts-v2/components/base/PaidStatusBadge.vue b/resources/scripts-v2/components/base/PaidStatusBadge.vue
index b7b8c79c..12cdf1f9 100644
--- a/resources/scripts-v2/components/base/PaidStatusBadge.vue
+++ b/resources/scripts-v2/components/base/PaidStatusBadge.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { InvoicePaidStatus } from '../../types/domain'
+import { InvoicePaidStatus } from '@v2/types/domain'
 
 type PaidBadgeStatus = InvoicePaidStatus | 'OVERDUE' | string
 
diff --git a/resources/scripts-v2/components/base/RecurringInvoiceStatusBadge.vue b/resources/scripts-v2/components/base/RecurringInvoiceStatusBadge.vue
index 47e6de47..0744591d 100644
--- a/resources/scripts-v2/components/base/RecurringInvoiceStatusBadge.vue
+++ b/resources/scripts-v2/components/base/RecurringInvoiceStatusBadge.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { RecurringInvoiceStatus } from '../../types/domain'
+import { RecurringInvoiceStatus } from '@v2/types/domain'
 
 interface Props {
   status?: RecurringInvoiceStatus | string
diff --git a/resources/scripts-v2/components/charts/LineChart.vue b/resources/scripts-v2/components/charts/LineChart.vue
index 16a4780a..999ba15a 100644
--- a/resources/scripts-v2/components/charts/LineChart.vue
+++ b/resources/scripts-v2/components/charts/LineChart.vue
@@ -8,7 +8,7 @@
 import { Chart } from 'chart.js/auto'
 import type { ChartConfiguration, ChartDataset } from 'chart.js/auto'
 import { ref, computed, onMounted, watchEffect, inject } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
+import { useCompanyStore } from '@v2/stores/company.store'
 
 interface FormatUtils {
   formatMoney: (amount: number, currency: CurrencyInfo) => string
diff --git a/resources/scripts-v2/components/editor/RichEditor.vue b/resources/scripts-v2/components/editor/RichEditor.vue
index bea86717..83445369 100644
--- a/resources/scripts-v2/components/editor/RichEditor.vue
+++ b/resources/scripts-v2/components/editor/RichEditor.vue
@@ -88,7 +88,7 @@ import {
   RedoIcon,
   CodeBlockIcon,
   MenuCenterIcon,
-} from '@/scripts/components/base/base-editor/icons/index.js'
+} from '@v2/components/editor/icons/index'
 import {
   Bars3BottomLeftIcon,
   Bars3BottomRightIcon,
@@ -184,7 +184,7 @@ onUnmounted(() => {
 </script>
 
 <style>
-@reference "../../../../css/invoiceshelf.css";
+@reference "../../../css/invoiceshelf.css";
 
 .ProseMirror {
   min-height: 200px;
diff --git a/resources/scripts-v2/components/editor/icons/BoldIcon.vue b/resources/scripts-v2/components/editor/icons/BoldIcon.vue
new file mode 100644
index 00000000..b73af841
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/BoldIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M17.194 10.962A6.271 6.271 0 0012.844.248H4.3a1.25 1.25 0 000 2.5h1.013a.25.25 0 01.25.25V21a.25.25 0 01-.25.25H4.3a1.25 1.25 0 100 2.5h9.963a6.742 6.742 0 002.93-12.786zm-4.35-8.214a3.762 3.762 0 010 7.523H8.313a.25.25 0 01-.25-.25V3a.25.25 0 01.25-.25zm1.42 18.5H8.313a.25.25 0 01-.25-.25v-7.977a.25.25 0 01.25-.25h5.951a4.239 4.239 0 010 8.477z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/CodeBlockIcon.vue b/resources/scripts-v2/components/editor/icons/CodeBlockIcon.vue
new file mode 100644
index 00000000..e1a9524e
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/CodeBlockIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M9.147 21.552a1.244 1.244 0 01-.895-.378L.84 13.561a2.257 2.257 0 010-3.125l7.412-7.613a1.25 1.25 0 011.791 1.744l-6.9 7.083a.5.5 0 000 .7l6.9 7.082a1.25 1.25 0 01-.9 2.122zm5.707 0a1.25 1.25 0 01-.9-2.122l6.9-7.083a.5.5 0 000-.7l-6.9-7.082a1.25 1.25 0 011.791-1.744l7.411 7.612a2.257 2.257 0 010 3.125l-7.412 7.614a1.244 1.244 0 01-.89.38zm6.514-9.373z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/CodingIcon.vue b/resources/scripts-v2/components/editor/icons/CodingIcon.vue
new file mode 100644
index 00000000..e1a9524e
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/CodingIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M9.147 21.552a1.244 1.244 0 01-.895-.378L.84 13.561a2.257 2.257 0 010-3.125l7.412-7.613a1.25 1.25 0 011.791 1.744l-6.9 7.083a.5.5 0 000 .7l6.9 7.082a1.25 1.25 0 01-.9 2.122zm5.707 0a1.25 1.25 0 01-.9-2.122l6.9-7.083a.5.5 0 000-.7l-6.9-7.082a1.25 1.25 0 011.791-1.744l7.411 7.612a2.257 2.257 0 010 3.125l-7.412 7.614a1.244 1.244 0 01-.89.38zm6.514-9.373z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/ItalicIcon.vue b/resources/scripts-v2/components/editor/icons/ItalicIcon.vue
new file mode 100644
index 00000000..180bcaf0
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/ItalicIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M22.5.248h-7.637a1.25 1.25 0 000 2.5h1.086a.25.25 0 01.211.384L4.78 21.017a.5.5 0 01-.422.231H1.5a1.25 1.25 0 000 2.5h7.637a1.25 1.25 0 000-2.5H8.051a.25.25 0 01-.211-.384L19.22 2.98a.5.5 0 01.422-.232H22.5a1.25 1.25 0 000-2.5z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/ListIcon.vue b/resources/scripts-v2/components/editor/icons/ListIcon.vue
new file mode 100644
index 00000000..8a1af92d
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/ListIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M7.75 4.5h15a1 1 0 000-2h-15a1 1 0 000 2zm15 6.5h-15a1 1 0 100 2h15a1 1 0 000-2zm0 8.5h-15a1 1 0 000 2h15a1 1 0 000-2zM2.212 17.248a2 2 0 00-1.933 1.484.75.75 0 101.45.386.5.5 0 11.483.63.75.75 0 100 1.5.5.5 0 11-.482.635.75.75 0 10-1.445.4 2 2 0 103.589-1.648.251.251 0 010-.278 2 2 0 00-1.662-3.111zm2.038-6.5a2 2 0 00-4 0 .75.75 0 001.5 0 .5.5 0 011 0 1.031 1.031 0 01-.227.645L.414 14.029A.75.75 0 001 15.248h2.5a.75.75 0 000-1.5h-.419a.249.249 0 01-.195-.406L3.7 12.33a2.544 2.544 0 00.55-1.582zM4 5.248h-.25A.25.25 0 013.5 5V1.623A1.377 1.377 0 002.125.248H1.5a.75.75 0 000 1.5h.25A.25.25 0 012 2v3a.25.25 0 01-.25.25H1.5a.75.75 0 000 1.5H4a.75.75 0 000-1.5z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/ListUlIcon.vue b/resources/scripts-v2/components/editor/icons/ListUlIcon.vue
new file mode 100644
index 00000000..39cf6749
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/ListUlIcon.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <circle cx="2.5" cy="3.998" r="2.5"></circle>
+    <path d="M8.5 5H23a1 1 0 000-2H8.5a1 1 0 000 2z"></path>
+    <circle cx="2.5" cy="11.998" r="2.5"></circle>
+    <path d="M23 11H8.5a1 1 0 000 2H23a1 1 0 000-2z"></path>
+    <circle cx="2.5" cy="19.998" r="2.5"></circle>
+    <path d="M23 19H8.5a1 1 0 000 2H23a1 1 0 000-2z"></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/MenuCenterIcon.vue b/resources/scripts-v2/components/editor/icons/MenuCenterIcon.vue
new file mode 100644
index 00000000..0f5c6790
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/MenuCenterIcon.vue
@@ -0,0 +1,9 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M3.75 5.25h16.5a.75.75 0 1 1 0 1.5H3.75a.75.75 0 0 1 0-1.5zm4 4h8.5a.75.75 0 1 1 0 1.5h-8.5a.75.75 0 1 1 0-1.5zm-4 4h16.5a.75.75 0 1 1 0 1.5H3.75a.75.75 0 1 1 0-1.5zm4 4h8.5a.75.75 0 1 1 0 1.5h-8.5a.75.75 0 1 1 0-1.5z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/ParagraphIcon.vue b/resources/scripts-v2/components/editor/icons/ParagraphIcon.vue
new file mode 100644
index 00000000..9b418b81
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/ParagraphIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M22.5.248H7.228a6.977 6.977 0 100 13.954h2.318a.25.25 0 01.25.25V22.5a1.25 1.25 0 002.5 0V3a.25.25 0 01.25-.25h3.682a.25.25 0 01.25.25v19.5a1.25 1.25 0 002.5 0V3a.249.249 0 01.25-.25H22.5a1.25 1.25 0 000-2.5zM9.8 11.452a.25.25 0 01-.25.25H7.228a4.477 4.477 0 110-8.954h2.318A.25.25 0 019.8 3z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/QuoteIcon.vue b/resources/scripts-v2/components/editor/icons/QuoteIcon.vue
new file mode 100644
index 00000000..59a53cc6
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/QuoteIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M18.559 3.932a4.942 4.942 0 100 9.883 4.609 4.609 0 001.115-.141.25.25 0 01.276.368 6.83 6.83 0 01-5.878 3.523 1.25 1.25 0 000 2.5 9.71 9.71 0 009.428-9.95V8.873a4.947 4.947 0 00-4.941-4.941zm-12.323 0a4.942 4.942 0 000 9.883 4.6 4.6 0 001.115-.141.25.25 0 01.277.368 6.83 6.83 0 01-5.878 3.523 1.25 1.25 0 000 2.5 9.711 9.711 0 009.428-9.95V8.873a4.947 4.947 0 00-4.942-4.941z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/RedoIcon.vue b/resources/scripts-v2/components/editor/icons/RedoIcon.vue
new file mode 100644
index 00000000..37268674
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/RedoIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M22.608.161a.5.5 0 00-.545.108L19.472 2.86a.25.25 0 01-.292.045 12.537 12.537 0 00-12.966.865A12.259 12.259 0 006.1 23.632a1.25 1.25 0 001.476-2.018 9.759 9.759 0 01.091-15.809 10 10 0 019.466-1.1.25.25 0 01.084.409l-1.85 1.85a.5.5 0 00.354.853h6.7a.5.5 0 00.5-.5V.623a.5.5 0 00-.313-.462z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/StrikethroughIcon.vue b/resources/scripts-v2/components/editor/icons/StrikethroughIcon.vue
new file mode 100644
index 00000000..109c2254
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/StrikethroughIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M23.75 12.952A1.25 1.25 0 0022.5 11.7h-8.936a.492.492 0 01-.282-.09c-.722-.513-1.482-.981-2.218-1.432-2.8-1.715-4.5-2.9-4.5-4.863 0-2.235 2.207-2.569 3.523-2.569a4.54 4.54 0 013.081.764 2.662 2.662 0 01.447 1.99v.3a1.25 1.25 0 102.5 0v-.268a4.887 4.887 0 00-1.165-3.777C13.949.741 12.359.248 10.091.248c-3.658 0-6.023 1.989-6.023 5.069 0 2.773 1.892 4.512 4 5.927a.25.25 0 01-.139.458H1.5a1.25 1.25 0 000 2.5h10.977a.251.251 0 01.159.058 4.339 4.339 0 011.932 3.466c0 3.268-3.426 3.522-4.477 3.522-1.814 0-3.139-.405-3.834-1.173a3.394 3.394 0 01-.65-2.7 1.25 1.25 0 00-2.488-.246A5.76 5.76 0 004.4 21.753c1.2 1.324 3.114 2 5.688 2 4.174 0 6.977-2.42 6.977-6.022a6.059 6.059 0 00-.849-3.147.25.25 0 01.216-.377H22.5a1.25 1.25 0 001.25-1.255z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/UnderlineIcon.vue b/resources/scripts-v2/components/editor/icons/UnderlineIcon.vue
new file mode 100644
index 00000000..0879e88e
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/UnderlineIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M22.5 21.248h-21a1.25 1.25 0 000 2.5h21a1.25 1.25 0 000-2.5zM1.978 2.748h1.363a.25.25 0 01.25.25v8.523a8.409 8.409 0 0016.818 0V3a.25.25 0 01.25-.25h1.363a1.25 1.25 0 000-2.5H16.3a1.25 1.25 0 000 2.5h1.363a.25.25 0 01.25.25v8.523a5.909 5.909 0 01-11.818 0V3a.25.25 0 01.25-.25H7.7a1.25 1.25 0 100-2.5H1.978a1.25 1.25 0 000 2.5z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/UndoIcon.vue b/resources/scripts-v2/components/editor/icons/UndoIcon.vue
new file mode 100644
index 00000000..387418ca
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/UndoIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M17.786 3.77a12.542 12.542 0 00-12.965-.865.249.249 0 01-.292-.045L1.937.269A.507.507 0 001.392.16a.5.5 0 00-.308.462v6.7a.5.5 0 00.5.5h6.7a.5.5 0 00.354-.854L6.783 5.115a.253.253 0 01-.068-.228.249.249 0 01.152-.181 10 10 0 019.466 1.1 9.759 9.759 0 01.094 15.809 1.25 1.25 0 001.473 2.016 12.122 12.122 0 005.013-9.961 12.125 12.125 0 00-5.127-9.9z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/editor/icons/index.ts b/resources/scripts-v2/components/editor/icons/index.ts
new file mode 100644
index 00000000..dcce9f6d
--- /dev/null
+++ b/resources/scripts-v2/components/editor/icons/index.ts
@@ -0,0 +1,29 @@
+import UnderlineIcon from './UnderlineIcon.vue'
+import BoldIcon from './BoldIcon.vue'
+import CodingIcon from './CodingIcon.vue'
+import ItalicIcon from './ItalicIcon.vue'
+import ListIcon from './ListIcon.vue'
+import ListUlIcon from './ListUlIcon.vue'
+import ParagraphIcon from './ParagraphIcon.vue'
+import QuoteIcon from './QuoteIcon.vue'
+import StrikethroughIcon from './StrikethroughIcon.vue'
+import UndoIcon from './UndoIcon.vue'
+import RedoIcon from './RedoIcon.vue'
+import CodeBlockIcon from './CodeBlockIcon.vue'
+import MenuCenterIcon from './MenuCenterIcon.vue'
+
+export {
+  UnderlineIcon,
+  BoldIcon,
+  CodingIcon,
+  ItalicIcon,
+  ListIcon,
+  ListUlIcon,
+  ParagraphIcon,
+  QuoteIcon,
+  StrikethroughIcon,
+  UndoIcon,
+  RedoIcon,
+  CodeBlockIcon,
+  MenuCenterIcon,
+}
diff --git a/resources/scripts-v2/components/icons/AstronautIcon.vue b/resources/scripts-v2/components/icons/AstronautIcon.vue
new file mode 100644
index 00000000..ff99f617
--- /dev/null
+++ b/resources/scripts-v2/components/icons/AstronautIcon.vue
@@ -0,0 +1,125 @@
+<template>
+  <svg
+    width="125"
+    height="110"
+    viewBox="0 0 125 110"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M46.8031 84.4643C46.8031 88.8034 43.3104 92.3215 39.0026 92.3215C34.6948 92.3215 31.2021 88.8034 31.2021 84.4643C31.2021 80.1252 34.6948 76.6072 39.0026 76.6072C43.3104 76.6072 46.8031 80.1252 46.8031 84.4643Z"
+        :class="primaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M60.4536 110H64.3539V72.6785H60.4536V110Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M85.8055 76.6072H70.2045C69.1319 76.6072 68.2544 77.4911 68.2544 78.5715V82.5C68.2544 83.5804 69.1319 84.4643 70.2045 84.4643H85.8055C86.878 84.4643 87.7556 83.5804 87.7556 82.5V78.5715C87.7556 77.4911 86.878 76.6072 85.8055 76.6072ZM70.2045 82.5H85.8055V78.5715H70.2045V82.5Z"
+        :class="primaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M91.6556 1.96429C94.8811 1.96429 97.506 4.60821 97.506 7.85714V19.6429H83.8181L85.308 21.6071H99.4561V7.85714C99.4561 3.53571 95.9459 0 91.6556 0H33.152C28.8618 0 25.3516 3.53571 25.3516 7.85714V21.6071H39.3203L40.8745 19.6429H27.3017V7.85714C27.3017 4.60821 29.9265 1.96429 33.152 1.96429H91.6556Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M122.858 92.3213H117.007C115.935 92.3213 115.057 93.2052 115.057 94.2856V102.143C115.057 103.223 115.935 104.107 117.007 104.107H122.858C123.93 104.107 124.808 103.223 124.808 102.143V94.2856C124.808 93.2052 123.93 92.3213 122.858 92.3213ZM117.007 102.143H122.858V94.2856H117.007V102.143Z"
+        :class="primaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M103.356 43.2142V70.7142H21.4511V43.2142H26.1821V41.2498H19.501V72.6783H105.306V41.2498H98.3541L98.2839 43.2142H103.356Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M101.406 21.6071C104.632 21.6071 107.257 24.251 107.257 27.5V41.25H98.2257L98.0853 43.2142H109.207V27.5C109.207 23.1609 105.714 19.6428 101.406 19.6428H83.8182L85.0878 21.6071H101.406ZM40.8746 19.6428H23.4016C19.0937 19.6428 15.6011 23.1609 15.6011 27.5V43.2142H26.1961L26.3365 41.25H17.5512V27.5C17.5512 24.251 20.1761 21.6071 23.4016 21.6071H39.3204L40.8746 19.6428Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M62.4041 9.82153C45.1709 9.82153 31.2021 23.8917 31.2021 41.2501C31.2021 58.6085 45.1709 72.6787 62.4041 72.6787C79.6373 72.6787 93.606 58.6085 93.606 41.2501C93.606 23.8917 79.6373 9.82153 62.4041 9.82153ZM62.4041 11.7858C78.5335 11.7858 91.6559 25.0035 91.6559 41.2501C91.6559 57.4967 78.5335 70.7144 62.4041 70.7144C46.2746 70.7144 33.1523 57.4967 33.1523 41.2501C33.1523 25.0035 46.2746 11.7858 62.4041 11.7858Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M62.4041 19.6428C45.1709 19.6428 31.2021 23.8916 31.2021 41.25C31.2021 58.6084 45.1709 66.7857 62.4041 66.7857C79.6373 66.7857 93.606 58.6084 93.606 41.25C93.606 23.8916 79.6373 19.6428 62.4041 19.6428ZM62.4041 21.6071C82.6346 21.6071 91.6559 27.665 91.6559 41.25C91.6559 56.0096 80.7216 64.8214 62.4041 64.8214C44.0866 64.8214 33.1523 56.0096 33.1523 41.25C33.1523 27.665 42.1735 21.6071 62.4041 21.6071Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M101.406 70.7144H23.4014C10.478 70.7144 0 81.2685 0 94.2858V110H124.808V94.2858C124.808 81.2685 114.33 70.7144 101.406 70.7144ZM101.406 72.6786C113.234 72.6786 122.858 82.3724 122.858 94.2858V108.036H1.95012V94.2858C1.95012 82.3724 11.574 72.6786 23.4014 72.6786H101.406Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M33.152 33.3928H29.2518C27.0969 33.3928 25.3516 35.1509 25.3516 37.3214V45.1785C25.3516 47.3491 27.0969 49.1071 29.2518 49.1071H33.152V33.3928ZM31.2019 35.3571V47.1428H29.2518C28.1773 47.1428 27.3017 46.2609 27.3017 45.1785V37.3214C27.3017 36.2391 28.1773 35.3571 29.2518 35.3571H31.2019Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M95.556 33.3928H91.6558V49.1071H95.556C97.7109 49.1071 99.4562 47.3491 99.4562 45.1785V37.3214C99.4562 35.1509 97.7109 33.3928 95.556 33.3928ZM95.556 35.3571C96.6305 35.3571 97.5061 36.2391 97.5061 37.3214V45.1785C97.5061 46.2609 96.6305 47.1428 95.556 47.1428H93.6059V35.3571H95.556Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M94.581 15.7144C94.0447 15.7144 93.606 16.1563 93.606 16.6965V34.3751C93.606 34.9152 94.0447 35.3572 94.581 35.3572C95.1173 35.3572 95.5561 34.9152 95.5561 34.3751V16.6965C95.5561 16.1563 95.1173 15.7144 94.581 15.7144Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M38.0273 41.2499C37.4891 41.2499 37.0522 40.8099 37.0522 40.2678C37.0522 33.3142 44.1409 25.5356 53.6283 25.5356C54.1665 25.5356 54.6033 25.9756 54.6033 26.5178C54.6033 27.0599 54.1665 27.4999 53.6283 27.4999C45.2564 27.4999 39.0024 34.2414 39.0024 40.2678C39.0024 40.8099 38.5655 41.2499 38.0273 41.2499Z"
+        :class="primaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M97.5059 110H99.456V72.6785H97.5059V110Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M25.3516 110H27.3017V72.6785H25.3516V110Z"
+        :class="secondaryFillColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0">
+        <rect width="124.808" height="110" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  primaryFillColor?: string
+  secondaryFillColor?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  primaryFillColor: 'fill-primary-500',
+  secondaryFillColor: 'fill-gray-600',
+})
+</script>
diff --git a/resources/scripts-v2/components/icons/DragIcon.vue b/resources/scripts-v2/components/icons/DragIcon.vue
new file mode 100644
index 00000000..adde6f72
--- /dev/null
+++ b/resources/scripts-v2/components/icons/DragIcon.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    data-prefix="fas"
+    data-icon="grip-vertical"
+    class="svg-inline--fa fa-grip-vertical fa-w-10"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 320 512"
+    width="15"
+    height="15"
+  >
+    <path
+      fill="currentColor"
+      d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/icons/LoadingIcon.vue b/resources/scripts-v2/components/icons/LoadingIcon.vue
new file mode 100644
index 00000000..dc56ff8e
--- /dev/null
+++ b/resources/scripts-v2/components/icons/LoadingIcon.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/icons/SatelliteIcon.vue b/resources/scripts-v2/components/icons/SatelliteIcon.vue
new file mode 100644
index 00000000..2c548bf5
--- /dev/null
+++ b/resources/scripts-v2/components/icons/SatelliteIcon.vue
@@ -0,0 +1,113 @@
+<template>
+  <svg
+    width="110"
+    height="110"
+    viewBox="0 0 110 110"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.76398 22.9512L4.54883 21.7361L21.7363 4.54858L22.9515 5.76374L5.76398 22.9512Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M88.264 105.451L87.0488 104.236L104.236 87.0486L105.451 88.2637L88.264 105.451Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M29.8265 81.3887L28.6113 80.1736L38.9238 69.8611L40.139 71.0762L29.8265 81.3887Z"
+        :class="primaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M30.9375 81.6406C30.9375 83.0637 29.7825 84.2188 28.3594 84.2188C26.9362 84.2188 25.7812 83.0637 25.7812 81.6406C25.7812 80.2175 26.9362 79.0625 28.3594 79.0625C29.7825 79.0625 30.9375 80.2175 30.9375 81.6406Z"
+        :class="primaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M77.3435 61.5801C76.4635 61.5801 75.5835 61.9152 74.9132 62.5873L62.5863 74.9124C61.244 76.2548 61.244 78.4324 62.5863 79.7748L92.8123 110.001L110 92.8132L79.7738 62.5873C79.1035 61.9152 78.2235 61.5801 77.3435 61.5801ZM77.3435 63.2988C77.8024 63.2988 78.2338 63.4776 78.5587 63.8024L107.569 92.8132L92.8123 107.569L63.8015 78.5596C63.4767 78.2348 63.2979 77.8034 63.2979 77.3445C63.2979 76.8838 63.4767 76.4524 63.8015 76.1276L76.1284 63.8024C76.4532 63.4776 76.8846 63.2988 77.3435 63.2988Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.1875 0L0 17.1875L30.2259 47.4134C30.8963 48.0838 31.7763 48.4206 32.6562 48.4206C33.5363 48.4206 34.4162 48.0838 35.0866 47.4134L47.4134 35.0866C48.7558 33.7442 48.7558 31.5683 47.4134 30.2259L17.1875 0ZM17.1875 2.43031L46.1983 31.4411C46.5231 31.7659 46.7019 32.1973 46.7019 32.6562C46.7019 33.1152 46.5231 33.5466 46.1983 33.8714L33.8714 46.1983C33.5466 46.5231 33.1152 46.7019 32.6562 46.7019C32.1973 46.7019 31.7659 46.5231 31.4411 46.1983L2.43031 17.1875L17.1875 2.43031Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M60.156 28.9238C59.276 28.9238 58.396 29.259 57.7257 29.931L29.9301 57.7249C28.5878 59.0673 28.5878 61.2449 29.9301 62.5873L47.4132 80.0687C48.0835 80.7407 48.9635 81.0759 49.8435 81.0759C50.7235 81.0759 51.6035 80.7407 52.2738 80.0687L80.0695 52.2748C81.4118 50.9324 81.4118 48.7548 80.0695 47.4124L62.5863 29.931C61.916 29.259 61.036 28.9238 60.156 28.9238ZM60.156 30.6426C60.6149 30.6426 61.0463 30.8213 61.3712 31.1462L78.8543 48.6276C79.1792 48.9524 79.3579 49.3838 79.3579 49.8445C79.3579 50.3034 79.1792 50.7348 78.8543 51.0596L51.0587 78.8535C50.7338 79.1784 50.3024 79.3571 49.8435 79.3571C49.3846 79.3571 48.9532 79.1784 48.6284 78.8535L31.1453 61.3721C30.8204 61.0473 30.6417 60.6159 30.6417 60.157C30.6417 59.6963 30.8204 59.2649 31.1453 58.9401L58.9409 31.1462C59.2657 30.8213 59.6971 30.6426 60.156 30.6426Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M71.0765 40.1387L69.8613 38.9236L72.4395 36.3455L73.6546 37.5606L71.0765 40.1387Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M72.9858 24.8608C69.6291 28.2176 69.6291 33.6574 72.9858 37.0141C74.6633 38.6916 76.8633 39.5321 79.0633 39.5321C81.2616 39.5321 83.4616 38.6916 85.1391 37.0141L72.9858 24.8608ZM73.1388 27.4441L82.5558 36.8612C81.5091 37.4816 80.3111 37.8133 79.0633 37.8133C77.226 37.8133 75.5003 37.0966 74.201 35.799C72.9033 34.4996 72.1883 32.774 72.1883 30.9383C72.1883 29.6888 72.5183 28.4908 73.1388 27.4441Z"
+        :class="secondaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M86.1459 32.0051C85.9259 32.0051 85.7059 31.9209 85.5374 31.7542C85.2023 31.4173 85.2023 30.8742 85.5374 30.5373C86.3504 29.7261 86.7973 28.6467 86.7973 27.5003C86.7973 26.3522 86.3504 25.2728 85.5374 24.4615C83.9149 22.839 81.0859 22.839 79.4616 24.4615C79.1265 24.7984 78.5834 24.7984 78.2465 24.4615C77.9113 24.1264 77.9113 23.5833 78.2465 23.2464C80.5187 20.9742 84.4821 20.9742 86.7543 23.2464C87.8904 24.3825 88.516 25.8933 88.516 27.5003C88.516 29.1073 87.8904 30.6181 86.7543 31.7542C86.5859 31.9209 86.3659 32.0051 86.1459 32.0051Z"
+        :class="primaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M89.792 35.6514C89.572 35.6514 89.352 35.5672 89.1836 35.4004C88.8484 35.0636 88.8484 34.5204 89.1836 34.1836C90.9711 32.3978 91.9525 30.0259 91.9525 27.4994C91.9525 24.9745 90.9711 22.6009 89.1836 20.8151C87.3978 19.0294 85.0259 18.0462 82.4994 18.0462C79.9745 18.0462 77.6009 19.0294 75.8152 20.8151C75.48 21.1503 74.9352 21.1503 74.6 20.8151C74.2648 20.48 74.2648 19.9351 74.6 19.6C78.9553 15.2447 86.0434 15.2447 90.4005 19.6C94.7558 23.9553 94.7558 31.0434 90.4005 35.4004C90.232 35.5672 90.012 35.6514 89.792 35.6514Z"
+        :class="primaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M93.4379 39.297C93.2179 39.297 92.9979 39.2128 92.8295 39.0461C92.4944 38.7092 92.4944 38.1661 92.8295 37.8292C95.5898 35.0706 97.1092 31.4028 97.1092 27.4995C97.1092 23.5979 95.5898 19.9284 92.8295 17.1698C90.0709 14.4112 86.4031 12.8901 82.4998 12.8901C78.5983 12.8901 74.9287 14.4112 72.1701 17.1698C71.835 17.505 71.2901 17.505 70.955 17.1698C70.6198 16.8347 70.6198 16.2898 70.955 15.9547C74.0384 12.8712 78.1394 11.1714 82.4998 11.1714C86.862 11.1714 90.9612 12.8712 94.0464 15.9547C97.1298 19.0381 98.8279 23.139 98.8279 27.4995C98.8279 31.8617 97.1298 35.9609 94.0464 39.0461C93.8779 39.2128 93.6579 39.297 93.4379 39.297Z"
+        :class="primaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M39.7832 40.9981L8.8457 10.0606L10.0609 8.84546L40.9984 39.783L39.7832 40.9981Z"
+        :class="primaryFillColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M99.9395 101.154L69.002 70.2169L70.2171 69.0017L101.155 99.9392L99.9395 101.154Z"
+        :class="primaryFillColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0">
+        <rect width="110" height="110" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  primaryFillColor?: string
+  secondaryFillColor?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  primaryFillColor: 'fill-primary-500',
+  secondaryFillColor: 'fill-gray-600',
+})
+</script>
diff --git a/resources/scripts-v2/components/icons/SpinnerIcon.vue b/resources/scripts-v2/components/icons/SpinnerIcon.vue
new file mode 100644
index 00000000..f1cc9507
--- /dev/null
+++ b/resources/scripts-v2/components/icons/SpinnerIcon.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    class="animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/icons/dashboard/CustomerIcon.vue b/resources/scripts-v2/components/icons/dashboard/CustomerIcon.vue
new file mode 100644
index 00000000..9fbc832e
--- /dev/null
+++ b/resources/scripts-v2/components/icons/dashboard/CustomerIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg
+    width="50"
+    height="50"
+    viewBox="0 0 50 50"
+    :class="colorClass"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
+    <path
+      d="M28.2656 23.0547C27.3021 24.0182 26.1302 24.5 24.75 24.5C23.3698 24.5 22.1849 24.0182 21.1953 23.0547C20.2318 22.0651 19.75 20.8802 19.75 19.5C19.75 18.1198 20.2318 16.9479 21.1953 15.9844C22.1849 14.9948 23.3698 14.5 24.75 14.5C26.1302 14.5 27.3021 14.9948 28.2656 15.9844C29.2552 16.9479 29.75 18.1198 29.75 19.5C29.75 20.8802 29.2552 22.0651 28.2656 23.0547ZM28.2656 25.75C29.6979 25.75 30.9219 26.2708 31.9375 27.3125C32.9792 28.3281 33.5 29.5521 33.5 30.9844V32.625C33.5 33.1458 33.3177 33.5885 32.9531 33.9531C32.5885 34.3177 32.1458 34.5 31.625 34.5H17.875C17.3542 34.5 16.9115 34.3177 16.5469 33.9531C16.1823 33.5885 16 33.1458 16 32.625V30.9844C16 29.5521 16.5078 28.3281 17.5234 27.3125C18.5651 26.2708 19.8021 25.75 21.2344 25.75H21.8984C22.8099 26.1667 23.7604 26.375 24.75 26.375C25.7396 26.375 26.6901 26.1667 27.6016 25.75H28.2656Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  colorClass?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  colorClass: 'text-primary-500',
+})
+</script>
diff --git a/resources/scripts-v2/components/icons/dashboard/DollarIcon.vue b/resources/scripts-v2/components/icons/dashboard/DollarIcon.vue
new file mode 100644
index 00000000..f49218b1
--- /dev/null
+++ b/resources/scripts-v2/components/icons/dashboard/DollarIcon.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="50"
+    height="50"
+    viewBox="0 0 50 50"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="25" cy="25" r="25" fill="#FDE4E5" />
+    <path
+      d="M27.2031 23.6016C28.349 23.9401 29.2083 24.6562 29.7812 25.75C30.3802 26.8438 30.4714 27.9766 30.0547 29.1484C29.7422 30.0078 29.2083 30.6979 28.4531 31.2188C27.6979 31.7135 26.8516 31.974 25.9141 32V33.875C25.9141 34.0573 25.849 34.2005 25.7188 34.3047C25.6146 34.4349 25.4714 34.5 25.2891 34.5H24.0391C23.8568 34.5 23.7005 34.4349 23.5703 34.3047C23.4661 34.2005 23.4141 34.0573 23.4141 33.875V32C22.1641 32 21.0443 31.6094 20.0547 30.8281C19.8984 30.6979 19.8073 30.5417 19.7812 30.3594C19.7552 30.1771 19.8203 30.0208 19.9766 29.8906L21.3047 28.5625C21.5651 28.3281 21.8255 28.3021 22.0859 28.4844C22.4766 28.7448 22.9193 28.875 23.4141 28.875H25.9922C26.3307 28.875 26.6042 28.7708 26.8125 28.5625C27.0469 28.3281 27.1641 28.0417 27.1641 27.7031C27.1641 27.1302 26.8906 26.7656 26.3438 26.6094L22.3203 25.4375C21.4349 25.1771 20.6927 24.7083 20.0938 24.0312C19.4948 23.3542 19.1432 22.5729 19.0391 21.6875C18.9349 20.4115 19.2995 19.3177 20.1328 18.4062C20.9922 17.4688 22.0599 17 23.3359 17H23.4141V15.125C23.4141 14.9427 23.4661 14.7995 23.5703 14.6953C23.7005 14.5651 23.8568 14.5 24.0391 14.5H25.2891C25.4714 14.5 25.6146 14.5651 25.7188 14.6953C25.849 14.7995 25.9141 14.9427 25.9141 15.125V17C27.1641 17 28.2839 17.3906 29.2734 18.1719C29.4297 18.3021 29.5208 18.4583 29.5469 18.6406C29.5729 18.8229 29.5078 18.9792 29.3516 19.1094L28.0234 20.4375C27.763 20.6719 27.5026 20.6979 27.2422 20.5156C26.8516 20.2552 26.4089 20.125 25.9141 20.125H23.3359C22.9974 20.125 22.7109 20.2422 22.4766 20.4766C22.2682 20.6849 22.1641 20.9583 22.1641 21.2969C22.1641 21.5312 22.2422 21.7526 22.3984 21.9609C22.5547 22.1693 22.75 22.3125 22.9844 22.3906L27.2031 23.6016Z"
+      fill="#FB7178"
+    />
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/icons/dashboard/EstimateIcon.vue b/resources/scripts-v2/components/icons/dashboard/EstimateIcon.vue
new file mode 100644
index 00000000..fb17f0dd
--- /dev/null
+++ b/resources/scripts-v2/components/icons/dashboard/EstimateIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg
+    width="50"
+    height="50"
+    viewBox="0 0 50 50"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    :class="colorClass"
+  >
+    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
+    <path
+      d="M26.75 19.8125C26.75 20.0729 26.8411 20.2943 27.0234 20.4766C27.2057 20.6589 27.4271 20.75 27.6875 20.75H33V33.5625C33 33.8229 32.9089 34.0443 32.7266 34.2266C32.5443 34.4089 32.3229 34.5 32.0625 34.5H18.9375C18.6771 34.5 18.4557 34.4089 18.2734 34.2266C18.0911 34.0443 18 33.8229 18 33.5625V15.4375C18 15.1771 18.0911 14.9557 18.2734 14.7734C18.4557 14.5911 18.6771 14.5 18.9375 14.5H26.75V19.8125ZM33 19.2656V19.5H28V14.5H28.2344C28.4948 14.5 28.7161 14.5911 28.8984 14.7734L32.7266 18.6016C32.9089 18.7839 33 19.0052 33 19.2656Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  colorClass?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  colorClass: 'text-primary-500',
+})
+</script>
diff --git a/resources/scripts-v2/components/icons/dashboard/InvoiceIcon.vue b/resources/scripts-v2/components/icons/dashboard/InvoiceIcon.vue
new file mode 100644
index 00000000..57605800
--- /dev/null
+++ b/resources/scripts-v2/components/icons/dashboard/InvoiceIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg
+    width="50"
+    height="50"
+    viewBox="0 0 50 50"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    :class="colorClass"
+  >
+    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
+    <path
+      d="M28.25 24.5V27H20.75V24.5H28.25ZM31.7266 18.6016C31.9089 18.7839 32 19.0052 32 19.2656V19.5H27V14.5H27.2344C27.4948 14.5 27.7161 14.5911 27.8984 14.7734L31.7266 18.6016ZM25.75 19.8125C25.75 20.0729 25.8411 20.2943 26.0234 20.4766C26.2057 20.6589 26.4271 20.75 26.6875 20.75H32V33.5625C32 33.8229 31.9089 34.0443 31.7266 34.2266C31.5443 34.4089 31.3229 34.5 31.0625 34.5H17.9375C17.6771 34.5 17.4557 34.4089 17.2734 34.2266C17.0911 34.0443 17 33.8229 17 33.5625V15.4375C17 15.1771 17.0911 14.9557 17.2734 14.7734C17.4557 14.5911 17.6771 14.5 17.9375 14.5H25.75V19.8125ZM19.5 17.3125V17.9375C19.5 18.1458 19.6042 18.25 19.8125 18.25H22.9375C23.1458 18.25 23.25 18.1458 23.25 17.9375V17.3125C23.25 17.1042 23.1458 17 22.9375 17H19.8125C19.6042 17 19.5 17.1042 19.5 17.3125ZM19.5 19.8125V20.4375C19.5 20.6458 19.6042 20.75 19.8125 20.75H22.9375C23.1458 20.75 23.25 20.6458 23.25 20.4375V19.8125C23.25 19.6042 23.1458 19.5 22.9375 19.5H19.8125C19.6042 19.5 19.5 19.6042 19.5 19.8125ZM29.5 31.6875V31.0625C29.5 30.8542 29.3958 30.75 29.1875 30.75H26.0625C25.8542 30.75 25.75 30.8542 25.75 31.0625V31.6875C25.75 31.8958 25.8542 32 26.0625 32H29.1875C29.3958 32 29.5 31.8958 29.5 31.6875ZM29.5 23.875C29.5 23.6927 29.4349 23.5495 29.3047 23.4453C29.2005 23.3151 29.0573 23.25 28.875 23.25H20.125C19.9427 23.25 19.7865 23.3151 19.6562 23.4453C19.5521 23.5495 19.5 23.6927 19.5 23.875V27.625C19.5 27.8073 19.5521 27.9635 19.6562 28.0938C19.7865 28.1979 19.9427 28.25 20.125 28.25H28.875C29.0573 28.25 29.2005 28.1979 29.3047 28.0938C29.4349 27.9635 29.5 27.8073 29.5 27.625V23.875Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  colorClass?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  colorClass: 'text-primary-500',
+})
+</script>
diff --git a/resources/scripts-v2/components/icons/svg/LoginBackground.vue b/resources/scripts-v2/components/icons/svg/LoginBackground.vue
new file mode 100644
index 00000000..daae47ff
--- /dev/null
+++ b/resources/scripts-v2/components/icons/svg/LoginBackground.vue
@@ -0,0 +1,35 @@
+<template>
+  <svg
+    viewBox="0 0 1012 1023"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="none"
+    class="text-primary-500"
+  >
+    <path
+      d="M116.21 472.5C55.1239 693.5 78.5219 837.5 114.349 1023H1030.5V-1L0 -106C147.5 21.5 172.311 269.536 116.21 472.5Z"
+      fill="url(#paint0_linear)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear"
+        x1="515.25"
+        y1="-106"
+        x2="515.25"
+        y2="1023"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stop-color="var(--color-primary-500)"
+        />
+        <stop
+          offset="1"
+          stop-color="var(--color-primary-400)"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>
+
+<script setup>
+</script>
diff --git a/resources/scripts-v2/components/icons/svg/LoginBackgroundOverlay.vue b/resources/scripts-v2/components/icons/svg/LoginBackgroundOverlay.vue
new file mode 100644
index 00000000..417fb86b
--- /dev/null
+++ b/resources/scripts-v2/components/icons/svg/LoginBackgroundOverlay.vue
@@ -0,0 +1,34 @@
+<template>
+  <svg
+    width="1122"
+    height="1017"
+    viewBox="0 0 1122 1017"
+    preserveAspectRatio="none"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M226.002 466.5C164.935 687.5 188.326 831.5 224.141 1017H1140V-7L0 -109.5C142.5 -7.5 282.085 263.536 226.002 466.5Z"
+      fill="url(#paint0_linear)"
+      fill-opacity="0.1"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear"
+        x1="649.5"
+        y1="-7"
+        x2="649.5"
+        y2="1017"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stop-color="var(--color-primary-500)"
+        />
+        <stop
+          offset="1"
+          stop-color="var(--color-primary-400)"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/icons/svg/LoginBottomVector.vue b/resources/scripts-v2/components/icons/svg/LoginBottomVector.vue
new file mode 100644
index 00000000..d734938b
--- /dev/null
+++ b/resources/scripts-v2/components/icons/svg/LoginBottomVector.vue
@@ -0,0 +1,9 @@
+<template>
+  <svg viewBox="0 0 1170 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M690 4.08004C518 -9.91998 231 4.08004 -6 176.361L231 197.08L1170 219.08C1113.33 175.747 909.275 21.928 690 4.08004Z"
+      fill="white"
+      fill-opacity="0.1"
+    />
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/icons/svg/LoginPlanetCrater.vue b/resources/scripts-v2/components/icons/svg/LoginPlanetCrater.vue
new file mode 100644
index 00000000..15f24929
--- /dev/null
+++ b/resources/scripts-v2/components/icons/svg/LoginPlanetCrater.vue
@@ -0,0 +1,109 @@
+<template>
+  <svg
+    width="422"
+    height="290"
+    viewBox="0 0 422 290"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0)">
+      <path
+        opacity="0.3"
+        d="M220.111 290.223C341.676 290.223 440.223 191.676 440.223 70.1115C440.223 -51.4527 341.676 -150 220.111 -150C98.5473 -150 0 -51.4527 0 70.1115C0 191.676 98.5473 290.223 220.111 290.223Z"
+        fill="white"
+        fill-opacity="0.1"
+      />
+      <path
+        opacity="0.3"
+        d="M220.111 246.513C317.535 246.513 396.513 167.535 396.513 70.1114C396.513 -27.3124 317.535 -106.29 220.111 -106.29C122.688 -106.29 43.71 -27.3124 43.71 70.1114C43.71 167.535 122.688 246.513 220.111 246.513Z"
+        fill="white"
+        fill-opacity="0.1"
+      />
+      <path
+        d="M97.0093 35.322C96.7863 35.991 96.5633 36.66 96.5633 37.3291C94.1101 46.4725 92.7721 55.6159 92.3261 64.5364C91.88 74.5718 92.7721 84.6073 94.5562 94.1968C103.477 140.137 137.374 179.387 185.545 192.991C224.794 204.141 265.159 195.444 295.712 173.143C309.538 163.107 321.358 150.172 330.278 135.231C335.854 125.864 340.314 115.606 343.436 104.678C346.335 94.6428 347.896 84.6073 348.119 74.7949C348.788 56.954 345.666 39.3362 339.422 23.2794C325.372 -12.6253 295.043 -41.8397 255.124 -52.9902C211.637 -65.2558 167.481 -53.6593 136.036 -26.452C117.749 -10.6182 103.923 10.3448 97.0093 35.322Z"
+        fill="white"
+        fill-opacity="0.1"
+      />
+      <path
+        d="M97.0095 35.3223C96.7865 35.9913 96.5635 36.6603 96.5635 37.3294L347.896 74.7952C348.565 56.9543 345.443 39.3365 339.199 23.2797L136.036 -26.4517C117.749 -10.6179 103.923 10.3451 97.0095 35.3223Z"
+        fill="white"
+        fill-opacity="0.05"
+      />
+      <path
+        d="M92.3261 64.7598C91.88 74.7952 92.7721 84.8307 94.5562 94.4202L295.489 173.366C309.315 163.33 321.135 150.396 330.055 135.454L92.3261 64.7598Z"
+        fill="white"
+        fill-opacity="0.05"
+      />
+      <path
+        d="M153.431 11.9056C151.424 19.265 152.316 26.8473 155.661 33.0916C159.229 39.7819 165.473 45.1342 173.279 47.3643C188.443 51.6015 204.5 42.6811 208.737 27.5163C209.853 23.9482 210.076 20.157 209.629 16.5888C208.514 5.21529 200.486 -4.82018 188.889 -7.94233C173.502 -12.1795 157.668 -3.25911 153.431 11.9056Z"
+        class="fill-primary-700"
+        fill-opacity="0.8"
+      />
+      <path
+        d="M156.553 22.3869C155.438 25.9551 155.215 29.7462 155.661 33.3144C159.229 40.0047 165.473 45.357 173.279 47.5871C188.443 51.8243 204.5 42.9039 208.737 27.7391C209.852 24.171 210.075 20.3798 209.629 16.8116C206.061 10.1213 199.817 4.76908 192.011 2.53897C176.624 -1.92124 160.79 6.99919 156.553 22.3869Z"
+        class="fill-primary-500"
+        fill-opacity="0.5"
+      />
+      <path
+        d="M270.735 95.5343C267.613 100.887 266.944 106.685 268.282 112.26C269.62 118.058 273.411 123.411 278.986 126.533C289.914 132.777 303.74 128.986 309.985 118.281C311.546 115.605 312.438 112.929 312.884 110.03C314.222 101.11 309.985 91.9661 301.733 87.0599C290.806 81.0386 276.979 84.8298 270.735 95.5343Z"
+        class="fill-primary-700"
+        fill-opacity="0.8"
+      />
+      <path
+        d="M270.958 104.232C269.397 106.908 268.505 109.584 268.059 112.483C269.397 118.281 273.188 123.634 278.764 126.756C289.691 133 303.518 129.209 309.762 118.504C311.323 115.828 312.215 113.152 312.661 110.253C311.323 104.455 307.532 99.1025 301.957 95.9804C291.252 89.5131 277.426 93.3043 270.958 104.232Z"
+        class="fill-primary-500"
+        fill-opacity="0.5"
+      />
+      <path
+        d="M250.663 130.771C247.54 133.001 245.533 136.123 244.864 139.468C243.972 143.036 244.641 147.051 247.094 150.396C251.555 156.863 260.252 158.647 266.942 154.187C268.503 153.072 269.842 151.734 270.734 150.396C273.856 145.712 274.079 139.468 270.734 134.562C265.827 127.872 257.13 126.311 250.663 130.771Z"
+        class="fill-primary-700"
+        fill-opacity="0.8"
+      />
+      <path
+        d="M248.433 135.677C246.872 136.792 245.534 138.13 244.642 139.468C243.75 143.036 244.419 147.051 246.872 150.396C251.332 156.863 260.03 158.647 266.72 154.187C268.281 153.072 269.619 151.734 270.511 150.396C271.403 146.828 270.734 142.813 268.281 139.468C263.821 132.778 254.901 131.217 248.433 135.677Z"
+        class="fill-primary-500"
+        fill-opacity="0.5"
+      />
+      <path
+        d="M215.651 14.8049C214.759 18.15 215.205 21.4952 216.543 24.1713C218.104 27.0704 220.78 29.5236 224.348 30.4156C231.038 32.4227 238.175 28.4085 240.182 21.4952C240.628 19.9341 240.851 18.15 240.628 16.5889C240.182 11.4597 236.614 6.99951 231.484 5.66145C224.571 4.10037 217.435 8.11456 215.651 14.8049Z"
+        class="fill-primary-700"
+        fill-opacity="0.8"
+      />
+      <path
+        d="M216.989 19.4876C216.543 21.0487 216.32 22.8328 216.543 24.3939C218.104 27.293 220.78 29.7461 224.348 30.6382C231.039 32.6453 238.175 28.6311 240.182 21.7177C240.628 20.1567 240.851 18.3726 240.628 16.8115C239.067 13.9124 236.391 11.4593 232.823 10.5672C225.91 8.78313 218.773 12.5743 216.989 19.4876Z"
+        class="fill-primary-500"
+      />
+      <path
+        d="M122.209 124.526C121.763 125.864 121.986 127.202 122.655 128.54C123.324 129.878 124.439 130.77 126.001 131.216C128.9 132.108 131.799 130.324 132.468 127.648C132.691 126.979 132.691 126.31 132.691 125.641C132.468 123.634 130.907 121.627 128.9 121.181C126.001 120.066 123.101 121.85 122.209 124.526Z"
+        class="fill-primary-700"
+        fill-opacity="0.8"
+      />
+      <path
+        d="M122.878 126.533C122.655 127.202 122.655 127.871 122.655 128.54C123.324 129.878 124.439 130.77 126 131.216C128.899 132.108 131.798 130.324 132.468 127.648C132.691 126.979 132.691 126.31 132.691 125.641C132.021 124.303 130.906 123.411 129.345 122.965C126.446 122.073 123.547 123.634 122.878 126.533Z"
+        class="fill-primary-500"
+        fill-opacity="0.5"
+      />
+      <path
+        d="M169.487 123.188C168.149 123.411 166.811 124.08 166.142 125.195C165.25 126.31 164.804 127.648 165.027 129.209C165.473 132.108 168.149 134.116 171.048 133.67C171.717 133.67 172.386 133.224 172.832 133C174.617 131.885 175.732 129.878 175.286 127.648C175.063 124.749 172.386 122.742 169.487 123.188Z"
+        class="fill-primary-700"
+        fill-opacity="0.8"
+      />
+      <path
+        d="M167.926 124.526C167.257 124.526 166.588 124.972 166.142 125.195C165.25 126.31 164.804 127.648 165.027 129.209C165.473 132.108 168.149 134.115 171.048 133.669C171.717 133.669 172.386 133.223 172.832 133C173.724 131.885 174.17 130.547 173.947 128.986C173.501 126.087 170.825 124.08 167.926 124.526Z"
+        class="fill-primary-500"
+        fill-opacity="0.5"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0">
+        <rect
+          width="440"
+          height="440"
+          fill="white"
+          transform="translate(0 -150)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
diff --git a/resources/scripts-v2/components/notifications/NotificationItem.vue b/resources/scripts-v2/components/notifications/NotificationItem.vue
index d9eb2a79..94431e2d 100644
--- a/resources/scripts-v2/components/notifications/NotificationItem.vue
+++ b/resources/scripts-v2/components/notifications/NotificationItem.vue
@@ -127,7 +127,7 @@
 
 <script setup lang="ts">
 import { onMounted, computed, ref } from 'vue'
-import { useNotificationStore } from '@/scripts/stores/notification'
+import { useNotificationStore } from '@v2/stores/notification.store'
 
 export type NotificationType = 'success' | 'error' | 'info'
 
diff --git a/resources/scripts-v2/components/notifications/NotificationRoot.vue b/resources/scripts-v2/components/notifications/NotificationRoot.vue
index b42632e4..b91a5aa3 100644
--- a/resources/scripts-v2/components/notifications/NotificationRoot.vue
+++ b/resources/scripts-v2/components/notifications/NotificationRoot.vue
@@ -33,7 +33,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useNotificationStore } from '@/scripts/stores/notification'
+import { useNotificationStore } from '@v2/stores/notification.store'
 import NotificationItem from './NotificationItem.vue'
 import type { Notification } from './NotificationItem.vue'
 
diff --git a/resources/scripts-v2/components/table/DataTable.vue b/resources/scripts-v2/components/table/DataTable.vue
index c5554265..5c1537f2 100644
--- a/resources/scripts-v2/components/table/DataTable.vue
+++ b/resources/scripts-v2/components/table/DataTable.vue
@@ -145,7 +145,7 @@ import { computed, onMounted, watch, ref, reactive } from 'vue'
 import { get } from 'lodash'
 import TablePagination from './TablePagination.vue'
 import { ContentPlaceholder, ContentPlaceholderText } from '../layout'
-import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
+import SpinnerIcon from '@v2/components/icons/SpinnerIcon.vue'
 
 export interface ColumnDef {
   key: string
diff --git a/resources/scripts-v2/composables/use-auth.ts b/resources/scripts-v2/composables/use-auth.ts
index d108fc5f..dd6d41d1 100644
--- a/resources/scripts-v2/composables/use-auth.ts
+++ b/resources/scripts-v2/composables/use-auth.ts
@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
 import * as ls from '../utils/local-storage'
-import { LS_KEYS } from '../config/constants'
+import { LS_KEYS } from '@v2/config/constants'
 
 export interface User {
   id: number
diff --git a/resources/scripts-v2/composables/use-company.ts b/resources/scripts-v2/composables/use-company.ts
index 6aa98150..e2dce69f 100644
--- a/resources/scripts-v2/composables/use-company.ts
+++ b/resources/scripts-v2/composables/use-company.ts
@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
 import * as ls from '../utils/local-storage'
-import { LS_KEYS } from '../config/constants'
+import { LS_KEYS } from '@v2/config/constants'
 
 export interface Company {
   id: number
diff --git a/resources/scripts-v2/composables/use-dialog.ts b/resources/scripts-v2/composables/use-dialog.ts
index b8a8bcd0..8d5ceced 100644
--- a/resources/scripts-v2/composables/use-dialog.ts
+++ b/resources/scripts-v2/composables/use-dialog.ts
@@ -1,7 +1,7 @@
 import { ref, readonly } from 'vue'
 import type { DeepReadonly, Ref } from 'vue'
-import { DIALOG_VARIANT } from '../config/constants'
-import type { DialogVariant } from '../config/constants'
+import { DIALOG_VARIANT } from '@v2/config/constants'
+import type { DialogVariant } from '@v2/config/constants'
 
 export interface DialogState {
   active: boolean
diff --git a/resources/scripts-v2/composables/use-modal.ts b/resources/scripts-v2/composables/use-modal.ts
index ae9847f9..cfe09a25 100644
--- a/resources/scripts-v2/composables/use-modal.ts
+++ b/resources/scripts-v2/composables/use-modal.ts
@@ -1,6 +1,6 @@
 import { ref, computed, readonly } from 'vue'
 import type { DeepReadonly, Ref, ComputedRef } from 'vue'
-import type { ModalSize } from '../config/constants'
+import type { ModalSize } from '@v2/config/constants'
 
 export interface ModalState {
   active: boolean
diff --git a/resources/scripts-v2/composables/use-notification.ts b/resources/scripts-v2/composables/use-notification.ts
index 5a9236ec..784865f1 100644
--- a/resources/scripts-v2/composables/use-notification.ts
+++ b/resources/scripts-v2/composables/use-notification.ts
@@ -1,7 +1,7 @@
 import { ref, readonly } from 'vue'
 import type { DeepReadonly, Ref } from 'vue'
-import { NOTIFICATION_TYPE } from '../config/constants'
-import type { NotificationType } from '../config/constants'
+import { NOTIFICATION_TYPE } from '@v2/config/constants'
+import type { NotificationType } from '@v2/config/constants'
 
 export interface Notification {
   id: string
diff --git a/resources/scripts-v2/composables/use-pagination.ts b/resources/scripts-v2/composables/use-pagination.ts
index d75fa8be..9b59eb44 100644
--- a/resources/scripts-v2/composables/use-pagination.ts
+++ b/resources/scripts-v2/composables/use-pagination.ts
@@ -1,6 +1,6 @@
 import { ref, computed } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
-import { PAGINATION_DEFAULTS } from '../config/constants'
+import { PAGINATION_DEFAULTS } from '@v2/config/constants'
 
 export interface UsePaginationOptions {
   initialPage?: number
diff --git a/resources/scripts-v2/composables/use-permissions.ts b/resources/scripts-v2/composables/use-permissions.ts
index 6caa14c2..a347a1f9 100644
--- a/resources/scripts-v2/composables/use-permissions.ts
+++ b/resources/scripts-v2/composables/use-permissions.ts
@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
-import { ABILITIES } from '../config/abilities'
-import type { Ability } from '../config/abilities'
+import { ABILITIES } from '@v2/config/abilities'
+import type { Ability } from '@v2/config/abilities'
 
 export interface UserAbility {
   name: string
diff --git a/resources/scripts-v2/composables/use-popper.ts b/resources/scripts-v2/composables/use-popper.ts
new file mode 100644
index 00000000..38ce9362
--- /dev/null
+++ b/resources/scripts-v2/composables/use-popper.ts
@@ -0,0 +1,21 @@
+import { ref, onMounted, watchEffect, type Ref } from 'vue'
+import { createPopper, type Instance, type Options } from '@popperjs/core'
+
+export function usePopper(options: Partial<Options> = {}) {
+  const trigger = ref<HTMLElement | null>(null)
+  const container = ref<HTMLElement | null>(null)
+  const popper = ref<Instance | null>(null)
+
+  onMounted(() => {
+    watchEffect((onCleanup) => {
+      if (!trigger.value || !container.value) return
+
+      const instance = createPopper(trigger.value, container.value, options)
+      popper.value = instance
+
+      onCleanup(() => instance.destroy())
+    })
+  })
+
+  return [trigger, container, popper] as const
+}
diff --git a/resources/scripts-v2/composables/use-sidebar.ts b/resources/scripts-v2/composables/use-sidebar.ts
index 375d1349..e33492cc 100644
--- a/resources/scripts-v2/composables/use-sidebar.ts
+++ b/resources/scripts-v2/composables/use-sidebar.ts
@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import type { Ref } from 'vue'
 import * as ls from '../utils/local-storage'
-import { LS_KEYS } from '../config/constants'
+import { LS_KEYS } from '@v2/config/constants'
 
 export interface UseSidebarReturn {
   isCollapsed: Ref<boolean>
diff --git a/resources/scripts-v2/composables/use-theme.ts b/resources/scripts-v2/composables/use-theme.ts
index 7d303d09..7e6a94c9 100644
--- a/resources/scripts-v2/composables/use-theme.ts
+++ b/resources/scripts-v2/composables/use-theme.ts
@@ -1,7 +1,7 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import type { Ref } from 'vue'
-import { THEME, LS_KEYS } from '../config/constants'
-import type { Theme } from '../config/constants'
+import { THEME, LS_KEYS } from '@v2/config/constants'
+import type { Theme } from '@v2/config/constants'
 import * as ls from '../utils/local-storage'
 
 export interface UseThemeReturn {
diff --git a/resources/scripts-v2/features/company/customers/components/CopyInputField.vue b/resources/scripts-v2/features/company/customers/components/CopyInputField.vue
new file mode 100644
index 00000000..b1fa9ac3
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/CopyInputField.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useNotificationStore } from '@v2/stores/notification.store'
+
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+const publicUrl = ref<HTMLElement | null>(null)
+
+const props = defineProps<{
+  token: string
+}>()
+
+function selectText(element: HTMLElement): void {
+  if (window.getSelection) {
+    const range = document.createRange()
+    range.selectNode(element)
+    window.getSelection()?.removeAllRanges()
+    window.getSelection()?.addRange(range)
+  }
+}
+
+function copyUrl(): void {
+  if (publicUrl.value) {
+    selectText(publicUrl.value)
+    document.execCommand('copy')
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: t('general.copied_url_clipboard'),
+    })
+  }
+}
+</script>
+
+<template>
+  <div
+    class="relative flex px-4 py-2 rounded-lg bg-surface-muted/40 whitespace-nowrap flex-col mt-1"
+  >
+    <span
+      ref="publicUrl"
+      class="pr-10 text-sm font-medium text-heading truncate select-all select-color"
+    >
+      {{ token }}
+    </span>
+    <svg
+      v-tooltip="{ content: $t('general.copy_to_clipboard') }"
+      class="absolute right-0 h-full inset-y-0 cursor-pointer focus:outline-hidden text-primary-500"
+      width="37"
+      viewBox="0 0 37 37"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click="copyUrl"
+    >
+      <rect width="37" height="37" rx="10" fill="currentColor" />
+      <path
+        d="M16 10C15.7348 10 15.4804 10.1054 15.2929 10.2929C15.1054 10.4804 15 10.7348 15 11C15 11.2652 15.1054 11.5196 15.2929 11.7071C15.4804 11.8946 15.7348 12 16 12H18C18.2652 12 18.5196 11.8946 18.7071 11.7071C18.8946 11.5196 19 11.2652 19 11C19 10.7348 18.8946 10.4804 18.7071 10.2929C18.5196 10.1054 18.2652 10 18 10H16Z"
+        fill="white"
+      />
+      <path
+        d="M11 13C11 12.4696 11.2107 11.9609 11.5858 11.5858C11.9609 11.2107 12.4696 11 13 11C13 11.7956 13.3161 12.5587 13.8787 13.1213C14.4413 13.6839 15.2044 14 16 14H18C18.7956 14 19.5587 13.6839 20.1213 13.1213C20.6839 12.5587 21 11.7956 21 11C21.5304 11 22.0391 11.2107 22.4142 11.5858C22.7893 11.9609 23 12.4696 23 13V19H18.414L19.707 17.707C19.8892 17.5184 19.99 17.2658 19.9877 17.0036C19.9854 16.7414 19.8802 16.4906 19.6948 16.3052C19.5094 16.1198 19.2586 16.0146 18.9964 16.0123C18.7342 16.01 18.4816 16.1108 18.293 16.293L15.293 19.293C15.1055 19.4805 15.0002 19.7348 15.0002 20C15.0002 20.2652 15.1055 20.5195 15.293 20.707L18.293 23.707C18.4816 23.8892 18.7342 23.99 18.9964 23.9877C19.2586 23.9854 19.5094 23.8802 19.6948 23.6948C19.8802 23.5094 19.9854 23.2586 19.9877 22.9964C19.99 22.7342 19.8892 22.4816 19.707 22.293L18.414 21H23V24C23 24.5304 22.7893 25.0391 22.4142 25.4142C22.0391 25.7893 21.5304 26 21 26H13C12.4696 26 11.9609 25.7893 11.5858 25.4142C11.2107 25.0391 11 24.5304 11 24V13ZM23 19H25C25.2652 19 25.5196 19.1054 25.7071 19.2929C25.8946 19.4804 26 19.7348 26 20C26 20.2652 25.8946 20.5196 25.7071 20.7071C25.5196 20.8946 25.2652 21 25 21H23V19Z"
+        fill="white"
+      />
+    </svg>
+  </div>
+</template>
diff --git a/resources/scripts-v2/features/company/customers/components/CreateCustomFields.vue b/resources/scripts-v2/features/company/customers/components/CreateCustomFields.vue
new file mode 100644
index 00000000..50237f9b
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/CreateCustomFields.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import lodash from 'lodash'
+import moment from 'moment'
+import { customFieldService } from '@v2/api/services/custom-field.service'
+import SingleField from './CreateCustomFieldsSingle.vue'
+
+interface CustomFieldItem {
+  id: number
+  value: string | boolean | number | null
+  default_answer: string | boolean | number | null
+  label: string
+  options: string[] | null
+  is_required: boolean
+  placeholder: string | null
+  order: number | null
+  type: string
+  custom_field_id?: number
+  custom_field?: {
+    label: string
+    options: string[] | null
+    is_required: boolean
+    placeholder: string | null
+    order: number | null
+    type: string
+  }
+}
+
+interface StoreWithProp {
+  [key: string]: {
+    customFields: CustomFieldItem[]
+    fields: CustomFieldItem[]
+  }
+}
+
+const props = withDefaults(
+  defineProps<{
+    store: StoreWithProp
+    storeProp: string
+    isEdit?: boolean
+    type?: string | null
+    gridLayout?: string
+    isLoading?: boolean | null
+    customFieldScope: string
+  }>(),
+  {
+    isEdit: false,
+    type: null,
+    gridLayout: 'two-column',
+    isLoading: null,
+  }
+)
+
+const customFields = ref<CustomFieldItem[]>([])
+
+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 (existingIndex > -1) {
+        let value: string | boolean | number | null = field.default_answer
+
+        if (value && field.custom_field?.type === 'DateTime') {
+          value = moment(
+            String(field.default_answer),
+            'YYYY-MM-DD HH:mm:ss'
+          ).format('YYYY-MM-DD HH:mm')
+        }
+
+        props.store[props.storeProp].customFields[existingIndex] = {
+          ...field,
+          id: field.custom_field_id ?? field.id,
+          value,
+          label: field.custom_field?.label ?? '',
+          options: field.custom_field?.options ?? null,
+          is_required: field.custom_field?.is_required ?? false,
+          placeholder: field.custom_field?.placeholder ?? null,
+          order: field.custom_field?.order ?? null,
+          type: field.custom_field?.type ?? field.type,
+        }
+      }
+    })
+  }
+}
+
+async function getInitialCustomFields(): Promise<void> {
+  const res = await customFieldService.list({
+    type: props.type ?? undefined,
+    limit: 'all',
+  })
+
+  const data = (res as Record<string, unknown>).data as CustomFieldItem[]
+  data.forEach((d) => {
+    d.value = d.default_answer
+  })
+
+  props.store[props.storeProp].customFields = lodash.sortBy(
+    data,
+    (_cf: CustomFieldItem) => _cf.order
+  )
+
+  mergeExistingValues()
+}
+
+watch(
+  () => props.store[props.storeProp]?.fields,
+  () => {
+    mergeExistingValues()
+  }
+)
+</script>
+
+<template>
+  <div
+    v-if="
+      store[storeProp] &&
+      store[storeProp].customFields.length > 0 &&
+      !isLoading
+    "
+  >
+    <BaseInputGrid :layout="gridLayout">
+      <SingleField
+        v-for="(field, index) in store[storeProp].customFields"
+        :key="field.id"
+        :custom-field-scope="customFieldScope"
+        :store="store"
+        :store-prop="storeProp"
+        :index="index"
+        :field="field"
+      />
+    </BaseInputGrid>
+  </div>
+</template>
diff --git a/resources/scripts-v2/features/company/customers/components/CreateCustomFieldsSingle.vue b/resources/scripts-v2/features/company/customers/components/CreateCustomFieldsSingle.vue
new file mode 100644
index 00000000..4dfa7cd4
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/CreateCustomFieldsSingle.vue
@@ -0,0 +1,57 @@
+<template>
+  <BaseInputGroup
+    :label="field.label"
+    :required="field.is_required ? true : false"
+    :error="v$.value.$error && v$.value.$errors[0].$message"
+  >
+    <component
+      :is="getTypeComponent"
+      v-model="field.value"
+      :options="field.options"
+      :invalid="v$.value.$error"
+      :placeholder="field.placeholder"
+    />
+  </BaseInputGroup>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { helpers, requiredIf } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+
+const props = defineProps<{
+  field: Record<string, any>
+  customFieldScope: string
+  index: number
+  store: Record<string, any>
+  storeProp: string
+}>()
+
+const { t } = useI18n()
+
+const rules = {
+  value: {
+    required: helpers.withMessage(
+      t('validation.required'),
+      requiredIf(props.field.is_required)
+    ),
+  },
+}
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => props.field),
+  { $scope: props.customFieldScope }
+)
+
+const getTypeComponent = computed(() => {
+  if (props.field.type) {
+    return defineAsyncComponent(() =>
+      import(`./types/${props.field.type}Type.vue`)
+    )
+  }
+
+  return false
+})
+</script>
diff --git a/resources/scripts-v2/features/company/customers/components/CustomerChart.vue b/resources/scripts-v2/features/company/customers/components/CustomerChart.vue
new file mode 100644
index 00000000..fbadc726
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/CustomerChart.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { ref, computed, watch, reactive } from 'vue'
+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[]
+}
+
+interface YearOption {
+  label: string
+  value: string
+}
+
+const companyStore = useCompanyStore()
+const customerStore = useCustomerStore()
+const { t } = useI18n()
+const route = useRoute()
+
+const isLoading = ref<boolean>(false)
+const chartData = reactive<Partial<ChartData>>({})
+const years = reactive<YearOption[]>([
+  { label: t('dateRange.this_year'), value: 'This year' },
+  { label: t('dateRange.previous_year'), value: 'Previous year' },
+])
+const selectedYear = ref<string>('This year')
+
+const getChartExpenses = computed<number[]>(() => chartData.expenseTotals ?? [])
+const getNetProfits = computed<number[]>(() => chartData.netProfits ?? [])
+const getChartMonths = computed<string[]>(() => chartData.months ?? [])
+const getReceiptTotals = computed<number[]>(() => chartData.receiptTotals ?? [])
+const getChartInvoices = computed<number[]>(() => chartData.invoiceTotals ?? [])
+
+watch(
+  route,
+  () => {
+    if (route.params.id) {
+      loadCustomer()
+    }
+    selectedYear.value = 'This year'
+  },
+  { immediate: true }
+)
+
+async function loadCustomer(): Promise<void> {
+  isLoading.value = false
+  const response = await customerService.getStats(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)
+    }
+  }
+
+  isLoading.value = true
+}
+
+async function onChangeYear(data: string): Promise<boolean> {
+  const params: Record<string, unknown> = {
+    id: route.params.id,
+  }
+
+  if (data === 'Previous year') {
+    params.previous_year = true
+  } else {
+    params.this_year = true
+  }
+
+  const response = await customerService.getStats(
+    Number(route.params.id),
+    params
+  )
+
+  const meta = (response as Record<string, unknown>).meta as Record<string, unknown> | undefined
+  if (meta?.chartData) {
+    Object.assign(chartData, meta.chartData)
+  }
+
+  return true
+}
+</script>
+
+<template>
+  <BaseCard class="flex flex-col mt-6">
+    <ChartPlaceholder v-if="!isLoading" />
+
+    <div v-else class="grid grid-cols-12">
+      <div class="col-span-12 xl:col-span-9 xxl:col-span-10">
+        <div class="flex justify-between mt-1 mb-6">
+          <h6 class="flex items-center">
+            <BaseIcon name="ChartBarSquareIcon" class="h-5 text-primary-400" />
+            {{ $t('dashboard.monthly_chart.title') }}
+          </h6>
+
+          <div class="w-40 h-10">
+            <BaseMultiselect
+              v-model="selectedYear"
+              :options="years"
+              :allow-empty="false"
+              :show-labels="false"
+              :placeholder="$t('dashboard.select_year')"
+              :can-deselect="false"
+              @select="onChangeYear"
+            />
+          </div>
+        </div>
+
+        <LineChart
+          v-if="isLoading"
+          :invoices="getChartInvoices"
+          :expenses="getChartExpenses"
+          :receipts="getReceiptTotals"
+          :income="getNetProfits"
+          :labels="getChartMonths"
+          class="sm:w-full"
+        />
+      </div>
+
+      <div
+        class="grid col-span-12 mt-6 text-center xl:mt-0 sm:grid-cols-4 xl:text-right xl:col-span-3 xl:grid-cols-1 xxl:col-span-2"
+      >
+        <div class="px-6 py-2">
+          <span class="text-xs leading-5 lg:text-sm">
+            {{ $t('dashboard.chart_info.total_sales') }}
+          </span>
+          <br />
+          <span
+            v-if="isLoading"
+            class="block mt-1 text-xl font-semibold leading-8"
+          >
+            <BaseFormatMoney
+              :amount="chartData.salesTotal"
+              :currency="companyStore.selectedCompanyCurrency"
+            />
+          </span>
+        </div>
+
+        <div class="px-6 py-2">
+          <span class="text-xs leading-5 lg:text-sm">
+            {{ $t('dashboard.chart_info.total_receipts') }}
+          </span>
+          <br />
+          <span
+            v-if="isLoading"
+            class="block mt-1 text-xl font-semibold leading-8"
+            style="color: #00c99c"
+          >
+            <BaseFormatMoney
+              :amount="chartData.totalReceipts"
+              :currency="companyStore.selectedCompanyCurrency"
+            />
+          </span>
+        </div>
+
+        <div class="px-6 py-2">
+          <span class="text-xs leading-5 lg:text-sm">
+            {{ $t('dashboard.chart_info.total_expense') }}
+          </span>
+          <br />
+          <span
+            v-if="isLoading"
+            class="block mt-1 text-xl font-semibold leading-8"
+            style="color: #fb7178"
+          >
+            <BaseFormatMoney
+              :amount="chartData.totalExpenses"
+              :currency="companyStore.selectedCompanyCurrency"
+            />
+          </span>
+        </div>
+
+        <div class="px-6 py-2">
+          <span class="text-xs leading-5 lg:text-sm">
+            {{ $t('dashboard.chart_info.net_income') }}
+          </span>
+          <br />
+          <span
+            v-if="isLoading"
+            class="block mt-1 text-xl font-semibold leading-8"
+            style="color: #5851d8"
+          >
+            <BaseFormatMoney
+              :amount="chartData.netProfit"
+              :currency="companyStore.selectedCompanyCurrency"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <CustomerInfo />
+  </BaseCard>
+</template>
diff --git a/resources/scripts-v2/features/company/customers/components/CustomerChartPlaceholder.vue b/resources/scripts-v2/features/company/customers/components/CustomerChartPlaceholder.vue
new file mode 100644
index 00000000..29c73166
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/CustomerChartPlaceholder.vue
@@ -0,0 +1,79 @@
+<template>
+  <BaseContentPlaceholders class="grid grid-cols-12">
+    <div class="col-span-12 xl:col-span-9 xxl:col-span-10">
+      <div class="flex justify-between mt-1 mb-6">
+        <BaseContentPlaceholdersText class="h-10 w-36" :lines="1" />
+        <BaseContentPlaceholdersText class="h-10 w-40 !mt-0" :lines="1" />
+      </div>
+      <BaseContentPlaceholdersBox class="h-80 xl:h-72 sm:w-full" />
+    </div>
+
+    <div
+      class="
+        grid
+        col-span-12
+        mt-6
+        text-center
+        xl:mt-0
+        sm:grid-cols-4
+        xl:text-right xl:col-span-3 xl:grid-cols-1
+        xxl:col-span-2
+      "
+    >
+      <div
+        class="
+          flex flex-col
+          items-center
+          justify-center
+          px-6
+          py-2
+          lg:justify-end lg:items-end
+        "
+      >
+        <BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
+        <BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
+      </div>
+      <div
+        class="
+          flex flex-col
+          items-center
+          justify-center
+          px-6
+          py-2
+          lg:justify-end lg:items-end
+        "
+      >
+        <BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
+        <BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
+      </div>
+
+      <div
+        class="
+          flex flex-col
+          items-center
+          justify-center
+          px-6
+          py-2
+          lg:justify-end lg:items-end
+        "
+      >
+        <BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
+        <BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
+      </div>
+
+      <div
+        class="
+          flex flex-col
+          items-center
+          justify-center
+          px-6
+          py-2
+          lg:justify-end lg:items-end
+        "
+      >
+        <BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
+        <BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
+      </div>
+    </div>
+  </BaseContentPlaceholders>
+</template>
diff --git a/resources/scripts-v2/features/company/customers/components/CustomerInfo.vue b/resources/scripts-v2/features/company/customers/components/CustomerInfo.vue
new file mode 100644
index 00000000..5e71fbd9
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/CustomerInfo.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-line-default">
+    <!-- Basic Info -->
+    <BaseHeading>
+      {{ $t('customers.basic_info') }}
+    </BaseHeading>
+
+    <BaseDescriptionList>
+      <BaseDescriptionListItem
+        v-if="selectedViewCustomer.name"
+        :content-loading="contentLoading"
+        :label="$t('customers.display_name')"
+        :value="selectedViewCustomer?.name"
+      />
+
+      <BaseDescriptionListItem
+        v-if="selectedViewCustomer.contact_name"
+        :content-loading="contentLoading"
+        :label="$t('customers.primary_contact_name')"
+        :value="selectedViewCustomer?.contact_name"
+      />
+      <BaseDescriptionListItem
+        v-if="selectedViewCustomer.email"
+        :content-loading="contentLoading"
+        :label="$t('customers.email')"
+        :value="selectedViewCustomer?.email"
+      />
+    </BaseDescriptionList>
+
+    <BaseDescriptionList class="mt-5">
+      <BaseDescriptionListItem
+        :content-loading="contentLoading"
+        :label="$t('wizard.currency')"
+        :value="
+          selectedViewCustomer?.currency
+            ? `${selectedViewCustomer?.currency?.code} (${selectedViewCustomer?.currency?.symbol})`
+            : ''
+        "
+      />
+
+      <BaseDescriptionListItem
+        v-if="selectedViewCustomer.phone"
+        :content-loading="contentLoading"
+        :label="$t('customers.phone_number')"
+        :value="selectedViewCustomer?.phone"
+      />
+      <BaseDescriptionListItem
+        v-if="selectedViewCustomer.website"
+        :content-loading="contentLoading"
+        :label="$t('customers.website')"
+        :value="selectedViewCustomer?.website"
+      />
+    </BaseDescriptionList>
+
+    <!-- Address -->
+    <BaseHeading
+      v-if="selectedViewCustomer.billing || selectedViewCustomer.shipping"
+      class="mt-8"
+    >
+      {{ $t('customers.address') }}
+    </BaseHeading>
+
+    <BaseDescriptionList class="mt-5">
+      <BaseDescriptionListItem
+        v-if="selectedViewCustomer.billing"
+        :content-loading="contentLoading"
+        :label="$t('customers.billing_address')"
+      >
+        <BaseCustomerAddressDisplay :address="selectedViewCustomer.billing" />
+      </BaseDescriptionListItem>
+
+      <BaseDescriptionListItem
+        v-if="selectedViewCustomer.shipping"
+        :content-loading="contentLoading"
+        :label="$t('customers.shipping_address')"
+      >
+        <BaseCustomerAddressDisplay :address="selectedViewCustomer.shipping" />
+      </BaseDescriptionListItem>
+    </BaseDescriptionList>
+
+    <!-- Custom Fields -->
+    <BaseHeading v-if="customerCustomFields.length > 0" class="mt-8">
+      {{ $t('settings.custom_fields.title') }}
+    </BaseHeading>
+
+    <BaseDescriptionList class="mt-5">
+      <BaseDescriptionListItem
+        v-for="(field, index) in customerCustomFields"
+        :key="index"
+        :content-loading="contentLoading"
+        :label="field.custom_field.label"
+      >
+        <p
+          v-if="field.type === 'Switch'"
+          class="text-sm font-bold leading-5 text-heading non-italic"
+        >
+          <span v-if="field.default_answer === 1"> {{ $t('general.yes') }} </span>
+          <span v-else> {{ $t('general.no') }} </span>
+        </p>
+        <p v-else class="text-sm font-bold leading-5 text-heading non-italic">
+          {{ field.default_answer }}
+        </p>
+      </BaseDescriptionListItem>
+    </BaseDescriptionList>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useCustomerStore } from '../store'
+
+const customerStore = useCustomerStore()
+
+const selectedViewCustomer = computed(() => customerStore.selectedViewCustomer)
+
+const contentLoading = computed(() => customerStore.isFetchingViewData)
+
+const customerCustomFields = computed(() => {
+  if (selectedViewCustomer?.value?.fields) {
+    return selectedViewCustomer?.value?.fields
+  }
+  return []
+})
+</script>
diff --git a/resources/scripts-v2/features/company/customers/components/CustomerModal.vue b/resources/scripts-v2/features/company/customers/components/CustomerModal.vue
index 2d6341cc..f231a8a7 100644
--- a/resources/scripts-v2/features/company/customers/components/CustomerModal.vue
+++ b/resources/scripts-v2/features/company/customers/components/CustomerModal.vue
@@ -18,12 +18,12 @@ import { useCustomerStore } from '../store'
 import { useCompanyStore } from '../../../../stores/company.store'
 import { useGlobalStore } from '../../../../stores/global.store'
 import { useNotificationStore } from '../../../../stores/notification.store'
-import CopyInputField from '@/scripts/admin/components/CopyInputField.vue'
+import CopyInputField from '@v2/features/company/customers/components/CopyInputField.vue'
 
 // These stores are needed for auto-selecting customer after creation
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
+import { useEstimateStore } from '@v2/features/company/estimates/store'
+import { useInvoiceStore } from '@v2/features/company/invoices/store'
+import { useRecurringInvoiceStore } from '@v2/features/company/recurring-invoices/store'
 
 const recurringInvoiceStore = useRecurringInvoiceStore()
 const modalStore = useModalStore()
diff --git a/resources/scripts-v2/features/company/customers/components/CustomerViewSidebar.vue b/resources/scripts-v2/features/company/customers/components/CustomerViewSidebar.vue
new file mode 100644
index 00000000..9075ea08
--- /dev/null
+++ b/resources/scripts-v2/features/company/customers/components/CustomerViewSidebar.vue
@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import { computed, ref, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useCustomerStore } from '../store'
+import { useDebounceFn } from '@vueuse/core'
+import LoadingIcon from '@v2/components/icons/LoadingIcon.vue'
+
+interface SearchData {
+  orderBy: string | null
+  orderByField: string | null
+  searchText: string | null
+}
+
+interface CustomerListItem {
+  id: number
+  name: string
+  contact_name: string | null
+  due_amount: number | null
+  currency: Record<string, unknown> | null
+}
+
+const customerStore = useCustomerStore()
+const route = useRoute()
+const { t } = useI18n()
+
+const isFetching = ref<boolean>(false)
+
+const searchData = reactive<SearchData>({
+  orderBy: null,
+  orderByField: null,
+  searchText: null,
+})
+
+const customerList = ref<CustomerListItem[] | null>(null)
+const currentPageNumber = ref<number>(1)
+const lastPageNumber = ref<number>(1)
+const customerListSection = ref<HTMLElement | null>(null)
+
+const onSearch = useDebounceFn(async () => {
+  customerList.value = []
+  loadCustomers()
+}, 500)
+
+const getOrderBy = computed<boolean>(() => {
+  return searchData.orderBy === 'asc' || searchData.orderBy === null
+})
+
+function hasActiveUrl(id: number): boolean {
+  return Number(route.params.id) === id
+}
+
+async function loadCustomers(
+  pageNumber?: number,
+  fromScrollListener = false
+): Promise<void> {
+  if (isFetching.value) return
+
+  const params: Record<string, unknown> = {}
+
+  if (searchData.searchText) {
+    params.display_name = searchData.searchText
+  }
+  if (searchData.orderBy) {
+    params.orderBy = searchData.orderBy
+  }
+  if (searchData.orderByField) {
+    params.orderByField = searchData.orderByField
+  }
+
+  isFetching.value = true
+  const response = await customerStore.fetchCustomers({
+    page: pageNumber ?? 1,
+    ...params,
+    limit: 15,
+  })
+  isFetching.value = false
+
+  if (!customerList.value) customerList.value = []
+  customerList.value = [...customerList.value, ...response.data]
+
+  currentPageNumber.value = pageNumber ?? 1
+  lastPageNumber.value = response.meta.last_page
+
+  const customerFound = customerList.value.find(
+    (cust) => cust.id === Number(route.params.id)
+  )
+
+  if (
+    !fromScrollListener &&
+    !customerFound &&
+    currentPageNumber.value < lastPageNumber.value &&
+    Object.keys(params).length === 0
+  ) {
+    loadCustomers(++currentPageNumber.value)
+  }
+
+  if (customerFound) {
+    setTimeout(() => {
+      if (!fromScrollListener) {
+        scrollToCustomer()
+      }
+    }, 500)
+  }
+}
+
+function scrollToCustomer(): void {
+  const el = document.getElementById(`customer-${route.params.id}`)
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth' })
+    el.classList.add('shake')
+    addScrollListener()
+  }
+}
+
+function addScrollListener(): void {
+  customerListSection.value?.addEventListener('scroll', (ev: Event) => {
+    const target = ev.target as HTMLElement
+    if (
+      target.scrollTop > 0 &&
+      target.scrollTop + target.clientHeight > target.scrollHeight - 200
+    ) {
+      if (currentPageNumber.value < lastPageNumber.value) {
+        loadCustomers(++currentPageNumber.value, true)
+      }
+    }
+  })
+}
+
+function sortData(): void {
+  if (searchData.orderBy === 'asc') {
+    searchData.orderBy = 'desc'
+  } else {
+    searchData.orderBy = 'asc'
+  }
+  onSearch()
+}
+
+loadCustomers()
+</script>
+
+<template>
+  <div
+    class="fixed top-0 left-0 hidden h-full pt-16 pb-[6.6rem] ml-56 bg-surface xl:ml-64 w-88 xl:block"
+  >
+    <div
+      class="flex items-center justify-between px-4 pt-8 pb-2 border border-line-default border-solid height-full"
+    >
+      <BaseInput
+        v-model="searchData.searchText"
+        :placeholder="$t('general.search')"
+        container-class="mb-6"
+        type="text"
+        variant="gray"
+        @input="onSearch()"
+      >
+        <BaseIcon name="MagnifyingGlassIcon" class="text-muted" />
+      </BaseInput>
+
+      <div class="flex mb-6 ml-3" role="group" aria-label="First group">
+        <BaseDropdown
+          :close-on-select="false"
+          position="bottom-start"
+          width-class="w-40"
+          position-class="left-0"
+        >
+          <template #activator>
+            <BaseButton variant="gray">
+              <BaseIcon name="FunnelIcon" />
+            </BaseButton>
+          </template>
+
+          <div
+            class="px-4 py-3 pb-2 mb-2 text-sm border-b border-line-default border-solid"
+          >
+            {{ $t('general.sort_by') }}
+          </div>
+
+          <div class="px-2">
+            <BaseDropdownItem
+              class="flex px-1 py-2 mt-1 cursor-pointer hover:rounded-md"
+            >
+              <BaseInputGroup class="pt-2 -mt-4">
+                <BaseRadio
+                  id="filter_create_date"
+                  v-model="searchData.orderByField"
+                  :label="$t('customers.create_date')"
+                  size="sm"
+                  name="filter"
+                  value="invoices.created_at"
+                  @update:model-value="onSearch"
+                />
+              </BaseInputGroup>
+            </BaseDropdownItem>
+          </div>
+
+          <div class="px-2">
+            <BaseDropdownItem
+              class="flex px-1 cursor-pointer hover:rounded-md"
+            >
+              <BaseInputGroup class="pt-2 -mt-4">
+                <BaseRadio
+                  id="filter_display_name"
+                  v-model="searchData.orderByField"
+                  :label="$t('customers.display_name')"
+                  size="sm"
+                  name="filter"
+                  value="name"
+                  @update:model-value="onSearch"
+                />
+              </BaseInputGroup>
+            </BaseDropdownItem>
+          </div>
+        </BaseDropdown>
+
+        <BaseButton class="ml-1" size="md" variant="gray" @click="sortData">
+          <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" />
+          <BaseIcon v-else name="SortDescendingIcon" />
+        </BaseButton>
+      </div>
+    </div>
+
+    <div
+      ref="customerListSection"
+      class="h-full overflow-y-scroll border-l border-line-default border-solid sidebar base-scroll"
+    >
+      <div v-for="(customer, index) in customerList" :key="index">
+        <router-link
+          v-if="customer"
+          :id="'customer-' + customer.id"
+          :to="`/admin/customers/${customer.id}/view`"
+          :class="[
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
+            {
+              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
+                hasActiveUrl(customer.id),
+            },
+          ]"
+          style="border-top: 1px solid rgba(185, 193, 209, 0.41)"
+        >
+          <div>
+            <BaseText
+              :text="customer.name"
+              class="pr-2 text-sm not-italic font-normal leading-5 text-heading capitalize truncate"
+            />
+
+            <BaseText
+              v-if="customer.contact_name"
+              :text="customer.contact_name"
+              class="mt-1 text-xs not-italic font-medium leading-5 text-body"
+            />
+          </div>
+          <div class="flex-1 font-bold text-right whitespace-nowrap">
+            <BaseFormatMoney
+              :amount="customer.due_amount !== null ? customer.due_amount : 0"
+              :currency="customer.currency"
+            />
+          </div>
+        </router-link>
+      </div>
+      <div v-if="isFetching" class="flex justify-center p-4 items-center">
+        <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
+      </div>
+      <p
+        v-if="!customerList?.length && !isFetching"
+        class="flex justify-center px-4 mt-5 text-sm text-body"
+      >
+        {{ $t('customers.no_matching_customers') }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/resources/scripts-v2/features/company/customers/views/CustomerCreateView.vue b/resources/scripts-v2/features/company/customers/views/CustomerCreateView.vue
index e759a5ad..400f2851 100644
--- a/resources/scripts-v2/features/company/customers/views/CustomerCreateView.vue
+++ b/resources/scripts-v2/features/company/customers/views/CustomerCreateView.vue
@@ -16,14 +16,14 @@ import useVuelidate from '@vuelidate/core'
 import { useCustomerStore } from '../store'
 import { useGlobalStore } from '../../../../stores/global.store'
 import { useCompanyStore } from '../../../../stores/company.store'
-import CustomerCustomFields from '@/scripts/admin/components/custom-fields/CreateCustomFields.vue'
-import CopyInputField from '@/scripts/admin/components/CopyInputField.vue'
+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 { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
+import { customFieldService } from '@v2/api/services/custom-field.service'
 
 const customerStore = useCustomerStore()
-const customFieldStore = useCustomFieldStore()
+// Custom fields fetched via service
 const globalStore = useGlobalStore()
 const companyStore = useCompanyStore()
 
diff --git a/resources/scripts-v2/features/company/customers/views/CustomerDetailView.vue b/resources/scripts-v2/features/company/customers/views/CustomerDetailView.vue
index 67c5399d..4fa1a9a6 100644
--- a/resources/scripts-v2/features/company/customers/views/CustomerDetailView.vue
+++ b/resources/scripts-v2/features/company/customers/views/CustomerDetailView.vue
@@ -5,8 +5,8 @@ import { useI18n } from 'vue-i18n'
 import { useCustomerStore } from '../store'
 import { useUserStore } from '../../../../stores/user.store'
 import CustomerDropdown from '../components/CustomerDropdown.vue'
-import CustomerViewSidebar from '@/scripts/admin/views/customers/partials/CustomerViewSidebar.vue'
-import CustomerChart from '@/scripts/admin/views/customers/partials/CustomerChart.vue'
+import CustomerViewSidebar from '@v2/features/company/customers/components/CustomerViewSidebar.vue'
+import CustomerChart from '@v2/features/company/customers/components/CustomerChart.vue'
 
 const ABILITIES = {
   EDIT_CUSTOMER: 'edit-customer',
diff --git a/resources/scripts-v2/features/company/customers/views/CustomerIndexView.vue b/resources/scripts-v2/features/company/customers/views/CustomerIndexView.vue
index 65f118f9..6d65c2e8 100644
--- a/resources/scripts-v2/features/company/customers/views/CustomerIndexView.vue
+++ b/resources/scripts-v2/features/company/customers/views/CustomerIndexView.vue
@@ -7,7 +7,7 @@ import { useDialogStore } from '../../../../stores/dialog.store'
 import { useCompanyStore } from '../../../../stores/company.store'
 import { useUserStore } from '../../../../stores/user.store'
 import CustomerDropdown from '../components/CustomerDropdown.vue'
-import AstronautIcon from '@/scripts/components/icons/empty/AstronautIcon.vue'
+import AstronautIcon from '@v2/components/icons/AstronautIcon.vue'
 
 interface TableColumn {
   key: string
diff --git a/resources/scripts-v2/features/company/dashboard/components/DashboardChart.vue b/resources/scripts-v2/features/company/dashboard/components/DashboardChart.vue
index 0258585f..86dce871 100644
--- a/resources/scripts-v2/features/company/dashboard/components/DashboardChart.vue
+++ b/resources/scripts-v2/features/company/dashboard/components/DashboardChart.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { useDashboardStore } from '../store'
 import { useCompanyStore } from '../../../../stores/company.store'
 import { useUserStore } from '../../../../stores/user.store'
-import LineChart from '@/scripts/admin/components/charts/LineChart.vue'
+import LineChart from '@v2/components/charts/LineChart.vue'
 import type { DashboardParams } from '../../../../api/services/dashboard.service'
 
 interface YearOption {
diff --git a/resources/scripts-v2/features/company/dashboard/components/DashboardStats.vue b/resources/scripts-v2/features/company/dashboard/components/DashboardStats.vue
index e06dab6e..eb9f84f7 100644
--- a/resources/scripts-v2/features/company/dashboard/components/DashboardStats.vue
+++ b/resources/scripts-v2/features/company/dashboard/components/DashboardStats.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import DollarIcon from '@/scripts/components/icons/dashboard/DollarIcon.vue'
-import CustomerIcon from '@/scripts/components/icons/dashboard/CustomerIcon.vue'
-import InvoiceIcon from '@/scripts/components/icons/dashboard/InvoiceIcon.vue'
-import EstimateIcon from '@/scripts/components/icons/dashboard/EstimateIcon.vue'
+import DollarIcon from '@v2/components/icons/dashboard/DollarIcon.vue'
+import CustomerIcon from '@v2/components/icons/dashboard/CustomerIcon.vue'
+import InvoiceIcon from '@v2/components/icons/dashboard/InvoiceIcon.vue'
+import EstimateIcon from '@v2/components/icons/dashboard/EstimateIcon.vue'
 import DashboardStatsItem from './DashboardStatsItem.vue'
 
 import { useDashboardStore } from '../store'
diff --git a/resources/scripts-v2/features/company/dashboard/components/DashboardTable.vue b/resources/scripts-v2/features/company/dashboard/components/DashboardTable.vue
index c58355eb..51a61d60 100644
--- a/resources/scripts-v2/features/company/dashboard/components/DashboardTable.vue
+++ b/resources/scripts-v2/features/company/dashboard/components/DashboardTable.vue
@@ -3,8 +3,8 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useDashboardStore } from '../store'
 import { useUserStore } from '../../../../stores/user.store'
-import InvoiceDropdown from '@/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue'
-import EstimateDropdown from '@/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue'
+import InvoiceDropdown from '@v2/features/company/invoices/components/InvoiceDropdown.vue'
+import EstimateDropdown from '@v2/features/company/estimates/components/EstimateDropdown.vue'
 
 interface TableColumn {
   key: string
diff --git a/resources/scripts-v2/features/company/estimates/views/EstimateDetailView.vue b/resources/scripts-v2/features/company/estimates/views/EstimateDetailView.vue
index a72f2e79..5734d651 100644
--- a/resources/scripts-v2/features/company/estimates/views/EstimateDetailView.vue
+++ b/resources/scripts-v2/features/company/estimates/views/EstimateDetailView.vue
@@ -206,7 +206,7 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useEstimateStore } from '../store'
 import EstimateDropdown from '../components/EstimateDropdown.vue'
-import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
+import LoadingIcon from '@v2/components/icons/LoadingIcon.vue'
 import type { Estimate } from '../../../../types/domain/estimate'
 
 interface Props {
diff --git a/resources/scripts-v2/features/company/invoices/views/InvoiceDetailView.vue b/resources/scripts-v2/features/company/invoices/views/InvoiceDetailView.vue
index ab224885..42f90539 100644
--- a/resources/scripts-v2/features/company/invoices/views/InvoiceDetailView.vue
+++ b/resources/scripts-v2/features/company/invoices/views/InvoiceDetailView.vue
@@ -212,7 +212,7 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useInvoiceStore } from '../store'
 import InvoiceDropdown from '../components/InvoiceDropdown.vue'
-import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
+import LoadingIcon from '@v2/components/icons/LoadingIcon.vue'
 import type { Invoice } from '../../../../types/domain/invoice'
 
 interface Props {
diff --git a/resources/scripts-v2/features/company/items/components/ItemModal.vue b/resources/scripts-v2/features/company/items/components/ItemModal.vue
index 48740aea..0abd8fd4 100644
--- a/resources/scripts-v2/features/company/items/components/ItemModal.vue
+++ b/resources/scripts-v2/features/company/items/components/ItemModal.vue
@@ -13,7 +13,7 @@ import { useCompanyStore } from '../../../../stores/company.store'
 import { useItemStore } from '../store'
 
 // Tax type store - imported from original location
-import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
+import { taxTypeService } from '@v2/api/services/tax-type.service'
 
 interface TaxOption {
   id: number
@@ -33,7 +33,7 @@ const emit = defineEmits<Emits>()
 const modalStore = useModalStore()
 const itemStore = useItemStore()
 const companyStore = useCompanyStore()
-const taxTypeStore = useTaxTypeStore()
+// Tax types fetched via service
 
 const { t } = useI18n()
 const isLoading = ref<boolean>(false)
diff --git a/resources/scripts-v2/features/company/items/views/ItemCreateView.vue b/resources/scripts-v2/features/company/items/views/ItemCreateView.vue
index d577c287..01103980 100644
--- a/resources/scripts-v2/features/company/items/views/ItemCreateView.vue
+++ b/resources/scripts-v2/features/company/items/views/ItemCreateView.vue
@@ -13,10 +13,10 @@ import { useItemStore } from '../store'
 import { useCompanyStore } from '../../../../stores/company.store'
 import { useModalStore } from '../../../../stores/modal.store'
 import { useUserStore } from '../../../../stores/user.store'
-import ItemUnitModal from '@/scripts/admin/components/modal-components/ItemUnitModal.vue'
+import ItemUnitModal from '@v2/features/company/settings/components/ItemUnitModal.vue'
 
 // Tax type store - imported from original location
-import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
+import { taxTypeService } from '@v2/api/services/tax-type.service'
 
 interface TaxOption {
   id: number
@@ -33,7 +33,7 @@ const ABILITIES = {
 } as const
 
 const itemStore = useItemStore()
-const taxTypeStore = useTaxTypeStore()
+// Tax types fetched via service
 const modalStore = useModalStore()
 const companyStore = useCompanyStore()
 const userStore = useUserStore()
diff --git a/resources/scripts-v2/features/company/items/views/ItemIndexView.vue b/resources/scripts-v2/features/company/items/views/ItemIndexView.vue
index 873cf477..ea257cd4 100644
--- a/resources/scripts-v2/features/company/items/views/ItemIndexView.vue
+++ b/resources/scripts-v2/features/company/items/views/ItemIndexView.vue
@@ -7,7 +7,7 @@ import { useDialogStore } from '../../../../stores/dialog.store'
 import { useCompanyStore } from '../../../../stores/company.store'
 import { useUserStore } from '../../../../stores/user.store'
 import ItemDropdown from '../components/ItemDropdown.vue'
-import SatelliteIcon from '@/scripts/components/icons/empty/SatelliteIcon.vue'
+import SatelliteIcon from '@v2/components/icons/SatelliteIcon.vue'
 
 interface TableColumn {
   key: string
diff --git a/resources/scripts-v2/features/company/members/views/MemberIndexView.vue b/resources/scripts-v2/features/company/members/views/MemberIndexView.vue
index 2fa441d1..5f25d644 100644
--- a/resources/scripts-v2/features/company/members/views/MemberIndexView.vue
+++ b/resources/scripts-v2/features/company/members/views/MemberIndexView.vue
@@ -8,7 +8,7 @@ import { useUserStore } from '../../../../stores/user.store'
 import { useNotificationStore } from '../../../../stores/notification.store'
 import MemberDropdown from '../components/MemberDropdown.vue'
 import InviteMemberModal from '../components/InviteMemberModal.vue'
-import AstronautIcon from '@/scripts/components/icons/empty/AstronautIcon.vue'
+import AstronautIcon from '@v2/components/icons/AstronautIcon.vue'
 
 interface TableColumn {
   key: string
diff --git a/resources/scripts-v2/features/company/payments/views/PaymentDetailView.vue b/resources/scripts-v2/features/company/payments/views/PaymentDetailView.vue
index a448d805..b9626830 100644
--- a/resources/scripts-v2/features/company/payments/views/PaymentDetailView.vue
+++ b/resources/scripts-v2/features/company/payments/views/PaymentDetailView.vue
@@ -170,7 +170,7 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { usePaymentStore } from '../store'
 import PaymentDropdown from '../components/PaymentDropdown.vue'
-import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
+import LoadingIcon from '@v2/components/icons/LoadingIcon.vue'
 import type { Payment } from '../../../../types/domain/payment'
 
 interface Props {
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 9faa73fa..bbd041b2 100644
--- a/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceDetailView.vue
+++ b/resources/scripts-v2/features/company/recurring-invoices/views/RecurringInvoiceDetailView.vue
@@ -91,7 +91,7 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useRecurringInvoiceStore } from '../store'
 import RecurringInvoiceDropdown from '../components/RecurringInvoiceDropdown.vue'
-import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
+import LoadingIcon from '@v2/components/icons/LoadingIcon.vue'
 
 interface Props {
   canEdit?: boolean
diff --git a/resources/scripts-v2/features/company/settings/components/BasicMailDriver.vue b/resources/scripts-v2/features/company/settings/components/BasicMailDriver.vue
new file mode 100644
index 00000000..b396e790
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/BasicMailDriver.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { onMounted, computed, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, email, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+
+interface BasicMailConfig {
+  mail_driver: string
+  from_mail: string
+  from_name: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    configData?: Record<string, unknown>
+    isSaving?: boolean
+    isFetchingInitialData?: boolean
+    mailDrivers?: string[]
+  }>(),
+  {
+    configData: () => ({}),
+    isSaving: false,
+    isFetchingInitialData: false,
+    mailDrivers: () => [],
+  }
+)
+
+const emit = defineEmits<{
+  'submit-data': [config: BasicMailConfig]
+  'on-change-driver': [driver: string]
+}>()
+
+const { t } = useI18n()
+
+const basicMailConfig = reactive<BasicMailConfig>({
+  mail_driver: 'sendmail',
+  from_mail: '',
+  from_name: '',
+})
+
+const rules = computed(() => ({
+  mail_driver: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  from_mail: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  from_name: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, basicMailConfig)
+
+onMounted(() => {
+  for (const key in basicMailConfig) {
+    if (Object.prototype.hasOwnProperty.call(props.configData, key)) {
+      ;(basicMailConfig as Record<string, unknown>)[key] = props.configData[key]
+    }
+  }
+})
+
+async function saveEmailConfig(): Promise<void> {
+  v$.value.$touch()
+  if (!v$.value.$invalid) {
+    emit('submit-data', { ...basicMailConfig })
+  }
+}
+
+function onChangeDriver(): void {
+  v$.value.mail_driver.$touch()
+  emit('on-change-driver', basicMailConfig.mail_driver)
+}
+</script>
+
+<template>
+  <form @submit.prevent="saveEmailConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.mail.driver')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_driver.$error && v$.mail_driver.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model="basicMailConfig.mail_driver"
+          :content-loading="isFetchingInitialData"
+          :options="mailDrivers"
+          :can-deselect="false"
+          :invalid="v$.mail_driver.$error"
+          @update:model-value="onChangeDriver"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_mail')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.from_mail.$error && v$.from_mail.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="basicMailConfig.from_mail"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="from_mail"
+          :invalid="v$.from_mail.$error"
+          @input="v$.from_mail.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_name')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.from_name.$error && v$.from_name.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="basicMailConfig.from_name"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="name"
+          :invalid="v$.from_name.$error"
+          @input="v$.from_name.$touch()"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+    <div class="flex mt-8">
+      <BaseButton
+        :content-loading="isFetchingInitialData"
+        :disabled="isSaving"
+        :loading="isSaving"
+        variant="primary"
+        type="submit"
+      >
+        <template #left="slotProps">
+          <BaseIcon
+            v-if="!isSaving"
+            :class="slotProps.class"
+            name="ArrowDownOnSquareIcon"
+          />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+      <slot />
+    </div>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/CategoryModal.vue b/resources/scripts-v2/features/company/settings/components/CategoryModal.vue
new file mode 100644
index 00000000..b74a5797
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/CategoryModal.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+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 { expenseService } from '@v2/api/services/expense.service'
+
+interface CategoryForm {
+  id: number | null
+  name: string
+  description: string
+}
+
+const modalStore = useModalStore()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+const isEdit = ref<boolean>(false)
+
+const currentCategory = ref<CategoryForm>({
+  id: null,
+  name: '',
+  description: '',
+})
+
+const modalActive = computed<boolean>(
+  () => modalStore.active && modalStore.componentName === 'CategoryModal'
+)
+
+const rules = computed(() => ({
+  name: {
+    required: helpers.withMessage(t('validation.required'), required),
+    minLength: helpers.withMessage(
+      t('validation.name_min_length', { count: 3 }),
+      minLength(3)
+    ),
+  },
+  description: {
+    maxLength: helpers.withMessage(
+      t('validation.description_maxlength', { count: 255 }),
+      maxLength(255)
+    ),
+  },
+}))
+
+const v$ = useVuelidate(rules, currentCategory)
+
+async function setInitialData(): Promise<void> {
+  if (modalStore.data && typeof modalStore.data === 'number') {
+    isEdit.value = true
+    const response = await expenseService.getCategory(modalStore.data)
+    if (response.data) {
+      currentCategory.value = {
+        id: response.data.id,
+        name: response.data.name,
+        description: response.data.description ?? '',
+      }
+    }
+  } else {
+    isEdit.value = false
+    resetForm()
+  }
+}
+
+async function submitCategoryData(): Promise<void> {
+  v$.value.$touch()
+  if (v$.value.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+
+  try {
+    if (isEdit.value && currentCategory.value.id) {
+      await expenseService.updateCategory(currentCategory.value.id, {
+        name: currentCategory.value.name,
+        description: currentCategory.value.description || null,
+      })
+    } else {
+      await expenseService.createCategory({
+        name: currentCategory.value.name,
+        description: currentCategory.value.description || null,
+      })
+    }
+
+    isSaving.value = false
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+    closeCategoryModal()
+  } catch {
+    isSaving.value = false
+  }
+}
+
+function resetForm(): void {
+  currentCategory.value = {
+    id: null,
+    name: '',
+    description: '',
+  }
+}
+
+function closeCategoryModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    resetForm()
+    v$.value.$reset()
+  }, 300)
+}
+</script>
+
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closeCategoryModal"
+    @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="closeCategoryModal"
+        />
+      </div>
+    </template>
+
+    <form action="" @submit.prevent="submitCategoryData">
+      <div class="p-8 sm:p-6">
+        <BaseInputGrid layout="one-column">
+          <BaseInputGroup
+            :label="$t('expenses.category')"
+            :error="v$.name.$error && v$.name.$errors[0].$message"
+            required
+          >
+            <BaseInput
+              v-model="currentCategory.name"
+              :invalid="v$.name.$error"
+              type="text"
+              @input="v$.name.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('expenses.description')"
+            :error="
+              v$.description.$error && v$.description.$errors[0].$message
+            "
+          >
+            <BaseTextarea
+              v-model="currentCategory.description"
+              rows="4"
+              cols="50"
+              @input="v$.description.$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 text-sm"
+          @click="closeCategoryModal"
+        >
+          {{ $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>
+          {{ isEdit ? $t('general.update') : $t('general.save') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/CustomFieldDropdown.vue b/resources/scripts-v2/features/company/settings/components/CustomFieldDropdown.vue
new file mode 100644
index 00000000..c4276002
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/CustomFieldDropdown.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useDialogStore } from '@v2/stores/dialog.store'
+import { useUserStore } from '@v2/stores/user.store'
+import { useModalStore } from '@v2/stores/modal.store'
+import { customFieldService } from '@v2/api/services/custom-field.service'
+
+const ABILITIES = {
+  EDIT_CUSTOM_FIELDS: 'edit-custom-field',
+  DELETE_CUSTOM_FIELDS: 'delete-custom-field',
+} as const
+
+interface CustomFieldRow {
+  id: number
+  name: string
+  [key: string]: unknown
+}
+
+const props = defineProps<{
+  row: CustomFieldRow
+  table?: { refresh: () => void } | null
+  loadData?: (() => void) | null
+}>()
+
+const dialogStore = useDialogStore()
+const { t } = useI18n()
+const userStore = useUserStore()
+const modalStore = useModalStore()
+
+async function editCustomField(id: number): Promise<void> {
+  modalStore.openModal({
+    title: t('settings.custom_fields.edit_custom_field'),
+    componentName: 'CustomFieldModal',
+    size: 'sm',
+    data: id,
+    refreshData: props.loadData ?? undefined,
+  })
+}
+
+async function removeCustomField(id: number): Promise<void> {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('settings.custom_fields.custom_field_confirm_delete'),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        await customFieldService.delete(id)
+        props.loadData?.()
+      }
+    })
+}
+</script>
+
+<template>
+  <BaseDropdown>
+    <template #activator>
+      <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
+    </template>
+
+    <BaseDropdownItem
+      v-if="userStore.hasAbilities(ABILITIES.EDIT_CUSTOM_FIELDS)"
+      @click="editCustomField(row.id)"
+    >
+      <BaseIcon
+        name="PencilIcon"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+      />
+      {{ $t('general.edit') }}
+    </BaseDropdownItem>
+
+    <BaseDropdownItem
+      v-if="userStore.hasAbilities(ABILITIES.DELETE_CUSTOM_FIELDS)"
+      @click="removeCustomField(row.id)"
+    >
+      <BaseIcon
+        name="TrashIcon"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+      />
+      {{ $t('general.delete') }}
+    </BaseDropdownItem>
+  </BaseDropdown>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/CustomFieldModal.vue b/resources/scripts-v2/features/company/settings/components/CustomFieldModal.vue
new file mode 100644
index 00000000..82ef5962
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/CustomFieldModal.vue
@@ -0,0 +1,445 @@
+<script setup lang="ts">
+import { reactive, ref, computed, defineAsyncComponent } from 'vue'
+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 { customFieldService } from '@v2/api/services/custom-field.service'
+import type { CreateCustomFieldPayload } from '@v2/api/services/custom-field.service'
+
+interface FieldOption {
+  name: string
+}
+
+interface DataType {
+  label: string
+  value: string
+}
+
+interface CustomFieldForm {
+  id: number | null
+  name: string
+  label: string
+  model_type: string
+  type: string
+  placeholder: string | null
+  is_required: number
+  options: FieldOption[]
+  order: number | null
+  default_answer: string | boolean | number | null
+  dateTimeValue: string | null
+  in_use: boolean
+}
+
+const modalStore = useModalStore()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+const isEdit = ref<boolean>(false)
+
+const currentCustomField = ref<CustomFieldForm>({
+  id: null,
+  name: '',
+  label: '',
+  model_type: 'Customer',
+  type: 'Input',
+  placeholder: null,
+  is_required: 0,
+  options: [],
+  order: null,
+  default_answer: null,
+  dateTimeValue: null,
+  in_use: false,
+})
+
+const modelTypes = reactive([
+  { label: t('settings.custom_fields.model_type.customer'), value: 'Customer' },
+  { label: t('settings.custom_fields.model_type.invoice'), value: 'Invoice' },
+  { label: t('settings.custom_fields.model_type.estimate'), value: 'Estimate' },
+  { label: t('settings.custom_fields.model_type.expense'), value: 'Expense' },
+  { label: t('settings.custom_fields.model_type.payment'), value: 'Payment' },
+])
+
+const dataTypes = reactive<DataType[]>([
+  { label: 'Text', value: 'Input' },
+  { label: 'Textarea', value: 'TextArea' },
+  { label: 'Phone', value: 'Phone' },
+  { label: 'URL', value: 'Url' },
+  { label: 'Number', value: 'Number' },
+  { label: 'Select Field', value: 'Dropdown' },
+  { label: 'Switch Toggle', value: 'Switch' },
+  { label: 'Date', value: 'Date' },
+  { label: 'Time', value: 'Time' },
+  { label: 'Date & Time', value: 'DateTime' },
+])
+
+const selectedType = ref<DataType>(dataTypes[0])
+
+const modalActive = computed<boolean>(
+  () => modalStore.active && modalStore.componentName === 'CustomFieldModal'
+)
+
+const isSwitchTypeSelected = computed<boolean>(
+  () => selectedType.value?.label === 'Switch Toggle'
+)
+
+const isDropdownSelected = computed<boolean>(
+  () => selectedType.value?.label === 'Select Field'
+)
+
+const defaultValueComponent = computed(() => {
+  if (currentCustomField.value.type) {
+    return defineAsyncComponent(
+      () =>
+        import(
+          `@/scripts/admin/components/custom-fields/types/${currentCustomField.value.type}Type.vue`
+        )
+    )
+  }
+  return null
+})
+
+const isRequiredField = computed<boolean>({
+  get: () => currentCustomField.value.is_required === 1,
+  set: (value: boolean) => {
+    currentCustomField.value.is_required = value ? 1 : 0
+  },
+})
+
+const rules = computed(() => ({
+  name: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  label: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  model_type: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  order: {
+    required: helpers.withMessage(t('validation.required'), required),
+    numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
+  },
+  type: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, currentCustomField)
+
+function setData(): void {
+  if (isEdit.value) {
+    const found = dataTypes.find(
+      (type) => type.value === currentCustomField.value.type
+    )
+    if (found) selectedType.value = found
+  } else {
+    currentCustomField.value.model_type = modelTypes[0].value
+    currentCustomField.value.type = dataTypes[0].value
+    selectedType.value = dataTypes[0]
+  }
+}
+
+async function setInitialData(): Promise<void> {
+  if (modalStore.data && typeof modalStore.data === 'number') {
+    isEdit.value = true
+    const response = await customFieldService.get(modalStore.data)
+    if (response.data) {
+      const field = response.data
+      currentCustomField.value = {
+        id: field.id,
+        name: field.name,
+        label: field.label,
+        model_type: field.model_type,
+        type: field.type,
+        placeholder: field.placeholder,
+        is_required: field.is_required ? 1 : 0,
+        options: field.options
+          ? field.options.map((o) => ({ name: typeof o === 'string' ? o : o }))
+          : [],
+        order: field.order,
+        default_answer: field.default_answer,
+        dateTimeValue: null,
+        in_use: field.in_use,
+      }
+    }
+  } else {
+    isEdit.value = false
+    resetForm()
+  }
+  setData()
+}
+
+async function submitCustomFieldData(): Promise<void> {
+  v$.value.$touch()
+  if (v$.value.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+
+  const payload: CreateCustomFieldPayload = {
+    name: currentCustomField.value.name,
+    label: currentCustomField.value.label,
+    model_type: currentCustomField.value.model_type,
+    type: currentCustomField.value.type,
+    placeholder: currentCustomField.value.placeholder,
+    is_required: currentCustomField.value.is_required === 1,
+    options: currentCustomField.value.options.length
+      ? currentCustomField.value.options.map((o) => o.name)
+      : null,
+    order: currentCustomField.value.order,
+  }
+
+  try {
+    if (isEdit.value && currentCustomField.value.id) {
+      await customFieldService.update(currentCustomField.value.id, payload)
+    } else {
+      await customFieldService.create(payload)
+    }
+
+    isSaving.value = false
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+    closeCustomFieldModal()
+  } catch {
+    isSaving.value = false
+  }
+}
+
+function addNewOption(option: string): void {
+  currentCustomField.value.options = [
+    { name: option },
+    ...currentCustomField.value.options,
+  ]
+}
+
+function removeOption(index: number): void {
+  if (isEdit.value && currentCustomField.value.in_use) {
+    return
+  }
+
+  const option = currentCustomField.value.options[index]
+  if (option.name === currentCustomField.value.default_answer) {
+    currentCustomField.value.default_answer = null
+  }
+
+  currentCustomField.value.options.splice(index, 1)
+}
+
+function onSelectedTypeChange(data: DataType): void {
+  currentCustomField.value.type = data.value
+}
+
+function resetForm(): void {
+  currentCustomField.value = {
+    id: null,
+    name: '',
+    label: '',
+    model_type: 'Customer',
+    type: 'Input',
+    placeholder: null,
+    is_required: 0,
+    options: [],
+    order: null,
+    default_answer: null,
+    dateTimeValue: null,
+    in_use: false,
+  }
+  selectedType.value = dataTypes[0]
+}
+
+function closeCustomFieldModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    resetForm()
+    v$.value.$reset()
+  }, 300)
+}
+</script>
+
+<template>
+  <BaseModal :show="modalActive" @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="closeCustomFieldModal"
+        />
+      </div>
+    </template>
+
+    <form action="" @submit.prevent="submitCustomFieldData">
+      <div class="overflow-y-auto max-h-[550px]">
+        <div class="px-4 md:px-8 py-8 overflow-y-auto sm:p-6">
+          <BaseInputGrid layout="one-column">
+            <BaseInputGroup
+              :label="$t('settings.custom_fields.name')"
+              required
+              :error="v$.name.$error && v$.name.$errors[0].$message"
+            >
+              <BaseInput
+                v-model="currentCustomField.name"
+                :invalid="v$.name.$error"
+                @input="v$.name.$touch()"
+              />
+            </BaseInputGroup>
+
+            <BaseInputGroup
+              :label="$t('settings.custom_fields.model')"
+              :error="
+                v$.model_type.$error && v$.model_type.$errors[0].$message
+              "
+              :help-text="
+                currentCustomField.in_use
+                  ? $t('settings.custom_fields.model_in_use')
+                  : ''
+              "
+              required
+            >
+              <BaseMultiselect
+                v-model="currentCustomField.model_type"
+                :options="modelTypes"
+                value-prop="value"
+                :can-deselect="false"
+                :invalid="v$.model_type.$error"
+                :searchable="true"
+                :disabled="currentCustomField.in_use"
+                @input="v$.model_type.$touch()"
+              />
+            </BaseInputGroup>
+
+            <BaseInputGroup
+              class="flex items-center space-x-4"
+              :label="$t('settings.custom_fields.required')"
+            >
+              <BaseSwitch v-model="isRequiredField" />
+            </BaseInputGroup>
+
+            <BaseInputGroup
+              :label="$t('settings.custom_fields.type')"
+              :error="v$.type.$error && v$.type.$errors[0].$message"
+              :help-text="
+                currentCustomField.in_use
+                  ? $t('settings.custom_fields.type_in_use')
+                  : ''
+              "
+              required
+            >
+              <BaseMultiselect
+                v-model="selectedType"
+                :options="dataTypes"
+                :invalid="v$.type.$error"
+                :disabled="currentCustomField.in_use"
+                :searchable="true"
+                :can-deselect="false"
+                object
+                @update:model-value="onSelectedTypeChange"
+              />
+            </BaseInputGroup>
+
+            <BaseInputGroup
+              :label="$t('settings.custom_fields.label')"
+              required
+              :error="v$.label.$error && v$.label.$errors[0].$message"
+            >
+              <BaseInput
+                v-model="currentCustomField.label"
+                :invalid="v$.label.$error"
+                @input="v$.label.$touch()"
+              />
+            </BaseInputGroup>
+
+            <BaseInputGroup
+              v-if="isDropdownSelected"
+              :label="$t('settings.custom_fields.options')"
+            >
+              <div
+                v-for="(option, index) in currentCustomField.options"
+                :key="index"
+                class="flex items-center mt-5"
+              >
+                <BaseInput v-model="option.name" class="w-64" />
+                <BaseIcon
+                  name="MinusCircleIcon"
+                  class="ml-1 cursor-pointer"
+                  :class="
+                    currentCustomField.in_use
+                      ? 'text-subtle'
+                      : 'text-red-300'
+                  "
+                  @click="removeOption(index)"
+                />
+              </div>
+            </BaseInputGroup>
+
+            <BaseInputGroup
+              :label="$t('settings.custom_fields.default_value')"
+              class="relative"
+            >
+              <component
+                :is="defaultValueComponent"
+                v-if="defaultValueComponent"
+                v-model="currentCustomField.default_answer"
+                :options="currentCustomField.options"
+                :default-date-time="currentCustomField.dateTimeValue"
+              />
+            </BaseInputGroup>
+
+            <BaseInputGroup
+              v-if="!isSwitchTypeSelected"
+              :label="$t('settings.custom_fields.placeholder')"
+            >
+              <BaseInput v-model="currentCustomField.placeholder" />
+            </BaseInputGroup>
+
+            <BaseInputGroup
+              :label="$t('settings.custom_fields.order')"
+              :error="v$.order.$error && v$.order.$errors[0].$message"
+              required
+            >
+              <BaseInput
+                v-model="currentCustomField.order"
+                type="number"
+                :invalid="v$.order.$error"
+                @input="v$.order.$touch()"
+              />
+            </BaseInputGroup>
+          </BaseInputGrid>
+        </div>
+      </div>
+
+      <div
+        class="z-0 flex justify-end p-4 border-t border-solid border-line-default"
+      >
+        <BaseButton
+          class="mr-3"
+          type="button"
+          variant="primary-outline"
+          @click="closeCustomFieldModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+
+        <BaseButton
+          variant="primary"
+          :loading="isSaving"
+          :disabled="isSaving"
+          type="submit"
+        >
+          <template #left="slotProps">
+            <BaseIcon
+              v-if="!isSaving"
+              :class="slotProps.class"
+              name="ArrowDownOnSquareIcon"
+            />
+          </template>
+          {{ isEdit ? $t('general.update') : $t('general.save') }}
+        </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
new file mode 100644
index 00000000..18b3cf98
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/EstimatesTab.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, reactive, inject } from 'vue'
+import { useCompanyStore } from '@v2/stores/company.store'
+import NumberCustomizer from './NumberCustomizer.vue'
+
+interface Utils {
+  mergeSettings: (target: Record<string, unknown>, source: Record<string, unknown>) => void
+}
+
+const utils = inject<Utils>('utils')!
+const companyStore = useCompanyStore()
+
+const estimateSettings = reactive<{ estimate_email_attachment: string | null }>({
+  estimate_email_attachment: null,
+})
+
+utils.mergeSettings(
+  estimateSettings as unknown as Record<string, unknown>,
+  { ...companyStore.selectedCompanySettings }
+)
+
+const sendAsAttachmentField = computed<boolean>({
+  get: () => estimateSettings.estimate_email_attachment === 'YES',
+  set: async (newValue: boolean) => {
+    const value = newValue ? 'YES' : 'NO'
+
+    const data = {
+      settings: {
+        estimate_email_attachment: value,
+      },
+    }
+
+    estimateSettings.estimate_email_attachment = value
+
+    await companyStore.updateCompanySettings({
+      data,
+      message: 'general.setting_updated',
+    })
+  },
+})
+</script>
+
+<template>
+  <NumberCustomizer type="estimate" :type-store="companyStore" />
+
+  <BaseDivider class="mt-6 mb-2" />
+
+  <ul class="divide-y divide-line-default">
+    <BaseSwitchSection
+      v-model="sendAsAttachmentField"
+      :title="$t('settings.customization.estimates.estimate_email_attachment')"
+      :description="
+        $t(
+          'settings.customization.estimates.estimate_email_attachment_setting_description'
+        )
+      "
+    />
+  </ul>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/ExchangeRateProviderModal.vue b/resources/scripts-v2/features/company/settings/components/ExchangeRateProviderModal.vue
new file mode 100644
index 00000000..83cc9663
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/ExchangeRateProviderModal.vue
@@ -0,0 +1,431 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+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 { exchangeRateService } from '@v2/api/services/exchange-rate.service'
+import { useDebounceFn } from '@vueuse/core'
+
+interface DriverOption {
+  key: string
+  value: string
+}
+
+interface ServerOption {
+  value: string
+}
+
+interface ExchangeRateForm {
+  id: number | null
+  driver: string
+  key: string | null
+  active: boolean
+  currencies: string[]
+}
+
+interface CurrencyConverterForm {
+  type: string
+  url: string
+}
+
+const { t } = useI18n()
+const modalStore = useModalStore()
+
+const isSaving = ref<boolean>(false)
+const isFetchingInitialData = ref<boolean>(false)
+const isFetchingCurrencies = ref<boolean>(false)
+const isEdit = ref<boolean>(false)
+const currenciesAlreadyInUsed = ref<string[]>([])
+const supportedCurrencies = ref<string[]>([])
+const serverOptions = ref<ServerOption[]>([])
+const drivers = ref<DriverOption[]>([])
+
+const currentExchangeRate = ref<ExchangeRateForm>({
+  id: null,
+  driver: 'currency_converter',
+  key: null,
+  active: true,
+  currencies: [],
+})
+
+const currencyConverter = ref<CurrencyConverterForm>({
+  type: '',
+  url: '',
+})
+
+const modalActive = computed<boolean>(
+  () =>
+    modalStore.active &&
+    modalStore.componentName === 'ExchangeRateProviderModal'
+)
+
+const isCurrencyConverter = computed<boolean>(
+  () => currentExchangeRate.value.driver === 'currency_converter'
+)
+
+const isDedicatedServer = computed<boolean>(
+  () => currencyConverter.value.type === 'DEDICATED'
+)
+
+const driverSite = computed<string>(() => {
+  switch (currentExchangeRate.value.driver) {
+    case 'currency_converter':
+      return 'https://www.currencyconverterapi.com'
+    case 'currency_freak':
+      return 'https://currencyfreaks.com'
+    case 'currency_layer':
+      return 'https://currencylayer.com'
+    case 'open_exchange_rate':
+      return 'https://openexchangerates.org'
+    default:
+      return ''
+  }
+})
+
+const driversLists = computed(() =>
+  drivers.value.map((item) => ({
+    ...item,
+    key: t(item.key),
+  }))
+)
+
+const rules = computed(() => ({
+  driver: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  key: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  currencies: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  converterType: {
+    required: helpers.withMessage(
+      t('validation.required'),
+      requiredIf(isCurrencyConverter)
+    ),
+  },
+  converterUrl: {
+    required: helpers.withMessage(
+      t('validation.required'),
+      requiredIf(isDedicatedServer)
+    ),
+    url: helpers.withMessage(t('validation.invalid_url'), url),
+  },
+}))
+
+const v$ = useVuelidate(rules, currentExchangeRate)
+
+watch(isCurrencyConverter, (newVal) => {
+  if (newVal) {
+    fetchServers()
+  }
+}, { immediate: true })
+
+const fetchCurrenciesDebounced = useDebounceFn(() => {
+  fetchCurrencies()
+}, 500)
+
+watch(() => currentExchangeRate.value.key, (newVal) => {
+  if (newVal) fetchCurrenciesDebounced()
+})
+
+watch(() => currencyConverter.value.type, (newVal) => {
+  if (newVal) fetchCurrenciesDebounced()
+})
+
+function dismiss(): void {
+  currenciesAlreadyInUsed.value = []
+}
+
+function removeUsedSelectedCurrencies(): void {
+  const { currencies } = currentExchangeRate.value
+  currenciesAlreadyInUsed.value.forEach((uc) => {
+    const idx = currencies.indexOf(uc)
+    if (idx > -1) currencies.splice(idx, 1)
+  })
+  currenciesAlreadyInUsed.value = []
+}
+
+function resetCurrency(): void {
+  currentExchangeRate.value.key = null
+  currentExchangeRate.value.currencies = []
+  supportedCurrencies.value = []
+}
+
+function resetModalData(): void {
+  supportedCurrencies.value = []
+  currentExchangeRate.value = {
+    id: null,
+    driver: 'currency_converter',
+    key: null,
+    active: true,
+    currencies: [],
+  }
+  currencyConverter.value = { type: '', url: '' }
+  currenciesAlreadyInUsed.value = []
+  isEdit.value = false
+}
+
+async function fetchInitialData(): Promise<void> {
+  isFetchingInitialData.value = true
+
+  const driversRes = await exchangeRateService.getDrivers()
+  if (driversRes.exchange_rate_drivers) {
+    drivers.value = (driversRes.exchange_rate_drivers as unknown as DriverOption[])
+  }
+
+  if (modalStore.data && typeof modalStore.data === 'number') {
+    isEdit.value = true
+    const response = await exchangeRateService.getProvider(modalStore.data)
+    if (response.data) {
+      const provider = response.data
+      currentExchangeRate.value = {
+        id: provider.id,
+        driver: provider.driver,
+        key: provider.key,
+        active: provider.active,
+        currencies: provider.currencies ?? [],
+      }
+    }
+  } else {
+    currentExchangeRate.value.driver = 'currency_converter'
+  }
+
+  isFetchingInitialData.value = false
+}
+
+async function fetchServers(): Promise<void> {
+  const res = await exchangeRateService.getCurrencyConverterServers()
+  serverOptions.value = (res as Record<string, ServerOption[]>).currency_converter_servers ?? []
+  currencyConverter.value.type = 'FREE'
+}
+
+async function fetchCurrencies(): Promise<void> {
+  const { driver, key } = currentExchangeRate.value
+  if (!driver || !key) return
+
+  if (isCurrencyConverter.value && !currencyConverter.value.type) return
+
+  isFetchingCurrencies.value = true
+  try {
+    const params: Record<string, string> = { driver, key }
+    if (currencyConverter.value.type) {
+      params.type = currencyConverter.value.type
+    }
+    const res = await exchangeRateService.getSupportedCurrencies()
+    supportedCurrencies.value = res.supportedCurrencies ?? []
+  } finally {
+    isFetchingCurrencies.value = false
+  }
+}
+
+async function submitExchangeRate(): Promise<void> {
+  v$.value.$touch()
+  if (v$.value.$invalid) return
+
+  const data: Record<string, unknown> = {
+    ...currentExchangeRate.value,
+  }
+
+  if (isCurrencyConverter.value) {
+    data.driver_config = { ...currencyConverter.value }
+    if (!isDedicatedServer.value) {
+      (data.driver_config as CurrencyConverterForm).url = ''
+    }
+  }
+
+  isSaving.value = true
+  try {
+    if (isEdit.value && currentExchangeRate.value.id) {
+      await exchangeRateService.updateProvider(
+        currentExchangeRate.value.id,
+        data as Parameters<typeof exchangeRateService.updateProvider>[1]
+      )
+    } else {
+      await exchangeRateService.createProvider(
+        data as Parameters<typeof exchangeRateService.createProvider>[0]
+      )
+    }
+
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+    closeExchangeRateModal()
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function closeExchangeRateModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    resetModalData()
+    v$.value.$reset()
+  }, 300)
+}
+</script>
+
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closeExchangeRateModal"
+    @open="fetchInitialData"
+  >
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalStore.title }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="w-6 h-6 text-muted cursor-pointer"
+          @click="closeExchangeRateModal"
+        />
+      </div>
+    </template>
+
+    <form @submit.prevent="submitExchangeRate">
+      <div class="px-4 md:px-8 py-8 overflow-y-auto sm:p-6">
+        <BaseInputGrid layout="one-column">
+          <BaseInputGroup
+            :label="$t('settings.exchange_rate.driver')"
+            :content-loading="isFetchingInitialData"
+            required
+            :error="v$.driver.$error && v$.driver.$errors[0].$message"
+            :help-text="driverSite"
+          >
+            <BaseMultiselect
+              v-model="currentExchangeRate.driver"
+              :options="driversLists"
+              :content-loading="isFetchingInitialData"
+              value-prop="value"
+              :can-deselect="true"
+              label="key"
+              :searchable="true"
+              :invalid="v$.driver.$error"
+              track-by="key"
+              @update:model-value="resetCurrency"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            v-if="isCurrencyConverter"
+            required
+            :label="$t('settings.exchange_rate.server')"
+            :content-loading="isFetchingInitialData"
+          >
+            <BaseMultiselect
+              v-model="currencyConverter.type"
+              :content-loading="isFetchingInitialData"
+              value-prop="value"
+              searchable
+              :options="serverOptions"
+              label="value"
+              track-by="value"
+              @update:model-value="resetCurrency"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('settings.exchange_rate.key')"
+            required
+            :content-loading="isFetchingInitialData"
+            :error="v$.key.$error && v$.key.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="currentExchangeRate.key"
+              :content-loading="isFetchingInitialData"
+              type="text"
+              name="key"
+              :loading="isFetchingCurrencies"
+              loading-position="right"
+              :invalid="v$.key.$error"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            v-if="supportedCurrencies.length"
+            :label="$t('settings.exchange_rate.currency')"
+            :content-loading="isFetchingInitialData"
+            :error="
+              v$.currencies.$error && v$.currencies.$errors[0].$message
+            "
+            :help-text="$t('settings.exchange_rate.currency_help_text')"
+          >
+            <BaseMultiselect
+              v-model="currentExchangeRate.currencies"
+              :content-loading="isFetchingInitialData"
+              value-prop="code"
+              mode="tags"
+              searchable
+              :options="supportedCurrencies"
+              :invalid="v$.currencies.$error"
+              label="code"
+              track-by="code"
+              open-direction="top"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            v-if="isDedicatedServer"
+            :label="$t('settings.exchange_rate.url')"
+            :content-loading="isFetchingInitialData"
+          >
+            <BaseInput
+              v-model="currencyConverter.url"
+              :content-loading="isFetchingInitialData"
+              type="url"
+            />
+          </BaseInputGroup>
+
+          <BaseSwitch
+            v-model="currentExchangeRate.active"
+            class="flex"
+            :label-right="$t('settings.exchange_rate.active')"
+          />
+        </BaseInputGrid>
+
+        <BaseInfoAlert
+          v-if="
+            currenciesAlreadyInUsed.length && currentExchangeRate.active
+          "
+          class="mt-5"
+          :title="$t('settings.exchange_rate.currency_in_used')"
+          :lists="[currenciesAlreadyInUsed.toString()]"
+          :actions="['Remove']"
+          @hide="dismiss"
+          @Remove="removeUsedSelectedCurrencies"
+        />
+      </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"
+          :disabled="isSaving"
+          @click="closeExchangeRateModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+        <BaseButton
+          :loading="isSaving"
+          :disabled="isSaving || isFetchingCurrencies"
+          variant="primary"
+          type="submit"
+        >
+          <template #left="slotProps">
+            <BaseIcon
+              v-if="!isSaving"
+              name="ArrowDownOnSquareIcon"
+              :class="slotProps.class"
+            />
+          </template>
+          {{ isEdit ? $t('general.update') : $t('general.save') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/ExpenseCategoryDropdown.vue b/resources/scripts-v2/features/company/settings/components/ExpenseCategoryDropdown.vue
new file mode 100644
index 00000000..c5bc9fe4
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/ExpenseCategoryDropdown.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+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 { expenseService } from '@v2/api/services/expense.service'
+
+const ABILITIES = {
+  EDIT_EXPENSE: 'edit-expense',
+  DELETE_EXPENSE: 'delete-expense',
+} as const
+
+interface ExpenseCategoryRow {
+  id: number
+  name: string
+  [key: string]: unknown
+}
+
+const props = defineProps<{
+  row: ExpenseCategoryRow
+  table?: { refresh: () => void } | null
+  loadData?: (() => void) | null
+}>()
+
+const dialogStore = useDialogStore()
+const { t } = useI18n()
+const route = useRoute()
+const userStore = useUserStore()
+const modalStore = useModalStore()
+
+function editExpenseCategory(id: number): void {
+  modalStore.openModal({
+    title: t('settings.expense_category.edit_category'),
+    componentName: 'CategoryModal',
+    data: id,
+    refreshData: props.loadData ?? undefined,
+    size: 'sm',
+  })
+}
+
+function removeExpenseCategory(id: number): 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) {
+        const response = await expenseService.deleteCategory(id)
+        if (response.success) {
+          props.loadData?.()
+        }
+      }
+    })
+}
+</script>
+
+<template>
+  <BaseDropdown>
+    <template #activator>
+      <BaseButton
+        v-if="route.name === 'expenseCategorys.view'"
+        variant="primary"
+      >
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
+      </BaseButton>
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
+    </template>
+
+    <BaseDropdownItem
+      v-if="userStore.hasAbilities(ABILITIES.EDIT_EXPENSE)"
+      @click="editExpenseCategory(row.id)"
+    >
+      <BaseIcon
+        name="PencilIcon"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+      />
+      {{ $t('general.edit') }}
+    </BaseDropdownItem>
+
+    <BaseDropdownItem
+      v-if="userStore.hasAbilities(ABILITIES.DELETE_EXPENSE)"
+      @click="removeExpenseCategory(row.id)"
+    >
+      <BaseIcon
+        name="TrashIcon"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+      />
+      {{ $t('general.delete') }}
+    </BaseDropdownItem>
+  </BaseDropdown>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/InvoicesTab.vue b/resources/scripts-v2/features/company/settings/components/InvoicesTab.vue
new file mode 100644
index 00000000..900b9fdb
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/InvoicesTab.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, reactive, inject } from 'vue'
+import { useCompanyStore } from '@v2/stores/company.store'
+import NumberCustomizer from './NumberCustomizer.vue'
+
+interface Utils {
+  mergeSettings: (target: Record<string, unknown>, source: Record<string, unknown>) => void
+}
+
+const utils = inject<Utils>('utils')!
+const companyStore = useCompanyStore()
+
+const invoiceSettings = reactive<{ invoice_email_attachment: string | null }>({
+  invoice_email_attachment: null,
+})
+
+utils.mergeSettings(
+  invoiceSettings as unknown as Record<string, unknown>,
+  { ...companyStore.selectedCompanySettings }
+)
+
+const sendAsAttachmentField = computed<boolean>({
+  get: () => invoiceSettings.invoice_email_attachment === 'YES',
+  set: async (newValue: boolean) => {
+    const value = newValue ? 'YES' : 'NO'
+
+    const data = {
+      settings: {
+        invoice_email_attachment: value,
+      },
+    }
+
+    invoiceSettings.invoice_email_attachment = value
+
+    await companyStore.updateCompanySettings({
+      data,
+      message: 'general.setting_updated',
+    })
+  },
+})
+</script>
+
+<template>
+  <NumberCustomizer type="invoice" :type-store="companyStore" />
+
+  <BaseDivider class="mt-6 mb-2" />
+
+  <ul class="divide-y divide-line-default">
+    <BaseSwitchSection
+      v-model="sendAsAttachmentField"
+      :title="$t('settings.customization.invoices.invoice_email_attachment')"
+      :description="
+        $t(
+          'settings.customization.invoices.invoice_email_attachment_setting_description'
+        )
+      "
+    />
+  </ul>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/ItemUnitModal.vue b/resources/scripts-v2/features/company/settings/components/ItemUnitModal.vue
new file mode 100644
index 00000000..9df279db
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/ItemUnitModal.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+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'
+
+interface ItemUnitForm {
+  id: number | null
+  name: string
+}
+
+const modalStore = useModalStore()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+const isEdit = ref<boolean>(false)
+
+const currentItemUnit = ref<ItemUnitForm>({
+  id: null,
+  name: '',
+})
+
+const modalActive = computed<boolean>(
+  () => modalStore.active && modalStore.componentName === 'ItemUnitModal'
+)
+
+const rules = computed(() => ({
+  name: {
+    required: helpers.withMessage(t('validation.required'), required),
+    minLength: helpers.withMessage(
+      t('validation.name_min_length', { count: 2 }),
+      minLength(2)
+    ),
+  },
+}))
+
+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,
+      }
+    }
+  } else {
+    isEdit.value = false
+    resetForm()
+  }
+}
+
+async function submitItemUnit(): Promise<void> {
+  v$.value.$touch()
+
+  if (v$.value.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+  try {
+    if (isEdit.value && currentItemUnit.value.id) {
+      await itemService.updateUnit(currentItemUnit.value.id, {
+        name: currentItemUnit.value.name,
+      })
+    } else {
+      await itemService.createUnit({
+        name: currentItemUnit.value.name,
+      })
+    }
+
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+    closeItemUnitModal()
+  } catch {
+    // handled
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function resetForm(): void {
+  currentItemUnit.value = { id: null, name: '' }
+}
+
+function closeItemUnitModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    resetForm()
+    isEdit.value = false
+    v$.value.$reset()
+  }, 300)
+}
+</script>
+
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closeItemUnitModal"
+    @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="closeItemUnitModal"
+        />
+      </div>
+    </template>
+
+    <form action="" @submit.prevent="submitItemUnit">
+      <div class="p-8 sm:p-6">
+        <BaseInputGroup
+          :label="$t('settings.customization.items.unit_name')"
+          :error="v$.name.$error && v$.name.$errors[0].$message"
+          variant="horizontal"
+          required
+        >
+          <BaseInput
+            v-model="currentItemUnit.name"
+            :invalid="v$.name.$error"
+            type="text"
+            @input="v$.name.$touch()"
+          />
+        </BaseInputGroup>
+      </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 text-sm"
+          @click="closeItemUnitModal"
+        >
+          {{ $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>
+          {{ isEdit ? $t('general.update') : $t('general.save') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/ItemsTab.vue b/resources/scripts-v2/features/company/settings/components/ItemsTab.vue
new file mode 100644
index 00000000..42ca0052
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/ItemsTab.vue
@@ -0,0 +1,157 @@
+<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 { itemService } from '@v2/api/services/item.service'
+import ItemUnitModal from './ItemUnitModal.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: unknown[]
+  pagination: {
+    totalPages: number
+    currentPage: number
+    totalCount: number
+    limit: number
+  }
+}
+
+interface RowData {
+  data: {
+    id: number
+    name: string
+  }
+}
+
+const { t } = useI18n()
+const table = ref<{ refresh: () => void } | null>(null)
+
+const modalStore = useModalStore()
+const dialogStore = useDialogStore()
+
+const columns = computed<TableColumn[]>(() => [
+  {
+    key: 'name',
+    label: t('settings.customization.items.unit_name'),
+    thClass: 'extra',
+    tdClass: 'font-medium text-heading',
+  },
+  {
+    key: 'actions',
+    label: '',
+    tdClass: 'text-right text-sm font-medium',
+    sortable: false,
+  },
+])
+
+async function fetchData({ page, sort }: FetchParams): Promise<FetchResult> {
+  const data = {
+    orderByField: sort.fieldName || 'created_at',
+    orderBy: sort.order || 'desc',
+    page,
+  }
+
+  const response = await itemService.listUnits(data)
+
+  return {
+    data: (response as Record<string, unknown>).data as unknown[],
+    pagination: {
+      totalPages: ((response as Record<string, unknown>).meta as Record<string, number>).last_page,
+      currentPage: page,
+      totalCount: ((response as Record<string, unknown>).meta as Record<string, number>).total,
+      limit: 5,
+    },
+  }
+}
+
+function addItemUnit(): void {
+  modalStore.openModal({
+    title: t('settings.customization.items.add_item_unit'),
+    componentName: 'ItemUnitModal',
+    refreshData: table.value?.refresh,
+    size: 'sm',
+  })
+}
+
+function editItemUnit(row: RowData): void {
+  modalStore.openModal({
+    title: t('settings.customization.items.edit_item_unit'),
+    componentName: 'ItemUnitModal',
+    data: row.data.id,
+    refreshData: table.value?.refresh,
+  })
+}
+
+function removeItemUnit(row: RowData): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('settings.customization.items.item_unit_confirm_delete'),
+      yesLabel: t('general.yes'),
+      noLabel: t('general.no'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        await itemService.deleteUnit(row.data.id)
+        table.value?.refresh()
+      }
+    })
+}
+</script>
+
+<template>
+  <ItemUnitModal />
+
+  <div class="flex flex-wrap justify-end mt-2 lg:flex-nowrap">
+    <BaseButton variant="primary-outline" @click="addItemUnit">
+      <template #left="slotProps">
+        <BaseIcon :class="slotProps.class" name="PlusIcon" />
+      </template>
+      {{ $t('settings.customization.items.add_item_unit') }}
+    </BaseButton>
+  </div>
+
+  <BaseTable ref="table" class="mt-10" :data="fetchData" :columns="columns">
+    <template #cell-actions="{ row }">
+      <BaseDropdown>
+        <template #activator>
+          <div class="inline-block">
+            <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
+          </div>
+        </template>
+
+        <BaseDropdownItem @click="editItemUnit(row)">
+          <BaseIcon
+            name="PencilIcon"
+            class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+          />
+          {{ $t('general.edit') }}
+        </BaseDropdownItem>
+        <BaseDropdownItem @click="removeItemUnit(row)">
+          <BaseIcon
+            name="TrashIcon"
+            class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+          />
+          {{ $t('general.delete') }}
+        </BaseDropdownItem>
+      </BaseDropdown>
+    </template>
+  </BaseTable>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/MailTestModal.vue b/resources/scripts-v2/features/company/settings/components/MailTestModal.vue
new file mode 100644
index 00000000..97ad5dcf
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/MailTestModal.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { reactive, ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, email, maxLength, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import { useModalStore } from '@v2/stores/modal.store'
+import { mailService } from '@v2/api/services/mail.service'
+import { companyService } from '@v2/api/services/company.service'
+
+interface MailTestForm {
+  to: string
+  subject: string
+  message: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    storeType?: string
+  }>(),
+  {
+    storeType: 'global',
+  }
+)
+
+const modalStore = useModalStore()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+const formData = reactive<MailTestForm>({
+  to: '',
+  subject: '',
+  message: '',
+})
+
+const modalActive = computed<boolean>(
+  () => modalStore.active && modalStore.componentName === 'MailTestModal'
+)
+
+const rules = {
+  to: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  subject: {
+    required: helpers.withMessage(t('validation.required'), required),
+    maxLength: helpers.withMessage(
+      t('validation.subject_maxlength'),
+      maxLength(100)
+    ),
+  },
+  message: {
+    required: helpers.withMessage(t('validation.required'), required),
+    maxLength: helpers.withMessage(
+      t('validation.message_maxlength'),
+      maxLength(255)
+    ),
+  },
+}
+
+const v$ = useVuelidate({ formData: rules }, { formData })
+
+function resetFormData(): void {
+  formData.to = ''
+  formData.subject = ''
+  formData.message = ''
+  v$.value.$reset()
+}
+
+async function onTestMailSend(): Promise<void> {
+  v$.value.formData.$touch()
+  if (v$.value.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+  try {
+    await mailService.testEmail({ to: formData.to })
+    closeTestModal()
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function closeTestModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    resetFormData()
+  }, 300)
+}
+</script>
+
+<template>
+  <BaseModal :show="modalActive" @close="closeTestModal">
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalStore.title }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="w-6 h-6 text-muted cursor-pointer"
+          @click="closeTestModal"
+        />
+      </div>
+    </template>
+    <form action="" @submit.prevent="onTestMailSend">
+      <div class="p-4 md:p-8">
+        <BaseInputGrid layout="one-column">
+          <BaseInputGroup
+            :label="$t('general.to')"
+            :error="
+              v$.formData.to.$error && v$.formData.to.$errors[0].$message
+            "
+            variant="horizontal"
+            required
+          >
+            <BaseInput
+              v-model="formData.to"
+              type="text"
+              :invalid="v$.formData.to.$error"
+              @input="v$.formData.to.$touch()"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.subject')"
+            :error="
+              v$.formData.subject.$error &&
+              v$.formData.subject.$errors[0].$message
+            "
+            variant="horizontal"
+            required
+          >
+            <BaseInput
+              v-model="formData.subject"
+              type="text"
+              :invalid="v$.formData.subject.$error"
+              @input="v$.formData.subject.$touch()"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.message')"
+            :error="
+              v$.formData.message.$error &&
+              v$.formData.message.$errors[0].$message
+            "
+            variant="horizontal"
+            required
+          >
+            <BaseTextarea
+              v-model="formData.message"
+              rows="4"
+              cols="50"
+              :invalid="v$.formData.message.$error"
+              @input="v$.formData.message.$touch()"
+            />
+          </BaseInputGroup>
+        </BaseInputGrid>
+      </div>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+      >
+        <BaseButton
+          variant="primary-outline"
+          type="button"
+          class="mr-3"
+          @click="closeTestModal()"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+
+        <BaseButton :loading="isSaving" variant="primary" type="submit">
+          <template #left="slotProps">
+            <BaseIcon
+              v-if="!isSaving"
+              name="PaperAirplaneIcon"
+              :class="slotProps.class"
+            />
+          </template>
+          {{ $t('general.send') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/MailgunMailDriver.vue b/resources/scripts-v2/features/company/settings/components/MailgunMailDriver.vue
new file mode 100644
index 00000000..d269928c
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/MailgunMailDriver.vue
@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { onMounted, ref, computed, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, email, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+
+interface MailgunConfig {
+  mail_driver: string
+  mail_mailgun_domain: string
+  mail_mailgun_secret: string
+  mail_mailgun_endpoint: string
+  from_mail: string
+  from_name: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    configData?: Record<string, unknown>
+    isSaving?: boolean
+    isFetchingInitialData?: boolean
+    mailDrivers?: string[]
+  }>(),
+  {
+    configData: () => ({}),
+    isSaving: false,
+    isFetchingInitialData: false,
+    mailDrivers: () => [],
+  }
+)
+
+const emit = defineEmits<{
+  'submit-data': [config: MailgunConfig]
+  'on-change-driver': [driver: string]
+}>()
+
+const { t } = useI18n()
+
+const isShowPassword = ref<boolean>(false)
+
+const mailgunConfig = reactive<MailgunConfig>({
+  mail_driver: 'mailgun',
+  mail_mailgun_domain: '',
+  mail_mailgun_secret: '',
+  mail_mailgun_endpoint: '',
+  from_mail: '',
+  from_name: '',
+})
+
+const getInputType = computed<string>(() =>
+  isShowPassword.value ? 'text' : 'password'
+)
+
+const rules = computed(() => ({
+  mail_driver: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  mail_mailgun_domain: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  mail_mailgun_endpoint: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  mail_mailgun_secret: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  from_mail: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  from_name: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, mailgunConfig)
+
+onMounted(() => {
+  for (const key in mailgunConfig) {
+    if (Object.prototype.hasOwnProperty.call(props.configData, key)) {
+      ;(mailgunConfig as Record<string, unknown>)[key] = props.configData[key]
+    }
+  }
+})
+
+async function saveEmailConfig(): Promise<void> {
+  v$.value.$touch()
+  if (!v$.value.$invalid) {
+    emit('submit-data', { ...mailgunConfig })
+  }
+}
+
+function onChangeDriver(): void {
+  v$.value.mail_driver.$touch()
+  emit('on-change-driver', mailgunConfig.mail_driver)
+}
+</script>
+
+<template>
+  <form @submit.prevent="saveEmailConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.mail.driver')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_driver.$error && v$.mail_driver.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model="mailgunConfig.mail_driver"
+          :content-loading="isFetchingInitialData"
+          :options="mailDrivers"
+          :can-deselect="false"
+          :invalid="v$.mail_driver.$error"
+          @update:model-value="onChangeDriver"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.mailgun_domain')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_mailgun_domain.$error &&
+          v$.mail_mailgun_domain.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailgunConfig.mail_mailgun_domain"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mailgun_domain"
+          :invalid="v$.mail_mailgun_domain.$error"
+          @input="v$.mail_mailgun_domain.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.mailgun_secret')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_mailgun_secret.$error &&
+          v$.mail_mailgun_secret.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailgunConfig.mail_mailgun_secret"
+          :content-loading="isFetchingInitialData"
+          :type="getInputType"
+          name="mailgun_secret"
+          autocomplete="off"
+          :invalid="v$.mail_mailgun_secret.$error"
+          @input="v$.mail_mailgun_secret.$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.mail.mailgun_endpoint')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_mailgun_endpoint.$error &&
+          v$.mail_mailgun_endpoint.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailgunConfig.mail_mailgun_endpoint"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mailgun_endpoint"
+          :invalid="v$.mail_mailgun_endpoint.$error"
+          @input="v$.mail_mailgun_endpoint.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_mail')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.from_mail.$error && v$.from_mail.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailgunConfig.from_mail"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="from_mail"
+          :invalid="v$.from_mail.$error"
+          @input="v$.from_mail.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_name')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.from_name.$error && v$.from_name.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailgunConfig.from_name"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="from_name"
+          :invalid="v$.from_name.$error"
+          @input="v$.from_name.$touch()"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+    <div class="flex my-10">
+      <BaseButton
+        :disabled="isSaving"
+        :content-loading="isFetchingInitialData"
+        :loading="isSaving"
+        variant="primary"
+        type="submit"
+      >
+        <template #left="slotProps">
+          <BaseIcon
+            v-if="!isSaving"
+            name="ArrowDownOnSquareIcon"
+            :class="slotProps.class"
+          />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+      <slot />
+    </div>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/NoteDropdown.vue b/resources/scripts-v2/features/company/settings/components/NoteDropdown.vue
new file mode 100644
index 00000000..01795c12
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/NoteDropdown.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useDialogStore } from '@v2/stores/dialog.store'
+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
+
+interface NoteRow {
+  id: number
+  name: string
+  [key: string]: unknown
+}
+
+const props = defineProps<{
+  row: NoteRow
+  table?: { refresh: () => void } | null
+  loadData?: (() => void) | null
+}>()
+
+const dialogStore = useDialogStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+const route = useRoute()
+const userStore = useUserStore()
+const modalStore = useModalStore()
+
+function editNote(id: number): void {
+  modalStore.openModal({
+    title: t('settings.customization.notes.edit_note'),
+    componentName: 'NoteModal',
+    size: 'md',
+    data: id,
+    refreshData: props.loadData ?? undefined,
+  })
+}
+
+function removeNote(id: number): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('settings.customization.notes.note_confirm_delete'),
+      yesLabel: t('general.yes'),
+      noLabel: t('general.no'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async () => {
+      const response = await noteService.delete(id)
+      if (response.success) {
+        notificationStore.showNotification({
+          type: 'success',
+          message: t('settings.customization.notes.deleted_message'),
+        })
+      } else {
+        notificationStore.showNotification({
+          type: 'error',
+          message: t('settings.customization.notes.already_in_use'),
+        })
+      }
+      props.loadData?.()
+    })
+}
+</script>
+
+<template>
+  <BaseDropdown>
+    <template #activator>
+      <BaseButton v-if="route.name === 'notes.view'" variant="primary">
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
+      </BaseButton>
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
+    </template>
+
+    <BaseDropdownItem
+      v-if="userStore.hasAbilities(ABILITIES.MANAGE_NOTE)"
+      @click="editNote(row.id)"
+    >
+      <BaseIcon
+        name="PencilIcon"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+      />
+      {{ $t('general.edit') }}
+    </BaseDropdownItem>
+
+    <BaseDropdownItem
+      v-if="userStore.hasAbilities(ABILITIES.MANAGE_NOTE)"
+      @click="removeNote(row.id)"
+    >
+      <BaseIcon
+        name="TrashIcon"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+      />
+      {{ $t('general.delete') }}
+    </BaseDropdownItem>
+  </BaseDropdown>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/NoteModal.vue b/resources/scripts-v2/features/company/settings/components/NoteModal.vue
new file mode 100644
index 00000000..4c24ea4a
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/NoteModal.vue
@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+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 { noteService } from '@v2/api/services/note.service'
+import type { CreateNotePayload } from '@v2/api/services/note.service'
+
+interface NoteForm {
+  id: number | null
+  name: string
+  type: string
+  notes: string
+  is_default: boolean
+}
+
+const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
+const route = useRoute()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+const isEdit = ref<boolean>(false)
+
+const currentNote = ref<NoteForm>({
+  id: null,
+  name: '',
+  type: 'Invoice',
+  notes: '',
+  is_default: false,
+})
+
+const types = reactive([
+  { label: t('settings.customization.notes.types.invoice'), value: 'Invoice' },
+  { label: t('settings.customization.notes.types.estimate'), value: 'Estimate' },
+  { label: t('settings.customization.notes.types.payment'), value: 'Payment' },
+])
+
+const fields = ref<string[]>(['customer', 'customerCustom'])
+
+const modalActive = computed<boolean>(
+  () => modalStore.active && modalStore.componentName === 'NoteModal'
+)
+
+const rules = computed(() => ({
+  name: {
+    required: helpers.withMessage(t('validation.required'), required),
+    minLength: helpers.withMessage(
+      t('validation.name_min_length', { count: 3 }),
+      minLength(3)
+    ),
+  },
+  notes: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  type: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, currentNote)
+
+watch(
+  () => currentNote.value.type,
+  () => {
+    setFields()
+  }
+)
+
+onMounted(() => {
+  if (route.name === 'estimates.create') {
+    currentNote.value.type = 'Estimate'
+  } else if (
+    route.name === 'invoices.create' ||
+    route.name === 'recurring-invoices.create'
+  ) {
+    currentNote.value.type = 'Invoice'
+  } else {
+    currentNote.value.type = 'Payment'
+  }
+})
+
+function setFields(): void {
+  fields.value = ['customer', 'customerCustom']
+
+  if (currentNote.value.type === 'Invoice') {
+    fields.value.push('invoice', 'invoiceCustom')
+  }
+  if (currentNote.value.type === 'Estimate') {
+    fields.value.push('estimate', 'estimateCustom')
+  }
+  if (currentNote.value.type === 'Payment') {
+    fields.value.push('payment', 'paymentCustom')
+  }
+}
+
+async function setInitialData(): Promise<void> {
+  if (modalStore.data && typeof modalStore.data === 'number') {
+    isEdit.value = true
+    const response = await noteService.get(modalStore.data)
+    if (response.data) {
+      const note = response.data
+      currentNote.value = {
+        id: note.id,
+        name: note.name,
+        type: note.type,
+        notes: note.notes,
+        is_default: note.is_default ?? false,
+      }
+    }
+  } else {
+    isEdit.value = false
+    resetForm()
+  }
+  setFields()
+}
+
+async function submitNote(): Promise<void> {
+  v$.value.$touch()
+  if (v$.value.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+
+  const payload: CreateNotePayload = {
+    name: currentNote.value.name,
+    type: currentNote.value.type,
+    notes: currentNote.value.notes,
+    is_default: currentNote.value.is_default,
+  }
+
+  try {
+    if (isEdit.value && currentNote.value.id) {
+      const res = await noteService.update(currentNote.value.id, payload)
+      if (res.data) {
+        notificationStore.showNotification({
+          type: 'success',
+          message: t('settings.customization.notes.note_updated'),
+        })
+      }
+    } else {
+      const res = await noteService.create(payload)
+      if (res) {
+        notificationStore.showNotification({
+          type: 'success',
+          message: t('settings.customization.notes.note_added'),
+        })
+      }
+    }
+
+    isSaving.value = false
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+    closeNoteModal()
+  } catch {
+    isSaving.value = false
+  }
+}
+
+function resetForm(): void {
+  currentNote.value = {
+    id: null,
+    name: '',
+    type: 'Invoice',
+    notes: '',
+    is_default: false,
+  }
+}
+
+function closeNoteModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    resetForm()
+    v$.value.$reset()
+  }, 300)
+}
+</script>
+
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closeNoteModal"
+    @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="closeNoteModal"
+        />
+      </div>
+    </template>
+    <form action="" @submit.prevent="submitNote">
+      <div class="px-8 py-8 sm:p-6">
+        <BaseInputGrid layout="one-column">
+          <BaseInputGroup
+            :label="$t('settings.customization.notes.name')"
+            variant="vertical"
+            :error="v$.name.$error && v$.name.$errors[0].$message"
+            required
+          >
+            <BaseInput
+              v-model="currentNote.name"
+              :invalid="v$.name.$error"
+              type="text"
+              @input="v$.name.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('settings.customization.notes.type')"
+            :error="v$.type.$error && v$.type.$errors[0].$message"
+            required
+          >
+            <BaseMultiselect
+              v-model="currentNote.type"
+              :options="types"
+              value-prop="value"
+              class="mt-2"
+            />
+          </BaseInputGroup>
+
+          <BaseSwitchSection
+            v-model="currentNote.is_default"
+            :title="$t('settings.customization.notes.is_default')"
+            :description="
+              $t('settings.customization.notes.is_default_description')
+            "
+          />
+
+          <BaseInputGroup
+            :label="$t('settings.customization.notes.notes')"
+            :error="v$.notes.$error && v$.notes.$errors[0].$message"
+            required
+          >
+            <BaseCustomInput
+              v-model="currentNote.notes"
+              :invalid="v$.notes.$error"
+              :fields="fields"
+              @input="v$.notes.$touch()"
+            />
+          </BaseInputGroup>
+        </BaseInputGrid>
+      </div>
+      <div
+        class="z-0 flex justify-end px-4 py-4 border-t border-solid border-line-default"
+      >
+        <BaseButton
+          class="mr-2"
+          variant="primary-outline"
+          type="button"
+          @click="closeNoteModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+
+        <BaseButton
+          :loading="isSaving"
+          :disabled="isSaving"
+          variant="primary"
+          type="submit"
+        >
+          <template #left="slotProps">
+            <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
+          </template>
+          {{ isEdit ? $t('general.update') : $t('general.save') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
+
+<style>
+.note-modal {
+  .header-editior .editor-menu-bar {
+    margin-left: 0.5px;
+    margin-right: 0px;
+  }
+}
+</style>
diff --git a/resources/scripts-v2/features/company/settings/components/NumberCustomizer.vue b/resources/scripts-v2/features/company/settings/components/NumberCustomizer.vue
index 48723678..9332b294 100644
--- a/resources/scripts-v2/features/company/settings/components/NumberCustomizer.vue
+++ b/resources/scripts-v2/features/company/settings/components/NumberCustomizer.vue
@@ -6,7 +6,7 @@ import draggable from 'vuedraggable'
 import Guid from 'guid'
 import { useCompanyStore } from '../../../../stores/company.store'
 import { useGlobalStore } from '../../../../stores/global.store'
-import DragIcon from '@/scripts/components/icons/DragIcon.vue'
+import DragIcon from '@v2/components/icons/DragIcon.vue'
 
 interface NumberField {
   id: string
diff --git a/resources/scripts-v2/features/company/settings/components/PaymentModeDropdown.vue b/resources/scripts-v2/features/company/settings/components/PaymentModeDropdown.vue
new file mode 100644
index 00000000..f620bb36
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/PaymentModeDropdown.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useDialogStore } from '@v2/stores/dialog.store'
+import { useModalStore } from '@v2/stores/modal.store'
+import { paymentService } from '@v2/api/services/payment.service'
+
+interface PaymentModeRow {
+  id: number
+  name: string
+  [key: string]: unknown
+}
+
+const props = defineProps<{
+  row: PaymentModeRow
+  table?: { refresh: () => void } | null
+  loadData?: (() => void) | null
+}>()
+
+const dialogStore = useDialogStore()
+const { t } = useI18n()
+const route = useRoute()
+const modalStore = useModalStore()
+
+function editPaymentMode(id: number): void {
+  modalStore.openModal({
+    title: t('settings.payment_modes.edit_payment_mode'),
+    componentName: 'PaymentModeModal',
+    data: id,
+    refreshData: props.loadData ?? undefined,
+    size: 'sm',
+  })
+}
+
+function removePaymentMode(id: number): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('settings.payment_modes.payment_mode_confirm_delete'),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        await paymentService.deleteMethod(id)
+        props.loadData?.()
+      }
+    })
+}
+</script>
+
+<template>
+  <BaseDropdown>
+    <template #activator>
+      <BaseButton v-if="route.name === 'paymentModes.view'" variant="primary">
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
+      </BaseButton>
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
+    </template>
+
+    <BaseDropdownItem @click="editPaymentMode(row.id)">
+      <BaseIcon
+        name="PencilIcon"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+      />
+      {{ $t('general.edit') }}
+    </BaseDropdownItem>
+
+    <BaseDropdownItem @click="removePaymentMode(row.id)">
+      <BaseIcon
+        name="TrashIcon"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+      />
+      {{ $t('general.delete') }}
+    </BaseDropdownItem>
+  </BaseDropdown>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/PaymentModeModal.vue b/resources/scripts-v2/features/company/settings/components/PaymentModeModal.vue
new file mode 100644
index 00000000..02d20e26
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/PaymentModeModal.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+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 { paymentService } from '@v2/api/services/payment.service'
+
+interface PaymentModeForm {
+  id: number | null
+  name: string
+}
+
+const modalStore = useModalStore()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+const currentPaymentMode = ref<PaymentModeForm>({
+  id: null,
+  name: '',
+})
+
+const modalActive = computed<boolean>(
+  () => modalStore.active && modalStore.componentName === 'PaymentModeModal'
+)
+
+const rules = computed(() => ({
+  name: {
+    required: helpers.withMessage(t('validation.required'), required),
+    minLength: helpers.withMessage(
+      t('validation.name_min_length', { count: 3 }),
+      minLength(3)
+    ),
+  },
+}))
+
+const v$ = useVuelidate(rules, currentPaymentMode)
+
+async function setInitialData(): Promise<void> {
+  if (modalStore.data && typeof modalStore.data === 'number') {
+    const response = await paymentService.getMethod(modalStore.data)
+    if (response.data) {
+      currentPaymentMode.value = {
+        id: response.data.id,
+        name: response.data.name,
+      }
+    }
+  } else {
+    resetForm()
+  }
+}
+
+async function submitPaymentMode(): Promise<void> {
+  v$.value.$touch()
+
+  if (v$.value.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+  try {
+    if (currentPaymentMode.value.id) {
+      await paymentService.updateMethod(currentPaymentMode.value.id, {
+        name: currentPaymentMode.value.name,
+      })
+    } else {
+      await paymentService.createMethod({
+        name: currentPaymentMode.value.name,
+      })
+    }
+
+    isSaving.value = false
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+    closePaymentModeModal()
+  } catch {
+    isSaving.value = false
+  }
+}
+
+function resetForm(): void {
+  currentPaymentMode.value = {
+    id: null,
+    name: '',
+  }
+}
+
+function closePaymentModeModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    resetForm()
+    v$.value.$reset()
+  }, 300)
+}
+</script>
+
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closePaymentModeModal"
+    @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="closePaymentModeModal"
+        />
+      </div>
+    </template>
+
+    <form action="" @submit.prevent="submitPaymentMode">
+      <div class="p-4 sm:p-6">
+        <BaseInputGroup
+          :label="$t('settings.payment_modes.mode_name')"
+          :error="v$.name.$error && v$.name.$errors[0].$message"
+          required
+        >
+          <BaseInput
+            v-model="currentPaymentMode.name"
+            :invalid="v$.name.$error"
+            @input="v$.name.$touch()"
+          />
+        </BaseInputGroup>
+      </div>
+
+      <div
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+      >
+        <BaseButton
+          variant="primary-outline"
+          class="mr-3"
+          type="button"
+          @click="closePaymentModeModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+
+        <BaseButton
+          :loading="isSaving"
+          :disabled="isSaving"
+          variant="primary"
+          type="submit"
+        >
+          <template #left="slotProps">
+            <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
+          </template>
+          {{
+            currentPaymentMode.id
+              ? $t('general.update')
+              : $t('general.save')
+          }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/PaymentsTab.vue b/resources/scripts-v2/features/company/settings/components/PaymentsTab.vue
new file mode 100644
index 00000000..e5306673
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/PaymentsTab.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, reactive, inject } from 'vue'
+import { useCompanyStore } from '@v2/stores/company.store'
+import NumberCustomizer from './NumberCustomizer.vue'
+
+interface Utils {
+  mergeSettings: (target: Record<string, unknown>, source: Record<string, unknown>) => void
+}
+
+const utils = inject<Utils>('utils')!
+const companyStore = useCompanyStore()
+
+const paymentSettings = reactive<{ payment_email_attachment: string | null }>({
+  payment_email_attachment: null,
+})
+
+utils.mergeSettings(
+  paymentSettings as unknown as Record<string, unknown>,
+  { ...companyStore.selectedCompanySettings }
+)
+
+const sendAsAttachmentField = computed<boolean>({
+  get: () => paymentSettings.payment_email_attachment === 'YES',
+  set: async (newValue: boolean) => {
+    const value = newValue ? 'YES' : 'NO'
+
+    const data = {
+      settings: {
+        payment_email_attachment: value,
+      },
+    }
+
+    paymentSettings.payment_email_attachment = value
+
+    await companyStore.updateCompanySettings({
+      data,
+      message: 'general.setting_updated',
+    })
+  },
+})
+</script>
+
+<template>
+  <NumberCustomizer type="payment" :type-store="companyStore" />
+
+  <BaseDivider class="mt-6 mb-2" />
+
+  <ul class="divide-y divide-line-default">
+    <BaseSwitchSection
+      v-model="sendAsAttachmentField"
+      :title="$t('settings.customization.payments.payment_email_attachment')"
+      :description="
+        $t(
+          'settings.customization.payments.payment_email_attachment_setting_description'
+        )
+      "
+    />
+  </ul>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/RoleDropdown.vue b/resources/scripts-v2/features/company/settings/components/RoleDropdown.vue
new file mode 100644
index 00000000..b631d62e
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/RoleDropdown.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+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 { roleService } from '@v2/api/services/role.service'
+
+interface RoleRow {
+  id: number
+  name: string
+  [key: string]: unknown
+}
+
+const props = defineProps<{
+  row: RoleRow
+  table?: { refresh: () => void } | null
+  loadData?: (() => void) | null
+}>()
+
+const dialogStore = useDialogStore()
+const { t } = useI18n()
+const route = useRoute()
+const userStore = useUserStore()
+const modalStore = useModalStore()
+
+async function editRole(id: number): Promise<void> {
+  modalStore.openModal({
+    title: t('settings.roles.edit_role'),
+    componentName: 'RolesModal',
+    size: 'lg',
+    data: id,
+    refreshData: props.loadData ?? undefined,
+  })
+}
+
+async function removeRole(id: number): Promise<void> {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('settings.roles.confirm_delete'),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        await roleService.delete(id)
+        props.loadData?.()
+      }
+    })
+}
+</script>
+
+<template>
+  <BaseDropdown>
+    <template #activator>
+      <BaseButton v-if="route.name === 'roles.view'" variant="primary">
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
+      </BaseButton>
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
+    </template>
+
+    <BaseDropdownItem
+      v-if="userStore.currentUser?.is_owner"
+      @click="editRole(row.id)"
+    >
+      <BaseIcon
+        name="PencilIcon"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+      />
+      {{ $t('general.edit') }}
+    </BaseDropdownItem>
+
+    <BaseDropdownItem
+      v-if="userStore.currentUser?.is_owner"
+      @click="removeRole(row.id)"
+    >
+      <BaseIcon
+        name="TrashIcon"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+      />
+      {{ $t('general.delete') }}
+    </BaseDropdownItem>
+  </BaseDropdown>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/RolesModal.vue b/resources/scripts-v2/features/company/settings/components/RolesModal.vue
new file mode 100644
index 00000000..b2a8390a
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/RolesModal.vue
@@ -0,0 +1,347 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+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 { 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 {
+  ability: string
+  disabled: boolean
+  depends_on?: string[]
+}
+
+interface AbilitiesList {
+  [group: string]: AbilityItem[]
+}
+
+interface RoleForm {
+  id: number | null
+  name: string
+  abilities: AbilityItem[]
+}
+
+const modalStore = useModalStore()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+const isFetchingInitialData = ref<boolean>(false)
+const isEdit = ref<boolean>(false)
+
+const currentRole = ref<RoleForm>({
+  id: null,
+  name: '',
+  abilities: [],
+})
+
+const abilitiesList = ref<AbilitiesList>({})
+
+const modalActive = computed<boolean>(
+  () => modalStore.active && modalStore.componentName === 'RolesModal'
+)
+
+const rules = computed(() => ({
+  name: {
+    required: helpers.withMessage(t('validation.required'), required),
+    minLength: helpers.withMessage(
+      t('validation.name_min_length', { count: 3 }),
+      minLength(3)
+    ),
+  },
+  abilities: {
+    required: helpers.withMessage(
+      t('validation.at_least_one_ability'),
+      required
+    ),
+  },
+}))
+
+const v$ = useVuelidate(rules, currentRole)
+
+async function setInitialData(): Promise<void> {
+  isFetchingInitialData.value = true
+
+  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,
+        disabled: false,
+        depends_on: [],
+      })
+    })
+    abilitiesList.value = grouped
+  }
+
+  if (modalStore.data && typeof modalStore.data === 'number') {
+    isEdit.value = true
+    const response = await roleService.get(modalStore.data)
+    if (response.data) {
+      currentRole.value = {
+        id: response.data.id,
+        name: response.data.name,
+        abilities: response.data.abilities.map((a) => ({
+          ...a,
+          ability: a.name,
+          disabled: false,
+          depends_on: [],
+        })),
+      }
+    }
+  } else {
+    isEdit.value = false
+    currentRole.value = { id: null, name: '', abilities: [] }
+  }
+
+  isFetchingInitialData.value = false
+}
+
+async function submitRoleData(): Promise<void> {
+  v$.value.$touch()
+
+  if (v$.value.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+  try {
+    const payload: CreateRolePayload = {
+      name: currentRole.value.name,
+      abilities: currentRole.value.abilities.map((a) => ({
+        ability: a.ability,
+      })),
+    }
+
+    if (isEdit.value && currentRole.value.id) {
+      await roleService.update(currentRole.value.id, payload)
+    } else {
+      await roleService.create(payload)
+    }
+
+    isSaving.value = false
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+    closeRolesModal()
+  } catch {
+    isSaving.value = false
+  }
+}
+
+function onUpdateAbility(currentAbility: AbilityItem): void {
+  const fd = currentRole.value.abilities.find(
+    (_abl) => _abl.ability === currentAbility.ability
+  )
+
+  if (!fd && currentAbility.depends_on?.length) {
+    enableAbilities(currentAbility)
+    return
+  }
+
+  currentAbility.depends_on?.forEach((_d) => {
+    Object.keys(abilitiesList.value).forEach((group) => {
+      abilitiesList.value[group].forEach((_a) => {
+        if (_d === _a.ability) {
+          _a.disabled = true
+          const found = currentRole.value.abilities.find(
+            (_af) => _af.ability === _d
+          )
+          if (!found) {
+            currentRole.value.abilities.push(_a)
+          }
+        }
+      })
+    })
+  })
+}
+
+function setSelectAll(checked: boolean): void {
+  const dependList: string[] = []
+  Object.keys(abilitiesList.value).forEach((group) => {
+    abilitiesList.value[group].forEach((_a) => {
+      if (_a.depends_on) {
+        dependList.push(..._a.depends_on)
+      }
+    })
+  })
+
+  Object.keys(abilitiesList.value).forEach((group) => {
+    abilitiesList.value[group].forEach((_a) => {
+      if (dependList.includes(_a.ability)) {
+        _a.disabled = checked
+      }
+      currentRole.value.abilities.push(_a)
+    })
+  })
+
+  if (!checked) {
+    currentRole.value.abilities = []
+  }
+}
+
+function enableAbilities(ability: AbilityItem): void {
+  ability.depends_on?.forEach((_d) => {
+    Object.keys(abilitiesList.value).forEach((group) => {
+      abilitiesList.value[group].forEach((_a) => {
+        const found = currentRole.value.abilities.find((_r) =>
+          _r.depends_on?.includes(_a.ability)
+        )
+        if (_d === _a.ability && !found) {
+          _a.disabled = false
+        }
+      })
+    })
+  })
+}
+
+function closeRolesModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    currentRole.value = { id: null, name: '', abilities: [] }
+    isEdit.value = false
+
+    Object.keys(abilitiesList.value).forEach((group) => {
+      abilitiesList.value[group].forEach((_a) => {
+        _a.disabled = false
+      })
+    })
+
+    v$.value.$reset()
+  }, 300)
+}
+</script>
+
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closeRolesModal"
+    @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="closeRolesModal"
+        />
+      </div>
+    </template>
+
+    <form @submit.prevent="submitRoleData">
+      <div class="px-4 md:px-8 py-4 md:py-6">
+        <BaseInputGroup
+          :label="$t('settings.roles.name')"
+          class="mt-3"
+          :error="v$.name.$error && v$.name.$errors[0].$message"
+          required
+          :content-loading="isFetchingInitialData"
+        >
+          <BaseInput
+            v-model="currentRole.name"
+            :invalid="v$.name.$error"
+            type="text"
+            :content-loading="isFetchingInitialData"
+            @input="v$.name.$touch()"
+          />
+        </BaseInputGroup>
+      </div>
+
+      <div class="flex justify-between">
+        <h6
+          class="text-sm not-italic font-medium text-heading px-4 md:px-8 py-1.5"
+        >
+          {{ $t('settings.roles.permission', 2) }}
+          <span class="text-sm text-red-500"> *</span>
+        </h6>
+        <div
+          class="text-sm not-italic font-medium text-subtle px-4 md:px-8 py-1.5"
+        >
+          <a
+            class="cursor-pointer text-primary-400"
+            @click="setSelectAll(true)"
+          >
+            {{ $t('settings.roles.select_all') }}
+          </a>
+          /
+          <a
+            class="cursor-pointer text-primary-400"
+            @click="setSelectAll(false)"
+          >
+            {{ $t('settings.roles.none') }}
+          </a>
+        </div>
+      </div>
+
+      <div class="border-t border-line-default py-3">
+        <div
+          class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 px-8 sm:px-8"
+        >
+          <div
+            v-for="(abilityGroup, gIndex) in abilitiesList"
+            :key="gIndex"
+            class="flex flex-col space-y-1"
+          >
+            <p
+              class="text-sm text-muted border-b border-line-default pb-1 mb-2"
+            >
+              {{ gIndex }}
+            </p>
+            <div
+              v-for="(ability, index) in abilityGroup"
+              :key="index"
+              class="flex"
+            >
+              <BaseCheckbox
+                v-model="currentRole.abilities"
+                :set-initial-value="true"
+                variant="primary"
+                :disabled="ability.disabled"
+                :label="ability.name"
+                :value="ability"
+                @update:model-value="onUpdateAbility(ability)"
+              />
+            </div>
+          </div>
+          <span
+            v-if="v$.abilities.$error"
+            class="block mt-0.5 text-sm text-red-500"
+          >
+            {{ v$.abilities.$errors[0].$message }}
+          </span>
+        </div>
+      </div>
+
+      <div
+        class="z-0 flex justify-end p-4 border-t border-solid border-line-default"
+      >
+        <BaseButton
+          class="mr-3 text-sm"
+          variant="primary-outline"
+          type="button"
+          @click="closeRolesModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+        <BaseButton
+          :loading="isSaving"
+          :disabled="isSaving"
+          variant="primary"
+          type="submit"
+        >
+          <template #left="slotProps">
+            <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
+          </template>
+          {{ isEdit ? $t('general.update') : $t('general.save') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/SesMailDriver.vue b/resources/scripts-v2/features/company/settings/components/SesMailDriver.vue
new file mode 100644
index 00000000..24d2ba0b
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/SesMailDriver.vue
@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, email, numeric, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+
+interface SesConfig {
+  mail_driver: string
+  mail_host: string
+  mail_port: string
+  mail_encryption: string
+  mail_ses_key: string
+  mail_ses_secret: string
+  mail_ses_region: string
+  from_mail: string
+  from_name: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    configData?: Record<string, unknown>
+    isSaving?: boolean
+    isFetchingInitialData?: boolean
+    mailDrivers?: string[]
+  }>(),
+  {
+    configData: () => ({}),
+    isSaving: false,
+    isFetchingInitialData: false,
+    mailDrivers: () => [],
+  }
+)
+
+const emit = defineEmits<{
+  'submit-data': [config: SesConfig]
+  'on-change-driver': [driver: string]
+}>()
+
+const { t } = useI18n()
+
+const isShowPassword = ref<boolean>(false)
+const encryptions = reactive<string[]>(['tls', 'ssl', 'starttls'])
+
+const sesConfig = reactive<SesConfig>({
+  mail_driver: 'ses',
+  mail_host: '',
+  mail_port: '',
+  mail_encryption: '',
+  mail_ses_key: '',
+  mail_ses_secret: '',
+  mail_ses_region: '',
+  from_mail: '',
+  from_name: '',
+})
+
+const getInputType = computed<string>(() =>
+  isShowPassword.value ? 'text' : 'password'
+)
+
+const rules = computed(() => ({
+  mail_driver: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  mail_host: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  mail_port: {
+    required: helpers.withMessage(t('validation.required'), required),
+    numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
+  },
+  mail_ses_key: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  mail_ses_secret: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  mail_ses_region: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  mail_encryption: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  from_mail: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  from_name: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, sesConfig)
+
+onMounted(() => {
+  for (const key in sesConfig) {
+    if (Object.prototype.hasOwnProperty.call(props.configData, key)) {
+      ;(sesConfig as Record<string, unknown>)[key] = props.configData[key]
+    }
+  }
+})
+
+async function saveEmailConfig(): Promise<void> {
+  v$.value.$touch()
+  if (!v$.value.$invalid) {
+    emit('submit-data', { ...sesConfig })
+  }
+}
+
+function onChangeDriver(): void {
+  v$.value.mail_driver.$touch()
+  emit('on-change-driver', sesConfig.mail_driver)
+}
+</script>
+
+<template>
+  <form @submit.prevent="saveEmailConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.mail.driver')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_driver.$error && v$.mail_driver.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model="sesConfig.mail_driver"
+          :content-loading="isFetchingInitialData"
+          :options="mailDrivers"
+          :can-deselect="false"
+          :invalid="v$.mail_driver.$error"
+          @update:model-value="onChangeDriver"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.host')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_host.$error && v$.mail_host.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="sesConfig.mail_host"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mail_host"
+          :invalid="v$.mail_host.$error"
+          @input="v$.mail_host.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.port')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_port.$error && v$.mail_port.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="sesConfig.mail_port"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mail_port"
+          :invalid="v$.mail_port.$error"
+          @input="v$.mail_port.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.encryption')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_encryption.$error &&
+          v$.mail_encryption.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model.trim="sesConfig.mail_encryption"
+          :content-loading="isFetchingInitialData"
+          :options="encryptions"
+          :invalid="v$.mail_encryption.$error"
+          placeholder="Select option"
+          @input="v$.mail_encryption.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_mail')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.from_mail.$error && v$.from_mail.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="sesConfig.from_mail"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="from_mail"
+          :invalid="v$.from_mail.$error"
+          @input="v$.from_mail.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_name')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.from_name.$error && v$.from_name.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="sesConfig.from_name"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="name"
+          :invalid="v$.from_name.$error"
+          @input="v$.from_name.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.ses_key')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_ses_key.$error && v$.mail_ses_key.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="sesConfig.mail_ses_key"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mail_ses_key"
+          :invalid="v$.mail_ses_key.$error"
+          @input="v$.mail_ses_key.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.ses_secret')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_ses_secret.$error &&
+          v$.mail_ses_secret.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="sesConfig.mail_ses_secret"
+          :content-loading="isFetchingInitialData"
+          :type="getInputType"
+          name="mail_ses_secret"
+          autocomplete="off"
+          :invalid="v$.mail_ses_secret.$error"
+          @input="v$.mail_ses_secret.$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.mail.ses_region')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_ses_region.$error &&
+          v$.mail_ses_region.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="sesConfig.mail_ses_region"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mail_ses_region"
+          :invalid="v$.mail_ses_region.$error"
+          @input="v$.mail_ses_region.$touch()"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+
+    <div class="flex my-10">
+      <BaseButton
+        :disabled="isSaving"
+        :content-loading="isFetchingInitialData"
+        :loading="isSaving"
+        variant="primary"
+        type="submit"
+      >
+        <template #left="slotProps">
+          <BaseIcon
+            v-if="!isSaving"
+            name="ArrowDownOnSquareIcon"
+            :class="slotProps.class"
+          />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+      <slot />
+    </div>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/SmtpMailDriver.vue b/resources/scripts-v2/features/company/settings/components/SmtpMailDriver.vue
new file mode 100644
index 00000000..eddc816b
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/SmtpMailDriver.vue
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { reactive, onMounted, ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, email, numeric, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+
+interface SmtpConfig {
+  mail_driver: string
+  mail_host: string
+  mail_port: string
+  mail_username: string
+  mail_password: string
+  mail_encryption: string
+  from_mail: string
+  from_name: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    configData?: Record<string, unknown>
+    isSaving?: boolean
+    isFetchingInitialData?: boolean
+    mailDrivers?: string[]
+  }>(),
+  {
+    configData: () => ({}),
+    isSaving: false,
+    isFetchingInitialData: false,
+    mailDrivers: () => [],
+  }
+)
+
+const emit = defineEmits<{
+  'submit-data': [config: SmtpConfig]
+  'on-change-driver': [driver: string]
+}>()
+
+const { t } = useI18n()
+
+const isShowPassword = ref<boolean>(false)
+const schemes = reactive<string[]>(['smtp', 'smtps', 'none'])
+
+const smtpConfig = reactive<SmtpConfig>({
+  mail_driver: 'smtp',
+  mail_host: '',
+  mail_port: '',
+  mail_username: '',
+  mail_password: '',
+  mail_encryption: '',
+  from_mail: '',
+  from_name: '',
+})
+
+const getInputType = computed<string>(() =>
+  isShowPassword.value ? 'text' : 'password'
+)
+
+const rules = computed(() => ({
+  mail_driver: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  mail_host: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  mail_port: {
+    required: helpers.withMessage(t('validation.required'), required),
+    numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
+  },
+  from_mail: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  from_name: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, smtpConfig)
+
+onMounted(() => {
+  for (const key in smtpConfig) {
+    if (Object.prototype.hasOwnProperty.call(props.configData, key)) {
+      ;(smtpConfig as Record<string, unknown>)[key] = props.configData[key]
+    }
+  }
+})
+
+async function saveEmailConfig(): Promise<void> {
+  v$.value.$touch()
+  if (!v$.value.$invalid) {
+    emit('submit-data', { ...smtpConfig })
+  }
+}
+
+function onChangeDriver(): void {
+  v$.value.mail_driver.$touch()
+  emit('on-change-driver', smtpConfig.mail_driver)
+}
+</script>
+
+<template>
+  <form @submit.prevent="saveEmailConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.mail.driver')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_driver.$error && v$.mail_driver.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model="smtpConfig.mail_driver"
+          :content-loading="isFetchingInitialData"
+          :options="mailDrivers"
+          :can-deselect="false"
+          :invalid="v$.mail_driver.$error"
+          @update:model-value="onChangeDriver"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.host')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_host.$error && v$.mail_host.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="smtpConfig.mail_host"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mail_host"
+          :invalid="v$.mail_host.$error"
+          @input="v$.mail_host.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :content-loading="isFetchingInitialData"
+        :label="$t('settings.mail.username')"
+      >
+        <BaseInput
+          v-model.trim="smtpConfig.mail_username"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="db_name"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :content-loading="isFetchingInitialData"
+        :label="$t('settings.mail.password')"
+      >
+        <BaseInput
+          v-model.trim="smtpConfig.mail_password"
+          :content-loading="isFetchingInitialData"
+          :type="getInputType"
+          name="password"
+        >
+          <template #right>
+            <BaseIcon
+              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
+              class="mr-1 text-muted cursor-pointer"
+              @click="isShowPassword = !isShowPassword"
+            />
+          </template>
+        </BaseInput>
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.port')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mail_port.$error && v$.mail_port.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="smtpConfig.mail_port"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mail_port"
+          :invalid="v$.mail_port.$error"
+          @input="v$.mail_port.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.encryption')"
+        :content-loading="isFetchingInitialData"
+      >
+        <BaseMultiselect
+          v-model.trim="smtpConfig.mail_encryption"
+          :content-loading="isFetchingInitialData"
+          :options="schemes"
+          :searchable="true"
+          :show-labels="false"
+          placeholder="Select option"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_mail')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.from_mail.$error && v$.from_mail.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="smtpConfig.from_mail"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="from_mail"
+          :invalid="v$.from_mail.$error"
+          @input="v$.from_mail.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_name')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.from_name.$error && v$.from_name.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="smtpConfig.from_name"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="from_name"
+          :invalid="v$.from_name.$error"
+          @input="v$.from_name.$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>
+      <slot />
+    </div>
+  </form>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/TaxTypeDropdown.vue b/resources/scripts-v2/features/company/settings/components/TaxTypeDropdown.vue
new file mode 100644
index 00000000..3db2e6b6
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/TaxTypeDropdown.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+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 { taxTypeService } from '@v2/api/services/tax-type.service'
+
+const ABILITIES = {
+  EDIT_TAX_TYPE: 'edit-tax-type',
+  DELETE_TAX_TYPE: 'delete-tax-type',
+} as const
+
+interface TaxTypeRow {
+  id: number
+  name: string
+  [key: string]: unknown
+}
+
+const props = defineProps<{
+  row: TaxTypeRow
+  table?: { refresh: () => void } | null
+  loadData?: (() => void) | null
+}>()
+
+const dialogStore = useDialogStore()
+const { t } = useI18n()
+const route = useRoute()
+const userStore = useUserStore()
+const modalStore = useModalStore()
+
+async function editTaxType(id: number): Promise<void> {
+  modalStore.openModal({
+    title: t('settings.tax_types.edit_tax'),
+    componentName: 'TaxTypeModal',
+    size: 'sm',
+    data: id,
+    refreshData: props.loadData ?? undefined,
+  })
+}
+
+function removeTaxType(id: number): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('settings.tax_types.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 taxTypeService.delete(id)
+        if (response.success) {
+          props.loadData?.()
+        }
+      }
+    })
+}
+</script>
+
+<template>
+  <BaseDropdown>
+    <template #activator>
+      <BaseButton v-if="route.name === 'tax-types.view'" variant="primary">
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
+      </BaseButton>
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
+    </template>
+
+    <BaseDropdownItem
+      v-if="userStore.hasAbilities(ABILITIES.EDIT_TAX_TYPE)"
+      @click="editTaxType(row.id)"
+    >
+      <BaseIcon
+        name="PencilIcon"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+      />
+      {{ $t('general.edit') }}
+    </BaseDropdownItem>
+
+    <BaseDropdownItem
+      v-if="userStore.hasAbilities(ABILITIES.DELETE_TAX_TYPE)"
+      @click="removeTaxType(row.id)"
+    >
+      <BaseIcon
+        name="TrashIcon"
+        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
+      />
+      {{ $t('general.delete') }}
+    </BaseDropdownItem>
+  </BaseDropdown>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/components/TaxTypeModal.vue b/resources/scripts-v2/features/company/settings/components/TaxTypeModal.vue
new file mode 100644
index 00000000..52f7bbb1
--- /dev/null
+++ b/resources/scripts-v2/features/company/settings/components/TaxTypeModal.vue
@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  required,
+  minLength,
+  maxLength,
+  between,
+  helpers,
+} from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useCompanyStore } from '@v2/stores/company.store'
+import { taxTypeService } from '@v2/api/services/tax-type.service'
+import type { CreateTaxTypePayload } from '@v2/api/services/tax-type.service'
+
+interface TaxTypeForm {
+  id: number | null
+  name: string
+  calculation_type: string
+  percent: number
+  fixed_amount: number
+  description: string
+}
+
+const modalStore = useModalStore()
+const companyStore = useCompanyStore()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+const isEdit = ref<boolean>(false)
+
+const currentTaxType = ref<TaxTypeForm>({
+  id: null,
+  name: '',
+  calculation_type: 'percentage',
+  percent: 0,
+  fixed_amount: 0,
+  description: '',
+})
+
+const defaultCurrency = computed(() => companyStore.selectedCompanyCurrency)
+
+const modalActive = computed<boolean>(
+  () => modalStore.active && modalStore.componentName === 'TaxTypeModal'
+)
+
+const rules = computed(() => ({
+  name: {
+    required: helpers.withMessage(t('validation.required'), required),
+    minLength: helpers.withMessage(
+      t('validation.name_min_length', { count: 3 }),
+      minLength(3)
+    ),
+  },
+  calculation_type: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  percent: {
+    required: helpers.withMessage(t('validation.required'), required),
+    between: helpers.withMessage(
+      t('validation.enter_valid_tax_rate'),
+      between(-100, 100)
+    ),
+  },
+  fixed_amount: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  description: {
+    maxLength: helpers.withMessage(
+      t('validation.description_maxlength', { count: 255 }),
+      maxLength(255)
+    ),
+  },
+}))
+
+const v$ = useVuelidate(rules, currentTaxType)
+
+const fixedAmount = computed<number>({
+  get: () => currentTaxType.value.fixed_amount / 100,
+  set: (value: number) => {
+    currentTaxType.value.fixed_amount = Math.round(value * 100)
+  },
+})
+
+async function setInitialData(): Promise<void> {
+  if (modalStore.data && typeof modalStore.data === 'number') {
+    isEdit.value = true
+    const response = await taxTypeService.get(modalStore.data)
+    if (response.data) {
+      const tax = response.data
+      currentTaxType.value = {
+        id: tax.id,
+        name: tax.name,
+        calculation_type: tax.calculation_type ?? 'percentage',
+        percent: tax.percent,
+        fixed_amount: tax.fixed_amount,
+        description: tax.description ?? '',
+      }
+    }
+  } else {
+    isEdit.value = false
+    resetForm()
+  }
+}
+
+async function submitTaxTypeData(): Promise<void> {
+  v$.value.$touch()
+  if (v$.value.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+  try {
+    const payload: CreateTaxTypePayload = {
+      name: currentTaxType.value.name,
+      percent: currentTaxType.value.percent,
+      fixed_amount: currentTaxType.value.fixed_amount,
+      calculation_type: currentTaxType.value.calculation_type,
+      description: currentTaxType.value.description || null,
+    }
+
+    if (isEdit.value && currentTaxType.value.id) {
+      await taxTypeService.update(currentTaxType.value.id, payload)
+    } else {
+      await taxTypeService.create(payload)
+    }
+
+    isSaving.value = false
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+    closeTaxTypeModal()
+  } catch {
+    isSaving.value = false
+  }
+}
+
+function resetForm(): void {
+  currentTaxType.value = {
+    id: null,
+    name: '',
+    calculation_type: 'percentage',
+    percent: 0,
+    fixed_amount: 0,
+    description: '',
+  }
+}
+
+function closeTaxTypeModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    resetForm()
+    isEdit.value = false
+    v$.value.$reset()
+  }, 300)
+}
+</script>
+
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closeTaxTypeModal"
+    @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="closeTaxTypeModal"
+        />
+      </div>
+    </template>
+    <form action="" @submit.prevent="submitTaxTypeData">
+      <div class="p-4 sm:p-6">
+        <BaseInputGrid layout="one-column">
+          <BaseInputGroup
+            :label="$t('tax_types.name')"
+            variant="horizontal"
+            :error="v$.name.$error && v$.name.$errors[0].$message"
+            required
+          >
+            <BaseInput
+              v-model="currentTaxType.name"
+              :invalid="v$.name.$error"
+              type="text"
+              @input="v$.name.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('tax_types.tax_type')"
+            variant="horizontal"
+            required
+          >
+            <BaseSelectInput
+              v-model="currentTaxType.calculation_type"
+              :options="[
+                { id: 'percentage', label: $t('tax_types.percentage') },
+                { id: 'fixed', label: $t('tax_types.fixed_amount') },
+              ]"
+              :allow-empty="false"
+              value-prop="id"
+              label-prop="label"
+              track-by="label"
+              :searchable="false"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            v-if="currentTaxType.calculation_type === 'percentage'"
+            :label="$t('tax_types.percent')"
+            variant="horizontal"
+            required
+          >
+            <BaseMoney
+              v-model="currentTaxType.percent"
+              :currency="{
+                decimal: '.',
+                thousands: ',',
+                symbol: '% ',
+                precision: 2,
+                masked: false,
+              }"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            v-else
+            :label="$t('tax_types.fixed_amount')"
+            variant="horizontal"
+            required
+          >
+            <BaseMoney v-model="fixedAmount" :currency="defaultCurrency" />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('tax_types.description')"
+            :error="
+              v$.description.$error && v$.description.$errors[0].$message
+            "
+            variant="horizontal"
+          >
+            <BaseTextarea
+              v-model="currentTaxType.description"
+              :invalid="v$.description.$error"
+              rows="4"
+              cols="50"
+              @input="v$.description.$touch()"
+            />
+          </BaseInputGroup>
+        </BaseInputGrid>
+      </div>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-solid border-line-default"
+      >
+        <BaseButton
+          class="mr-3 text-sm"
+          variant="primary-outline"
+          type="button"
+          @click="closeTaxTypeModal"
+        >
+          {{ $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>
+          {{ isEdit ? $t('general.update') : $t('general.save') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
diff --git a/resources/scripts-v2/features/company/settings/views/CustomFieldsView.vue b/resources/scripts-v2/features/company/settings/views/CustomFieldsView.vue
index e7bac03b..bf26ba34 100644
--- a/resources/scripts-v2/features/company/settings/views/CustomFieldsView.vue
+++ b/resources/scripts-v2/features/company/settings/views/CustomFieldsView.vue
@@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n'
 import { useModalStore } from '../../../../stores/modal.store'
 import { useUserStore } from '../../../../stores/user.store'
 import { customFieldService } from '../../../../api/services/custom-field.service'
-import CustomFieldDropdown from '@/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue'
-import CustomFieldModal from '@/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue'
+import CustomFieldDropdown from '@v2/features/company/settings/components/CustomFieldDropdown.vue'
+import CustomFieldModal from '@v2/features/company/settings/components/CustomFieldModal.vue'
 
 interface TableColumn {
   key: string
diff --git a/resources/scripts-v2/features/company/settings/views/CustomizationView.vue b/resources/scripts-v2/features/company/settings/views/CustomizationView.vue
index ee98ddf5..2cfb652d 100644
--- a/resources/scripts-v2/features/company/settings/views/CustomizationView.vue
+++ b/resources/scripts-v2/features/company/settings/views/CustomizationView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import InvoicesTab from '@/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue'
-import EstimatesTab from '@/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue'
-import PaymentsTab from '@/scripts/admin/views/settings/customization/payments/PaymentsTab.vue'
-import ItemsTab from '@/scripts/admin/views/settings/customization/items/ItemsTab.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'
 </script>
 
 <template>
diff --git a/resources/scripts-v2/features/company/settings/views/ExchangeRateView.vue b/resources/scripts-v2/features/company/settings/views/ExchangeRateView.vue
index b5e52d1b..b3d78cbf 100644
--- a/resources/scripts-v2/features/company/settings/views/ExchangeRateView.vue
+++ b/resources/scripts-v2/features/company/settings/views/ExchangeRateView.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { useModalStore } from '../../../../stores/modal.store'
 import { useDialogStore } from '../../../../stores/dialog.store'
 import { exchangeRateService } from '../../../../api/services/exchange-rate.service'
-import ExchangeRateProviderModal from '@/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue'
+import ExchangeRateProviderModal from '@v2/features/company/settings/components/ExchangeRateProviderModal.vue'
 
 interface TableColumn {
   key: string
diff --git a/resources/scripts-v2/features/company/settings/views/ExpenseCategoriesView.vue b/resources/scripts-v2/features/company/settings/views/ExpenseCategoriesView.vue
index d6dad982..ad6ed1c7 100644
--- a/resources/scripts-v2/features/company/settings/views/ExpenseCategoriesView.vue
+++ b/resources/scripts-v2/features/company/settings/views/ExpenseCategoriesView.vue
@@ -3,8 +3,8 @@ import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useModalStore } from '../../../../stores/modal.store'
 import { expenseService } from '../../../../api/services/expense.service'
-import ExpenseCategoryDropdown from '@/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue'
-import CategoryModal from '@/scripts/admin/components/modal-components/CategoryModal.vue'
+import ExpenseCategoryDropdown from '@v2/features/company/settings/components/ExpenseCategoryDropdown.vue'
+import CategoryModal from '@v2/features/company/settings/components/CategoryModal.vue'
 
 interface TableColumn {
   key: string
diff --git a/resources/scripts-v2/features/company/settings/views/MailConfigView.vue b/resources/scripts-v2/features/company/settings/views/MailConfigView.vue
index a06fb88c..89d1991b 100644
--- a/resources/scripts-v2/features/company/settings/views/MailConfigView.vue
+++ b/resources/scripts-v2/features/company/settings/views/MailConfigView.vue
@@ -5,11 +5,11 @@ import { useModalStore } from '../../../../stores/modal.store'
 import { companyService } from '../../../../api/services/company.service'
 import { mailService } from '../../../../api/services/mail.service'
 import type { MailDriver } from '../../../../api/services/mail.service'
-import Smtp from '@/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue'
-import Mailgun from '@/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue'
-import Ses from '@/scripts/admin/views/settings/mail-driver/SesMailDriver.vue'
-import Basic from '@/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue'
-import MailTestModal from '@/scripts/admin/components/modal-components/MailTestModal.vue'
+import Smtp from '@v2/features/company/settings/components/SmtpMailDriver.vue'
+import Mailgun from '@v2/features/company/settings/components/MailgunMailDriver.vue'
+import Ses from '@v2/features/company/settings/components/SesMailDriver.vue'
+import Basic from '@v2/features/company/settings/components/BasicMailDriver.vue'
+import MailTestModal from '@v2/features/company/settings/components/MailTestModal.vue'
 
 const { t } = useI18n()
 const modalStore = useModalStore()
diff --git a/resources/scripts-v2/features/company/settings/views/NotesView.vue b/resources/scripts-v2/features/company/settings/views/NotesView.vue
index e939ddcb..e25f1c3d 100644
--- a/resources/scripts-v2/features/company/settings/views/NotesView.vue
+++ b/resources/scripts-v2/features/company/settings/views/NotesView.vue
@@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n'
 import { useModalStore } from '../../../../stores/modal.store'
 import { useUserStore } from '../../../../stores/user.store'
 import { noteService } from '../../../../api/services/note.service'
-import NoteDropdown from '@/scripts/admin/components/dropdowns/NoteIndexDropdown.vue'
-import NoteModal from '@/scripts/admin/components/modal-components/NoteModal.vue'
+import NoteDropdown from '@v2/features/company/settings/components/NoteDropdown.vue'
+import NoteModal from '@v2/features/company/settings/components/NoteModal.vue'
 
 interface TableColumn {
   key: string
diff --git a/resources/scripts-v2/features/company/settings/views/PaymentModesView.vue b/resources/scripts-v2/features/company/settings/views/PaymentModesView.vue
index a89c22d7..492e85ff 100644
--- a/resources/scripts-v2/features/company/settings/views/PaymentModesView.vue
+++ b/resources/scripts-v2/features/company/settings/views/PaymentModesView.vue
@@ -3,8 +3,8 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useModalStore } from '../../../../stores/modal.store'
 import { paymentService } from '../../../../api/services/payment.service'
-import PaymentModeModal from '@/scripts/admin/components/modal-components/PaymentModeModal.vue'
-import PaymentModeDropdown from '@/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue'
+import PaymentModeModal from '@v2/features/company/settings/components/PaymentModeModal.vue'
+import PaymentModeDropdown from '@v2/features/company/settings/components/PaymentModeDropdown.vue'
 
 interface TableColumn {
   key: string
diff --git a/resources/scripts-v2/features/company/settings/views/RolesView.vue b/resources/scripts-v2/features/company/settings/views/RolesView.vue
index 6bfc5bbe..bfb34551 100644
--- a/resources/scripts-v2/features/company/settings/views/RolesView.vue
+++ b/resources/scripts-v2/features/company/settings/views/RolesView.vue
@@ -5,8 +5,8 @@ import { useModalStore } from '../../../../stores/modal.store'
 import { useUserStore } from '../../../../stores/user.store'
 import { useCompanyStore } from '../../../../stores/company.store'
 import { roleService } from '../../../../api/services/role.service'
-import RoleDropdown from '@/scripts/admin/components/dropdowns/RoleIndexDropdown.vue'
-import RolesModal from '@/scripts/admin/components/modal-components/RolesModal.vue'
+import RoleDropdown from '@v2/features/company/settings/components/RoleDropdown.vue'
+import RolesModal from '@v2/features/company/settings/components/RolesModal.vue'
 
 interface TableColumn {
   key: string
diff --git a/resources/scripts-v2/features/company/settings/views/TaxTypesView.vue b/resources/scripts-v2/features/company/settings/views/TaxTypesView.vue
index f94fc520..eab4e235 100644
--- a/resources/scripts-v2/features/company/settings/views/TaxTypesView.vue
+++ b/resources/scripts-v2/features/company/settings/views/TaxTypesView.vue
@@ -5,8 +5,8 @@ import { useCompanyStore } from '../../../../stores/company.store'
 import { useUserStore } from '../../../../stores/user.store'
 import { useModalStore } from '../../../../stores/modal.store'
 import { taxTypeService } from '../../../../api/services/tax-type.service'
-import TaxTypeDropdown from '@/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue'
-import TaxTypeModal from '@/scripts/admin/components/modal-components/TaxTypeModal.vue'
+import TaxTypeDropdown from '@v2/features/company/settings/components/TaxTypeDropdown.vue'
+import TaxTypeModal from '@v2/features/company/settings/components/TaxTypeModal.vue'
 
 interface TableColumn {
   key: string
diff --git a/resources/scripts-v2/features/customer-portal/store.ts b/resources/scripts-v2/features/customer-portal/store.ts
index 11dc9039..4564a665 100644
--- a/resources/scripts-v2/features/customer-portal/store.ts
+++ b/resources/scripts-v2/features/customer-portal/store.ts
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
-import { client } from '../../api/client'
-import type { Invoice } from '../../types/domain/invoice'
-import type { Estimate, EstimateStatus } from '../../types/domain/estimate'
-import type { Payment, PaymentMethod } from '../../types/domain/payment'
-import type { Currency } from '../../types/domain/currency'
-import type { Customer, Country } from '../../types/domain/customer'
+import { client } from '@v2/api/client'
+import type { Invoice } from '@v2/types/domain/invoice'
+import type { Estimate, EstimateStatus } from '@v2/types/domain/estimate'
+import type { Payment, PaymentMethod } from '@v2/types/domain/payment'
+import type { Currency } from '@v2/types/domain/currency'
+import type { Customer, Country } from '@v2/types/domain/customer'
 
 // ----------------------------------------------------------------
 // Types
diff --git a/resources/scripts-v2/features/shared/document-form/DocumentItemRow.vue b/resources/scripts-v2/features/shared/document-form/DocumentItemRow.vue
index 9bb30f3d..8176419a 100644
--- a/resources/scripts-v2/features/shared/document-form/DocumentItemRow.vue
+++ b/resources/scripts-v2/features/shared/document-form/DocumentItemRow.vue
@@ -185,7 +185,7 @@ import { useI18n } from 'vue-i18n'
 import { required, between, maxLength, helpers, minValue } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import DocumentItemRowTax from './DocumentItemRowTax.vue'
-import DragIcon from '@/scripts/components/icons/DragIcon.vue'
+import DragIcon from '@v2/components/icons/DragIcon.vue'
 import type { Currency } from '../../../types/domain/currency'
 import type { DocumentItem, DocumentFormData, DocumentTax } from './use-document-calculations'
 
diff --git a/resources/scripts-v2/layouts/AuthLayout.vue b/resources/scripts-v2/layouts/AuthLayout.vue
index 4d62eee8..6735a634 100644
--- a/resources/scripts-v2/layouts/AuthLayout.vue
+++ b/resources/scripts-v2/layouts/AuthLayout.vue
@@ -91,12 +91,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import NotificationRoot from '../../components/notifications/NotificationRoot.vue'
-import MainLogo from '../../components/icons/MainLogo.vue'
-import LoginBackground from '../../components/icons/LoginBackground.vue'
-import LoginPlanetCrater from '../../components/icons/LoginPlanetCrater.vue'
-import LoginBottomVector from '../../components/icons/LoginBottomVector.vue'
-import LoginBackgroundOverlay from '../../components/icons/LoginBackgroundOverlay.vue'
+import NotificationRoot from '@v2/components/notifications/NotificationRoot.vue'
+import MainLogo from '@v2/components/icons/MainLogo.vue'
+import LoginBackground from '@v2/components/icons/svg/LoginBackground.vue'
+import LoginPlanetCrater from '@v2/components/icons/svg/LoginPlanetCrater.vue'
+import LoginBottomVector from '@v2/components/icons/svg/LoginBottomVector.vue'
+import LoginBackgroundOverlay from '@v2/components/icons/svg/LoginBackgroundOverlay.vue'
 
 declare global {
   interface Window {
diff --git a/resources/scripts-v2/layouts/CompanyLayout.vue b/resources/scripts-v2/layouts/CompanyLayout.vue
index 04c66e7b..68f57c7c 100644
--- a/resources/scripts-v2/layouts/CompanyLayout.vue
+++ b/resources/scripts-v2/layouts/CompanyLayout.vue
@@ -31,13 +31,13 @@
 import { useI18n } from 'vue-i18n'
 import { onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useGlobalStore } from '../../stores/global.store'
-import { useUserStore } from '../../stores/user.store'
-import { useModalStore } from '../../stores/modal.store'
-import { useCompanyStore } from '../../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 { useCompanyStore } from '@v2/stores/company.store'
 import SiteHeader from './partials/SiteHeader.vue'
 import SiteSidebar from './partials/SiteSidebar.vue'
-import NotificationRoot from '../../components/notifications/NotificationRoot.vue'
+import NotificationRoot from '@v2/components/notifications/NotificationRoot.vue'
 import ImpersonationBanner from './partials/ImpersonationBanner.vue'
 
 interface RouteMeta {
diff --git a/resources/scripts-v2/layouts/InstallationLayout.vue b/resources/scripts-v2/layouts/InstallationLayout.vue
index dcbb3d1e..0b3df8ad 100644
--- a/resources/scripts-v2/layouts/InstallationLayout.vue
+++ b/resources/scripts-v2/layouts/InstallationLayout.vue
@@ -9,5 +9,5 @@
 </template>
 
 <script setup lang="ts">
-import NotificationRoot from '../../components/notifications/NotificationRoot.vue'
+import NotificationRoot from '@v2/components/notifications/NotificationRoot.vue'
 </script>
diff --git a/resources/scripts-v2/layouts/partials/CompanySwitcher.vue b/resources/scripts-v2/layouts/partials/CompanySwitcher.vue
index c216b65b..6bf6f3d4 100644
--- a/resources/scripts-v2/layouts/partials/CompanySwitcher.vue
+++ b/resources/scripts-v2/layouts/partials/CompanySwitcher.vue
@@ -186,12 +186,12 @@ import { ref, watch } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { useCompanyStore } from '../../../stores/company.store'
-import { useGlobalStore } from '../../../stores/global.store'
-import { useUserStore } from '../../../stores/user.store'
-import { useModalStore } from '../../../stores/modal.store'
-import type { Company, CompanyInvitation } from '../../../types/domain/company'
-import type { Role } from '../../../types/domain/role'
+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 type { Company, CompanyInvitation } from '@v2/types/domain/company'
+import type { Role } from '@v2/types/domain/role'
 
 interface PendingInvitation {
   id: number
diff --git a/resources/scripts-v2/layouts/partials/GlobalSearchBar.vue b/resources/scripts-v2/layouts/partials/GlobalSearchBar.vue
index a7321cfc..71b8cd28 100644
--- a/resources/scripts-v2/layouts/partials/GlobalSearchBar.vue
+++ b/resources/scripts-v2/layouts/partials/GlobalSearchBar.vue
@@ -112,8 +112,8 @@
 import { ref, watch } from 'vue'
 import { onClickOutside, useDebounceFn } from '@vueuse/core'
 import { useRoute } from 'vue-router'
-import { client } from '../../../api/client'
-import { API } from '../../../api/endpoints'
+import { client } from '@v2/api/client'
+import { API } from '@v2/api/endpoints'
 
 interface SearchResult {
   id: number
diff --git a/resources/scripts-v2/layouts/partials/ImpersonationBanner.vue b/resources/scripts-v2/layouts/partials/ImpersonationBanner.vue
index 68fed4c7..2582486d 100644
--- a/resources/scripts-v2/layouts/partials/ImpersonationBanner.vue
+++ b/resources/scripts-v2/layouts/partials/ImpersonationBanner.vue
@@ -17,9 +17,9 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import * as ls from '../../../utils/local-storage'
-import { client } from '../../../api/client'
-import { API } from '../../../api/endpoints'
+import * as ls from '@v2/utils/local-storage'
+import { client } from '@v2/api/client'
+import { API } from '@v2/api/endpoints'
 
 const isStopping = ref<boolean>(false)
 
diff --git a/resources/scripts-v2/layouts/partials/SiteHeader.vue b/resources/scripts-v2/layouts/partials/SiteHeader.vue
index ba5b690f..82cfa91d 100644
--- a/resources/scripts-v2/layouts/partials/SiteHeader.vue
+++ b/resources/scripts-v2/layouts/partials/SiteHeader.vue
@@ -161,17 +161,17 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { useAuthStore } from '../../../stores/auth.store'
-import { useUserStore } from '../../../stores/user.store'
-import { useGlobalStore } from '../../../stores/global.store'
-import { useCompanyStore } from '../../../stores/company.store'
-import { useTheme } from '../../../composables/use-theme'
-import { ABILITIES } from '../../../config/abilities'
-import { THEME } from '../../../config/constants'
-import type { Theme } from '../../../config/constants'
+import { useAuthStore } from '@v2/stores/auth.store'
+import { useUserStore } from '@v2/stores/user.store'
+import { useGlobalStore } from '@v2/stores/global.store'
+import { useCompanyStore } from '@v2/stores/company.store'
+import { useTheme } from '@v2/composables/use-theme'
+import { ABILITIES } from '@v2/config/abilities'
+import { THEME } from '@v2/config/constants'
+import type { Theme } from '@v2/config/constants'
 import CompanySwitcher from './CompanySwitcher.vue'
 import GlobalSearchBar from './GlobalSearchBar.vue'
-import MainLogo from '../../../components/icons/MainLogo.vue'
+import MainLogo from '@v2/components/icons/MainLogo.vue'
 
 interface ThemeOption {
   value: Theme
diff --git a/resources/scripts-v2/layouts/partials/SiteSidebar.vue b/resources/scripts-v2/layouts/partials/SiteSidebar.vue
index 2549a155..ae2e37cb 100644
--- a/resources/scripts-v2/layouts/partials/SiteSidebar.vue
+++ b/resources/scripts-v2/layouts/partials/SiteSidebar.vue
@@ -197,8 +197,8 @@ import {
   TransitionRoot,
 } from '@headlessui/vue'
 import { useRoute } from 'vue-router'
-import { useGlobalStore } from '../../../stores/global.store'
-import MainLogo from '../../../components/icons/MainLogo.vue'
+import { useGlobalStore } from '@v2/stores/global.store'
+import MainLogo from '@v2/components/icons/MainLogo.vue'
 
 interface MenuItemData {
   name: string
diff --git a/resources/scripts-v2/main.ts b/resources/scripts-v2/main.ts
index c2d9e665..706eb048 100644
--- a/resources/scripts-v2/main.ts
+++ b/resources/scripts-v2/main.ts
@@ -1,7 +1,21 @@
-import '../../css/invoiceshelf.css'
+import '../css/invoiceshelf.css'
 import 'v-tooltip/dist/v-tooltip.css'
 
 import InvoiceShelf from './InvoiceShelf'
 
+declare global {
+  interface Window {
+    InvoiceShelf: InvoiceShelf
+    loadLanguage?: (locale: string) => Promise<void>
+    customer_logo?: string
+    login_page_logo?: string
+    login_page_heading?: string
+    login_page_description?: string
+    copyright_text?: string
+    demo_mode?: boolean
+  }
+}
+
 const invoiceShelf = new InvoiceShelf()
-invoiceShelf.start()
+window.InvoiceShelf = invoiceShelf
+window.loadLanguage = (locale: string) => invoiceShelf.loadLanguage(locale)
diff --git a/resources/scripts-v2/router/guards.ts b/resources/scripts-v2/router/guards.ts
index 4268678a..4c77ecff 100644
--- a/resources/scripts-v2/router/guards.ts
+++ b/resources/scripts-v2/router/guards.ts
@@ -1,7 +1,7 @@
 import type { NavigationGuardWithThis, RouteLocationNormalized } from 'vue-router'
-import { useUserStore } from '../stores/user.store'
-import { useGlobalStore } from '../stores/global.store'
-import { useCompanyStore } from '../stores/company.store'
+import { useUserStore } from '@v2/stores/user.store'
+import { useGlobalStore } from '@v2/stores/global.store'
+import { useCompanyStore } from '@v2/stores/company.store'
 
 /**
  * Main authentication and authorization guard.
diff --git a/resources/scripts-v2/stores/auth.store.ts b/resources/scripts-v2/stores/auth.store.ts
index b3aad208..899547d0 100644
--- a/resources/scripts-v2/stores/auth.store.ts
+++ b/resources/scripts-v2/stores/auth.store.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import { authService } from '../api/services/auth.service'
-import type { LoginPayload, ForgotPasswordPayload, ResetPasswordPayload } from '../api/services/auth.service'
+import { authService } from '@v2/api/services/auth.service'
+import type { LoginPayload, ForgotPasswordPayload, ResetPasswordPayload } from '@v2/api/services/auth.service'
 import { useNotificationStore } from './notification.store'
 import { handleApiError } from '../utils/error-handling'
 import * as localStore from '../utils/local-storage'
diff --git a/resources/scripts-v2/stores/company.store.ts b/resources/scripts-v2/stores/company.store.ts
index a0b3eabf..a6f30c01 100644
--- a/resources/scripts-v2/stores/company.store.ts
+++ b/resources/scripts-v2/stores/company.store.ts
@@ -1,17 +1,17 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import { companyService } from '../api/services/company.service'
+import { companyService } from '@v2/api/services/company.service'
 import type {
   UpdateCompanyPayload,
   CompanySettingsPayload,
   CreateCompanyPayload,
-} from '../api/services/company.service'
+} from '@v2/api/services/company.service'
 import { useNotificationStore } from './notification.store'
 import { handleApiError } from '../utils/error-handling'
 import * as localStore from '../utils/local-storage'
-import type { Company } from '../types/domain/company'
-import type { Currency } from '../types/domain/currency'
-import type { ApiResponse } from '../types/api'
+import type { Company } from '@v2/types/domain/company'
+import type { Currency } from '@v2/types/domain/currency'
+import type { ApiResponse } from '@v2/types/api'
 
 export const useCompanyStore = defineStore('company', () => {
   // State
diff --git a/resources/scripts-v2/stores/global.store.ts b/resources/scripts-v2/stores/global.store.ts
index 3e7f3962..94f6ba70 100644
--- a/resources/scripts-v2/stores/global.store.ts
+++ b/resources/scripts-v2/stores/global.store.ts
@@ -1,9 +1,9 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import groupBy from 'lodash/groupBy'
-import { bootstrapService } from '../api/services/bootstrap.service'
-import type { MenuItem, BootstrapResponse } from '../api/services/bootstrap.service'
-import { settingService } from '../api/services/setting.service'
+import { bootstrapService } from '@v2/api/services/bootstrap.service'
+import type { MenuItem, BootstrapResponse } from '@v2/api/services/bootstrap.service'
+import { settingService } from '@v2/api/services/setting.service'
 import type {
   DateFormat,
   TimeFormat,
@@ -11,14 +11,14 @@ import type {
   GlobalSettingsPayload,
   NumberPlaceholdersParams,
   NumberPlaceholder,
-} from '../api/services/setting.service'
+} from '@v2/api/services/setting.service'
 import { useCompanyStore } from './company.store'
 import { useUserStore } from './user.store'
 import { useNotificationStore } from './notification.store'
 import { handleApiError } from '../utils/error-handling'
 import * as localStore from '../utils/local-storage'
-import type { Currency } from '../types/domain/currency'
-import type { Country } from '../types/domain/customer'
+import type { Currency } from '@v2/types/domain/currency'
+import type { Country } from '@v2/types/domain/customer'
 
 export const useGlobalStore = defineStore('global', () => {
   // State
diff --git a/resources/scripts-v2/stores/user.store.ts b/resources/scripts-v2/stores/user.store.ts
index 728e60a0..423612c0 100644
--- a/resources/scripts-v2/stores/user.store.ts
+++ b/resources/scripts-v2/stores/user.store.ts
@@ -1,12 +1,12 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import { userService } from '../api/services/user.service'
-import type { UpdateProfilePayload, UserSettingsPayload } from '../api/services/user.service'
+import { userService } from '@v2/api/services/user.service'
+import type { UpdateProfilePayload, UserSettingsPayload } from '@v2/api/services/user.service'
 import { useNotificationStore } from './notification.store'
 import { handleApiError } from '../utils/error-handling'
-import type { User } from '../types/domain/user'
-import type { Ability } from '../types/domain/role'
-import type { ApiResponse } from '../types/api'
+import type { User } from '@v2/types/domain/user'
+import type { Ability } from '@v2/types/domain/role'
+import type { ApiResponse } from '@v2/types/api'
 
 export interface UserForm {
   name: string
diff --git a/resources/scripts-v2/utils/error-handling.ts b/resources/scripts-v2/utils/error-handling.ts
index 7fa6066e..62788600 100644
--- a/resources/scripts-v2/utils/error-handling.ts
+++ b/resources/scripts-v2/utils/error-handling.ts
@@ -1,4 +1,4 @@
-import type { ApiError } from '../types/api'
+import type { ApiError } from '@v2/types/api'
 
 /**
  * Shape of an Axios-like error response.
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 6dc9b47b..a4dad905 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -21,7 +21,7 @@
         <link rel="stylesheet" href="/modules/styles/{{ $name }}">
     @endforeach
 
-    @vite('resources/scripts/main.js')
+    @vite('resources/scripts-v2/main.ts')
 
     <script>
         (function() {
diff --git a/vite.config.js b/vite.config.js
index a4d1c9ec..1ddab61e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -14,6 +14,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': resolve(__dirname, './resources/'),
+      '@v2': resolve(__dirname, './resources/scripts-v2/'),
       $fonts: resolve(__dirname, './resources/static/fonts'),
       $images: resolve(__dirname, './resources/static/img')
     },
@@ -30,7 +31,7 @@ export default defineConfig({
       },
     }),
     laravel({
-      input: ['resources/scripts/main.js'],
+      input: ['resources/scripts-v2/main.ts'],
     })
   ]
 });