diff --git a/.eslintrc.mjs b/.eslintrc.js
similarity index 100%
rename from .eslintrc.mjs
rename to .eslintrc.js
diff --git a/resources/scripts/App.vue b/resources/scripts/App.vue
index 521b699e..72504615 100644
--- a/resources/scripts/App.vue
+++ b/resources/scripts/App.vue
@@ -3,3 +3,6 @@
 
   <BaseDialog />
 </template>
+<script setup lang="ts">
+import BaseDialog from '@/scripts/components/base/BaseDialog.vue'
+</script>
diff --git a/resources/scripts/InvoiceShelf.js b/resources/scripts/InvoiceShelf.js
index 9e69d3a1..06bbcf99 100644
--- a/resources/scripts/InvoiceShelf.js
+++ b/resources/scripts/InvoiceShelf.js
@@ -3,7 +3,6 @@ import App from '@/scripts/App.vue'
 import { createI18n } from 'vue-i18n'
 import messages from '/lang/locales'
 import router from '@/scripts/router/index'
-import { defineGlobalComponents } from './global-components'
 import utils from '@/scripts/helpers/utilities.js'
 import _ from 'lodash'
 import { VTooltip } from 'v-tooltip'
@@ -33,8 +32,6 @@ export default class InvoiceShelf {
   start() {
     this.executeCallbacks()
 
-    defineGlobalComponents(app)
-
     app.provide('$utils', utils)
 
     const i18n = createI18n({
diff --git a/resources/scripts/admin/components/SelectNotePopup.vue b/resources/scripts/admin/components/SelectNotePopup.vue
index 822a8e2c..d9dbc3cf 100644
--- a/resources/scripts/admin/components/SelectNotePopup.vue
+++ b/resources/scripts/admin/components/SelectNotePopup.vue
@@ -152,6 +152,8 @@ import { useModalStore } from '@/scripts/stores/modal'
 import NoteModal from '@/scripts/admin/components/modal-components/NoteModal.vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
 
 const props = defineProps({
   type: {
diff --git a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue b/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
index 2f058ccc..0a9fafa6 100644
--- a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
+++ b/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
@@ -79,6 +79,10 @@ import { useI18n } from 'vue-i18n'
 import useVuelidate from '@vuelidate/core'
 import { required, helpers, numeric, decimal } from '@vuelidate/validators'
 import { ValidateEach } from '@vuelidate/components'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
 
 const exchangeRateStore = useExchangeRateStore()
 const notificationStore = useNotificationStore()
diff --git a/resources/scripts/admin/components/custom-fields/CreateCustomFields.vue b/resources/scripts/admin/components/custom-fields/CreateCustomFields.vue
index 70c9f059..528d1d2d 100644
--- a/resources/scripts/admin/components/custom-fields/CreateCustomFields.vue
+++ b/resources/scripts/admin/components/custom-fields/CreateCustomFields.vue
@@ -24,6 +24,7 @@ import lodash from 'lodash'
 import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
 import { watch } from 'vue'
 import SingleField from './CreateCustomFieldsSingle.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
 
 const customFieldStore = useCustomFieldStore()
 
diff --git a/resources/scripts/admin/components/custom-fields/CreateCustomFieldsSingle.vue b/resources/scripts/admin/components/custom-fields/CreateCustomFieldsSingle.vue
index 8b2320e6..74745325 100644
--- a/resources/scripts/admin/components/custom-fields/CreateCustomFieldsSingle.vue
+++ b/resources/scripts/admin/components/custom-fields/CreateCustomFieldsSingle.vue
@@ -19,6 +19,7 @@ import { defineAsyncComponent, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { helpers, requiredIf } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 const props = defineProps({
   field: {
diff --git a/resources/scripts/admin/components/custom-fields/types/DateTimeType.vue b/resources/scripts/admin/components/custom-fields/types/DateTimeType.vue
index f29a01ab..fda06e09 100644
--- a/resources/scripts/admin/components/custom-fields/types/DateTimeType.vue
+++ b/resources/scripts/admin/components/custom-fields/types/DateTimeType.vue
@@ -5,6 +5,7 @@
 <script setup>
 import moment from 'moment'
 import { computed } from 'vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
 
 const props = defineProps({
   modelValue: {
diff --git a/resources/scripts/admin/components/custom-fields/types/DateType.vue b/resources/scripts/admin/components/custom-fields/types/DateType.vue
index f1954119..fdd9cbb2 100644
--- a/resources/scripts/admin/components/custom-fields/types/DateType.vue
+++ b/resources/scripts/admin/components/custom-fields/types/DateType.vue
@@ -5,6 +5,7 @@
 <script setup>
 import { computed } from 'vue'
 import moment from 'moment'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
 
 const props = defineProps({
   modelValue: {
diff --git a/resources/scripts/admin/components/custom-fields/types/DropdownType.vue b/resources/scripts/admin/components/custom-fields/types/DropdownType.vue
index 4309ef4d..8430640a 100644
--- a/resources/scripts/admin/components/custom-fields/types/DropdownType.vue
+++ b/resources/scripts/admin/components/custom-fields/types/DropdownType.vue
@@ -10,6 +10,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   modelValue: {
diff --git a/resources/scripts/admin/components/custom-fields/types/InputType.vue b/resources/scripts/admin/components/custom-fields/types/InputType.vue
index 026e4f3a..f3c79cfd 100644
--- a/resources/scripts/admin/components/custom-fields/types/InputType.vue
+++ b/resources/scripts/admin/components/custom-fields/types/InputType.vue
@@ -4,6 +4,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
 
 const props = defineProps({
   modelValue: {
diff --git a/resources/scripts/admin/components/custom-fields/types/NumberType.vue b/resources/scripts/admin/components/custom-fields/types/NumberType.vue
index 5c220c5f..3d11bb12 100644
--- a/resources/scripts/admin/components/custom-fields/types/NumberType.vue
+++ b/resources/scripts/admin/components/custom-fields/types/NumberType.vue
@@ -4,6 +4,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
 
 const props = defineProps({
   modelValue: {
diff --git a/resources/scripts/admin/components/custom-fields/types/PhoneType.vue b/resources/scripts/admin/components/custom-fields/types/PhoneType.vue
index 5d3c20b8..ae6e0e67 100644
--- a/resources/scripts/admin/components/custom-fields/types/PhoneType.vue
+++ b/resources/scripts/admin/components/custom-fields/types/PhoneType.vue
@@ -4,6 +4,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
 
 const props = defineProps({
   modelValue: {
diff --git a/resources/scripts/admin/components/custom-fields/types/SwitchType.vue b/resources/scripts/admin/components/custom-fields/types/SwitchType.vue
index 34c031ad..ddd75065 100644
--- a/resources/scripts/admin/components/custom-fields/types/SwitchType.vue
+++ b/resources/scripts/admin/components/custom-fields/types/SwitchType.vue
@@ -4,6 +4,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import BaseSwitch from '@/scripts/components/base/BaseSwitch.vue'
 
 const props = defineProps({
   modelValue: {
diff --git a/resources/scripts/admin/components/custom-fields/types/TextAreaType.vue b/resources/scripts/admin/components/custom-fields/types/TextAreaType.vue
index 51dc62ba..db01675e 100644
--- a/resources/scripts/admin/components/custom-fields/types/TextAreaType.vue
+++ b/resources/scripts/admin/components/custom-fields/types/TextAreaType.vue
@@ -4,6 +4,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
 
 const props = defineProps({
   modelValue: {
diff --git a/resources/scripts/admin/components/custom-fields/types/TimeType.vue b/resources/scripts/admin/components/custom-fields/types/TimeType.vue
index d8c61702..60e6eaaa 100644
--- a/resources/scripts/admin/components/custom-fields/types/TimeType.vue
+++ b/resources/scripts/admin/components/custom-fields/types/TimeType.vue
@@ -5,6 +5,7 @@
 <script setup>
 import { computed } from 'vue'
 import moment from 'moment'
+import BaseTimePicker from '@/scripts/components/base/BaseTimePicker.vue'
 
 const props = defineProps({
   modelValue: {
diff --git a/resources/scripts/admin/components/custom-fields/types/UrlType.vue b/resources/scripts/admin/components/custom-fields/types/UrlType.vue
index 56aeba35..c0c26de4 100644
--- a/resources/scripts/admin/components/custom-fields/types/UrlType.vue
+++ b/resources/scripts/admin/components/custom-fields/types/UrlType.vue
@@ -4,6 +4,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
 
 const props = defineProps({
   modelValue: {
diff --git a/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
index 964de2d6..0f1f5887 100644
--- a/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
@@ -40,6 +40,9 @@ import { inject } from 'vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { useModalStore } from '@/scripts/stores/modal'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
index cdc57333..ed38b6b3 100644
--- a/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
@@ -62,6 +62,10 @@ import { useRoute, useRouter } from 'vue-router'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { inject } from 'vue'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
index e9549c06..0306bcee 100644
--- a/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
@@ -169,6 +169,10 @@ import { useDialogStore } from '@/scripts/stores/dialog'
 import { inject } from 'vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
index 3fd07d45..46374bef 100644
--- a/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
@@ -46,6 +46,10 @@ import { inject } from 'vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { useModalStore } from '@/scripts/stores/modal'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
index d979e2b5..460aef0b 100644
--- a/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
@@ -44,6 +44,10 @@ import { useRoute, useRouter } from 'vue-router'
 import { inject } from 'vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
index 35d8d905..647801fe 100755
--- a/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
@@ -123,6 +123,10 @@ import { useRoute, useRouter } from 'vue-router'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { inject } from 'vue'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
index 5a51d172..950ad2d5 100644
--- a/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
@@ -44,6 +44,10 @@ import { useRoute, useRouter } from 'vue-router'
 import { inject } from 'vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
index 569cfb08..22a69a0f 100644
--- a/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
@@ -43,6 +43,10 @@ import { inject } from 'vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { useModalStore } from '@/scripts/stores/modal'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
index f23df97b..cffcd946 100644
--- a/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
@@ -94,6 +94,10 @@ import { useRoute, useRouter } from 'vue-router'
 import { inject } from 'vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
index d4bf9187..487d784b 100644
--- a/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
@@ -36,6 +36,10 @@ import { useRoute, useRouter } from 'vue-router'
 import { inject } from 'vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { useModalStore } from '@/scripts/stores/modal'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
index adaafb9d..07225303 100644
--- a/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
@@ -66,6 +66,10 @@ import { useUserStore } from '@/scripts/admin/stores/user'
 import { inject } from 'vue'
 import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
index 606c503c..7bcc1ccd 100644
--- a/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
@@ -42,6 +42,10 @@ import { useRoute, useRouter } from 'vue-router'
 import { inject } from 'vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { useModalStore } from '@/scripts/stores/modal'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
index 73897a23..6f86dae6 100644
--- a/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
@@ -43,6 +43,10 @@ import { inject } from 'vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { useModalStore } from '@/scripts/stores/modal'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue
index 494d0bd7..61a7d9c3 100644
--- a/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue
@@ -37,6 +37,10 @@ import { useUserStore } from '@/scripts/admin/stores/user'
 import { useRoute, useRouter } from 'vue-router'
 import { inject } from 'vue'
 import { useUsersStore } from '@/scripts/admin/stores/users'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const props = defineProps({
   row: {
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
index 80d6dbf5..17470188 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
@@ -194,6 +194,16 @@ import useVuelidate from '@vuelidate/core'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useItemStore } from '@/scripts/admin/stores/item'
 import DragIcon from '@/scripts/components/icons/DragIcon.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseMoney from '@/scripts/components/base/BaseMoney.vue'
+import BaseItemSelect from '@/scripts/components/base/BaseItemSelect.vue'
 
 const props = defineProps({
   store: {
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
index eecd3e5f..30f927e1 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
@@ -66,6 +66,9 @@ import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
 import { useModalStore } from '@/scripts/stores/modal'
 import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/scripts/admin/stores/user'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   ability: {
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
index 7df16cfe..7d53c4f1 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
@@ -158,6 +158,9 @@ import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { computed } from 'vue'
 import draggable from 'vuedraggable'
 import Item from './CreateItemRow.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   store: {
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
index abdce0bf..12b24c20 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
@@ -20,6 +20,7 @@
 <script setup>
 import { ref } from 'vue'
 import SelectNotePopup from '../SelectNotePopup.vue'
+import BaseCustomInput from '@/scripts/components/base/BaseCustomInput.vue'
 
 const props = defineProps({
   store: {
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
index 2a2935e9..e7e8a641 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
@@ -197,6 +197,14 @@ import Tax from './CreateTotalTaxes.vue'
 import TaxStub from '@/scripts/admin/stub/abilities'
 import SelectTaxPopup from './SelectTaxPopup.vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
 
 const taxModal = ref(null)
 
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
index fcb5e1a7..47384318 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
@@ -17,6 +17,8 @@
 
 <script setup>
 import { computed, watch, inject, watchEffect } from 'vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
 
 const props = defineProps({
   index: {
diff --git a/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue b/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
index 5c15ba8a..7d2c1a2d 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
@@ -49,6 +49,9 @@ import { watch, computed, ref, onBeforeUnmount } from 'vue'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useExchangeRateStore } from '@/scripts/admin/stores/exchange-rate'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 const props = defineProps({
   v: {
diff --git a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue b/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
index af054a3d..4d96828c 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
@@ -174,6 +174,8 @@ import { useModalStore } from '@/scripts/stores/modal'
 import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
 
 const props = defineProps({
   type: {
diff --git a/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue b/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
index c85f2916..a9a71299 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
@@ -21,6 +21,8 @@
 <script setup>
 import { useModalStore } from '@/scripts/stores/modal'
 import { useI18n } from 'vue-i18n'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
 
 const props = defineProps({
   store: {
diff --git a/resources/scripts/admin/components/modal-components/BackupModal.vue b/resources/scripts/admin/components/modal-components/BackupModal.vue
index 88e6fc04..e6486af6 100644
--- a/resources/scripts/admin/components/modal-components/BackupModal.vue
+++ b/resources/scripts/admin/components/modal-components/BackupModal.vue
@@ -97,6 +97,12 @@ import { useModalStore } from '@/scripts/stores/modal'
 import { useDiskStore } from '@/scripts/admin/stores/disk'
 import { required, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 let table = ref(null)
 let isSaving = ref(false)
diff --git a/resources/scripts/admin/components/modal-components/CategoryModal.vue b/resources/scripts/admin/components/modal-components/CategoryModal.vue
index 031280c3..f9669278 100644
--- a/resources/scripts/admin/components/modal-components/CategoryModal.vue
+++ b/resources/scripts/admin/components/modal-components/CategoryModal.vue
@@ -92,6 +92,13 @@ import { computed, ref } from 'vue'
 import { required, minLength, maxLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const categoryStore = useCategoryStore()
 const modalStore = useModalStore()
diff --git a/resources/scripts/admin/components/modal-components/CompanyModal.vue b/resources/scripts/admin/components/modal-components/CompanyModal.vue
index e5a6abe1..97911c77 100644
--- a/resources/scripts/admin/components/modal-components/CompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/CompanyModal.vue
@@ -137,6 +137,16 @@ import { useVuelidate } from '@vuelidate/core'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
 import { useRouter } from 'vue-router'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseFileUploader from '@/scripts/components/base/BaseFileUploader.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const router = useRouter()
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/components/modal-components/CustomerModal.vue b/resources/scripts/admin/components/modal-components/CustomerModal.vue
index a03aee11..bc2e71b5 100644
--- a/resources/scripts/admin/components/modal-components/CustomerModal.vue
+++ b/resources/scripts/admin/components/modal-components/CustomerModal.vue
@@ -476,6 +476,17 @@ import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
 import CopyInputField from '@/scripts/admin/components/CopyInputField.vue'
 import { useNotificationStore } from '@/scripts/stores/notification'
 import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseTab from '@/scripts/components/base/BaseTab.vue'
+import BaseSwitch from '@/scripts/components/base/BaseSwitch.vue'
+import BaseTabGroup from '@/scripts/components/base/BaseTabGroup.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const recurringInvoiceStore = useRecurringInvoiceStore()
 const modalStore = useModalStore()
diff --git a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue b/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
index 661c972b..12581f55 100644
--- a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
@@ -77,6 +77,11 @@ import { required, minLength, helpers, sameAs } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const companyStore = useCompanyStore()
 const modalStore = useModalStore()
diff --git a/resources/scripts/admin/components/modal-components/ExchangeRateBulkUpdateModal.vue b/resources/scripts/admin/components/modal-components/ExchangeRateBulkUpdateModal.vue
index 614ba01d..730796ef 100644
--- a/resources/scripts/admin/components/modal-components/ExchangeRateBulkUpdateModal.vue
+++ b/resources/scripts/admin/components/modal-components/ExchangeRateBulkUpdateModal.vue
@@ -8,6 +8,7 @@
 import { computed, ref, watch } from 'vue'
 import ExchangeRateBulkUpdate from '@/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue'
 import { useModalStore } from '@/scripts/stores/modal'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const modalStore = useModalStore()
 
diff --git a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
index f3d6b763..b730d6f7 100644
--- a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
+++ b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
@@ -199,6 +199,15 @@ import {
   requiredIf,
   url,
 } from '@vuelidate/validators'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInfoAlert from '@/scripts/components/base/BaseInfoAlert.vue'
+import BaseSwitch from '@/scripts/components/base/BaseSwitch.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const { t } = useI18n()
 
diff --git a/resources/scripts/admin/components/modal-components/FileDiskModal.vue b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
index 32ba9247..72da12c0 100644
--- a/resources/scripts/admin/components/modal-components/FileDiskModal.vue
+++ b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
@@ -62,8 +62,14 @@ import Local from '@/scripts/admin/components/modal-components/disks/LocalDisk.v
 import S3 from '@/scripts/admin/components/modal-components/disks/S3Disk.vue'
 import S3compat from '@/scripts/admin/components/modal-components/disks/S3CompatDisk.vue'
 import DoSpaces from '@/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 export default {
   components: {
+    BaseModal,
+    BaseButton,
+    BaseIcon,
     Dropbox,
     Local,
     S3,
diff --git a/resources/scripts/admin/components/modal-components/ItemModal.vue b/resources/scripts/admin/components/modal-components/ItemModal.vue
index 5fd3f21d..cff77b12 100644
--- a/resources/scripts/admin/components/modal-components/ItemModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemModal.vue
@@ -137,6 +137,15 @@ import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
 import { useNotificationStore } from '@/scripts/stores/notification'
 import { useEstimateStore } from '@/scripts/admin/stores/estimate'
 import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseMoney from '@/scripts/components/base/BaseMoney.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const emit = defineEmits(['newItem'])
 
diff --git a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
index fa6e12e2..d9e271d6 100644
--- a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
@@ -78,6 +78,11 @@ import { computed, ref, watch } from 'vue'
 import { required, minLength, maxLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const itemStore = useItemStore()
 const modalStore = useModalStore()
diff --git a/resources/scripts/admin/components/modal-components/MailTestModal.vue b/resources/scripts/admin/components/modal-components/MailTestModal.vue
index c71d0423..90a13c96 100644
--- a/resources/scripts/admin/components/modal-components/MailTestModal.vue
+++ b/resources/scripts/admin/components/modal-components/MailTestModal.vue
@@ -96,6 +96,13 @@ import { required, email, maxLength, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useModalStore } from '@/scripts/stores/modal'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 let isSaving = ref(false)
 let formData = reactive({
diff --git a/resources/scripts/admin/components/modal-components/NoteModal.vue b/resources/scripts/admin/components/modal-components/NoteModal.vue
index 0eeaa5e1..d251cbfc 100644
--- a/resources/scripts/admin/components/modal-components/NoteModal.vue
+++ b/resources/scripts/admin/components/modal-components/NoteModal.vue
@@ -110,6 +110,14 @@ import { useNotesStore } from '@/scripts/admin/stores/note'
 import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
 import { usePaymentStore } from '@/scripts/admin/stores/payment'
 import { useEstimateStore } from '@/scripts/admin/stores/estimate'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseCustomInput from '@/scripts/components/base/BaseCustomInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const modalStore = useModalStore()
 const notificationStore = useNotificationStore()
diff --git a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
index 88c017d7..2206341f 100644
--- a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
+++ b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
@@ -68,6 +68,11 @@ import { useI18n } from 'vue-i18n'
 import { required, minLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useModalStore } from '@/scripts/stores/modal'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const modalStore = useModalStore()
 const paymentStore = usePaymentStore()
diff --git a/resources/scripts/admin/components/modal-components/RolesModal.vue b/resources/scripts/admin/components/modal-components/RolesModal.vue
index 40c87099..4b599b77 100644
--- a/resources/scripts/admin/components/modal-components/RolesModal.vue
+++ b/resources/scripts/admin/components/modal-components/RolesModal.vue
@@ -156,6 +156,12 @@ import { required, minLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useRoleStore } from '@/scripts/admin/stores/role'
 import { useModalStore } from '@/scripts/stores/modal'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const modalStore = useModalStore()
 const roleStore = useRoleStore()
diff --git a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
index bcc30f97..6dbad5eb 100644
--- a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
@@ -88,6 +88,10 @@
 import { ref, computed } from 'vue'
 import { useModalStore } from '@/scripts/stores/modal'
 import { useUserStore } from '@/scripts/admin/stores/user'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const modalStore = useModalStore()
 const userStore = useUserStore()
diff --git a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
index bbdecd82..bf88399d 100644
--- a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
@@ -142,6 +142,13 @@ import { useEstimateStore } from '@/scripts/admin/stores/estimate'
 import { useNotificationStore } from '@/scripts/stores/notification'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseCustomInput from '@/scripts/components/base/BaseCustomInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const modalStore = useModalStore()
 const estimateStore = useEstimateStore()
diff --git a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
index a20ea5c2..0fdf28dc 100644
--- a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
@@ -155,6 +155,13 @@ import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
 import { useVuelidate } from '@vuelidate/core'
 import { required, email, helpers } from '@vuelidate/validators'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseCustomInput from '@/scripts/components/base/BaseCustomInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const modalStore = useModalStore()
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
index 0b539dbe..d8a1c858 100644
--- a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
@@ -156,6 +156,13 @@ import { useNotificationStore } from '@/scripts/stores/notification'
 import { useModalStore } from '@/scripts/stores/modal'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
 import { useDialogStore } from '@/scripts/stores/dialog'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseCustomInput from '@/scripts/components/base/BaseCustomInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const paymentStore = usePaymentStore()
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
index ce059420..360f1fc0 100644
--- a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
@@ -135,6 +135,14 @@ import {
   helpers,
 } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMoney from '@/scripts/components/base/BaseMoney.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const taxTypeStore = useTaxTypeStore()
 const modalStore = useModalStore()
diff --git a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
index 0afdd994..a1b9a101 100644
--- a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
@@ -123,6 +123,13 @@ import { useGlobalStore } from '@/scripts/admin/stores/global'
 import { useI18n } from 'vue-i18n'
 import { helpers, required } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const modalStore = useModalStore()
 const globalStore = useGlobalStore()
diff --git a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
index 0f907caf..536ce2a9 100644
--- a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
+++ b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
@@ -222,6 +222,14 @@ import { required, numeric, helpers } from '@vuelidate/validators'
 import { useModalStore } from '@/scripts/stores/modal'
 import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
 import { useI18n } from 'vue-i18n'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseSwitch from '@/scripts/components/base/BaseSwitch.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseModal from '@/scripts/components/base/BaseModal.vue'
 
 const modalStore = useModalStore()
 const customFieldStore = useCustomFieldStore()
diff --git a/resources/scripts/admin/components/modal-components/custom-fields/OptionsCreate.vue b/resources/scripts/admin/components/modal-components/custom-fields/OptionsCreate.vue
index 0ec049bd..a478ab3b 100644
--- a/resources/scripts/admin/components/modal-components/custom-fields/OptionsCreate.vue
+++ b/resources/scripts/admin/components/modal-components/custom-fields/OptionsCreate.vue
@@ -19,6 +19,8 @@
 
 <script setup>
 import { ref } from 'vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
 
 const emit = defineEmits(['onAdd'])
 
diff --git a/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue b/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
index 3b288f31..6952cad0 100644
--- a/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
@@ -170,7 +170,13 @@ import { computed, onBeforeUnmount, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import useVuelidate from '@vuelidate/core'
 import { required, url, helpers } from '@vuelidate/validators'
+import BaseSwitch from '@/scripts/components/base/BaseSwitch.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
 export default {
+  components: { BaseInputGrid, BaseMultiselect, BaseInputGroup, BaseInput, BaseSwitch },
   props: {
     isEdit: {
       type: Boolean,
diff --git a/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue b/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
index 75da1b9a..127db0db 100644
--- a/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
@@ -149,7 +149,13 @@ import { reactive, ref, computed, onBeforeUnmount } from 'vue'
 import { useI18n } from 'vue-i18n'
 import useVuelidate from '@vuelidate/core'
 import { required, helpers } from '@vuelidate/validators'
+import BaseSwitch from '@/scripts/components/base/BaseSwitch.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
 export default {
+  components: { BaseInputGrid, BaseMultiselect, BaseInputGroup, BaseInput, BaseSwitch },
   props: {
     isEdit: {
       type: Boolean,
diff --git a/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue b/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
index 48cf0813..2c53ab42 100644
--- a/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
@@ -80,8 +80,14 @@ import { computed, onBeforeUnmount, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import useVuelidate from '@vuelidate/core'
 import { required, helpers } from '@vuelidate/validators'
+import BaseSwitch from '@/scripts/components/base/BaseSwitch.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
 
 export default {
+  components: { BaseInputGrid, BaseMultiselect, BaseInputGroup, BaseInput, BaseSwitch },
   props: {
     isEdit: {
       type: Boolean,
diff --git a/resources/scripts/admin/components/modal-components/disks/S3CompatDisk.vue b/resources/scripts/admin/components/modal-components/disks/S3CompatDisk.vue
index 499a963f..1f17674a 100644
--- a/resources/scripts/admin/components/modal-components/disks/S3CompatDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/S3CompatDisk.vue
@@ -169,7 +169,13 @@ import { computed, onBeforeUnmount, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import useVuelidate from '@vuelidate/core'
 import { required, helpers } from '@vuelidate/validators'
+import BaseSwitch from '@/scripts/components/base/BaseSwitch.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
 export default {
+  components: { BaseInputGrid, BaseMultiselect, BaseInputGroup, BaseInput, BaseSwitch },
   props: {
     isEdit: {
       type: Boolean,
diff --git a/resources/scripts/admin/components/modal-components/disks/S3Disk.vue b/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
index 775a06a8..f11b6e53 100644
--- a/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
@@ -151,7 +151,13 @@ import { computed, onBeforeUnmount, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import useVuelidate from '@vuelidate/core'
 import { required, helpers } from '@vuelidate/validators'
+import BaseSwitch from '@/scripts/components/base/BaseSwitch.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
 export default {
+  components: { BaseInputGrid, BaseMultiselect, BaseInputGroup, BaseInput, BaseSwitch },
   props: {
     isEdit: {
       type: Boolean,
diff --git a/resources/scripts/admin/layouts/LayoutBasic.vue b/resources/scripts/admin/layouts/LayoutBasic.vue
index 5ed33910..3c7d18b7 100644
--- a/resources/scripts/admin/layouts/LayoutBasic.vue
+++ b/resources/scripts/admin/layouts/LayoutBasic.vue
@@ -34,6 +34,7 @@ import SiteHeader from '@/scripts/admin/layouts/partials/TheSiteHeader.vue'
 import SiteSidebar from '@/scripts/admin/layouts/partials/TheSiteSidebar.vue'
 import NotificationRoot from '@/scripts/components/notifications/NotificationRoot.vue'
 import ExchangeRateBulkUpdateModal from '@/scripts/admin/components/modal-components/ExchangeRateBulkUpdateModal.vue'
+import BaseGlobalLoader from '@/scripts/components/base/BaseGlobalLoader.vue'
 
 const globalStore = useGlobalStore()
 const route = useRoute()
diff --git a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
index a6c768f5..9a7a4b97 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
@@ -184,6 +184,9 @@ import GlobalSearchBar from '@/scripts/components/GlobalSearchBar.vue'
 import MainLogo from '@/scripts/components/icons/MainLogo.vue'
 
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const authStore = useAuthStore()
 const userStore = useUserStore()
diff --git a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
index b97ff47c..be73de24 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
@@ -169,6 +169,7 @@ import {
 
 import { useRoute } from 'vue-router'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
 
 const route = useRoute()
 const globalStore = useGlobalStore()
diff --git a/resources/scripts/admin/views/SampleTable.vue b/resources/scripts/admin/views/SampleTable.vue
index 93b2f1e5..1f898076 100644
--- a/resources/scripts/admin/views/SampleTable.vue
+++ b/resources/scripts/admin/views/SampleTable.vue
@@ -87,9 +87,15 @@ import {
   DocumentTextIcon,
   DotsHorizontalIcon,
 } from '@heroicons/vue/solid'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 export default {
   components: {
+    BasePage,
+    BaseDropdown,
+    BaseDropdownItem,
     BaseTable,
     DotsHorizontalIcon,
     UserIcon,
diff --git a/resources/scripts/admin/views/auth/ForgotPassword.vue b/resources/scripts/admin/views/auth/ForgotPassword.vue
index d5bfeca3..076faafe 100644
--- a/resources/scripts/admin/views/auth/ForgotPassword.vue
+++ b/resources/scripts/admin/views/auth/ForgotPassword.vue
@@ -48,6 +48,9 @@ import { useVuelidate } from '@vuelidate/core'
 import { useNotificationStore } from '@/scripts/stores/notification'
 import { useI18n } from 'vue-i18n'
 import { handleError } from '@/scripts/helpers/error-handling'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 const notificationStore = useNotificationStore()
 const { t } = useI18n()
diff --git a/resources/scripts/admin/views/auth/Login.vue b/resources/scripts/admin/views/auth/Login.vue
index 08cacf40..08a9c21e 100644
--- a/resources/scripts/admin/views/auth/Login.vue
+++ b/resources/scripts/admin/views/auth/Login.vue
@@ -65,6 +65,10 @@ import { useVuelidate } from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
 import { useAuthStore } from '@/scripts/admin/stores/auth'
 import { handleError } from '@/scripts/helpers/error-handling'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 const notificationStore = useNotificationStore()
 const authStore = useAuthStore()
diff --git a/resources/scripts/admin/views/auth/ResetPassword.vue b/resources/scripts/admin/views/auth/ResetPassword.vue
index 7f1c4686..d036793c 100644
--- a/resources/scripts/admin/views/auth/ResetPassword.vue
+++ b/resources/scripts/admin/views/auth/ResetPassword.vue
@@ -61,6 +61,9 @@ import { useRoute, useRouter } from 'vue-router'
 import axios from 'axios'
 import { useI18n } from 'vue-i18n'
 import { handleError } from '@/scripts/helpers/error-handling'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 const notificationStore = useNotificationStore()
 const { t } = useI18n()
diff --git a/resources/scripts/admin/views/customers/Create.vue b/resources/scripts/admin/views/customers/Create.vue
index 14643aab..67837948 100644
--- a/resources/scripts/admin/views/customers/Create.vue
+++ b/resources/scripts/admin/views/customers/Create.vue
@@ -602,6 +602,20 @@ import CustomerCustomFields from '@/scripts/admin/components/custom-fields/Creat
 import { useGlobalStore } from '@/scripts/admin/stores/global'
 import CopyInputField from '@/scripts/admin/components/CopyInputField.vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import BaseDivider from '@/scripts/components/base/BaseDivider.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseSwitch from '@/scripts/components/base/BaseSwitch.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const customerStore = useCustomerStore()
 const customFieldStore = useCustomFieldStore()
diff --git a/resources/scripts/admin/views/customers/Index.vue b/resources/scripts/admin/views/customers/Index.vue
index 3fa8046f..940725b9 100644
--- a/resources/scripts/admin/views/customers/Index.vue
+++ b/resources/scripts/admin/views/customers/Index.vue
@@ -206,6 +206,22 @@ import abilities from '@/scripts/admin/stub/abilities'
 
 import CustomerDropdown from '@/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue'
 import AstronautIcon from '@/scripts/components/icons/empty/AstronautIcon.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseEmptyPlaceholder from '@/scripts/components/base/BaseEmptyPlaceholder.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseFilterWrapper from '@/scripts/components/base/BaseFilterWrapper.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const companyStore = useCompanyStore()
 const dialogStore = useDialogStore()
diff --git a/resources/scripts/admin/views/customers/View.vue b/resources/scripts/admin/views/customers/View.vue
index 205ebf28..e960431f 100644
--- a/resources/scripts/admin/views/customers/View.vue
+++ b/resources/scripts/admin/views/customers/View.vue
@@ -101,6 +101,12 @@ import { useDialogStore } from '@/scripts/stores/dialog'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import CustomerDropdown from '@/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const utils = inject('utils')
 const dialogStore = useDialogStore()
diff --git a/resources/scripts/admin/views/customers/partials/CustomerChart.vue b/resources/scripts/admin/views/customers/partials/CustomerChart.vue
index ef287680..2fb25528 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerChart.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerChart.vue
@@ -129,6 +129,10 @@ import { useRoute } from 'vue-router'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import ChartPlaceholder from './CustomerChartPlaceholder.vue'
 import { useI18n } from 'vue-i18n'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
 
 const companyStore = useCompanyStore()
 const customerStore = useCustomerStore()
diff --git a/resources/scripts/admin/views/customers/partials/CustomerChartPlaceholder.vue b/resources/scripts/admin/views/customers/partials/CustomerChartPlaceholder.vue
index 29c73166..cfbbb924 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerChartPlaceholder.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerChartPlaceholder.vue
@@ -77,3 +77,8 @@
     </div>
   </BaseContentPlaceholders>
 </template>
+<script setup lang="ts">
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+</script>
diff --git a/resources/scripts/admin/views/customers/partials/CustomerInfo.vue b/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
index 75fcdbe0..4a4f4b7d 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
@@ -108,6 +108,10 @@
 <script setup>
 import { computed } from 'vue'
 import { useCustomerStore } from '@/scripts/admin/stores/customer'
+import BaseDescriptionListItem from '@/scripts/components/base/BaseDescriptionListItem.vue'
+import BaseDescriptionList from '@/scripts/components/base/BaseDescriptionList.vue'
+import BaseHeading from '@/scripts/components/base/BaseHeading.vue'
+import BaseCustomerAddressDisplay from '@/scripts/components/base/BaseCustomerAddressDisplay.vue'
 
 const customerStore = useCustomerStore()
 
diff --git a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
index 9d4af790..4835cdf7 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
@@ -188,6 +188,15 @@ import { useRoute } from 'vue-router'
 import { useCustomerStore } from '@/scripts/admin/stores/customer'
 import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
 import { debounce } from 'lodash'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseRadio from '@/scripts/components/base/BaseRadio.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
 
 const customerStore = useCustomerStore()
 const route = useRoute()
diff --git a/resources/scripts/admin/views/dashboard/Dashboard.vue b/resources/scripts/admin/views/dashboard/Dashboard.vue
index 649b388c..1b1d29cd 100644
--- a/resources/scripts/admin/views/dashboard/Dashboard.vue
+++ b/resources/scripts/admin/views/dashboard/Dashboard.vue
@@ -5,6 +5,7 @@ import DashboardTable from '../dashboard/DashboardTable.vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const route = useRoute()
 const userStore = useUserStore()
diff --git a/resources/scripts/admin/views/dashboard/DashboardChart.vue b/resources/scripts/admin/views/dashboard/DashboardChart.vue
index c2302e9f..35093500 100644
--- a/resources/scripts/admin/views/dashboard/DashboardChart.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardChart.vue
@@ -157,6 +157,9 @@ import ChartPlaceholder from './DashboardChartPlaceholder.vue'
 import abilities from '@/scripts/admin/stub/abilities'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { useI18n } from 'vue-i18n'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
 
 const dashboardStore = useDashboardStore()
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue b/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
index a537ecf1..8f439364 100644
--- a/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
@@ -86,3 +86,8 @@
     </div>
   </BaseContentPlaceholders>
 </template>
+<script setup lang="ts">
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+</script>
diff --git a/resources/scripts/admin/views/dashboard/DashboardStats.vue b/resources/scripts/admin/views/dashboard/DashboardStats.vue
index 6c392c35..20450466 100644
--- a/resources/scripts/admin/views/dashboard/DashboardStats.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardStats.vue
@@ -62,6 +62,7 @@ import { inject } from 'vue'
 import { useDashboardStore } from '@/scripts/admin/stores/dashboard'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useUserStore } from '@/scripts/admin/stores/user'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
 
 const utils = inject('utils')
 
diff --git a/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue b/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
index a114818d..87d8b61d 100644
--- a/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
@@ -18,3 +18,8 @@
     </div>
   </BaseContentPlaceholders>
 </template>
+<script setup lang="ts">
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+</script>
diff --git a/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue b/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
index 90ad7a11..23dc116f 100644
--- a/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
@@ -29,3 +29,8 @@
     </div>
   </BaseContentPlaceholders>
 </template>
+<script setup lang="ts">
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+</script>
diff --git a/resources/scripts/admin/views/dashboard/DashboardTable.vue b/resources/scripts/admin/views/dashboard/DashboardTable.vue
index 136526a7..7615e835 100644
--- a/resources/scripts/admin/views/dashboard/DashboardTable.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardTable.vue
@@ -111,6 +111,9 @@ import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
 import InvoiceDropdown from '@/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue'
 import EstimateDropdown from '@/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
 
 const dashboardStore = useDashboardStore()
 
diff --git a/resources/scripts/admin/views/errors/404.vue b/resources/scripts/admin/views/errors/404.vue
index 2137c657..96cbbcd7 100644
--- a/resources/scripts/admin/views/errors/404.vue
+++ b/resources/scripts/admin/views/errors/404.vue
@@ -40,6 +40,7 @@
 <script setup>
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
 
 const route = useRoute()
 const router = useRouter()
diff --git a/resources/scripts/admin/views/estimates/Index.vue b/resources/scripts/admin/views/estimates/Index.vue
index 8aebb666..723f7e8e 100644
--- a/resources/scripts/admin/views/estimates/Index.vue
+++ b/resources/scripts/admin/views/estimates/Index.vue
@@ -251,6 +251,28 @@ import ObservatoryIcon from '@/scripts/components/icons/empty/ObservatoryIcon.vu
 import EstimateDropDown from '@/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue'
 import SendEstimateModal from '@/scripts/admin/components/modal-components/SendEstimateModal.vue'
 import BaseEstimateStatusLabel from "@/scripts/components/base/BaseEstimateStatusLabel.vue";
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseEstimateStatusBadge from '@/scripts/components/base/BaseEstimateStatusBadge.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseTab from '@/scripts/components/base/BaseTab.vue'
+import BaseTabGroup from '@/scripts/components/base/BaseTabGroup.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseEmptyPlaceholder from '@/scripts/components/base/BaseEmptyPlaceholder.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseCustomerSelectInput from '@/scripts/components/base/BaseCustomerSelectInput.vue'
+import BaseFilterWrapper from '@/scripts/components/base/BaseFilterWrapper.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const estimateStore = useEstimateStore()
 const dialogStore = useDialogStore()
diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
index b252092a..867e3a3d 100644
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/resources/scripts/admin/views/estimates/View.vue
@@ -291,6 +291,19 @@ import SendEstimateModal from '@/scripts/admin/components/modal-components/SendE
 import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
 
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseEstimateStatusLabel from '@/scripts/components/base/BaseEstimateStatusLabel.vue'
+import BaseEstimateStatusBadge from '@/scripts/components/base/BaseEstimateStatusBadge.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseRadio from '@/scripts/components/base/BaseRadio.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const modalStore = useModalStore()
 const estimateStore = useEstimateStore()
diff --git a/resources/scripts/admin/views/estimates/create/EstimateCreate.vue b/resources/scripts/admin/views/estimates/create/EstimateCreate.vue
index 6ee2658b..8eb88ade 100644
--- a/resources/scripts/admin/views/estimates/create/EstimateCreate.vue
+++ b/resources/scripts/admin/views/estimates/create/EstimateCreate.vue
@@ -164,6 +164,13 @@ import SelectTemplateModal from '@/scripts/admin/components/modal-components/Sel
 import TaxTypeModal from '@/scripts/admin/components/modal-components/TaxTypeModal.vue'
 import ItemModal from '@/scripts/admin/components/modal-components/ItemModal.vue'
 import SalesTax from '@/scripts/admin/components/estimate-invoice-common/SalesTax.vue'
+import BaseScrollPane from '@/scripts/components/base/BaseScrollPane.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const estimateStore = useEstimateStore()
 const moduleStore = useModuleStore()
diff --git a/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue b/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue
index 40485425..401440f2 100644
--- a/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue
+++ b/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue
@@ -82,6 +82,11 @@
 <script setup>
 import { useEstimateStore } from '@/scripts/admin/stores/estimate'
 import ExchangeRateConverter from '@/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseCustomerSelectPopup from '@/scripts/components/base/BaseCustomerSelectPopup.vue'
 
 const props = defineProps({
   v: {
diff --git a/resources/scripts/admin/views/expenses/Create.vue b/resources/scripts/admin/views/expenses/Create.vue
index a15eb97f..bbf486fa 100644
--- a/resources/scripts/admin/views/expenses/Create.vue
+++ b/resources/scripts/admin/views/expenses/Create.vue
@@ -304,6 +304,21 @@ import ExpenseCustomFields from '@/scripts/admin/components/custom-fields/Create
 import CategoryModal from '@/scripts/admin/components/modal-components/CategoryModal.vue'
 import ExchangeRateConverter from '@/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseFileUploader from '@/scripts/components/base/BaseFileUploader.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseMoney from '@/scripts/components/base/BaseMoney.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseSelectAction from '@/scripts/components/base/BaseSelectAction.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const customerStore = useCustomerStore()
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/views/expenses/Index.vue b/resources/scripts/admin/views/expenses/Index.vue
index 1a166052..867ec191 100644
--- a/resources/scripts/admin/views/expenses/Index.vue
+++ b/resources/scripts/admin/views/expenses/Index.vue
@@ -228,6 +228,24 @@ import abilities from '@/scripts/admin/stub/abilities'
 
 import UFOIcon from '@/scripts/components/icons/empty/UFOIcon.vue'
 import ExpenseDropdown from '@/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseEmptyPlaceholder from '@/scripts/components/base/BaseEmptyPlaceholder.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseCustomerSelectInput from '@/scripts/components/base/BaseCustomerSelectInput.vue'
+import BaseFilterWrapper from '@/scripts/components/base/BaseFilterWrapper.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const companyStore = useCompanyStore()
 const expenseStore = useExpenseStore()
diff --git a/resources/scripts/admin/views/installation/Installation.vue b/resources/scripts/admin/views/installation/Installation.vue
index cea45b8c..d7ce0cbb 100644
--- a/resources/scripts/admin/views/installation/Installation.vue
+++ b/resources/scripts/admin/views/installation/Installation.vue
@@ -31,10 +31,12 @@ import Step7CompanyInfo from './Step7CompanyInfo.vue'
 import Step8CompanyPreferences from './Step8CompanyPreferences.vue'
 import { useInstallationStore } from '@/scripts/admin/stores/installation'
 import { useRouter } from 'vue-router'
+import BaseWizard from '@/scripts/components/base/BaseWizard.vue'
 
 
 export default {
   components: {
+    BaseWizard,
     step_0: Step0SetLanguage,
     step_1: Step1RequirementsCheck,
     step_2: Step2PermissionCheck,
diff --git a/resources/scripts/admin/views/installation/Step0SetLanguage.vue b/resources/scripts/admin/views/installation/Step0SetLanguage.vue
index 9f7ac479..cc00dbe6 100644
--- a/resources/scripts/admin/views/installation/Step0SetLanguage.vue
+++ b/resources/scripts/admin/views/installation/Step0SetLanguage.vue
@@ -42,6 +42,11 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useInstallationStore } from '@/scripts/admin/stores/installation.js'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseWizardStep from '@/scripts/components/base/BaseWizardStep.vue'
 
 const { global } = window.i18n
 
diff --git a/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue b/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
index 9756ed29..6ceb9549 100644
--- a/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
+++ b/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
@@ -73,6 +73,9 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useInstallationStore } from '@/scripts/admin/stores/installation.js'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseWizardStep from '@/scripts/components/base/BaseWizardStep.vue'
 
 const emit = defineEmits(['next'])
 
diff --git a/resources/scripts/admin/views/installation/Step2PermissionCheck.vue b/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
index f73303fb..488b1892 100644
--- a/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
+++ b/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
@@ -70,6 +70,12 @@ import { ref, onMounted } from 'vue'
 import { useInstallationStore } from '@/scripts/admin/stores/installation'
 import { useDialogStore } from '@/scripts/stores/dialog'
 import { useI18n } from 'vue-i18n'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+import BaseWizardStep from '@/scripts/components/base/BaseWizardStep.vue'
 
 const emit = defineEmits(['next'])
 
diff --git a/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue b/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
index b2a86821..8225be18 100644
--- a/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
+++ b/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
@@ -22,9 +22,11 @@ import Sqlite from './database/SqliteDatabase.vue'
 import { useNotificationStore } from '@/scripts/stores/notification'
 import { useInstallationStore } from '@/scripts/admin/stores/installation'
 import { useI18n } from 'vue-i18n'
+import BaseWizardStep from '@/scripts/components/base/BaseWizardStep.vue'
 
 export default {
   components: {
+    BaseWizardStep,
     Mysql,
     Pgsql,
     Sqlite,
diff --git a/resources/scripts/admin/views/installation/Step4VerifyDomain.vue b/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
index ec48d085..dba11b7a 100644
--- a/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
+++ b/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
@@ -49,6 +49,10 @@ import { ref, inject, computed, reactive } from 'vue'
 import { useInstallationStore } from '@/scripts/admin/stores/installation'
 import { useNotificationStore } from '@/scripts/stores/notification'
 import { useI18n } from 'vue-i18n'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseWizardStep from '@/scripts/components/base/BaseWizardStep.vue'
 
 const emit = defineEmits(['next'])
 
diff --git a/resources/scripts/admin/views/installation/Step5EmailConfig.vue b/resources/scripts/admin/views/installation/Step5EmailConfig.vue
index ad2813d4..42669ea3 100644
--- a/resources/scripts/admin/views/installation/Step5EmailConfig.vue
+++ b/resources/scripts/admin/views/installation/Step5EmailConfig.vue
@@ -23,9 +23,11 @@ import Ses from './mail-driver/SesMailDriver.vue'
 import Basic from './mail-driver/BasicMailDriver.vue'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
 import { ref } from 'vue'
+import BaseWizardStep from '@/scripts/components/base/BaseWizardStep.vue'
 
 export default {
   components: {
+    BaseWizardStep,
     Smtp,
     Mailgun,
     Ses,
diff --git a/resources/scripts/admin/views/installation/Step6AccountSettings.vue b/resources/scripts/admin/views/installation/Step6AccountSettings.vue
index d7a51656..fb414e0d 100644
--- a/resources/scripts/admin/views/installation/Step6AccountSettings.vue
+++ b/resources/scripts/admin/views/installation/Step6AccountSettings.vue
@@ -127,6 +127,12 @@ import { useI18n } from 'vue-i18n'
 import { useVuelidate } from '@vuelidate/core'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseFileUploader from '@/scripts/components/base/BaseFileUploader.vue'
+import BaseWizardStep from '@/scripts/components/base/BaseWizardStep.vue'
 
 const emit = defineEmits(['next'])
 
diff --git a/resources/scripts/admin/views/installation/Step7CompanyInfo.vue b/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
index 6ba35306..4c03af94 100644
--- a/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
+++ b/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
@@ -168,6 +168,14 @@ import { required, maxLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseFileUploader from '@/scripts/components/base/BaseFileUploader.vue'
+import BaseWizardStep from '@/scripts/components/base/BaseWizardStep.vue'
 
 const emit = defineEmits(['next'])
 
diff --git a/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue b/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
index 0066bc19..7bb58312 100644
--- a/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
+++ b/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
@@ -155,6 +155,11 @@ import { useUserStore } from '@/scripts/admin/stores/user'
 import { useDialogStore } from '@/scripts/stores/dialog'
 import { useNotificationStore } from '@/scripts/stores/notification'
 import { useRouter } from 'vue-router'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseWizardStep from '@/scripts/components/base/BaseWizardStep.vue'
 
 const emit = defineEmits(['next'])
 
diff --git a/resources/scripts/admin/views/installation/database/MysqlDatabase.vue b/resources/scripts/admin/views/installation/database/MysqlDatabase.vue
index f291c58c..fd701ea8 100644
--- a/resources/scripts/admin/views/installation/database/MysqlDatabase.vue
+++ b/resources/scripts/admin/views/installation/database/MysqlDatabase.vue
@@ -113,6 +113,10 @@ import useVuelidate from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
 import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   configData: {
diff --git a/resources/scripts/admin/views/installation/database/PgsqlDatabase.vue b/resources/scripts/admin/views/installation/database/PgsqlDatabase.vue
index 16477160..86c8fd46 100644
--- a/resources/scripts/admin/views/installation/database/PgsqlDatabase.vue
+++ b/resources/scripts/admin/views/installation/database/PgsqlDatabase.vue
@@ -132,6 +132,11 @@ import { helpers, required, numeric } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
 import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   configData: {
diff --git a/resources/scripts/admin/views/installation/database/SqliteDatabase.vue b/resources/scripts/admin/views/installation/database/SqliteDatabase.vue
index 6e1a7feb..237f8663 100644
--- a/resources/scripts/admin/views/installation/database/SqliteDatabase.vue
+++ b/resources/scripts/admin/views/installation/database/SqliteDatabase.vue
@@ -76,6 +76,11 @@ import { helpers, required } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
 import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   configData: {
diff --git a/resources/scripts/admin/views/installation/mail-driver/BasicMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/BasicMailDriver.vue
index 333f11d0..dd3c842c 100644
--- a/resources/scripts/admin/views/installation/mail-driver/BasicMailDriver.vue
+++ b/resources/scripts/admin/views/installation/mail-driver/BasicMailDriver.vue
@@ -80,6 +80,11 @@ import useVuelidate from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
 import { computed } from 'vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   isSaving: {
diff --git a/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue
index 13f00fab..b40c530f 100644
--- a/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue
+++ b/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue
@@ -150,6 +150,11 @@ import { useI18n } from 'vue-i18n'
 import useVuelidate from '@vuelidate/core'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
 import { computed, onMounted, ref } from 'vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   isSaving: {
diff --git a/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue
index df18069b..792131fa 100644
--- a/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue
+++ b/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue
@@ -190,6 +190,11 @@ import { required, email, numeric, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   isSaving: {
diff --git a/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue
index be4ccfea..0950a27c 100644
--- a/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue
+++ b/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue
@@ -176,6 +176,11 @@ import { required, email, numeric, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   isSaving: {
diff --git a/resources/scripts/admin/views/invoices/Index.vue b/resources/scripts/admin/views/invoices/Index.vue
index ec5c6796..e7cbffe7 100644
--- a/resources/scripts/admin/views/invoices/Index.vue
+++ b/resources/scripts/admin/views/invoices/Index.vue
@@ -279,6 +279,29 @@ import MoonwalkerIcon from '@/scripts/components/icons/empty/MoonwalkerIcon.vue'
 import InvoiceDropdown from '@/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue'
 import SendInvoiceModal from '@/scripts/admin/components/modal-components/SendInvoiceModal.vue'
 import BaseInvoiceStatusLabel from "@/scripts/components/base/BaseInvoiceStatusLabel.vue";
+import BasePaidStatusBadge from '@/scripts/components/base/BasePaidStatusBadge.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseInvoiceStatusBadge from '@/scripts/components/base/BaseInvoiceStatusBadge.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseTab from '@/scripts/components/base/BaseTab.vue'
+import BaseTabGroup from '@/scripts/components/base/BaseTabGroup.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseEmptyPlaceholder from '@/scripts/components/base/BaseEmptyPlaceholder.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseCustomerSelectInput from '@/scripts/components/base/BaseCustomerSelectInput.vue'
+import BaseFilterWrapper from '@/scripts/components/base/BaseFilterWrapper.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 // Stores
 const invoiceStore = useInvoiceStore()
 const dialogStore = useDialogStore()
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 2e1656a2..fa4f9abd 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -14,6 +14,19 @@ import InvoiceDropdown from '@/scripts/admin/components/dropdowns/InvoiceIndexDr
 import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
 
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseInvoiceStatusLabel from '@/scripts/components/base/BaseInvoiceStatusLabel.vue'
+import BaseEstimateStatusBadge from '@/scripts/components/base/BaseEstimateStatusBadge.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseRadio from '@/scripts/components/base/BaseRadio.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const modalStore = useModalStore()
 const invoiceStore = useInvoiceStore()
diff --git a/resources/scripts/admin/views/invoices/create/InvoiceCreate.vue b/resources/scripts/admin/views/invoices/create/InvoiceCreate.vue
index 6bf9d212..c6716a2a 100644
--- a/resources/scripts/admin/views/invoices/create/InvoiceCreate.vue
+++ b/resources/scripts/admin/views/invoices/create/InvoiceCreate.vue
@@ -164,6 +164,13 @@ import SelectTemplateModal from '@/scripts/admin/components/modal-components/Sel
 import TaxTypeModal from '@/scripts/admin/components/modal-components/TaxTypeModal.vue'
 import ItemModal from '@/scripts/admin/components/modal-components/ItemModal.vue'
 import SalesTax from '@/scripts/admin/components/estimate-invoice-common/SalesTax.vue'
+import BaseScrollPane from '@/scripts/components/base/BaseScrollPane.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const invoiceStore = useInvoiceStore()
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue b/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue
index a67b09de..8baa8175 100644
--- a/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue
+++ b/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue
@@ -67,6 +67,11 @@ import { computed } from 'vue'
 import ExchangeRateConverter from '@/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue'
 import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseCustomerSelectPopup from '@/scripts/components/base/BaseCustomerSelectPopup.vue'
 
 const props = defineProps({
   v: {
diff --git a/resources/scripts/admin/views/items/Create.vue b/resources/scripts/admin/views/items/Create.vue
index 1a73695b..660a36de 100644
--- a/resources/scripts/admin/views/items/Create.vue
+++ b/resources/scripts/admin/views/items/Create.vue
@@ -152,6 +152,20 @@ import { useModalStore } from '@/scripts/stores/modal'
 import ItemUnitModal from '@/scripts/admin/components/modal-components/ItemUnitModal.vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseSelectAction from '@/scripts/components/base/BaseSelectAction.vue'
+import BaseMoney from '@/scripts/components/base/BaseMoney.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const itemStore = useItemStore()
 const taxTypeStore = useTaxTypeStore()
diff --git a/resources/scripts/admin/views/items/Index.vue b/resources/scripts/admin/views/items/Index.vue
index f6ca9090..c0cdaa57 100644
--- a/resources/scripts/admin/views/items/Index.vue
+++ b/resources/scripts/admin/views/items/Index.vue
@@ -200,6 +200,24 @@ import { useUserStore } from '@/scripts/admin/stores/user'
 import ItemDropdown from '@/scripts/admin/components/dropdowns/ItemIndexDropdown.vue'
 import SatelliteIcon from '@/scripts/components/icons/empty/SatelliteIcon.vue'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseEmptyPlaceholder from '@/scripts/components/base/BaseEmptyPlaceholder.vue'
+import BaseMoney from '@/scripts/components/base/BaseMoney.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseFilterWrapper from '@/scripts/components/base/BaseFilterWrapper.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const utils = inject('utils')
 
diff --git a/resources/scripts/admin/views/modules/Index.vue b/resources/scripts/admin/views/modules/Index.vue
index b7552913..88796ec7 100644
--- a/resources/scripts/admin/views/modules/Index.vue
+++ b/resources/scripts/admin/views/modules/Index.vue
@@ -126,6 +126,17 @@ import ModuleCard from './partials/ModuleCard.vue'
 import ModuleCardPlaceholder from './partials/ModuleCardPlaceholder.vue'
 import { useVuelidate } from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
+import BaseTab from '@/scripts/components/base/BaseTab.vue'
+import BaseTabGroup from '@/scripts/components/base/BaseTabGroup.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const moduleStore = useModuleStore()
 const globalStore = useGlobalStore()
diff --git a/resources/scripts/admin/views/modules/View.vue b/resources/scripts/admin/views/modules/View.vue
index 42903cc1..a3cac645 100644
--- a/resources/scripts/admin/views/modules/View.vue
+++ b/resources/scripts/admin/views/modules/View.vue
@@ -678,6 +678,12 @@ import ModulePlaceholder from './partials/ModulePlaceholder.vue'
 import RecentModuleCard from './partials/RecentModuleCard.vue'
 import { useNotificationStore } from '@/scripts/stores/notification'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 const globalStore = useGlobalStore()
 
 const moduleStore = useModuleStore()
diff --git a/resources/scripts/admin/views/modules/partials/ModuleCard.vue b/resources/scripts/admin/views/modules/partials/ModuleCard.vue
index 14f838db..0e52758e 100644
--- a/resources/scripts/admin/views/modules/partials/ModuleCard.vue
+++ b/resources/scripts/admin/views/modules/partials/ModuleCard.vue
@@ -123,6 +123,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
 import { computed, onMounted, ref, watch, reactive } from 'vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
 
 const { t } = useI18n()
 const props = defineProps({
diff --git a/resources/scripts/admin/views/modules/partials/ModuleCardPlaceholder.vue b/resources/scripts/admin/views/modules/partials/ModuleCardPlaceholder.vue
index 55a72360..60a5e197 100644
--- a/resources/scripts/admin/views/modules/partials/ModuleCardPlaceholder.vue
+++ b/resources/scripts/admin/views/modules/partials/ModuleCardPlaceholder.vue
@@ -46,4 +46,9 @@
       </div>
     </div>
   </BaseContentPlaceholders>
-</template>
\ No newline at end of file
+</template>
+<script setup lang="ts">
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+</script>
diff --git a/resources/scripts/admin/views/modules/partials/ModulePlaceholder.vue b/resources/scripts/admin/views/modules/partials/ModulePlaceholder.vue
index b5f6c934..8b3794fc 100644
--- a/resources/scripts/admin/views/modules/partials/ModulePlaceholder.vue
+++ b/resources/scripts/admin/views/modules/partials/ModulePlaceholder.vue
@@ -8,7 +8,7 @@
 
       <!-- Product -->
       <div class="lg:grid lg:grid-rows-1 lg:grid-cols-7 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16 mt-6">
-      
+
         <!-- Product image -->
         <div class="lg:row-end-1 lg:col-span-4">
           <BaseContentPlaceholdersBox class="h-96 sm:w-full" rounded />
@@ -102,3 +102,9 @@
     </BasePage>
   </BaseContentPlaceholders>
 </template>
+<script setup lang="ts">
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+</script>
diff --git a/resources/scripts/admin/views/payments/Create.vue b/resources/scripts/admin/views/payments/Create.vue
index 5716203e..d564b11e 100644
--- a/resources/scripts/admin/views/payments/Create.vue
+++ b/resources/scripts/admin/views/payments/Create.vue
@@ -285,6 +285,22 @@ import { useGlobalStore } from '@/scripts/admin/stores/global'
 import SelectNotePopup from '@/scripts/admin/components/SelectNotePopup.vue'
 import PaymentCustomFields from '@/scripts/admin/components/custom-fields/CreateCustomFields.vue'
 import PaymentModeModal from '@/scripts/admin/components/modal-components/PaymentModeModal.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseCustomInput from '@/scripts/components/base/BaseCustomInput.vue'
+import BaseSelectAction from '@/scripts/components/base/BaseSelectAction.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMoney from '@/scripts/components/base/BaseMoney.vue'
+import BaseCustomerSelectInput from '@/scripts/components/base/BaseCustomerSelectInput.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const route = useRoute()
 const router = useRouter()
diff --git a/resources/scripts/admin/views/payments/Index.vue b/resources/scripts/admin/views/payments/Index.vue
index e28712fd..86034fa0 100644
--- a/resources/scripts/admin/views/payments/Index.vue
+++ b/resources/scripts/admin/views/payments/Index.vue
@@ -213,6 +213,24 @@ import abilities from '@/scripts/admin/stub/abilities'
 import CapsuleIcon from '@/scripts/components/icons/empty/CapsuleIcon.vue'
 import PaymentDropdown from '@/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue'
 import SendPaymentModal from '@/scripts/admin/components/modal-components/SendPaymentModal.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseEmptyPlaceholder from '@/scripts/components/base/BaseEmptyPlaceholder.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseCustomerSelectInput from '@/scripts/components/base/BaseCustomerSelectInput.vue'
+import BaseFilterWrapper from '@/scripts/components/base/BaseFilterWrapper.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const { t } = useI18n()
 let showFilters = ref(false)
diff --git a/resources/scripts/admin/views/payments/View.vue b/resources/scripts/admin/views/payments/View.vue
index b33e2193..03c546bd 100644
--- a/resources/scripts/admin/views/payments/View.vue
+++ b/resources/scripts/admin/views/payments/View.vue
@@ -264,6 +264,17 @@ import SendPaymentModal from '@/scripts/admin/components/modal-components/SendPa
 import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
 
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseRadio from '@/scripts/components/base/BaseRadio.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const route = useRoute()
 
diff --git a/resources/scripts/admin/views/recurring-invoices/Index.vue b/resources/scripts/admin/views/recurring-invoices/Index.vue
index 371fd58a..6fe90986 100644
--- a/resources/scripts/admin/views/recurring-invoices/Index.vue
+++ b/resources/scripts/admin/views/recurring-invoices/Index.vue
@@ -264,6 +264,28 @@ import SendInvoiceModal from '@/scripts/admin/components/modal-components/SendIn
 import RecurringInvoiceIndexDropdown from '@/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue'
 import MoonwalkerIcon from '@/scripts/components/icons/empty/MoonwalkerIcon.vue'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseRecurringInvoiceStatusLabel from '@/scripts/components/base/BaseRecurringInvoiceStatusLabel.vue'
+import BaseRecurringInvoiceStatusBadge from '@/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseTab from '@/scripts/components/base/BaseTab.vue'
+import BaseTabGroup from '@/scripts/components/base/BaseTabGroup.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseEmptyPlaceholder from '@/scripts/components/base/BaseEmptyPlaceholder.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseCustomerSelectInput from '@/scripts/components/base/BaseCustomerSelectInput.vue'
+import BaseFilterWrapper from '@/scripts/components/base/BaseFilterWrapper.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const recurringInvoiceStore = useRecurringInvoiceStore()
 const customerStore = useCustomerStore()
diff --git a/resources/scripts/admin/views/recurring-invoices/View.vue b/resources/scripts/admin/views/recurring-invoices/View.vue
index c3196ff5..324f09f8 100644
--- a/resources/scripts/admin/views/recurring-invoices/View.vue
+++ b/resources/scripts/admin/views/recurring-invoices/View.vue
@@ -27,6 +27,8 @@ import abilities from '@/scripts/admin/stub/abilities'
 import RecurringInvoiceViewSidebar from '@/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue'
 import RecurringInvoiceInfo from '@/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue'
 import RecurringInvoiceIndexDropdown from '@/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const dialogStore = useDialogStore()
 const recurringInvoiceStore = useRecurringInvoiceStore()
diff --git a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreate.vue b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreate.vue
index 85efd4d4..7cfbb588 100644
--- a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreate.vue
+++ b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreate.vue
@@ -166,6 +166,13 @@ import { useCustomerStore } from '@/scripts/admin/stores/customer'
 import SelectTemplateModal from '@/scripts/admin/components/modal-components/SelectTemplateModal.vue'
 import TaxTypeModal from '@/scripts/admin/components/modal-components/TaxTypeModal.vue'
 import ItemModal from '@/scripts/admin/components/modal-components/ItemModal.vue'
+import BaseScrollPane from '@/scripts/components/base/BaseScrollPane.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const recurringInvoiceStore = useRecurringInvoiceStore()
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
index d21c556d..985c14ce 100644
--- a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
+++ b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
@@ -189,6 +189,12 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
 import ExchangeRateConverter from '@/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseSwitch from '@/scripts/components/base/BaseSwitch.vue'
+import BaseCustomerSelectPopup from '@/scripts/components/base/BaseCustomerSelectPopup.vue'
 
 const props = defineProps({
   v: {
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/Invoices.vue b/resources/scripts/admin/views/recurring-invoices/partials/Invoices.vue
index fa997aa3..305060e2 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/Invoices.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/Invoices.vue
@@ -56,6 +56,10 @@ import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoi
 import abilities from '@/scripts/admin/stub/abilities'
 import InvoiceDropdown from '@/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue'
 import SendInvoiceModal from '@/scripts/admin/components/modal-components/SendInvoiceModal.vue'
+import BaseInvoiceStatusLabel from '@/scripts/components/base/BaseInvoiceStatusLabel.vue'
+import BaseInvoiceStatusBadge from '@/scripts/components/base/BaseInvoiceStatusBadge.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
 
 const recurringInvoiceStore = useRecurringInvoiceStore()
 
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue
index bdee42e5..a54d94db 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue
@@ -69,6 +69,10 @@ import { ref, computed, watch, reactive, inject } from 'vue'
 import { useRoute } from 'vue-router'
 import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
 import Invoices from './Invoices.vue'
+import BaseHeading from '@/scripts/components/base/BaseHeading.vue'
+import BaseDescriptionListItem from '@/scripts/components/base/BaseDescriptionListItem.vue'
+import BaseDescriptionList from '@/scripts/components/base/BaseDescriptionList.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
 
 const recurringInvoiceStore = useRecurringInvoiceStore()
 
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
index 3fb0e9f6..1c4fc1a5 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
@@ -7,6 +7,17 @@ import { debounce } from 'lodash'
 import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
 
 import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseRecurringInvoiceStatusLabel from '@/scripts/components/base/BaseRecurringInvoiceStatusLabel.vue'
+import BaseRecurringInvoiceStatusBadge from '@/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseRadio from '@/scripts/components/base/BaseRadio.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
 
 const recurringInvoiceStore = useRecurringInvoiceStore()
 
diff --git a/resources/scripts/admin/views/reports/ExpensesReport.vue b/resources/scripts/admin/views/reports/ExpensesReport.vue
index 85836669..1b836cd9 100644
--- a/resources/scripts/admin/views/reports/ExpensesReport.vue
+++ b/resources/scripts/admin/views/reports/ExpensesReport.vue
@@ -94,6 +94,11 @@ import moment from 'moment'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useI18n } from 'vue-i18n'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 const globalStore = useGlobalStore()
 const companyStore = useCompanyStore()
 const { t } = useI18n()
diff --git a/resources/scripts/admin/views/reports/ProfitLossReport.vue b/resources/scripts/admin/views/reports/ProfitLossReport.vue
index d2ed6df1..04aaee1b 100644
--- a/resources/scripts/admin/views/reports/ProfitLossReport.vue
+++ b/resources/scripts/admin/views/reports/ProfitLossReport.vue
@@ -92,6 +92,11 @@ import moment from 'moment'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useI18n } from 'vue-i18n'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 const globalStore = useGlobalStore()
 const companyStore = useCompanyStore()
 const { t } = useI18n()
diff --git a/resources/scripts/admin/views/reports/SalesReports.vue b/resources/scripts/admin/views/reports/SalesReports.vue
index 4fed5772..5dbcc253 100644
--- a/resources/scripts/admin/views/reports/SalesReports.vue
+++ b/resources/scripts/admin/views/reports/SalesReports.vue
@@ -106,6 +106,11 @@ import moment from 'moment'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useI18n } from 'vue-i18n'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
 
 const { t } = useI18n()
 const globalStore = useGlobalStore()
diff --git a/resources/scripts/admin/views/reports/TaxReport.vue b/resources/scripts/admin/views/reports/TaxReport.vue
index d6f53941..8220ceb3 100644
--- a/resources/scripts/admin/views/reports/TaxReport.vue
+++ b/resources/scripts/admin/views/reports/TaxReport.vue
@@ -91,6 +91,11 @@ import moment from 'moment'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useI18n } from 'vue-i18n'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 const globalStore = useGlobalStore()
 
 globalStore.downloadReport = downloadReport
diff --git a/resources/scripts/admin/views/reports/layout/Index.vue b/resources/scripts/admin/views/reports/layout/Index.vue
index b852fe2c..161773e1 100644
--- a/resources/scripts/admin/views/reports/layout/Index.vue
+++ b/resources/scripts/admin/views/reports/layout/Index.vue
@@ -56,6 +56,14 @@ import ExpenseReport from '../ExpensesReport.vue'
 import ProfitLossReport from '../ProfitLossReport.vue'
 import TaxReport from '../TaxReport.vue'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import BaseTab from '@/scripts/components/base/BaseTab.vue'
+import BaseTabGroup from '@/scripts/components/base/BaseTabGroup.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const globalStore = useGlobalStore()
 
diff --git a/resources/scripts/admin/views/settings/AccountSetting.vue b/resources/scripts/admin/views/settings/AccountSetting.vue
index caa1d461..b059942e 100644
--- a/resources/scripts/admin/views/settings/AccountSetting.vue
+++ b/resources/scripts/admin/views/settings/AccountSetting.vue
@@ -110,6 +110,14 @@ import {
 } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseFileUploader from '@/scripts/components/base/BaseFileUploader.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const userStore = useUserStore()
 const globalStore = useGlobalStore()
diff --git a/resources/scripts/admin/views/settings/BackupSetting.vue b/resources/scripts/admin/views/settings/BackupSetting.vue
index 3b118d6a..36233bc3 100644
--- a/resources/scripts/admin/views/settings/BackupSetting.vue
+++ b/resources/scripts/admin/views/settings/BackupSetting.vue
@@ -75,6 +75,14 @@ import { useDiskStore } from '@/scripts/admin/stores/disk'
 import { useDialogStore } from '@/scripts/stores/dialog'
 import { useModalStore } from '@/scripts/stores/modal'
 import BackupModal from '@/scripts/admin/components/modal-components/BackupModal.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const dialogStore = useDialogStore()
 const backupStore = useBackupStore()
diff --git a/resources/scripts/admin/views/settings/CompanyInfoSettings.vue b/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
index ade292a0..9a334e47 100644
--- a/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
+++ b/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
@@ -142,6 +142,16 @@ import { required, minLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useModalStore } from '@/scripts/stores/modal'
 import DeleteCompanyModal from '@/scripts/admin/components/modal-components/DeleteCompanyModal.vue'
+import BaseDivider from '@/scripts/components/base/BaseDivider.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseFileUploader from '@/scripts/components/base/BaseFileUploader.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const companyStore = useCompanyStore()
 const globalStore = useGlobalStore()
diff --git a/resources/scripts/admin/views/settings/CustomFieldsSetting.vue b/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
index 016d37f9..2ba1a937 100644
--- a/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
+++ b/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
@@ -80,6 +80,11 @@ import { useUserStore } from '@/scripts/admin/stores/user'
 import CustomFieldDropdown from '@/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue'
 import CustomFieldModal from '@/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseBadge from '@/scripts/components/base/BaseBadge.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const modalStore = useModalStore()
 const customFieldStore = useCustomFieldStore()
diff --git a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue b/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
index 8635058e..1fd524dd 100644
--- a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
+++ b/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
@@ -82,6 +82,11 @@ import {
   TrashIcon,
 } from '@heroicons/vue/outline'
 import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseBadge from '@/scripts/components/base/BaseBadge.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
 
 // store
 
diff --git a/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue b/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue
index c0db9d01..95e314cd 100644
--- a/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue
+++ b/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue
@@ -50,6 +50,10 @@ import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ExpenseCategoryDropdown from '@/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue'
 import CategoryModal from '@/scripts/admin/components/modal-components/CategoryModal.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const categoryStore = useCategoryStore()
 const dialogStore = useDialogStore()
diff --git a/resources/scripts/admin/views/settings/FileDiskSetting.vue b/resources/scripts/admin/views/settings/FileDiskSetting.vue
index def115af..c046b346 100644
--- a/resources/scripts/admin/views/settings/FileDiskSetting.vue
+++ b/resources/scripts/admin/views/settings/FileDiskSetting.vue
@@ -90,6 +90,15 @@ import { useModalStore } from '@/scripts/stores/modal'
 import { ref, computed, reactive, onMounted, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 import FileDiskModal from '@/scripts/admin/components/modal-components/FileDiskModal.vue'
+import BaseSwitchSection from '@/scripts/components/base/BaseSwitchSection.vue'
+import BaseDivider from '@/scripts/components/base/BaseDivider.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseBadge from '@/scripts/components/base/BaseBadge.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const utils = inject('utils')
 
diff --git a/resources/scripts/admin/views/settings/MailConfigSetting.vue b/resources/scripts/admin/views/settings/MailConfigSetting.vue
index eb01b272..9df344ba 100644
--- a/resources/scripts/admin/views/settings/MailConfigSetting.vue
+++ b/resources/scripts/admin/views/settings/MailConfigSetting.vue
@@ -39,6 +39,8 @@ import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
 import { useModalStore } from '@/scripts/stores/modal'
 import MailTestModal from '@/scripts/admin/components/modal-components/MailTestModal.vue'
 import { useI18n } from 'vue-i18n'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 let isSaving = ref(false)
 let isFetchingInitialData = ref(false)
diff --git a/resources/scripts/admin/views/settings/NotesSetting.vue b/resources/scripts/admin/views/settings/NotesSetting.vue
index 320e3d5b..e67ed20c 100644
--- a/resources/scripts/admin/views/settings/NotesSetting.vue
+++ b/resources/scripts/admin/views/settings/NotesSetting.vue
@@ -49,6 +49,10 @@ import NoteDropdown from '@/scripts/admin/components/dropdowns/NoteIndexDropdown
 import NoteModal from '@/scripts/admin/components/modal-components/NoteModal.vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const { t } = useI18n()
 
diff --git a/resources/scripts/admin/views/settings/NotificationsSetting.vue b/resources/scripts/admin/views/settings/NotificationsSetting.vue
index 42d55037..82740404 100644
--- a/resources/scripts/admin/views/settings/NotificationsSetting.vue
+++ b/resources/scripts/admin/views/settings/NotificationsSetting.vue
@@ -66,6 +66,13 @@ import { useI18n } from 'vue-i18n'
 import { required, email, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import BaseSwitchSection from '@/scripts/components/base/BaseSwitchSection.vue'
+import BaseDivider from '@/scripts/components/base/BaseDivider.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const companyStore = useCompanyStore()
 
diff --git a/resources/scripts/admin/views/settings/PaymentsModeSetting.vue b/resources/scripts/admin/views/settings/PaymentsModeSetting.vue
index e1f2b000..224b6fa7 100644
--- a/resources/scripts/admin/views/settings/PaymentsModeSetting.vue
+++ b/resources/scripts/admin/views/settings/PaymentsModeSetting.vue
@@ -44,6 +44,10 @@ import { useDialogStore } from '@/scripts/stores/dialog'
 import { useModalStore } from '@/scripts/stores/modal'
 import PaymentModeModal from '@/scripts/admin/components/modal-components/PaymentModeModal.vue'
 import PaymentModeDropdown from '@/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const modalStore = useModalStore()
 const dialogStore = useDialogStore()
diff --git a/resources/scripts/admin/views/settings/PreferencesSetting.vue b/resources/scripts/admin/views/settings/PreferencesSetting.vue
index bbd7d6d3..0b7d43aa 100644
--- a/resources/scripts/admin/views/settings/PreferencesSetting.vue
+++ b/resources/scripts/admin/views/settings/PreferencesSetting.vue
@@ -105,7 +105,7 @@
             class="w-full"
           />
         </BaseInputGroup>
-        
+
         <BaseInputGroup
           :label="$t('settings.preferences.time_format')"
           :content-loading="isFetchingInitialData"
@@ -208,6 +208,15 @@ import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useI18n } from 'vue-i18n'
 import { required, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
+import BaseSwitchSection from '@/scripts/components/base/BaseSwitchSection.vue'
+import BaseDivider from '@/scripts/components/base/BaseDivider.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const companyStore = useCompanyStore()
 const globalStore = useGlobalStore()
diff --git a/resources/scripts/admin/views/settings/RolesSettings.vue b/resources/scripts/admin/views/settings/RolesSettings.vue
index ef049f43..11b17c3b 100644
--- a/resources/scripts/admin/views/settings/RolesSettings.vue
+++ b/resources/scripts/admin/views/settings/RolesSettings.vue
@@ -49,6 +49,10 @@ import { useUserStore } from '@/scripts/admin/stores/user'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import RolesModal from '@/scripts/admin/components/modal-components/RolesModal.vue'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const modalStore = useModalStore()
 const roleStore = useRoleStore()
diff --git a/resources/scripts/admin/views/settings/SettingsIndex.vue b/resources/scripts/admin/views/settings/SettingsIndex.vue
index 2ccd3496..b8ca41ae 100644
--- a/resources/scripts/admin/views/settings/SettingsIndex.vue
+++ b/resources/scripts/admin/views/settings/SettingsIndex.vue
@@ -57,6 +57,12 @@ import { useGlobalStore } from '@/scripts/admin/stores/global'
 import BaseList from '@/scripts/components/list/BaseList.vue'
 import BaseListItem from '@/scripts/components/list/BaseListItem.vue'
 import { useI18n } from 'vue-i18n'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 const { t } = useI18n()
 
 let currentSetting = ref({})
diff --git a/resources/scripts/admin/views/settings/TaxTypesSetting.vue b/resources/scripts/admin/views/settings/TaxTypesSetting.vue
index 5bcec246..f83cd2d3 100644
--- a/resources/scripts/admin/views/settings/TaxTypesSetting.vue
+++ b/resources/scripts/admin/views/settings/TaxTypesSetting.vue
@@ -55,6 +55,12 @@ import { useModuleStore } from '@/scripts/admin/stores/module'
 import TaxTypeDropdown from '@/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue'
 import TaxTypeModal from '@/scripts/admin/components/modal-components/TaxTypeModal.vue'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseSwitchSection from '@/scripts/components/base/BaseSwitchSection.vue'
+import BaseDivider from '@/scripts/components/base/BaseDivider.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const { t } = useI18n()
 const utils = inject('utils')
diff --git a/resources/scripts/admin/views/settings/UpdateAppSetting.vue b/resources/scripts/admin/views/settings/UpdateAppSetting.vue
index 90e7a370..4722a8dd 100644
--- a/resources/scripts/admin/views/settings/UpdateAppSetting.vue
+++ b/resources/scripts/admin/views/settings/UpdateAppSetting.vue
@@ -211,6 +211,11 @@ import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useExchangeRateStore } from '@/scripts/admin/stores/exchange-rate'
 import { useDialogStore } from '@/scripts/stores/dialog'
 import BaseCheckbox from "@/scripts/components/base/BaseCheckbox.vue";
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseHeading from '@/scripts/components/base/BaseHeading.vue'
+import BaseDivider from '@/scripts/components/base/BaseDivider.vue'
+import BaseSettingCard from '@/scripts/components/base/BaseSettingCard.vue'
 
 const notificationStore = useNotificationStore()
 const dialogStore = useDialogStore()
diff --git a/resources/scripts/admin/views/settings/customization/CustomizationSetting.vue b/resources/scripts/admin/views/settings/customization/CustomizationSetting.vue
index a9796525..c3fcf1bc 100644
--- a/resources/scripts/admin/views/settings/customization/CustomizationSetting.vue
+++ b/resources/scripts/admin/views/settings/customization/CustomizationSetting.vue
@@ -39,4 +39,7 @@ import InvoicesTab from '@/scripts/admin/views/settings/customization/invoices/I
 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 BaseTab from '@/scripts/components/base/BaseTab.vue'
+import BaseTabGroup from '@/scripts/components/base/BaseTabGroup.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
 </script>
diff --git a/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue b/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
index 5d74f306..e0401831 100644
--- a/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
+++ b/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
@@ -205,6 +205,12 @@ import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
 
 import DragIcon from '@/scripts/components/icons/DragIcon.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 const props = defineProps({
   type: {
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue
index 978cdc37..c224989a 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue
@@ -36,6 +36,8 @@ import EstimatesTabEstimateNumber from './EstimatesTabEstimateNumber.vue'
 import EstimatesTabExpiryDate from './EstimatesTabExpiryDate.vue'
 import EstimatesTabDefaultFormats from './EstimatesTabDefaultFormats.vue'
 import EstimatesTabConvertEstimate from './EstimatesTabConvertEstimate.vue'
+import BaseSwitchSection from '@/scripts/components/base/BaseSwitchSection.vue'
+import BaseDivider from '@/scripts/components/base/BaseDivider.vue'
 
 const utils = inject('utils')
 
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
index d972d4ee..5f076cf7 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
@@ -45,6 +45,8 @@ import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { required, helpers } from '@vuelidate/validators'
 import { useI18n } from 'vue-i18n'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import BaseRadio from '@/scripts/components/base/BaseRadio.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 const { t, tm } = useI18n()
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
index e996a7f4..d91135e8 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
@@ -67,6 +67,10 @@
 <script setup>
 import { ref, reactive, inject } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseCustomInput from '@/scripts/components/base/BaseCustomInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 const companyStore = useCompanyStore()
 const utils = inject('utils')
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
index 38200d5f..08933235 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
@@ -60,6 +60,11 @@ import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { numeric, helpers, requiredIf } from '@vuelidate/validators'
 
 import useVuelidate from '@vuelidate/core'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseSwitchSection from '@/scripts/components/base/BaseSwitchSection.vue'
 
 const { t } = useI18n()
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue
index 28b6cefc..c6c0e6a9 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue
@@ -35,6 +35,8 @@ import InvoicesTabInvoiceNumber from './InvoicesTabInvoiceNumber.vue'
 import InvoicesTabRetrospective from './InvoicesTabRetrospective.vue'
 import InvoicesTabDueDate from './InvoicesTabDueDate.vue'
 import InvoicesTabDefaultFormats from './InvoicesTabDefaultFormats.vue'
+import BaseSwitchSection from '@/scripts/components/base/BaseSwitchSection.vue'
+import BaseDivider from '@/scripts/components/base/BaseDivider.vue'
 
 const utils = inject('utils')
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
index daf1a5d3..a826f12a 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
@@ -65,6 +65,10 @@
 <script setup>
 import { ref, reactive, inject } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseCustomInput from '@/scripts/components/base/BaseCustomInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 const companyStore = useCompanyStore()
 const utils = inject('utils')
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
index c44780ab..13e1d967 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
@@ -58,6 +58,11 @@ import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { numeric, helpers, requiredIf } from '@vuelidate/validators'
 
 import useVuelidate from '@vuelidate/core'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseSwitchSection from '@/scripts/components/base/BaseSwitchSection.vue'
 
 const { t } = useI18n()
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
index 4aa42db6..961ff9c1 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
@@ -57,6 +57,8 @@ import { reactive, computed, ref, inject } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useI18n } from 'vue-i18n'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import BaseRadio from '@/scripts/components/base/BaseRadio.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 const { t, tm } = useI18n()
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue b/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
index eab86295..bac1e335 100644
--- a/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
+++ b/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
@@ -46,6 +46,11 @@ import { useItemStore } from '@/scripts/admin/stores/item'
 import { useModalStore } from '@/scripts/stores/modal'
 import { useDialogStore } from '@/scripts/stores/dialog'
 import ItemUnitModal from '@/scripts/admin/components/modal-components/ItemUnitModal.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
 
 const { t } = useI18n()
 const table = ref(null)
diff --git a/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue b/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue
index 8552124f..5287fe90 100644
--- a/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue
+++ b/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue
@@ -25,6 +25,8 @@ import { computed, reactive, inject } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import PaymentsTabPaymentNumber from './PaymentsTabPaymentNumber.vue'
 import PaymentsTabDefaultFormats from './PaymentsTabDefaultFormats.vue'
+import BaseSwitchSection from '@/scripts/components/base/BaseSwitchSection.vue'
+import BaseDivider from '@/scripts/components/base/BaseDivider.vue'
 
 const utils = inject('utils')
 const companyStore = useCompanyStore()
diff --git a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
index f8468f26..c259dc35 100644
--- a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
@@ -57,6 +57,10 @@
 <script setup>
 import { ref, reactive, inject } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseCustomInput from '@/scripts/components/base/BaseCustomInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 const companyStore = useCompanyStore()
 const utils = inject('utils')
diff --git a/resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue
index 031c9412..9b543d8c 100644
--- a/resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue
@@ -82,6 +82,12 @@ import { required, email, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
 
 const props = defineProps({
   configData: {
diff --git a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
index 75d2ae08..ff54a6aa 100644
--- a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
@@ -148,6 +148,12 @@ import { required, email, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
 
 const props = defineProps({
   configData: {
diff --git a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
index 91f47419..b8cbd2c7 100644
--- a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
@@ -187,6 +187,12 @@ import { required, email, numeric, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
 
 const props = defineProps({
   configData: {
diff --git a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
index 953de385..ecee521f 100644
--- a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
@@ -174,6 +174,12 @@ import { required, email, numeric, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
 import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
 
 const props = defineProps({
   configData: {
diff --git a/resources/scripts/admin/views/users/Create.vue b/resources/scripts/admin/views/users/Create.vue
index 811548c4..faf8188a 100644
--- a/resources/scripts/admin/views/users/Create.vue
+++ b/resources/scripts/admin/views/users/Create.vue
@@ -176,6 +176,17 @@ import useVuelidate from '@vuelidate/core'
 import { ValidateEach } from '@vuelidate/components'
 import { useI18n } from 'vue-i18n'
 import { useUsersStore } from '@/scripts/admin/stores/users'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGrid from '@/scripts/components/base/BaseInputGrid.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const userStore = useUsersStore()
 
diff --git a/resources/scripts/admin/views/users/Index.vue b/resources/scripts/admin/views/users/Index.vue
index d8c6558d..b7e11427 100644
--- a/resources/scripts/admin/views/users/Index.vue
+++ b/resources/scripts/admin/views/users/Index.vue
@@ -195,6 +195,20 @@ import { useUserStore } from '@/scripts/admin/stores/user'
 import AstronautIcon from '@/scripts/components/icons/empty/AstronautIcon.vue'
 import UserDropdown from '@/scripts/admin/components/dropdowns/UserIndexDropdown.vue'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
+import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseEmptyPlaceholder from '@/scripts/components/base/BaseEmptyPlaceholder.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseFilterWrapper from '@/scripts/components/base/BaseFilterWrapper.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const notificationStore = useNotificationStore()
 const dialogStore = useDialogStore()
diff --git a/resources/scripts/components/GlobalSearchBar.vue b/resources/scripts/components/GlobalSearchBar.vue
index b150ed73..4aad5b0c 100644
--- a/resources/scripts/components/GlobalSearchBar.vue
+++ b/resources/scripts/components/GlobalSearchBar.vue
@@ -159,6 +159,8 @@ import { onClickOutside } from '@vueuse/core'
 import { useRoute } from 'vue-router'
 import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
 import { debounce } from 'lodash'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
 
 const usersStore = useUsersStore()
 
diff --git a/resources/scripts/components/InvoiceInformationCard.vue b/resources/scripts/components/InvoiceInformationCard.vue
index 53219252..12d154bc 100644
--- a/resources/scripts/components/InvoiceInformationCard.vue
+++ b/resources/scripts/components/InvoiceInformationCard.vue
@@ -67,6 +67,11 @@
 </template>
 
 <script setup>
+import BaseSpinner from '@/scripts/components/base/BaseSpinner.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseInvoiceStatusLabel from '@/scripts/components/base/BaseInvoiceStatusLabel.vue'
+import BaseInvoiceStatusBadge from '@/scripts/components/base/BaseInvoiceStatusBadge.vue'
+
 const props = defineProps({
   invoice: {
     type: [Object, null],
diff --git a/resources/scripts/components/InvoicePublicPage.vue b/resources/scripts/components/InvoicePublicPage.vue
index cb63c119..09a36632 100644
--- a/resources/scripts/components/InvoicePublicPage.vue
+++ b/resources/scripts/components/InvoicePublicPage.vue
@@ -77,6 +77,8 @@ import axios from 'axios'
 import { ref, reactive, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import InvoiceInformationCard from '@/scripts/components/InvoiceInformationCard.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
 
 let invoiceData = ref(null)
 const route = useRoute()
diff --git a/resources/scripts/components/base-select/BaseMultiselect.vue b/resources/scripts/components/base-select/BaseMultiselect.vue
index d055a8e4..f2c3dc33 100755
--- a/resources/scripts/components/base-select/BaseMultiselect.vue
+++ b/resources/scripts/components/base-select/BaseMultiselect.vue
@@ -237,9 +237,12 @@ import useDropdown from './composables/useDropdown'
 import useMultiselect from './composables/useMultiselect'
 import useKeyboard from './composables/useKeyboard'
 import useClasses from './composables/useClasses'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 export default {
   name: 'BaseMultiselect',
+  components: { BaseContentPlaceholders, BaseContentPlaceholdersBox },
   props: {
     preserveSearch: {
       type: Boolean,
diff --git a/resources/scripts/components/base/BaseButton.vue b/resources/scripts/components/base/BaseButton.vue
index 05fb01e7..b6f5840f 100644
--- a/resources/scripts/components/base/BaseButton.vue
+++ b/resources/scripts/components/base/BaseButton.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { computed, ref } from 'vue'
 import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
+import BaseCustomTag from '@/scripts/components/base/BaseCustomTag.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 const props = defineProps({
   contentLoading: {
     type: Boolean,
diff --git a/resources/scripts/components/base/BaseCustomInput.vue b/resources/scripts/components/base/BaseCustomInput.vue
index ca911e3a..063a576a 100644
--- a/resources/scripts/components/base/BaseCustomInput.vue
+++ b/resources/scripts/components/base/BaseCustomInput.vue
@@ -66,6 +66,12 @@
 <script setup>
 import { computed, ref, watch, onMounted } from 'vue'
 import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
+import BaseEditor from '@/scripts/components/base/base-editor/BaseEditor.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   contentLoading: {
diff --git a/resources/scripts/components/base/BaseCustomerSelectInput.vue b/resources/scripts/components/base/BaseCustomerSelectInput.vue
index 79d166dd..1b9d0849 100644
--- a/resources/scripts/components/base/BaseCustomerSelectInput.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectInput.vue
@@ -41,6 +41,9 @@ import { useI18n } from 'vue-i18n'
 import CustomerModal from '@/scripts/admin/components/modal-components/CustomerModal.vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseSelectAction from '@/scripts/components/base/BaseSelectAction.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   modelValue: {
diff --git a/resources/scripts/components/base/BaseCustomerSelectPopup.vue b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
index d9885363..ef3838ad 100644
--- a/resources/scripts/components/base/BaseCustomerSelectPopup.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
@@ -395,6 +395,11 @@ import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
 import { useRoute } from 'vue-router'
 import CustomerModal from '@/scripts/admin/components/modal-components/CustomerModal.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   valid: {
diff --git a/resources/scripts/components/base/BaseDatePicker.vue b/resources/scripts/components/base/BaseDatePicker.vue
index d0797bdf..f1c7e904 100644
--- a/resources/scripts/components/base/BaseDatePicker.vue
+++ b/resources/scripts/components/base/BaseDatePicker.vue
@@ -82,6 +82,8 @@ import { Mandarin } from 'flatpickr/dist/l10n/zh.js'
 import { computed, reactive, watch, ref, useSlots } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useUserStore } from '@/scripts/admin/stores/user'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const dp = ref(null)
 
diff --git a/resources/scripts/components/base/BaseDescriptionListItem.vue b/resources/scripts/components/base/BaseDescriptionListItem.vue
index 6140fc4b..f186423f 100644
--- a/resources/scripts/components/base/BaseDescriptionListItem.vue
+++ b/resources/scripts/components/base/BaseDescriptionListItem.vue
@@ -20,6 +20,10 @@
 </template>
 
 <script setup>
+import BaseLabel from '@/scripts/components/base/BaseLabel.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+
 const props = defineProps({
   label: {
     type: String,
diff --git a/resources/scripts/components/base/BaseDialog.vue b/resources/scripts/components/base/BaseDialog.vue
index 81906cf9..10b622ff 100644
--- a/resources/scripts/components/base/BaseDialog.vue
+++ b/resources/scripts/components/base/BaseDialog.vue
@@ -152,6 +152,8 @@ import {
   TransitionChild,
   TransitionRoot,
 } from '@headlessui/vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
 
 const dialogStore = useDialogStore()
 
diff --git a/resources/scripts/components/base/BaseDropdown.vue b/resources/scripts/components/base/BaseDropdown.vue
index 453f179a..8ea9e58e 100644
--- a/resources/scripts/components/base/BaseDropdown.vue
+++ b/resources/scripts/components/base/BaseDropdown.vue
@@ -39,6 +39,8 @@
 import { Menu, MenuButton, MenuItems } from '@headlessui/vue'
 import { computed, onMounted, ref, onUpdated } from 'vue'
 import { usePopper } from '@/scripts/helpers/use-popper'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   containerClass: {
diff --git a/resources/scripts/components/base/BaseFileUploader.vue b/resources/scripts/components/base/BaseFileUploader.vue
index 4d7bd158..440439c6 100644
--- a/resources/scripts/components/base/BaseFileUploader.vue
+++ b/resources/scripts/components/base/BaseFileUploader.vue
@@ -381,6 +381,7 @@
 import { ref, onMounted, watch } from 'vue'
 import axios from 'axios'
 import utils from '@/scripts/helpers/utilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
 
 const props = defineProps({
   multiple: {
diff --git a/resources/scripts/components/base/BaseInfoAlert.vue b/resources/scripts/components/base/BaseInfoAlert.vue
index 9fceda15..560e601d 100644
--- a/resources/scripts/components/base/BaseInfoAlert.vue
+++ b/resources/scripts/components/base/BaseInfoAlert.vue
@@ -84,6 +84,7 @@
 
 <script setup>
 import { XCircleIcon } from '@heroicons/vue/solid'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
 
 const emits = defineEmits(['hide'])
 const props = defineProps({
diff --git a/resources/scripts/components/base/BaseInput.vue b/resources/scripts/components/base/BaseInput.vue
index 28cd89c2..c0de0616 100644
--- a/resources/scripts/components/base/BaseInput.vue
+++ b/resources/scripts/components/base/BaseInput.vue
@@ -148,6 +148,8 @@
 
 <script setup>
 import { computed, ref, useSlots } from 'vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 let inheritAttrs = ref(false)
 
diff --git a/resources/scripts/components/base/BaseInputGroup.vue b/resources/scripts/components/base/BaseInputGroup.vue
index 31d83fb9..20757696 100644
--- a/resources/scripts/components/base/BaseInputGroup.vue
+++ b/resources/scripts/components/base/BaseInputGroup.vue
@@ -43,6 +43,9 @@
 
 <script setup>
 import { computed, useSlots } from 'vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   contentLoading: {
diff --git a/resources/scripts/components/base/BaseItemSelect.vue b/resources/scripts/components/base/BaseItemSelect.vue
index df1aa583..e994d10a 100644
--- a/resources/scripts/components/base/BaseItemSelect.vue
+++ b/resources/scripts/components/base/BaseItemSelect.vue
@@ -89,6 +89,10 @@ import { useItemStore } from '@/scripts/admin/stores/item'
 import { useModalStore } from '@/scripts/stores/modal'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseSelectAction from '@/scripts/components/base/BaseSelectAction.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   contentLoading: {
diff --git a/resources/scripts/components/base/BaseMoney.vue b/resources/scripts/components/base/BaseMoney.vue
index bdc4f89e..e5be727d 100644
--- a/resources/scripts/components/base/BaseMoney.vue
+++ b/resources/scripts/components/base/BaseMoney.vue
@@ -19,6 +19,8 @@
 import { computed, ref } from 'vue'
 import { Money3Component } from 'v-money3'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 let money3 = Money3Component
 
diff --git a/resources/scripts/components/base/BaseSelectInput.vue b/resources/scripts/components/base/BaseSelectInput.vue
index cbb7c513..92882067 100644
--- a/resources/scripts/components/base/BaseSelectInput.vue
+++ b/resources/scripts/components/base/BaseSelectInput.vue
@@ -140,6 +140,9 @@ import {
   ListboxOption,
   ListboxOptions,
 } from '@headlessui/vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   contentLoading: {
diff --git a/resources/scripts/components/base/BaseSettingCard.vue b/resources/scripts/components/base/BaseSettingCard.vue
index 99db2897..de0890fe 100644
--- a/resources/scripts/components/base/BaseSettingCard.vue
+++ b/resources/scripts/components/base/BaseSettingCard.vue
@@ -29,6 +29,8 @@
 </template>
 
 <script setup>
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
+
 defineProps({
   title: {
     type: String,
diff --git a/resources/scripts/components/base/BaseTabGroup.vue b/resources/scripts/components/base/BaseTabGroup.vue
index ea84ca12..b93b0394 100644
--- a/resources/scripts/components/base/BaseTabGroup.vue
+++ b/resources/scripts/components/base/BaseTabGroup.vue
@@ -48,6 +48,7 @@
 <script setup>
 import { computed, useSlots } from 'vue'
 import { TabGroup, TabList, Tab, TabPanels } from '@headlessui/vue'
+import BaseBadge from '@/scripts/components/base/BaseBadge.vue'
 
 const props = defineProps({
   defaultIndex: {
diff --git a/resources/scripts/components/base/BaseText.vue b/resources/scripts/components/base/BaseText.vue
index 118641d6..1e8f1313 100644
--- a/resources/scripts/components/base/BaseText.vue
+++ b/resources/scripts/components/base/BaseText.vue
@@ -7,6 +7,7 @@
 </template>
 <script setup>
 import { computed } from "vue"
+import BaseCustomTag from '@/scripts/components/base/BaseCustomTag.vue'
 
 const props = defineProps({
   tag: {
diff --git a/resources/scripts/components/base/BaseTextarea.vue b/resources/scripts/components/base/BaseTextarea.vue
index 434ce38b..452d850b 100644
--- a/resources/scripts/components/base/BaseTextarea.vue
+++ b/resources/scripts/components/base/BaseTextarea.vue
@@ -20,6 +20,8 @@
 
 <script setup>
 import { computed, onMounted, ref } from 'vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   contentLoading: {
diff --git a/resources/scripts/components/base/BaseTimePicker.vue b/resources/scripts/components/base/BaseTimePicker.vue
index 11157149..8291dcaf 100644
--- a/resources/scripts/components/base/BaseTimePicker.vue
+++ b/resources/scripts/components/base/BaseTimePicker.vue
@@ -52,6 +52,8 @@
 import FlatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 import { computed, reactive, useSlots, ref } from 'vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 const dpt = ref(null)
 
 const props = defineProps({
diff --git a/resources/scripts/components/base/base-editor/BaseEditor.vue b/resources/scripts/components/base/base-editor/BaseEditor.vue
index b40f442d..df4ff9fa 100644
--- a/resources/scripts/components/base/base-editor/BaseEditor.vue
+++ b/resources/scripts/components/base/base-editor/BaseEditor.vue
@@ -90,9 +90,15 @@ import {
   MenuCenterIcon,
 } from './icons/index.js'
 import { MenuAlt2Icon, MenuAlt3Icon, MenuIcon, LinkIcon } from '@heroicons/vue/solid'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 export default {
   components: {
+    BaseContentPlaceholders,
+    BaseContentPlaceholdersBox,
+    BaseDropdown,
     EditorContent,
     DotsVerticalIcon,
   },
diff --git a/resources/scripts/components/base/base-table/BaseTable.vue b/resources/scripts/components/base/base-table/BaseTable.vue
index f44e13c6..5e1e58f9 100644
--- a/resources/scripts/components/base/base-table/BaseTable.vue
+++ b/resources/scripts/components/base/base-table/BaseTable.vue
@@ -149,6 +149,9 @@ import Row from './Row'
 import Column from './Column'
 import BaseTablePagination from './BaseTablePagination.vue'
 import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   columns: {
diff --git a/resources/scripts/components/base/base-table/BaseTablePagination.vue b/resources/scripts/components/base/base-table/BaseTablePagination.vue
index a7794e72..d7ff6604 100644
--- a/resources/scripts/components/base/base-table/BaseTablePagination.vue
+++ b/resources/scripts/components/base/base-table/BaseTablePagination.vue
@@ -282,7 +282,10 @@
 <script>
 // Todo: Need to convert this to Composition API
 
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+
 export default {
+  components: { BaseIcon },
   props: {
     pagination: {
       type: Object,
diff --git a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue b/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
index 4b504a16..bcb3fc81 100644
--- a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
@@ -208,6 +208,8 @@ import {
 } from '@headlessui/vue'
 import { MenuIcon, XIcon, LogoutIcon, CogIcon } from '@heroicons/vue/outline'
 import { useI18n } from 'vue-i18n'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 
 const { t } = useI18n()
 
diff --git a/resources/scripts/customer/views/SamplePage.vue b/resources/scripts/customer/views/SamplePage.vue
index e071d4e7..6d8709a5 100644
--- a/resources/scripts/customer/views/SamplePage.vue
+++ b/resources/scripts/customer/views/SamplePage.vue
@@ -10,6 +10,7 @@
 <script setup>
 import BaseCheckon from '@/scripts/customer/BaseCheckon.vue'
 import { useCustomerStore } from '@/scripts/customer/stores/customer'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
 
 const customerStore = useCustomerStore()
 </script>
diff --git a/resources/scripts/customer/views/auth/ForgotPassword.vue b/resources/scripts/customer/views/auth/ForgotPassword.vue
index e4ff913e..5e26a3c5 100644
--- a/resources/scripts/customer/views/auth/ForgotPassword.vue
+++ b/resources/scripts/customer/views/auth/ForgotPassword.vue
@@ -46,6 +46,9 @@ import { useVuelidate } from '@vuelidate/core'
 import { useI18n } from 'vue-i18n'
 import { useAuthStore } from '@/scripts/customer/stores/auth'
 import { useRouter, useRoute } from 'vue-router'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 // // store
 const authStore = useAuthStore()
diff --git a/resources/scripts/customer/views/auth/Login.vue b/resources/scripts/customer/views/auth/Login.vue
index 87a60e23..9d4dbc98 100644
--- a/resources/scripts/customer/views/auth/Login.vue
+++ b/resources/scripts/customer/views/auth/Login.vue
@@ -77,6 +77,10 @@ import { useVuelidate } from '@vuelidate/core'
 import { required, email, helpers } from '@vuelidate/validators'
 import { useAuthStore } from '@/scripts/customer/stores/auth'
 import { useRouter, useRoute } from 'vue-router'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
 
 const router = useRouter()
 const route = useRoute()
diff --git a/resources/scripts/customer/views/auth/ResetPassword.vue b/resources/scripts/customer/views/auth/ResetPassword.vue
index 8e9095d4..8e2a19ee 100644
--- a/resources/scripts/customer/views/auth/ResetPassword.vue
+++ b/resources/scripts/customer/views/auth/ResetPassword.vue
@@ -76,6 +76,10 @@ import {
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/scripts/customer/stores/auth'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
 
 const route = useRoute()
 const router = useRouter()
diff --git a/resources/scripts/customer/views/dashboard/Dashboard.vue b/resources/scripts/customer/views/dashboard/Dashboard.vue
index 2b65492b..5765de41 100644
--- a/resources/scripts/customer/views/dashboard/Dashboard.vue
+++ b/resources/scripts/customer/views/dashboard/Dashboard.vue
@@ -8,4 +8,5 @@
 <script setup>
 import DashboardStats from '@/scripts/customer/views/dashboard/DashboardStats.vue'
 import DashboardTable from '@/scripts/customer/views/dashboard/DashboardTable.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 </script>
diff --git a/resources/scripts/customer/views/dashboard/DashboardStats.vue b/resources/scripts/customer/views/dashboard/DashboardStats.vue
index a32bb45f..b0c9ed40 100644
--- a/resources/scripts/customer/views/dashboard/DashboardStats.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardStats.vue
@@ -57,6 +57,7 @@ import EstimateIcon from '@/scripts/components/icons/dashboard/EstimateIcon.vue'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
 import { useDashboardStore } from '@/scripts/customer/stores/dashboard'
 import DashboardStatsItem from '@/scripts/customer/views/dashboard/DashboardStatsItem.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
 //store
 
 const utils = inject('utils')
diff --git a/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue b/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
index a114818d..87d8b61d 100644
--- a/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
@@ -18,3 +18,8 @@
     </div>
   </BaseContentPlaceholders>
 </template>
+<script setup lang="ts">
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+</script>
diff --git a/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue b/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
index 90ad7a11..23dc116f 100644
--- a/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
@@ -29,3 +29,8 @@
     </div>
   </BaseContentPlaceholders>
 </template>
+<script setup lang="ts">
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+</script>
diff --git a/resources/scripts/customer/views/dashboard/DashboardTable.vue b/resources/scripts/customer/views/dashboard/DashboardTable.vue
index 1c8c4c3c..625705ab 100644
--- a/resources/scripts/customer/views/dashboard/DashboardTable.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardTable.vue
@@ -101,6 +101,12 @@ import { useRoute } from 'vue-router'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
 import { useDashboardStore } from '@/scripts/customer/stores/dashboard'
 import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseEstimateStatusLabel from '@/scripts/components/base/BaseEstimateStatusLabel.vue'
+import BaseEstimateStatusBadge from '@/scripts/components/base/BaseEstimateStatusBadge.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInvoiceStatusLabel from '@/scripts/components/base/BaseInvoiceStatusLabel.vue'
+import BasePaidStatusBadge from '@/scripts/components/base/BasePaidStatusBadge.vue'
 
 // store
 
diff --git a/resources/scripts/customer/views/estimates/Index.vue b/resources/scripts/customer/views/estimates/Index.vue
index be06c74e..968eb1eb 100644
--- a/resources/scripts/customer/views/estimates/Index.vue
+++ b/resources/scripts/customer/views/estimates/Index.vue
@@ -143,6 +143,23 @@ import { useEstimateStore } from '@/scripts/customer/stores/estimate'
 import { useRoute } from 'vue-router'
 import ObservatoryIcon from '@/scripts/components/icons/empty/ObservatoryIcon.vue'
 import { useI18n } from 'vue-i18n'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseEstimateStatusLabel from '@/scripts/components/base/BaseEstimateStatusLabel.vue'
+import BaseEstimateStatusBadge from '@/scripts/components/base/BaseEstimateStatusBadge.vue'
+import BaseEmptyPlaceholder from '@/scripts/components/base/BaseEmptyPlaceholder.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseSelectInput from '@/scripts/components/base/BaseSelectInput.vue'
+import BaseFilterWrapper from '@/scripts/components/base/BaseFilterWrapper.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const { t } = useI18n()
 
diff --git a/resources/scripts/customer/views/estimates/View.vue b/resources/scripts/customer/views/estimates/View.vue
index fcd920d3..5d31f038 100644
--- a/resources/scripts/customer/views/estimates/View.vue
+++ b/resources/scripts/customer/views/estimates/View.vue
@@ -229,6 +229,16 @@ import moment from 'moment'
 import { useEstimateStore } from '@/scripts/customer/stores/estimate'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
 import { useDialogStore } from '@/scripts/stores/dialog'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseEstimateStatusLabel from '@/scripts/components/base/BaseEstimateStatusLabel.vue'
+import BaseEstimateStatusBadge from '@/scripts/components/base/BaseEstimateStatusBadge.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseRadio from '@/scripts/components/base/BaseRadio.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 // Router
 const route = useRoute()
diff --git a/resources/scripts/customer/views/invoices/Index.vue b/resources/scripts/customer/views/invoices/Index.vue
index 410fadc3..642527a2 100644
--- a/resources/scripts/customer/views/invoices/Index.vue
+++ b/resources/scripts/customer/views/invoices/Index.vue
@@ -150,6 +150,23 @@ import { useGlobalStore } from '@/scripts/customer/stores/global'
 import { useRoute } from 'vue-router'
 import MoonwalkerIcon from '@/scripts/components/icons/empty/MoonwalkerIcon.vue'
 import { useI18n } from 'vue-i18n'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseInvoiceStatusLabel from '@/scripts/components/base/BaseInvoiceStatusLabel.vue'
+import BaseInvoiceStatusBadge from '@/scripts/components/base/BaseInvoiceStatusBadge.vue'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseEmptyPlaceholder from '@/scripts/components/base/BaseEmptyPlaceholder.vue'
+import BaseDatePicker from '@/scripts/components/base/BaseDatePicker.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseSelectInput from '@/scripts/components/base/BaseSelectInput.vue'
+import BaseFilterWrapper from '@/scripts/components/base/BaseFilterWrapper.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const { t } = useI18n()
 
diff --git a/resources/scripts/customer/views/invoices/View.vue b/resources/scripts/customer/views/invoices/View.vue
index f8161127..1329b693 100644
--- a/resources/scripts/customer/views/invoices/View.vue
+++ b/resources/scripts/customer/views/invoices/View.vue
@@ -236,6 +236,16 @@ import { useNotificationStore } from '@/scripts/stores/notification'
 import moment from 'moment'
 import { useInvoiceStore } from '@/scripts/customer/stores/invoice'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseInvoiceStatusLabel from '@/scripts/components/base/BaseInvoiceStatusLabel.vue'
+import BaseInvoiceStatusBadge from '@/scripts/components/base/BaseInvoiceStatusBadge.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseRadio from '@/scripts/components/base/BaseRadio.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 // Router
 const route = useRoute()
diff --git a/resources/scripts/customer/views/payments/Index.vue b/resources/scripts/customer/views/payments/Index.vue
index faad1764..54c5601d 100644
--- a/resources/scripts/customer/views/payments/Index.vue
+++ b/resources/scripts/customer/views/payments/Index.vue
@@ -137,6 +137,17 @@ import { useI18n } from 'vue-i18n'
 import { usePaymentStore } from '@/scripts/customer/stores/payment'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
 import { useRoute } from 'vue-router'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseEmptyPlaceholder from '@/scripts/components/base/BaseEmptyPlaceholder.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseFilterWrapper from '@/scripts/components/base/BaseFilterWrapper.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 const { tm, t } = useI18n()
 let showFilters = ref(false)
diff --git a/resources/scripts/customer/views/payments/View.vue b/resources/scripts/customer/views/payments/View.vue
index 1e03a2d1..ef24cba6 100644
--- a/resources/scripts/customer/views/payments/View.vue
+++ b/resources/scripts/customer/views/payments/View.vue
@@ -219,6 +219,14 @@ import { useNotificationStore } from '@/scripts/stores/notification'
 import moment from 'moment'
 import { usePaymentStore } from '@/scripts/customer/stores/payment'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
+import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseRadio from '@/scripts/components/base/BaseRadio.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 
 // Router
 const route = useRoute()
diff --git a/resources/scripts/customer/views/settings/AddressInformation.vue b/resources/scripts/customer/views/settings/AddressInformation.vue
index 85e47100..2fa99982 100644
--- a/resources/scripts/customer/views/settings/AddressInformation.vue
+++ b/resources/scripts/customer/views/settings/AddressInformation.vue
@@ -247,6 +247,14 @@ import { useGlobalStore } from '@/scripts/customer/stores/global'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
+import BaseDivider from '@/scripts/components/base/BaseDivider.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
 
 //store
 
diff --git a/resources/scripts/customer/views/settings/CustomerSettings.vue b/resources/scripts/customer/views/settings/CustomerSettings.vue
index e17bec8c..a7c49dac 100644
--- a/resources/scripts/customer/views/settings/CustomerSettings.vue
+++ b/resources/scripts/customer/views/settings/CustomerSettings.vue
@@ -129,6 +129,12 @@ import {
 } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useRoute } from 'vue-router'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
+import BaseFileUploader from '@/scripts/components/base/BaseFileUploader.vue'
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
 
 const userStore = useUserStore()
 const globalStore = useGlobalStore()
diff --git a/resources/scripts/customer/views/settings/SettingsIndex.vue b/resources/scripts/customer/views/settings/SettingsIndex.vue
index ea9ed3af..097402e2 100644
--- a/resources/scripts/customer/views/settings/SettingsIndex.vue
+++ b/resources/scripts/customer/views/settings/SettingsIndex.vue
@@ -68,6 +68,10 @@ import BaseListItem from '@/scripts/components/list/BaseListItem.vue'
 import { OfficeBuildingIcon, UserIcon } from '@heroicons/vue/outline'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
 import { useI18n } from 'vue-i18n'
+import BaseBreadcrumbItem from '@/scripts/components/base/BaseBreadcrumbItem.vue'
+import BaseBreadcrumb from '@/scripts/components/base/BaseBreadcrumb.vue'
+import BasePageHeader from '@/scripts/components/base/BasePageHeader.vue'
+import BasePage from '@/scripts/components/base/BasePage.vue'
 const { t } = useI18n()
 
 //route
diff --git a/resources/scripts/global-components.js b/resources/scripts/global-components.js
deleted file mode 100644
index 9808358b..00000000
--- a/resources/scripts/global-components.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { defineAsyncComponent } from 'vue'
-
-export const defineGlobalComponents = (app) => {
-  const components = import.meta.glob('./components/base/*.vue', { eager: true })
-
-  Object.entries(components).forEach(([path, definition]) => {
-    // Get name of component, based on filename
-    // "./components/Fruits.vue" will become "Fruits"
-    const componentName = path
-      .split('/')
-      .pop()
-      .replace(/\.\w+$/, '')
-
-    // Register component on this Vue instance
-    app.component(componentName, definition.default)
-  })
-
-  const BaseTable = defineAsyncComponent(() =>
-    import('./components/base/base-table/BaseTable.vue')
-  )
-
-  const BaseMultiselect = defineAsyncComponent(() =>
-    import('./components/base-select/BaseMultiselect.vue')
-  )
-
-  const BaseEditor = defineAsyncComponent(() =>
-    import('./components/base/base-editor/BaseEditor.vue')
-  )
-
-  app.component('BaseTable', BaseTable)
-  app.component('BaseMultiselect', BaseMultiselect)
-  app.component('BaseEditor', BaseEditor)
-}