diff --git a/app/Http/Controllers/V1/Admin/Customer/CustomerStatsController.php b/app/Http/Controllers/V1/Admin/Customer/CustomerStatsController.php
index 1d2c0415a..1bf91f38c 100644
--- a/app/Http/Controllers/V1/Admin/Customer/CustomerStatsController.php
+++ b/app/Http/Controllers/V1/Admin/Customer/CustomerStatsController.php
@@ -103,6 +103,7 @@ public function __invoke(Request $request, Customer $customer)
         )
             ->whereCompany()
             ->whereCustomer($customer->id)
+            ->where('status', '<>', Invoice::STATUS_DRAFT)
             ->sum('total');
         $totalReceipts = Payment::whereBetween(
             'payment_date',
diff --git a/app/Http/Controllers/V1/Admin/Dashboard/DashboardController.php b/app/Http/Controllers/V1/Admin/Dashboard/DashboardController.php
index 4e1d96d22..a92fbc237 100644
--- a/app/Http/Controllers/V1/Admin/Dashboard/DashboardController.php
+++ b/app/Http/Controllers/V1/Admin/Dashboard/DashboardController.php
@@ -104,6 +104,7 @@ public function __invoke(Request $request)
             'invoice_date',
             [$startDate->format('Y-m-d'), $start->format('Y-m-d')]
         )
+            ->where('status', '<>', Invoice::STATUS_DRAFT)
             ->whereCompany()
             ->sum('base_total');
 
@@ -141,6 +142,7 @@ public function __invoke(Request $request)
         $recent_due_invoices = Invoice::with('customer')
             ->whereCompany()
             ->where('base_due_amount', '>', 0)
+            ->where('status', '<>', Invoice::STATUS_DRAFT)
             ->take(5)
             ->latest()
             ->get();
diff --git a/app/Http/Controllers/V1/Admin/Invoice/InvoicesController.php b/app/Http/Controllers/V1/Admin/Invoice/InvoicesController.php
index 9aeefe518..3890d2899 100644
--- a/app/Http/Controllers/V1/Admin/Invoice/InvoicesController.php
+++ b/app/Http/Controllers/V1/Admin/Invoice/InvoicesController.php
@@ -24,6 +24,7 @@ public function index(Request $request)
         $limit = $request->has('limit') ? $request->limit : 10;
 
         $invoices = Invoice::whereCompany()
+            ->whereTabFilters($request->tab_status)
             ->join('customers', 'customers.id', '=', 'invoices.customer_id')
             ->applyFilters($request->all())
             ->select('invoices.*', 'customers.name')
diff --git a/app/Http/Requests/CompaniesRequest.php b/app/Http/Requests/CompaniesRequest.php
index 5394592be..661d8777e 100644
--- a/app/Http/Requests/CompaniesRequest.php
+++ b/app/Http/Requests/CompaniesRequest.php
@@ -3,7 +3,6 @@
 namespace Crater\Http\Requests;
 
 use Illuminate\Foundation\Http\FormRequest;
-use Illuminate\Support\Str;
 use Illuminate\Validation\Rule;
 
 class CompaniesRequest extends FormRequest
@@ -34,6 +33,10 @@ public function rules()
             'currency' => [
                 'required'
             ],
+            'slug' => [
+                'required',
+                Rule::unique('companies')
+            ],
             'address.name' => [
                 'nullable',
             ],
@@ -68,11 +71,11 @@ public function getCompanyPayload()
     {
         return collect($this->validated())
             ->only([
-                'name'
+                'name',
+                'slug'
             ])
             ->merge([
-                'owner_id' => $this->user()->id,
-                'slug' => Str::slug($this->name)
+                'owner_id' => $this->user()->id
             ])
             ->toArray();
     }
diff --git a/app/Http/Requests/CompanyRequest.php b/app/Http/Requests/CompanyRequest.php
index c86cd6457..dc22b1ae7 100644
--- a/app/Http/Requests/CompanyRequest.php
+++ b/app/Http/Requests/CompanyRequest.php
@@ -30,7 +30,8 @@ public function rules()
                 Rule::unique('companies')->ignore($this->header('company'), 'id'),
             ],
             'slug' => [
-                'nullable'
+                'required',
+                Rule::unique('companies')->ignore($this->header('company'), 'id'),
             ],
             'address.country_id' => [
                 'required',
diff --git a/app/Http/Resources/EstimateResource.php b/app/Http/Resources/EstimateResource.php
index 46b69ea39..e7284bd7a 100644
--- a/app/Http/Resources/EstimateResource.php
+++ b/app/Http/Resources/EstimateResource.php
@@ -23,7 +23,7 @@ public function toArray($request)
             'reference_number' => $this->reference_number,
             'tax_per_item' => $this->tax_per_item,
             'discount_per_item' => $this->discount_per_item,
-            'notes' => $this->getNotes(),
+            'notes' => $this->notes,
             'discount' => $this->discount,
             'discount_type' => $this->discount_type,
             'discount_val' => $this->discount_val,
diff --git a/app/Http/Resources/PaymentResource.php b/app/Http/Resources/PaymentResource.php
index 0ac625f85..7350a9127 100644
--- a/app/Http/Resources/PaymentResource.php
+++ b/app/Http/Resources/PaymentResource.php
@@ -18,7 +18,7 @@ public function toArray($request)
             'id' => $this->id,
             'payment_number' => $this->payment_number,
             'payment_date' => $this->payment_date,
-            'notes' => $this->getNotes(),
+            'notes' => $this->notes,
             'amount' => $this->amount,
             'unique_hash' => $this->unique_hash,
             'invoice_id' => $this->invoice_id,
diff --git a/app/Models/Company.php b/app/Models/Company.php
index bf87820b1..a0d9fddbb 100644
--- a/app/Models/Company.php
+++ b/app/Models/Company.php
@@ -217,7 +217,7 @@ public function setupDefaultSettings()
             'estimate_billing_address_format' => $billingAddressFormat,
             'payment_company_address_format' => $companyAddressFormat,
             'payment_from_customer_address_format' => $paymentFromCustomerAddress,
-            'currency' => request()->currency ?? 13,
+            'currency' => request()->currency ?? 1,
             'time_zone' => 'Asia/Kolkata',
             'language' => 'en',
             'fiscal_year' => '1-12',
diff --git a/app/Models/Estimate.php b/app/Models/Estimate.php
index 5b7c3b8fd..8c916c6a8 100644
--- a/app/Models/Estimate.php
+++ b/app/Models/Estimate.php
@@ -483,7 +483,8 @@ public function getExtraFields()
             '{ESTIMATE_DATE}' => $this->formattedEstimateDate,
             '{ESTIMATE_EXPIRY_DATE}' => $this->formattedExpiryDate,
             '{ESTIMATE_NUMBER}' => $this->estimate_number,
-            '{ESTIMATE_REF_NUMBER}' => $this->reference_number,
+            '{PDF_LINK}' => $this->estimatePdfUrl,
+            '{TOTAL_AMOUNT}' => format_money_pdf($this->total, $this->customer->currency)
         ];
     }
 
diff --git a/app/Models/Expense.php b/app/Models/Expense.php
index bd0aa1e35..01dd69a26 100644
--- a/app/Models/Expense.php
+++ b/app/Models/Expense.php
@@ -240,7 +240,7 @@ public static function createExpense($request)
         }
 
         if ($request->hasFile('attachment_receipt')) {
-            $expense->addMediaFromRequest('attachment_receipt')->toMediaCollection('receipts');
+            $expense->addMediaFromRequest('attachment_receipt')->toMediaCollection('receipts', 'local');
         }
 
         if ($request->customFields) {
@@ -262,12 +262,12 @@ public function updateExpense($request)
             ExchangeRateLog::addExchangeRateLog($this);
         }
 
-        if (isset($request->is_attachment_receipt_removed) && (bool) $request->is_attachment_receipt_removed) {
+        if (isset($request->is_attachment_receipt_removed) && $request->is_attachment_receipt_removed == "true") {
             $this->clearMediaCollection('receipts');
         }
         if ($request->hasFile('attachment_receipt')) {
             $this->clearMediaCollection('receipts');
-            $this->addMediaFromRequest('attachment_receipt')->toMediaCollection('receipts');
+            $this->addMediaFromRequest('attachment_receipt')->toMediaCollection('receipts', 'local');
         }
 
         if ($request->customFields) {
diff --git a/app/Models/Invoice.php b/app/Models/Invoice.php
index 39cd31659..eb973488e 100644
--- a/app/Models/Invoice.php
+++ b/app/Models/Invoice.php
@@ -187,16 +187,6 @@ public function getFormattedInvoiceDateAttribute($value)
         return Carbon::parse($this->invoice_date)->format($dateFormat);
     }
 
-    public function scopeWhereStatus($query, $status)
-    {
-        return $query->where('invoices.status', $status);
-    }
-
-    public function scopeWherePaidStatus($query, $status)
-    {
-        return $query->where('invoices.paid_status', $status);
-    }
-
     public function scopeWhereDueStatus($query, $status)
     {
         return $query->whereIn('invoices.paid_status', [
@@ -234,6 +224,40 @@ public function scopeWhereOrder($query, $orderByField, $orderBy)
         $query->orderBy($orderByField, $orderBy);
     }
 
+    public function scopeWhereStatus($query, $status)
+    {
+        return $query->where('invoices.status', $status);
+    }
+
+    public function scopeWherePaidStatus($query, $status)
+    {
+        return $query->where('invoices.paid_status', $status);
+    }
+
+    public function scopeWhereTabFilters($query, $status)
+    {
+        if ($status == "DRAFT") {
+            return $query->where('invoices.status', $status);
+        }
+
+        if ($status == "SENT") {
+            return $query->whereIn('invoices.status', [
+                self::STATUS_SENT,
+                self::STATUS_VIEWED,
+                self::STATUS_COMPLETED
+            ]);
+        }
+
+        if ($status == 'DUE') {
+            return $query->whereIn('invoices.paid_status', [
+                self::STATUS_UNPAID,
+                self::STATUS_PARTIALLY_PAID,
+            ]);
+        }
+
+        return ;
+    }
+
     public function scopeApplyFilters($query, array $filters)
     {
         $filters = collect($filters);
@@ -249,17 +273,11 @@ public function scopeApplyFilters($query, array $filters)
                 $filters->get('status') == self::STATUS_PAID
             ) {
                 $query->wherePaidStatus($filters->get('status'));
-            } elseif ($filters->get('status') == 'DUE') {
-                $query->whereDueStatus($filters->get('status'));
             } else {
                 $query->whereStatus($filters->get('status'));
             }
         }
 
-        if ($filters->get('paid_status')) {
-            $query->wherePaidStatus($filters->get('status'));
-        }
-
         if ($filters->get('invoice_id')) {
             $query->whereInvoice($filters->get('invoice_id'));
         }
@@ -651,7 +669,9 @@ public function getExtraFields()
             '{INVOICE_DATE}' => $this->formattedInvoiceDate,
             '{INVOICE_DUE_DATE}' => $this->formattedDueDate,
             '{INVOICE_NUMBER}' => $this->invoice_number,
-            '{INVOICE_REF_NUMBER}' => $this->reference_number,
+            '{PDF_LINK}' => $this->invoicePdfUrl,
+            '{DUE_AMOUNT}' => format_money_pdf($this->due_amount, $this->customer->currency),
+            '{TOTAL_AMOUNT}' => format_money_pdf($this->total, $this->customer->currency)
         ];
     }
 
diff --git a/app/Models/Payment.php b/app/Models/Payment.php
index 83a17441d..68a6d6a35 100644
--- a/app/Models/Payment.php
+++ b/app/Models/Payment.php
@@ -435,7 +435,8 @@ public function getExtraFields()
             '{PAYMENT_DATE}' => $this->formattedPaymentDate,
             '{PAYMENT_MODE}' => $this->paymentMethod ? $this->paymentMethod->name : null,
             '{PAYMENT_NUMBER}' => $this->payment_number,
-            '{PAYMENT_AMOUNT}' => $this->reference_number,
+            '{PDF_LINK}' => $this->paymentPdfUrl,
+            '{PAYMENT_AMOUNT}' => format_money_pdf($this->amount, $this->customer->currency)
         ];
     }
 
diff --git a/package.json b/package.json
index c8da7a6dc..ac8a14402 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "vite": "^2.6.1"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.4.0",
+    "@headlessui/vue": "^1.5.0",
     "@heroicons/vue": "^1.0.1",
     "@popperjs/core": "^2.9.2",
     "@stripe/stripe-js": "^1.21.2",
@@ -48,7 +48,8 @@
     "mini-svg-data-uri": "^1.3.3",
     "moment": "^2.29.1",
     "pinia": "^2.0.4",
-    "v-money3": "^3.13.5",
+    "v-calendar": "3.0.0-alpha.8",
+    "v-money3": "3.16.1",
     "v-tooltip": "^4.0.0-alpha.1",
     "vue": "^3.2.0-beta.5",
     "vue-flatpickr-component": "^9.0.3",
diff --git a/resources/scripts/admin/components/CopyInputField.vue b/resources/scripts/admin/components/CopyInputField.vue
index 851a0bc4e..66049440d 100644
--- a/resources/scripts/admin/components/CopyInputField.vue
+++ b/resources/scripts/admin/components/CopyInputField.vue
@@ -7,6 +7,7 @@
       py-2
       rounded-lg
       bg-opacity-40 bg-gray-300
+      dark:bg-gray-700 dark:border-gray-600
       whitespace-nowrap
       flex-col
       mt-1
@@ -19,6 +20,7 @@
         text-sm
         font-medium
         text-black
+        dark:text-white
         truncate
         select-all select-color
       "
diff --git a/resources/scripts/admin/components/SelectNotePopup.vue b/resources/scripts/admin/components/SelectNotePopup.vue
index 822a8e2c6..bcc81cca0 100644
--- a/resources/scripts/admin/components/SelectNotePopup.vue
+++ b/resources/scripts/admin/components/SelectNotePopup.vue
@@ -43,6 +43,12 @@
             max-w-full
             left-0
             top-3
+            bg-white
+            dark:border
+            dark:border-white/10
+            dark:text-white
+            dark:bg-gray-800
+            dark:shadow-glass
           "
         >
           <div
@@ -53,7 +59,7 @@
               ring-1 ring-black ring-opacity-5
             "
           >
-            <div class="relative grid bg-white">
+            <div class="relative grid bg-white dark:bg-gray-800">
               <div class="relative p-4">
                 <BaseInput
                   v-model="textSearch"
@@ -66,7 +72,7 @@
 
               <div
                 v-if="filteredNotes.length > 0"
-                class="relative flex flex-col overflow-auto list max-h-36"
+                class="relative flex flex-col overflow-auto list max-h-36 dark:border-white/10"
               >
                 <div
                   v-for="(note, index) in filteredNotes"
@@ -79,6 +85,8 @@
                     cursor-pointer
                     hover:bg-gray-100 hover:cursor-pointer
                     last:border-b-0
+                    dark:border-gray-600
+                    dark:border-white/10 dark:hover:bg-gray-700/30
                   "
                   @click="selectNote(index, close)"
                 >
@@ -91,6 +99,7 @@
                         leading-tight
                         text-gray-700
                         cursor-pointer
+                        dark:text-gray-400
                       "
                     >
                       {{ note.name }}
@@ -118,6 +127,10 @@
                 bg-gray-200
                 border-none
                 outline-none
+                dark:bg-gray-600/70
+                dark:backdrop-blur-xl
+                dark:shadow-glass
+                dark:hover:bg-gray-600/80
               "
               @click="openNoteModal"
             >
diff --git a/resources/scripts/admin/components/charts/LineChart.vue b/resources/scripts/admin/components/charts/LineChart.vue
index f12c4d672..c56a6c053 100644
--- a/resources/scripts/admin/components/charts/LineChart.vue
+++ b/resources/scripts/admin/components/charts/LineChart.vue
@@ -6,8 +6,17 @@
 
 <script setup>
 import Chart from 'chart.js'
-import { ref, reactive, computed, onMounted, watchEffect, inject } from 'vue'
+import {
+  ref,
+  reactive,
+  computed,
+  onMounted,
+  watchEffect,
+  inject,
+  watch,
+} from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import { useGlobalStore } from '@/scripts/admin/stores/global'
 
 const utils = inject('utils')
 
@@ -44,9 +53,11 @@ const props = defineProps({
   },
 })
 
+const isDarkModeOn = document.documentElement.classList.contains('dark')
 let myLineChart = null
 const graph = ref(null)
 const companyStore = useCompanyStore()
+const globalStore = useGlobalStore()
 const defaultCurrency = computed(() => {
   return companyStore.selectedCompanyCurrency
 })
@@ -60,6 +71,14 @@ watchEffect(() => {
   }
 })
 
+watch(
+  () => globalStore.isDarkModeOn,
+  () => {
+    myLineChart.reset()
+    updateColors()
+  }
+)
+
 onMounted(() => {
   let context = graph.value.getContext('2d')
   let options = reactive({
@@ -81,6 +100,8 @@ onMounted(() => {
     },
   })
 
+  const salesColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
+
   let data = reactive({
     labels: props.labels,
     datasets: [
@@ -89,16 +110,16 @@ onMounted(() => {
         fill: false,
         lineTension: 0.3,
         backgroundColor: 'rgba(230, 254, 249)',
-        borderColor: '#040405',
+        borderColor: salesColor,
         borderCapStyle: 'butt',
         borderDash: [],
         borderDashOffset: 0.0,
         borderJoinStyle: 'miter',
-        pointBorderColor: '#040405',
+        pointBorderColor: salesColor,
         pointBackgroundColor: '#fff',
         pointBorderWidth: 1,
         pointHoverRadius: 5,
-        pointHoverBackgroundColor: '#040405',
+        pointHoverBackgroundColor: salesColor,
         pointHoverBorderColor: 'rgba(220,220,220,1)',
         pointHoverBorderWidth: 2,
         pointRadius: 4,
@@ -194,4 +215,12 @@ function update() {
     lazy: true,
   })
 }
+
+function updateColors() {
+  const newColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
+
+  myLineChart.data.datasets[0].borderColor = newColor
+  myLineChart.data.datasets[0].pointBorderColor = newColor
+  myLineChart.data.datasets[0].pointHoverBackgroundColor = newColor
+}
 </script>
diff --git a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue b/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
index b30fa82c6..944abc7ae 100644
--- a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
+++ b/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
@@ -50,21 +50,11 @@
           </BaseInputGroup>
         </template>
       </ValidateEach>
-      <div
-        slot="footer"
-        class="
-          z-0
-          flex
-          justify-end
-          mt-4
-          pt-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton :loading="isSaving" variant="primary" type="submit">
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseCard>
 </template>
diff --git a/resources/scripts/admin/components/custom-fields/CreateCustomFields.vue b/resources/scripts/admin/components/custom-fields/CreateCustomFields.vue
index 70c9f059b..e319c81c5 100644
--- a/resources/scripts/admin/components/custom-fields/CreateCustomFields.vue
+++ b/resources/scripts/admin/components/custom-fields/CreateCustomFields.vue
@@ -64,7 +64,7 @@ function mergeExistingValues() {
   if (props.isEdit) {
     props.store[props.storeProp].fields.forEach((field) => {
       const existingIndex = props.store[props.storeProp].customFields.findIndex(
-        (f) => f.id === field.custom_field_id
+        (f) => f.id == field.custom_field_id
       )
 
       if (existingIndex > -1) {
diff --git a/resources/scripts/admin/components/custom-fields/types/DateTimeType.vue b/resources/scripts/admin/components/custom-fields/types/DateTimeType.vue
index f29a01ab1..cf672c9c0 100644
--- a/resources/scripts/admin/components/custom-fields/types/DateTimeType.vue
+++ b/resources/scripts/admin/components/custom-fields/types/DateTimeType.vue
@@ -9,7 +9,7 @@ import { computed } from 'vue'
 const props = defineProps({
   modelValue: {
     type: String,
-    default: moment().format('YYYY-MM-DD hh:MM'),
+    default: moment().format('YYYY-MM-DD HH:mm'),
   },
 })
 
diff --git a/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
index 964de2d6a..38814f572 100644
--- a/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
@@ -7,11 +7,12 @@
     <!-- edit customField  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.EDIT_CUSTOM_FIELDS)"
+      v-slot="slotProps"
       @click="editCustomField(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -19,11 +20,12 @@
     <!-- delete customField  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_CUSTOM_FIELDS)"
+      v-slot="slotProps"
       @click="removeCustomField(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
index cdc57333b..b557c5dcf 100644
--- a/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
@@ -12,10 +12,10 @@
       v-if="userStore.hasAbilities(abilities.EDIT_CUSTOMER)"
       :to="`/admin/customers/${row.id}/edit`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -29,10 +29,10 @@
       "
       :to="`customers/${row.id}/view`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -41,11 +41,12 @@
     <!-- Delete Customer  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_CUSTOMER)"
+      v-slot="slotProps"
       @click="removeCustomer(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
index 15bb3cebe..45df05e8b 100644
--- a/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
@@ -10,11 +10,12 @@
     <!-- Copy PDF url  -->
     <BaseDropdownItem
       v-if="route.name === 'estimates.view'"
+      v-slot="slotProps"
       @click="copyPdfUrl"
     >
       <BaseIcon
         name="LinkIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.copy_pdf_url') }}
     </BaseDropdownItem>
@@ -24,10 +25,10 @@
       v-if="userStore.hasAbilities(abilities.EDIT_ESTIMATE)"
       :to="`/admin/estimates/${row.id}/edit`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -36,11 +37,12 @@
     <!-- Delete Estimate  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_ESTIMATE)"
+      v-slot="slotProps"
       @click="removeEstimate(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
@@ -53,10 +55,10 @@
       "
       :to="`estimates/${row.id}/view`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -65,11 +67,12 @@
     <!-- Convert into Invoice  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
+      v-slot="slotProps"
       @click="convertInToinvoice(row.id)"
     >
       <BaseIcon
         name="DocumentTextIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('estimates.convert_to_invoice') }}
     </BaseDropdownItem>
@@ -81,11 +84,12 @@
         route.name !== 'estimates.view' &&
         userStore.hasAbilities(abilities.SEND_ESTIMATE)
       "
+      v-slot="slotProps"
       @click="onMarkAsSent(row.id)"
     >
       <BaseIcon
         name="CheckCircleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('estimates.mark_as_sent') }}
     </BaseDropdownItem>
@@ -97,20 +101,21 @@
         route.name !== 'estimates.view' &&
         userStore.hasAbilities(abilities.SEND_ESTIMATE)
       "
+      v-slot="slotProps"
       @click="sendEstimate(row)"
     >
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('estimates.send_estimate') }}
     </BaseDropdownItem>
 
     <!-- Resend Estimate -->
-    <BaseDropdownItem v-if="canResendEstimate(row)" @click="sendEstimate(row)">
+    <BaseDropdownItem v-if="canResendEstimate(row)" v-slot="slotProps"  @click="sendEstimate(row)">
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('estimates.resend_estimate') }}
     </BaseDropdownItem>
@@ -121,11 +126,12 @@
         row.status !== 'ACCEPTED' &&
         userStore.hasAbilities(abilities.EDIT_ESTIMATE)
       "
+      v-slot="slotProps"
       @click="onMarkAsAccepted(row.id)"
     >
       <BaseIcon
         name="CheckCircleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('estimates.mark_as_accepted') }}
     </BaseDropdownItem>
@@ -136,11 +142,12 @@
         row.status !== 'REJECTED' &&
         userStore.hasAbilities(abilities.EDIT_ESTIMATE)
       "
+      v-slot="slotProps"
       @click="onMarkAsRejected(row.id)"
     >
       <BaseIcon
         name="XCircleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('estimates.mark_as_rejected') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
index 3fd07d458..a1206eb86 100644
--- a/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
@@ -13,11 +13,12 @@
     <!-- edit expenseCategory  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.EDIT_EXPENSE)"
+      v-slot="slotProps"
       @click="editExpenseCategory(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -25,11 +26,12 @@
     <!-- delete expenseCategory  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
+      v-slot="slotProps"
       @click="removeExpenseCategory(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
index d979e2b53..76a368692 100644
--- a/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
@@ -12,10 +12,10 @@
       v-if="userStore.hasAbilities(abilities.EDIT_EXPENSE)"
       :to="`/admin/expenses/${row.id}/edit`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -24,11 +24,12 @@
     <!-- delete expense  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
+      v-slot="slotProps"
       @click="removeExpense(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
index 35d8d9052..234d07757 100755
--- a/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
@@ -12,20 +12,20 @@
       v-if="userStore.hasAbilities(abilities.EDIT_INVOICE)"
       :to="`/admin/invoices/${row.id}/edit`"
     >
-      <BaseDropdownItem v-show="row.allow_edit">
+      <BaseDropdownItem v-show="row.allow_edit" v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
     </router-link>
 
     <!-- Copy PDF url  -->
-    <BaseDropdownItem v-if="route.name === 'invoices.view'" @click="copyPdfUrl">
+    <BaseDropdownItem v-if="route.name === 'invoices.view'" v-slot="slotProps" @click="copyPdfUrl">
       <BaseIcon
         name="LinkIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.copy_pdf_url') }}
     </BaseDropdownItem>
@@ -38,29 +38,29 @@
       "
       :to="`/admin/invoices/${row.id}/view`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
     </router-link>
 
     <!-- Send Invoice Mail  -->
-    <BaseDropdownItem v-if="canSendInvoice(row)" @click="sendInvoice(row)">
+    <BaseDropdownItem v-if="canSendInvoice(row)" v-slot="slotProps" @click="sendInvoice(row)">
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('invoices.send_invoice') }}
     </BaseDropdownItem>
 
     <!-- Resend Invoice -->
-    <BaseDropdownItem v-if="canReSendInvoice(row)" @click="sendInvoice(row)">
+    <BaseDropdownItem v-if="canReSendInvoice(row)" v-slot="slotProps" @click="sendInvoice(row)">
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('invoices.resend_invoice') }}
     </BaseDropdownItem>
@@ -69,20 +69,21 @@
     <router-link :to="`/admin/payments/${row.id}/create`">
       <BaseDropdownItem
         v-if="row.status == 'SENT' && route.name !== 'invoices.view'"
+        v-slot="slotProps"
       >
         <BaseIcon
           name="CreditCardIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('invoices.record_payment') }}
       </BaseDropdownItem>
     </router-link>
 
     <!-- Mark as sent Invoice -->
-    <BaseDropdownItem v-if="canSendInvoice(row)" @click="onMarkAsSent(row.id)">
+    <BaseDropdownItem v-if="canSendInvoice(row)" v-slot="slotProps" @click="onMarkAsSent(row.id)">
       <BaseIcon
         name="CheckCircleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('invoices.mark_as_sent') }}
     </BaseDropdownItem>
@@ -90,11 +91,12 @@
     <!-- Clone Invoice into new invoice  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
+      v-slot="slotProps"
       @click="cloneInvoiceData(row)"
     >
       <BaseIcon
         name="DocumentTextIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('invoices.clone_invoice') }}
     </BaseDropdownItem>
@@ -102,11 +104,12 @@
     <!--  Delete Invoice  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_INVOICE)"
+      v-slot="slotProps"
       @click="removeInvoice(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
index 5a51d172d..bd3679b69 100644
--- a/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
@@ -12,11 +12,8 @@
       v-if="userStore.hasAbilities(abilities.EDIT_ITEM)"
       :to="`/admin/items/${row.id}/edit`"
     >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
-        />
+      <BaseDropdownItem v-slot="slotProps">
+        <BaseIcon name="PencilIcon" :class="slotProps.class" />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
     </router-link>
@@ -24,12 +21,10 @@
     <!-- delete item  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_ITEM)"
+      v-slot="slotProps"
       @click="removeItem(row.id)"
     >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
-      />
+      <BaseIcon name="TrashIcon" :class="slotProps.class" />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
   </BaseDropdown>
diff --git a/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
index 569cfb08f..684c3ba0f 100644
--- a/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
@@ -10,11 +10,12 @@
     <!-- edit note  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.MANAGE_NOTE)"
+      v-slot="slotProps"
       @click="editNote(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -22,11 +23,12 @@
     <!-- delete note  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.MANAGE_NOTE)"
+      v-slot="slotProps"
       @click="removeNote(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
index f23df97bd..42b403430 100644
--- a/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
@@ -8,30 +8,31 @@
     </template>
 
     <!-- Copy pdf url  -->
-    <BaseDropdown-item
+    <BaseDropdownItem
       v-if="
         route.name === 'payments.view' &&
         userStore.hasAbilities(abilities.VIEW_PAYMENT)
       "
+      v-slot="slotProps"
       class="rounded-md"
       @click="copyPdfUrl"
     >
       <BaseIcon
         name="LinkIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.copy_pdf_url') }}
-    </BaseDropdown-item>
+    </BaseDropdownItem>
 
     <!-- edit payment  -->
     <router-link
       v-if="userStore.hasAbilities(abilities.EDIT_PAYMENT)"
       :to="`/admin/payments/${row.id}/edit`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -45,10 +46,10 @@
       "
       :to="`/admin/payments/${row.id}/view`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -61,11 +62,12 @@
         route.name !== 'payments.view' &&
         userStore.hasAbilities(abilities.SEND_PAYMENT)
       "
+      v-slot="slotProps"
       @click="sendPayment(row)"
     >
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('payments.send_payment') }}
     </BaseDropdownItem>
@@ -73,11 +75,12 @@
     <!-- delete payment  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_PAYMENT)"
+      v-slot="slotProps"
       @click="removePayment(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
index d4bf9187a..0a95fcc13 100644
--- a/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
@@ -8,19 +8,19 @@
     </template>
 
     <!-- edit paymentMode  -->
-    <BaseDropdownItem @click="editPaymentMode(row.id)">
+    <BaseDropdownItem v-slot="slotProps"  @click="editPaymentMode(row.id)">
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
 
     <!-- delete paymentMode  -->
-    <BaseDropdownItem @click="removePaymentMode(row.id)">
+    <BaseDropdownItem v-slot="slotProps"  @click="removePaymentMode(row.id)">
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
index adaafb9d9..72b3eec4e 100644
--- a/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
@@ -15,10 +15,10 @@
       v-if="userStore.hasAbilities(abilities.EDIT_RECURRING_INVOICE)"
       :to="`/admin/recurring-invoices/${row.id}/edit`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -32,10 +32,10 @@
       "
       :to="`recurring-invoices/${row.id}/view`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -44,11 +44,12 @@
     <!-- Delete Recurring Invoice  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_RECURRING_INVOICE)"
+      v-slot="slotProps"
       @click="removeMultipleRecurringInvoices(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
index 606c503c0..86028f0f0 100644
--- a/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
@@ -10,11 +10,12 @@
     <!-- edit role  -->
     <BaseDropdownItem
       v-if="userStore.currentUser.is_owner"
+      v-slot="slotProps"
       @click="editRole(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -22,11 +23,12 @@
     <!-- delete role  -->
     <BaseDropdownItem
       v-if="userStore.currentUser.is_owner"
+      v-slot="slotProps"
       @click="removeRole(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
index 73897a232..a5e88e5e7 100644
--- a/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
@@ -10,11 +10,12 @@
     <!-- edit tax-type  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.EDIT_TAX_TYPE)"
+      v-slot="slotProps"
       @click="editTaxType(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -22,11 +23,12 @@
     <!-- delete tax-type  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_TAX_TYPE)"
+      v-slot="slotProps"
       @click="removeTaxType(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue
index 494d0bd74..1c789d6e9 100644
--- a/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue
@@ -9,20 +9,20 @@
 
     <!-- edit user  -->
     <router-link :to="`/admin/users/${row.id}/edit`">
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
     </router-link>
 
     <!-- delete user  -->
-    <BaseDropdownItem @click="removeUser(row.id)">
+    <BaseDropdownItem v-slot="slotProps" @click="removeUser(row.id)">
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
index 8af4293f4..b425d7a11 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
@@ -1,5 +1,13 @@
 <template>
-  <tr class="box-border bg-white border border-gray-200 border-solid rounded-b">
+  <tr
+    class="
+      box-border
+      bg-white
+      border border-gray-200 border-solid
+      rounded-b
+      dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
+      "
+    >
     <td colspan="5" class="p-0 text-left align-top">
       <table class="w-full">
         <colgroup>
@@ -130,7 +138,7 @@
                 <div class="flex items-center justify-center w-6 h-10 mx-2">
                   <BaseIcon
                     v-if="showRemoveButton"
-                    class="h-5 text-gray-700 cursor-pointer"
+                    class="h-5 dark:text-red-400 cursor-pointer"
                     name="TrashIcon"
                     @click="store.removeItem(index)"
                   />
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
index cf3b12946..42674389e 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
@@ -30,7 +30,22 @@
         <template v-if="userStore.hasAbilities(ability)" #action>
           <button
             type="button"
-            class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-none cursor-pointer "
+            class="
+              flex
+              items-center
+              justify-center
+              w-full
+              px-2
+              py-2
+              bg-gray-200
+              border-none
+              outline-none
+              cursor-pointer
+              dark:bg-gray-600/70
+              dark:backdrop-blur-xl
+              dark:shadow-glass
+              dark:hover:bg-gray-600/80
+            "
             @click="openTaxModal"
           >
             <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
@@ -53,7 +68,7 @@
       <BaseIcon
         v-if="taxes.length && index !== taxes.length - 1"
         name="TrashIcon"
-        class="h-5 text-gray-700 cursor-pointer"
+        class="h-5 text-gray-700 dark:text-red-400 cursor-pointer"
         @click="removeTax(index)"
       />
     </div>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
index f5042e90f..818fd793f 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
@@ -1,155 +1,172 @@
 <template>
-  <table class="text-center item-table min-w-full">
-    <colgroup>
-      <col style="width: 40%; min-width: 280px" />
-      <col style="width: 10%; min-width: 120px" />
-      <col style="width: 15%; min-width: 120px" />
-      <col
-        v-if="store[storeProp].discount_per_item === 'YES'"
-        style="width: 15%; min-width: 160px"
-      />
-      <col style="width: 15%; min-width: 120px" />
-    </colgroup>
-    <thead class="bg-white border border-gray-200 border-solid">
-      <tr>
-        <th
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-left text-gray-700
-            border-t border-b border-gray-200 border-solid
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else class="pl-7">
-            {{ $tc('items.item', 2) }}
-          </span>
-        </th>
-        <th
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-right text-gray-700
-            border-t border-b border-gray-200 border-solid
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.quantity') }}
-          </span>
-        </th>
-        <th
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-left text-gray-700
-            border-t border-b border-gray-200 border-solid
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.price') }}
-          </span>
-        </th>
-        <th
+  <div class="relative" >
+    <BaseDarkHighlight class="z-[-1]" />
+    <table class="text-center item-table min-w-full">
+      <colgroup>
+        <col style="width: 40%; min-width: 280px" />
+        <col style="width: 10%; min-width: 120px" />
+        <col style="width: 15%; min-width: 120px" />
+        <col
           v-if="store[storeProp].discount_per_item === 'YES'"
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-left text-gray-700
-            border-t border-b border-gray-200 border-solid
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.discount') }}
-          </span>
-        </th>
-        <th
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-right text-gray-700
-            border-t border-b border-gray-200 border-solid
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else class="pr-10 column-heading">
-            {{ $t('invoices.item.amount') }}
-          </span>
-        </th>
-      </tr>
-    </thead>
-    <draggable
-      v-model="store[storeProp].items"
-      item-key="id"
-      tag="tbody"
-      handle=".handle"
-    >
-      <template #item="{ element, index }">
-        <Item
-          :key="element.id"
-          :index="index"
-          :item-data="element"
-          :loading="isLoading"
-          :currency="defaultCurrency"
-          :item-validation-scope="itemValidationScope"
-          :invoice-items="store[storeProp].items"
-          :store="store"
-          :store-prop="storeProp"
+          style="width: 15%; min-width: 160px"
         />
-      </template>
-    </draggable>
-  </table>
+        <col style="width: 15%; min-width: 120px" />
+      </colgroup>
+      <thead
+        class="
+          bg-white
+          border
+          border-gray-200
+          border-solid
+          dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
+        "
+      >
+        <tr>
+          <th
+            class="
+              px-5
+              py-3
+              text-sm
+              not-italic
+              font-medium
+              leading-5
+              text-left text-gray-700
+              border-t border-b border-gray-200 border-solid
+              dark:text-white dark:border-white/10
+            "
+          >
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else class="pl-7">
+              {{ $tc('items.item', 2) }}
+            </span>
+          </th>
+          <th
+            class="
+              px-5
+              py-3
+              text-sm
+              not-italic
+              font-medium
+              leading-5
+              text-right text-gray-700
+              border-t border-b border-gray-200 border-solid
+              dark:text-white dark:border-white/10
+            "
+          >
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else>
+              {{ $t('invoices.item.quantity') }}
+            </span>
+          </th>
+          <th
+            class="
+              px-5
+              py-3
+              text-sm
+              not-italic
+              font-medium
+              leading-5
+              text-left text-gray-700
+              border-t border-b border-gray-200 border-solid
+              dark:text-white dark:border-white/10
+            "
+          >
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else>
+              {{ $t('invoices.item.price') }}
+            </span>
+          </th>
+          <th
+            v-if="store[storeProp].discount_per_item === 'YES'"
+            class="
+              px-5
+              py-3
+              text-sm
+              not-italic
+              font-medium
+              leading-5
+              text-left text-gray-700
+              border-t border-b border-gray-200 border-solid
+              dark:text-white dark:border-white/10
+            "
+          >
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else>
+              {{ $t('invoices.item.discount') }}
+            </span>
+          </th>
+          <th
+            class="
+              px-5
+              py-3
+              text-sm
+              not-italic
+              font-medium
+              leading-5
+              text-right text-gray-700
+              border-t border-b border-gray-200 border-solid
+              dark:text-white dark:border-white/10
+            "
+          >
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else class="pr-10 column-heading">
+              {{ $t('invoices.item.amount') }}
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <draggable
+        v-model="store[storeProp].items"
+        item-key="id"
+        tag="tbody"
+        handle=".handle"
+      >
+        <template #item="{ element, index }">
+          <Item
+            :key="element.id"
+            :index="index"
+            :item-data="element"
+            :loading="isLoading"
+            :currency="defaultCurrency"
+            :item-validation-scope="itemValidationScope"
+            :invoice-items="store[storeProp].items"
+            :store="store"
+            :store-prop="storeProp"
+          />
+        </template>
+      </draggable>
+    </table>
 
-  <div
-    class="
-      flex
-      items-center
-      justify-center
-      w-full
-      px-6
-      py-3
-      text-base
-      border border-t-0 border-gray-200 border-solid
-      cursor-pointer
-      text-primary-400
-      hover:bg-primary-100
-    "
-    @click="store.addItem"
-  >
-    <BaseIcon name="PlusCircleIcon" class="mr-2" />
-    {{ $t('general.add_new_item') }}
+    <div
+      class="
+        flex
+        items-center
+        justify-center
+        w-full
+        px-6
+        py-3
+        text-base
+        border border-t-0 border-gray-200 border-solid
+        cursor-pointer
+        text-primary-400
+        hover:bg-primary-100
+        dark:bg-gray-900/50 dark:border-white/10 dark:hover:bg-gray-900/80
+      "
+      @click="store.addItem"
+    >
+      <BaseIcon name="PlusCircleIcon" class="mr-2" />
+      {{ $t('general.add_new_item') }}
+    </div>
   </div>
 </template>
 
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
index abdce0bf6..de9cc6852 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
@@ -5,7 +5,7 @@
     >
       <SelectNotePopup :type="type" @select="onSelectNote" />
     </div>
-    <label class="text-gray-800 font-medium mb-4 text-sm">
+    <label class="text-gray-800 font-medium mb-4 text-sm dark:text-gray-300">
       {{ $t('invoices.notes') }}
     </label>
     <BaseCustomInput
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
index a14c429ad..3bd7f1ba5 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
@@ -6,6 +6,7 @@
       mt-6
       bg-white
       border border-gray-200 border-solid
+      dark:bg-gray-800/50 dark:border-white/10
       rounded
       md:min-w-[390px]
       min-w-[300px]
@@ -29,7 +30,16 @@
 
       <label
         v-else
-        class="flex items-center justify-center m-0 text-lg text-black uppercase "
+        class="
+          flex
+          items-center
+          justify-center
+          m-0
+          text-lg
+          text-black
+          dark:text-white
+          uppercase
+        "
       >
         <BaseFormatMoney
           :amount="store.getSubTotal"
@@ -59,7 +69,16 @@
 
       <label
         v-else-if="store[storeProp].tax_per_item === 'YES'"
-        class="flex items-center justify-center m-0 text-lg text-black uppercase "
+        class="
+          flex
+          items-center
+          justify-center
+          m-0
+          text-lg
+          text-black
+          dark:text-white
+          uppercase
+        "
       >
         <BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
       </label>
@@ -166,14 +185,23 @@
     </div>
 
     <div
-      class="flex items-center justify-between w-full pt-2 mt-5 border-t border-gray-200 border-solid "
+      class="
+        flex
+        items-center
+        justify-between
+        w-full
+        pt-2
+        mt-5
+        border-t border-gray-200 border-solid
+        dark:border-gray-600
+      "
     >
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
       <label
         v-else
-        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase dark:text-gray-400"
         >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
       >
 
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
index fcb5e1a7c..ac7a53947 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
@@ -1,14 +1,23 @@
 <template>
   <div class="flex items-center justify-between w-full mt-2 text-sm">
-    <label class="font-semibold leading-5 text-gray-500 uppercase">
+    <label class="font-semibold leading-5 text-gray-500 uppercase dark:text-gray-300">
       {{ tax.name }} ({{ tax.percent }} %)
     </label>
-    <label class="flex items-center justify-center text-lg text-black">
+    <label
+      class="
+        flex
+        items-center
+        justify-center
+        text-lg
+        text-black
+        dark:text-white
+      "
+    >
       <BaseFormatMoney :amount="tax.amount" :currency="currency" />
 
       <BaseIcon
         name="TrashIcon"
-        class="h-5 ml-2 cursor-pointer"
+        class="h-5 ml-2 cursor-pointer dark:text-red-400"
         @click="$emit('remove', tax.id)"
       />
     </label>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue b/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
index af054a3db..cc2c655c0 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
@@ -44,7 +44,7 @@
             >
               <!-- Tax Search Input  -->
 
-              <div class="relative bg-white">
+              <div class="relative bg-white dark:bg-gray-800">
                 <div class="relative p-4">
                   <BaseInput
                     v-model="textSearch"
@@ -65,13 +65,14 @@
                     list
                     max-h-36
                     border-t border-gray-200
+                    dark:border-gray-600
                   "
                 >
                   <div
                     v-for="(taxType, index) in filteredTaxType"
                     :key="index"
                     :class="{
-                      'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none':
+                      'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none dark:bg-gray-900':
                         taxes.find((val) => {
                           return val.tax_type_id === taxType.id
                         }),
@@ -84,6 +85,7 @@
                       cursor-pointer
                       hover:bg-gray-100 hover:cursor-pointer
                       last:border-b-0
+                      dark:border-gray-600 dark:hover:bg-gray-700/20
                     "
                     @click="selectTaxType(taxType, close)"
                   >
@@ -96,6 +98,7 @@
                           leading-tight
                           text-gray-700
                           cursor-pointer
+                          dark:text-gray-300
                         "
                       >
                         {{ taxType.name }}
@@ -108,6 +111,7 @@
                           font-semibold
                           text-gray-700
                           cursor-pointer
+                          dark:text-gray-300
                         "
                       >
                         {{ taxType.percent }} %
@@ -138,6 +142,10 @@
                   bg-gray-200
                   border-none
                   outline-none
+                  dark:bg-gray-600/70
+                  dark:backdrop-blur-xl
+                  dark:shadow-glass
+                  dark:hover:bg-gray-600/80
                 "
                 @click="openTaxTypeModal"
               >
diff --git a/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue b/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
index c85f2916e..3be1905ee 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label class="flex text-gray-800 font-medium text-sm mb-2">
+    <label class="flex text-gray-800 font-medium text-sm mb-2 dark:text-gray-300">
       {{ $t('general.select_template') }}
       <span class="text-sm text-red-500"> *</span>
     </label>
diff --git a/resources/scripts/admin/components/modal-components/BackupModal.vue b/resources/scripts/admin/components/modal-components/BackupModal.vue
index 88e6fc044..eafd39ad8 100644
--- a/resources/scripts/admin/components/modal-components/BackupModal.vue
+++ b/resources/scripts/admin/components/modal-components/BackupModal.vue
@@ -57,9 +57,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -84,7 +82,7 @@
           </template>
           {{ $t('general.create') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/CategoryModal.vue b/resources/scripts/admin/components/modal-components/CategoryModal.vue
index 031280c3d..787e70420 100644
--- a/resources/scripts/admin/components/modal-components/CategoryModal.vue
+++ b/resources/scripts/admin/components/modal-components/CategoryModal.vue
@@ -47,15 +47,7 @@
         </BaseInputGrid>
       </div>
 
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           type="button"
           variant="primary-outline"
@@ -80,7 +72,7 @@
           </template>
           {{ categoryStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/CompanyModal.vue b/resources/scripts/admin/components/modal-components/CompanyModal.vue
index 019a065c8..dd1cfcabc 100644
--- a/resources/scripts/admin/components/modal-components/CompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/CompanyModal.vue
@@ -48,6 +48,24 @@
             />
           </BaseInputGroup>
 
+          <BaseInputGroup
+            :label="$tc('settings.company_info.company_slug')"
+            :help-text="$t('settings.company_info.company_slug_help_text')"
+            :error="
+              v$.newCompanyForm.slug.$error &&
+              v$.newCompanyForm.slug.$errors[0].$message
+            "
+            :content-loading="isFetchingInitialData"
+            required
+          >
+            <BaseInput
+              v-model="newCompanyForm.slug"
+              :invalid="v$.newCompanyForm.slug.$error"
+              :content-loading="isFetchingInitialData"
+              @input="v$.newCompanyForm.slug.$touch()"
+            />
+          </BaseInputGroup>
+
           <BaseInputGroup
             :content-loading="isFetchingInitialData"
             :label="$tc('settings.company_info.country')"
@@ -98,7 +116,7 @@
         </BaseInputGrid>
       </div>
 
-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
+       <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -123,14 +141,14 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
 
 <script setup>
 import { useModalStore } from '@/scripts/stores/modal'
-import { computed, onMounted, ref, reactive } from 'vue'
+import { computed, onMounted, ref, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { required, minLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
@@ -152,6 +170,7 @@ let companyLogoName = ref(null)
 
 const newCompanyForm = reactive({
   name: null,
+  slug: null,
   currency: '',
   address: {
     country_id: null,
@@ -162,6 +181,9 @@ const modalActive = computed(() => {
   return modalStore.active && modalStore.componentName === 'CompanyModal'
 })
 
+const slugValidator = (value) => {
+  return value == slugify(value)
+}
 const rules = {
   newCompanyForm: {
     name: {
@@ -171,6 +193,17 @@ const rules = {
         minLength(3)
       ),
     },
+    slug: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+      slugValidator: helpers.withMessage(
+        t('validation.invalid_slug'),
+        slugValidator
+      ),
+    },
     address: {
       country_id: {
         required: helpers.withMessage(t('validation.required'), required),
@@ -243,6 +276,7 @@ async function submitCompanyData() {
 
 function resetNewCompanyForm() {
   newCompanyForm.name = ''
+  newCompanyForm.slug = ''
   newCompanyForm.currency = ''
   newCompanyForm.address.country_id = ''
 
@@ -257,4 +291,24 @@ function closeCompanyModal() {
     v$.value.$reset()
   }, 300)
 }
+
+// watcher for if change company name then auto fill company slug value
+watch(
+  () => newCompanyForm.name,
+  (currentValue) => {
+    newCompanyForm.slug = slugify(currentValue)
+  }
+)
+
+function slugify(string) {
+  return string
+    .toString()
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '')
+    .replace(/\-\-+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '')
+}
 </script>
diff --git a/resources/scripts/admin/components/modal-components/CustomerModal.vue b/resources/scripts/admin/components/modal-components/CustomerModal.vue
index da158bfc6..0fbced9d8 100644
--- a/resources/scripts/admin/components/modal-components/CustomerModal.vue
+++ b/resources/scripts/admin/components/modal-components/CustomerModal.vue
@@ -122,7 +122,7 @@
           <BaseTab :title="$t('customers.portal_access')">
             <BaseInputGrid class="col-span-5 lg:col-span-4">
               <div class="md:col-span-2">
-                <p class="text-sm text-gray-500">
+                <p class="text-sm text-gray-500 dark:text-gray-300">
                   {{ $t('customers.portal_access_text') }}
                 </p>
 
@@ -425,9 +425,7 @@
         </BaseTabGroup>
       </div>
 
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           type="button"
@@ -447,7 +445,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue b/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
index 661c972bc..eec7395da 100644
--- a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
@@ -38,7 +38,7 @@
         </BaseInputGroup>
       </div>
 
-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -63,7 +63,7 @@
           </template>
           {{ $t('general.delete') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
index b466ca64a..df3ce46b7 100644
--- a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
+++ b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
@@ -150,9 +150,7 @@
           @Remove="removeUsedSelectedCurrencies"
         />
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -179,7 +177,7 @@
             exchangeRateStore.isEdit ? $t('general.update') : $t('general.save')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/FileDiskModal.vue b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
index 822742504..7ccb7cd3f 100644
--- a/resources/scripts/admin/components/modal-components/FileDiskModal.vue
+++ b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
@@ -20,15 +20,7 @@
         @submit="createNewDisk"
       >
         <template #default="slotProps">
-          <div
-            class="
-              z-0
-              flex
-              justify-end
-              p-4
-              border-t border-solid border-gray-light
-            "
-          >
+          <BaseModalFooter>
             <BaseButton
               class="mr-3 text-sm"
               variant="primary-outline"
@@ -52,7 +44,7 @@
 
               {{ $t('general.save') }}
             </BaseButton>
-          </div>
+          </BaseModalFooter>
         </template>
       </component>
     </div>
diff --git a/resources/scripts/admin/components/modal-components/ItemModal.vue b/resources/scripts/admin/components/modal-components/ItemModal.vue
index 5fd3f21d3..e2c186a33 100644
--- a/resources/scripts/admin/components/modal-components/ItemModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemModal.vue
@@ -89,9 +89,7 @@
             </BaseInputGroup>
           </BaseInputGrid>
         </div>
-        <div
-          class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-        >
+        <BaseModalFooter>
           <BaseButton
             class="mr-3"
             variant="primary-outline"
@@ -111,7 +109,7 @@
             </template>
             {{ itemStore.isEdit ? $t('general.update') : $t('general.save') }}
           </BaseButton>
-        </div>
+        </BaseModalFooter>
       </form>
     </div>
   </BaseModal>
diff --git a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
index b9584358c..e9738be0e 100644
--- a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
@@ -31,15 +31,7 @@
         </BaseInputGroup>
       </div>
 
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           type="button"
           variant="primary-outline"
@@ -66,7 +58,7 @@
             itemStore.isItemUnitEdit ? $t('general.update') : $t('general.save')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/MailTestModal.vue b/resources/scripts/admin/components/modal-components/MailTestModal.vue
index c71d04231..e2a00f7ef 100644
--- a/resources/scripts/admin/components/modal-components/MailTestModal.vue
+++ b/resources/scripts/admin/components/modal-components/MailTestModal.vue
@@ -62,9 +62,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+     <BaseModalFooter>
         <BaseButton
           variant="primary-outline"
           type="button"
@@ -84,7 +82,7 @@
           </template>
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/NoteModal.vue b/resources/scripts/admin/components/modal-components/NoteModal.vue
index aa5695aa3..baaade031 100644
--- a/resources/scripts/admin/components/modal-components/NoteModal.vue
+++ b/resources/scripts/admin/components/modal-components/NoteModal.vue
@@ -63,16 +63,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          px-4
-          py-4
-          border-t border-solid border-gray-light
-        "
-      >
+     <BaseModalFooter>
         <BaseButton
           class="mr-2"
           variant="primary-outline"
@@ -93,7 +84,7 @@
           </template>
           {{ noteStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
index 88c017d70..14739f392 100644
--- a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
+++ b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
@@ -29,9 +29,7 @@
         </BaseInputGroup>
       </div>
 
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           variant="primary-outline"
           class="mr-3"
@@ -56,7 +54,7 @@
               : $t('general.save')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/RolesModal.vue b/resources/scripts/admin/components/modal-components/RolesModal.vue
index 70ebd651f..81c02303e 100644
--- a/resources/scripts/admin/components/modal-components/RolesModal.vue
+++ b/resources/scripts/admin/components/modal-components/RolesModal.vue
@@ -40,6 +40,7 @@
             px-4
             md:px-8
             py-1.5
+            dark:text-gray-200
           "
         >
           {{ $tc('settings.roles.permission', 2) }}
@@ -72,7 +73,7 @@
         </div>
       </div>
 
-      <div class="border-t border-gray-200 py-3">
+      <div class="border-t border-gray-200 dark:border-gray-600 py-3">
         <div
           class="
             grid grid-cols-1
@@ -89,7 +90,7 @@
             :key="gIndex"
             class="flex flex-col space-y-1"
           >
-            <p class="text-sm text-gray-500 border-b border-gray-200 pb-1 mb-2">
+            <p class="text-sm text-gray-500 dark:text-gray-200 border-b dark:border-gray-600 pb-1 mb-2">
               {{ gIndex }}
             </p>
             <div
@@ -116,15 +117,7 @@
           </span>
         </div>
       </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border--200 border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -144,7 +137,7 @@
           </template>
           {{ !roleStore.isEdit ? $t('general.save') : $t('general.update') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
index b7280c3fc..77cf21f5e 100644
--- a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
@@ -70,7 +70,7 @@
       </div>
     </div>
 
-    <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
+    <BaseModalFooter>
       <BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
         {{ $t('general.cancel') }}
       </BaseButton>
@@ -80,7 +80,7 @@
         </template>
         {{ $t('general.choose') }}
       </BaseButton>
-    </div>
+    </BaseModalFooter>
   </BaseModal>
 </template>
 
diff --git a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
index 795cdfebb..9140b99d1 100644
--- a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
@@ -62,9 +62,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -85,7 +83,7 @@
           <BaseIcon v-if="!isLoading" name="PhotographIcon" class="h-5 mr-2" />
           {{ $t('general.preview') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
@@ -106,9 +104,7 @@
         ></iframe>
       </div>
 
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -127,7 +123,7 @@
           <BaseIcon v-if="!isLoading" name="PaperAirplaneIcon" class="mr-2" />
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </div>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
index 63e7e6af4..63856d2d9 100644
--- a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
@@ -65,9 +65,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -93,7 +91,7 @@
           </template>
           {{ $t('general.preview') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
@@ -114,9 +112,7 @@
           style="min-height: 500px"
         ></iframe>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -140,7 +136,7 @@
           />
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </div>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
index 6c786312b..41f26f21a 100644
--- a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
@@ -65,9 +65,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -93,7 +91,7 @@
           </template>
           {{ $t('general.preview') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
@@ -114,9 +112,7 @@
           style="min-height: 500px"
         ></iframe>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -140,7 +136,7 @@
           />
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </div>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
index e7c1d76a4..f09daaada 100644
--- a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
@@ -90,15 +90,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border--200 border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -122,7 +114,7 @@
           </template>
           {{ taxTypeStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
index 0afdd9949..f2dadfafd 100644
--- a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
@@ -87,9 +87,7 @@
         </BaseInputGrid>
       </div>
 
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           type="button"
@@ -109,7 +107,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
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 d1a1c78d3..6db7a14ae 100644
--- a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
+++ b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
@@ -172,15 +172,7 @@
         </div>
       </div>
 
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border-gray-light border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           type="button"
@@ -207,7 +199,7 @@
             !customFieldStore.isEdit ? $t('general.save') : $t('general.update')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
diff --git a/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue b/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
index 0dd83e4c5..232036415 100644
--- a/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
@@ -153,7 +153,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue b/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
index 75da1b9a0..063efb52e 100644
--- a/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
@@ -132,7 +132,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue b/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
index 7d539ff66..2f15cb70b 100644
--- a/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
@@ -63,7 +63,7 @@
         </div>
 
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/admin/components/modal-components/disks/S3Disk.vue b/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
index 082c8e94b..9bdbdd691 100644
--- a/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
@@ -134,7 +134,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/admin/layouts/LayoutInstallation.vue b/resources/scripts/admin/layouts/LayoutInstallation.vue
index 951367be8..d3a200251 100644
--- a/resources/scripts/admin/layouts/LayoutInstallation.vue
+++ b/resources/scripts/admin/layouts/LayoutInstallation.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="h-screen overflow-y-auto text-base">
+  <div class="h-screen overflow-y-auto text-base dark:bg-gray-800/80 dark:text-white">
     <NotificationRoot />
 
-    <div class="container mx-auto px-4">
+    <div class="container px-4 mx-auto">
       <router-view />
     </div>
   </div>
diff --git a/resources/scripts/admin/layouts/LayoutLogin.vue b/resources/scripts/admin/layouts/LayoutLogin.vue
index 915406498..956170b37 100644
--- a/resources/scripts/admin/layouts/LayoutLogin.vue
+++ b/resources/scripts/admin/layouts/LayoutLogin.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100">
+  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100 dark:bg-gray-900">
     <NotificationRoot />
 
     <div
diff --git a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
index d573a010c..1275c1a12 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
@@ -15,8 +15,17 @@
       bg-gradient-to-r
       from-primary-500
       to-primary-400
+      dark:from-gray-700/70 dark:to-gray-800/70
+      bg-primary-500
+      dark:bg-transparent
+      dark:backdrop-blur-xl
+      dark:shadow-glass
+      dark:border
+      dark:border-white/10
     "
   >
+    <BaseDarkHighlight />
+
     <router-link
       to="/admin/dashboard"
       class="
@@ -53,6 +62,7 @@
         cursor-pointer
         md:hidden md:ml-0
         hover:bg-gray-100
+        dark:bg-gray-800 dark:border-gray-500 dark:border
       "
       @click.prevent="onToggle"
     >
@@ -64,7 +74,7 @@
         v-if="hasCreateAbilities"
         class="relative hidden float-left m-0 md:block"
       >
-        <BaseDropdown width-class="w-48">
+        <BaseDropdown width-class="w-48" >
           <template #activator>
             <div
               class="
@@ -78,19 +88,21 @@
                 bg-white
                 rounded
                 md:h-9 md:w-9
+                dark:bg-gray-700 dark:border-gray-500 dark:border
               "
             >
-              <BaseIcon name="PlusIcon" class="w-5 h-5 text-gray-600" />
+              <BaseIcon name="PlusIcon" class="w-5 h-5 text-gray-600 dark:text-white" />
             </div>
           </template>
 
           <router-link to="/admin/invoices/create">
             <BaseDropdownItem
               v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
+              v-slot="slotProps"
             >
               <BaseIcon
                 name="DocumentTextIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                :class="slotProps.class"
                 aria-hidden="true"
               />
               {{ $t('invoices.new_invoice') }}
@@ -99,10 +111,11 @@
           <router-link to="/admin/estimates/create">
             <BaseDropdownItem
               v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
+              v-slot="slotProps"
             >
               <BaseIcon
                 name="DocumentIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                :class="slotProps.class"
                 aria-hidden="true"
               />
               {{ $t('estimates.new_estimate') }}
@@ -112,10 +125,11 @@
           <router-link to="/admin/customers/create">
             <BaseDropdownItem
               v-if="userStore.hasAbilities(abilities.CREATE_CUSTOMER)"
+              v-slot="slotProps"
             >
               <BaseIcon
                 name="UserIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                :class="slotProps.class"
                 aria-hidden="true"
               />
               {{ $t('customers.new_customer') }}
@@ -148,20 +162,20 @@
           </template>
 
           <router-link to="/admin/settings/account-settings">
-            <BaseDropdownItem>
+            <BaseDropdownItem v-slot="slotProps">
               <BaseIcon
                 name="CogIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                :class="slotProps.class"
                 aria-hidden="true"
               />
               {{ $t('navigation.settings') }}
             </BaseDropdownItem>
           </router-link>
 
-          <BaseDropdownItem @click="logout">
+          <BaseDropdownItem v-slot="slotProps" @click="logout">
             <BaseIcon
               name="LogoutIcon"
-              class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+              :class="slotProps.class"
               aria-hidden="true"
             />
             {{ $t('navigation.logout') }}
diff --git a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
index ee0f5b1d6..ad453fb4b 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
@@ -15,7 +15,9 @@
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
+        <DialogOverlay
+          class="fixed inset-0 bg-gray-600 bg-opacity-75 dark:bg-gray-900/90"
+        />
       </TransitionChild>
 
       <TransitionChild
@@ -27,7 +29,9 @@
         leave-from="translate-x-0"
         leave-to="-translate-x-full"
       >
-        <div class="relative flex flex-col flex-1 w-full max-w-xs bg-white">
+        <div
+          class="relative flex flex-col flex-1 w-full max-w-xs bg-white dark:bg-gray-800"
+        >
           <TransitionChild
             as="template"
             enter="ease-in-out duration-300"
@@ -40,18 +44,17 @@
             <div class="absolute top-0 right-0 pt-2 -mr-12">
               <button
                 class="
-                  flex
-                  items-center
-                  justify-center
-                  w-10
-                  h-10
-                  ml-1
-                  rounded-full
-                  focus:outline-none
-                  focus:ring-2
-                  focus:ring-inset
-                  focus:ring-white
-                "
+                flex
+                items-center
+                justify-center
+                w-10
+                h-10
+                ml-1
+                rounded-full
+                focus:outline-none
+                focus:ring-2
+                focus:ring-inset
+                focus:ring-white"
                 @click="globalStore.setSidebarVisibility(false)"
               >
                 <span class="sr-only">Close sidebar</span>
@@ -65,10 +68,8 @@
           </TransitionChild>
           <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
             <div class="flex items-center shrink-0 px-4 mb-10">
-              <MainLogo
-                class="block h-auto max-w-full w-36 text-primary-400"
-                alt="Crater Logo"
-              />
+              <img class="h-auto max-w-full w-36 hidden dark:block" :src="getDarkLogo"/>
+              <img class="h-auto max-w-full w-36 block dark:hidden" :src="getLightLogo"/>
             </div>
 
             <nav
@@ -82,8 +83,8 @@
                 :to="item.link"
                 :class="[
                   hasActiveUrl(item.link)
-                    ? 'text-primary-500 border-primary-500 bg-gray-100 '
-                    : 'text-black',
+                    ? 'text-primary-500 border-primary-500 bg-gray-100 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700  dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
+                    : 'text-black dark:text-gray-300',
                   'cursor-pointer px-0 pl-4 py-3 border-transparent flex items-center border-l-4 border-solid text-sm not-italic font-medium',
                 ]"
                 @click="globalStore.setSidebarVisibility(false)"
@@ -92,7 +93,7 @@
                   :name="item.icon"
                   :class="[
                     hasActiveUrl(item.link)
-                      ? 'text-primary-500 '
+                      ? 'text-primary-500 dark:text-primary-400'
                       : 'text-gray-400',
                     'mr-4 shrink-0 h-5 w-5',
                   ]"
@@ -100,6 +101,10 @@
                 />
                 {{ $t(item.title) }}
               </router-link>
+              <LightDarkSwitch
+                :show-label="false"
+                class="absolute right-6 top-6 !w-auto"
+              />
             </nav>
           </div>
         </div>
@@ -113,17 +118,16 @@
   <!-- DESKTOP MENU -->
   <div
     class="
-      hidden
-      w-56
-      h-screen
-      pb-32
-      overflow-y-auto
-      bg-white
-      border-r border-gray-200 border-solid
-      xl:w-64
-      md:fixed md:flex md:flex-col md:inset-y-0
-      pt-16
-    "
+    hidden
+    w-56
+    h-screen
+    bg-white
+    border-r border-gray-200 border-solid
+    xl:w-64
+    md:fixed md:flex md:flex-col md:inset-y-0
+    pt-16
+    dark:border-gray-800
+    dark:bg-gray-800/80"
   >
     <div
       v-for="menu in globalStore.menuGroups"
@@ -136,8 +140,8 @@
         :to="item.link"
         :class="[
           hasActiveUrl(item.link)
-            ? 'text-primary-500 border-primary-500 bg-gray-100 '
-            : 'text-black',
+            ? 'text-primary-500 border-primary-500 bg-gray-100 dark:border-primary-400 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700 dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
+            : 'text-black dark:hover:bg-transparent dark:hover:text-white dark:text-gray-300',
           'cursor-pointer px-0 pl-6 hover:bg-gray-50 py-3 group flex items-center border-l-4 border-solid border-transparent text-sm not-italic font-medium',
         ]"
       >
@@ -145,8 +149,8 @@
           :name="item.icon"
           :class="[
             hasActiveUrl(item.link)
-              ? 'text-primary-500 group-hover:text-primary-500 '
-              : 'text-gray-400 group-hover:text-black',
+              ? 'text-primary-500 dark:text-primary-400'
+              : 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
             'mr-4 shrink-0 h-5 w-5 ',
           ]"
         />
@@ -154,12 +158,14 @@
         {{ $t(item.title) }}
       </router-link>
     </div>
+    <LightDarkSwitch
+      class="absolute bottom-0 py-4 border-t border-gray-200 dark:border-gray-700"
+    />
   </div>
 </template>
 
 <script setup>
-import MainLogo from '@/scripts/components/icons/MainLogo.vue'
-
+import { computed } from 'vue'
 import {
   Dialog,
   DialogOverlay,
@@ -169,10 +175,14 @@ import {
 
 import { useRoute } from 'vue-router'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import LightDarkSwitch from '@/scripts/components/LightDarkSwitcher.vue'
 
 const route = useRoute()
 const globalStore = useGlobalStore()
 
+const getDarkLogo = computed(() => new URL('/img/logo-white.png', import.meta.url))
+const getLightLogo = computed(() => new URL('/img/crater-logo.png', import.meta.url))
+
 function hasActiveUrl(url) {
   return route.path.indexOf(url) > -1
 }
diff --git a/resources/scripts/admin/stores/company.js b/resources/scripts/admin/stores/company.js
index 1e10489b0..f5462ae0f 100644
--- a/resources/scripts/admin/stores/company.js
+++ b/resources/scripts/admin/stores/company.js
@@ -184,6 +184,20 @@ export const useCompanyStore = (useWindow = false) => {
       setDefaultCurrency(data) {
         this.defaultCurrency = data.currency
       },
+
+      checkCompanyHasCurrencyTransactions() {
+        return new Promise((resolve, reject) => {
+          axios
+            .get(`/api/v1/company/has-transactions`)
+            .then((response) => {
+              resolve(response)
+            })
+            .catch((err) => {
+              handleError(err)
+              reject(err)
+            })
+        })
+      },
     },
   })()
 }
diff --git a/resources/scripts/admin/stores/global.js b/resources/scripts/admin/stores/global.js
index 7e885962e..838b775d5 100644
--- a/resources/scripts/admin/stores/global.js
+++ b/resources/scripts/admin/stores/global.js
@@ -34,7 +34,7 @@ export const useGlobalStore = (useWindow = false) => {
       isAppLoaded: false,
       isSidebarOpen: false,
       areCurrenciesLoading: false,
-
+      isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark'),
       downloadReport: null,
     }),
 
@@ -70,8 +70,8 @@ export const useGlobalStore = (useWindow = false) => {
               moduleStore.apiToken = response.data.global_settings.api_token
               moduleStore.enableModules = response.data.modules
 
-                // company store
-                companyStore.companies = response.data.companies
+              // company store
+              companyStore.companies = response.data.companies
               companyStore.selectedCompany = response.data.current_company
               companyStore.setSelectedCompany(response.data.current_company)
               companyStore.selectedCompanySettings =
diff --git a/resources/scripts/admin/views/auth/ForgotPassword.vue b/resources/scripts/admin/views/auth/ForgotPassword.vue
index d5bfeca39..5a63d8a8f 100644
--- a/resources/scripts/admin/views/auth/ForgotPassword.vue
+++ b/resources/scripts/admin/views/auth/ForgotPassword.vue
@@ -32,7 +32,7 @@
     <div class="mt-4 mb-4 text-sm">
       <router-link
         to="/login"
-        class="text-sm text-primary-400 hover:text-gray-700"
+        class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
       >
         {{ $t('general.back_to_login') }}
       </router-link>
diff --git a/resources/scripts/admin/views/auth/Login.vue b/resources/scripts/admin/views/auth/Login.vue
index d3b9686f3..cf226c37e 100644
--- a/resources/scripts/admin/views/auth/Login.vue
+++ b/resources/scripts/admin/views/auth/Login.vue
@@ -49,7 +49,7 @@
       <div class="mb-4">
         <router-link
           to="forgot-password"
-          class="text-sm text-primary-400 hover:text-gray-700"
+          class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
         >
           {{ $t('login.forgot_password') }}
         </router-link>
diff --git a/resources/scripts/admin/views/customers/Create.vue b/resources/scripts/admin/views/customers/Create.vue
index a40a2a6b0..4dfa93ee5 100644
--- a/resources/scripts/admin/views/customers/Create.vue
+++ b/resources/scripts/admin/views/customers/Create.vue
@@ -171,7 +171,7 @@
 
           <BaseInputGrid class="col-span-5 lg:col-span-4">
             <div class="md:col-span-2">
-              <p class="text-sm text-gray-500">
+              <p class="text-sm text-gray-500 dark:text-gray-300">
                 {{ $t('customers.portal_access_text') }}
               </p>
 
diff --git a/resources/scripts/admin/views/customers/Index.vue b/resources/scripts/admin/views/customers/Index.vue
index 9c64d384c..9a70d7aee 100644
--- a/resources/scripts/admin/views/customers/Index.vue
+++ b/resources/scripts/admin/views/customers/Index.vue
@@ -113,7 +113,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleCustomers">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -154,7 +154,7 @@
               :text="row.data.name"
               :length="30"
               tag="span"
-              class="font-medium text-primary-500 flex flex-col"
+              class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
             />
             <BaseText
               :text="row.data.contact_name ? row.data.contact_name : ''"
diff --git a/resources/scripts/admin/views/customers/View.vue b/resources/scripts/admin/views/customers/View.vue
index 205ebf28d..2ebc79d54 100644
--- a/resources/scripts/admin/views/customers/View.vue
+++ b/resources/scripts/admin/views/customers/View.vue
@@ -34,8 +34,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
             :to="`/admin/estimates/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem class="">
-              <BaseIcon name="DocumentIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="DocumentIcon" :class="slotProps.class" />
               {{ $t('estimates.new_estimate') }}
             </BaseDropdownItem>
           </router-link>
@@ -44,8 +44,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
             :to="`/admin/invoices/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem>
-              <BaseIcon name="DocumentTextIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="DocumentTextIcon" :class="slotProps.class" />
               {{ $t('invoices.new_invoice') }}
             </BaseDropdownItem>
           </router-link>
@@ -54,8 +54,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_PAYMENT)"
             :to="`/admin/payments/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem>
-              <BaseIcon name="CreditCardIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="CreditCardIcon" :class="slotProps.class" />
               {{ $t('payments.new_payment') }}
             </BaseDropdownItem>
           </router-link>
@@ -64,8 +64,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_EXPENSE)"
             :to="`/admin/expenses/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem>
-              <BaseIcon name="CalculatorIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="CalculatorIcon" :class="slotProps.class" />
               {{ $t('expenses.new_expense') }}
             </BaseDropdownItem>
           </router-link>
diff --git a/resources/scripts/admin/views/customers/partials/CustomerInfo.vue b/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
index 128dcc822..6d113ac7d 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200">
+  <div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200 dark:border-gray-600">
     <!-- Basic Info -->
     <BaseHeading>
       {{ $t('customers.basic_info') }}
diff --git a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
index e76e5d5a9..b4f401376 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
@@ -13,6 +13,7 @@
       xl:ml-64
       w-88
       xl:block
+      dark:bg-gray-800
     "
   >
     <div
@@ -25,6 +26,7 @@
         pb-2
         border border-gray-200 border-solid
         height-full
+        dark:border-gray-600
       "
     >
       <BaseInput
@@ -59,6 +61,7 @@
               mb-2
               text-sm
               border-b border-gray-200 border-solid
+              dark:border-gray-600
             "
           >
             {{ $t('general.sort_by') }}
@@ -114,6 +117,7 @@
         border-l border-gray-200 border-solid
         sidebar
         base-scroll
+        dark:border-gray-600
       "
     >
       <div v-for="(customer, index) in customerList" :key="index">
@@ -122,9 +126,9 @@
           :id="'customer-' + customer.id"
           :to="`/admin/customers/${customer.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:border-primary-400 dark:bg-gray-700':
                 hasActiveUrl(customer.id),
             },
           ]"
@@ -143,6 +147,7 @@
                 text-black
                 capitalize
                 truncate
+                dark:text-white
               "
             />
 
@@ -157,6 +162,7 @@
                 font-medium
                 leading-5
                 text-gray-600
+                dark:text-gray-400
               "
             />
           </div>
@@ -175,7 +181,7 @@
       </div>
       <p
         v-if="!customerList?.length && !isFetching"
-        class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+        class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
       >
         {{ $t('customers.no_matching_customers') }}
       </p>
diff --git a/resources/scripts/admin/views/dashboard/DashboardChart.vue b/resources/scripts/admin/views/dashboard/DashboardChart.vue
index cb7e0c074..e4d38f616 100644
--- a/resources/scripts/admin/views/dashboard/DashboardChart.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardChart.vue
@@ -2,8 +2,23 @@
   <div>
     <div
       v-if="dashboardStore.isDashboardDataLoaded"
-      class="grid grid-cols-10 mt-8 bg-white rounded shadow"
+      class="
+        grid
+        grid-cols-10
+        mt-8
+        bg-white
+        rounded shadow
+        dark:text-white
+        dark:backdrop-blur-xl
+        dark:shadow-glass
+        dark:border
+        dark:bg-opacity-70
+        dark:border-white/10
+        dark:bg-gray-800
+        relative
+      "
     >
+      <BaseDarkHighlight />
       <!-- Chart -->
       <div
         class="
@@ -54,6 +69,7 @@
           lg:border-t-0 lg:text-right lg:col-span-3
           xl:col-span-2
           lg:grid-cols-1
+          dark:border-white/10
         "
       >
         <div class="p-6">
@@ -96,15 +112,7 @@
           </span>
           <br />
           <span
-            class="
-              block
-              mt-1
-              text-xl
-              font-semibold
-              leading-8
-              lg:text-2xl
-              text-red-400
-            "
+            class="block mt-1 text-xl font-semibold leading-8 lg:text-2xl text-red-400"
           >
             <BaseFormatMoney
               :amount="dashboardStore.totalExpenses"
@@ -116,8 +124,10 @@
           class="
             col-span-3
             p-6
-            border-t border-gray-200 border-solid
+            border-t
+            border-gray-200 border-solid
             lg:col-span-1
+            dark:border-white/10
           "
         >
           <span class="text-xs leading-5 lg:text-sm">
@@ -132,7 +142,7 @@
               font-semibold
               leading-8
               lg:text-2xl
-              text-primary-500
+              text-primary-500 dark:text-primary-400
             "
           >
             <BaseFormatMoney
diff --git a/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue b/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
index a537ecf18..d03ec76b2 100644
--- a/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseContentPlaceholders
-    class="grid grid-cols-10 mt-8 bg-white rounded shadow"
+    class="grid grid-cols-10 mt-8 bg-white rounded shadow dark:bg-gray-800"
   >
     <!-- Chart -->
     <div
@@ -29,6 +29,7 @@
         text-center
         border-t border-l border-gray-200 border-solid
         lg:border-t-0 lg:text-right lg:col-span-3
+        dark:border-gray-600
         xl:col-span-2
         lg:grid-cols-1
       "
@@ -77,6 +78,7 @@
           col-span-3
           p-6
           border-t border-gray-200 border-solid
+          dark:border-gray-600
           lg:justify-end lg:items-end lg:col-span-1
         "
       >
diff --git a/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue b/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
index 5a79bde6d..5e34bd7a3 100644
--- a/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
@@ -12,18 +12,24 @@
       hover:bg-gray-50
       xl:p-4
       lg:col-span-2
+      dark:backdrop-blur-xl
+      dark:shadow-glass
+      dark:border
+      dark:border-white/10
+      dark:bg-gray-800/70
     "
     :class="{ 'lg:!col-span-3': large }"
     :to="route"
   >
     <div>
-      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
+      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl dark:text-white">
         <slot />
       </span>
-      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
+      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg dark:text-gray-300">
         {{ label }}
       </span>
     </div>
+    <BaseDarkHighlight class="!bg-highlight/[.17] !top-5" />
     <div class="flex items-center">
       <component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
     </div>
diff --git a/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue b/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
index a114818da..d199a8941 100644
--- a/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseContentPlaceholders
     :rounded="true"
-    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
+    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4 dark:bg-gray-800"
   >
     <div>
       <BaseContentPlaceholdersText
diff --git a/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue b/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
index 90ad7a11a..b65cb4115 100644
--- a/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
@@ -12,6 +12,7 @@
       shadow
       lg:col-span-2
       xl:p-4
+      dark:bg-gray-800
     "
   >
     <div>
diff --git a/resources/scripts/admin/views/dashboard/DashboardTable.vue b/resources/scripts/admin/views/dashboard/DashboardTable.vue
index 0decb6a5c..86a4091d0 100644
--- a/resources/scripts/admin/views/dashboard/DashboardTable.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardTable.vue
@@ -28,7 +28,7 @@
           <template #cell-user="{ row }">
             <router-link
               :to="{ path: `invoices/${row.data.id}/view` }"
-              class="font-medium text-primary-500"
+              class="font-medium text-primary-500 dark:text-primary-400"
             >
               {{ row.data.customer.name }}
             </router-link>
@@ -78,7 +78,7 @@
           <template #cell-user="{ row }">
             <router-link
               :to="{ path: `estimates/${row.data.id}/view` }"
-              class="font-medium text-primary-500"
+              class="font-medium text-primary-500 dark:text-primary-400"
             >
               {{ row.data.customer.name }}
             </router-link>
diff --git a/resources/scripts/admin/views/estimates/Index.vue b/resources/scripts/admin/views/estimates/Index.vue
index 73be69b24..82780800a 100644
--- a/resources/scripts/admin/views/estimates/Index.vue
+++ b/resources/scripts/admin/views/estimates/Index.vue
@@ -130,6 +130,7 @@
           mt-5
           list-none
           border-b-2 border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <!-- Tabs -->
@@ -163,7 +164,7 @@
           </template>
 
           <BaseDropdownItem @click="removeMultipleEstimates">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -204,7 +205,7 @@
         <template #cell-estimate_number="{ row }">
           <router-link
             :to="{ path: `estimates/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.estimate_number }}
           </router-link>
diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
index a4d0f7996..af788df7f 100644
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/resources/scripts/admin/views/estimates/View.vue
@@ -50,6 +50,7 @@
         xl:ml-64
         w-88
         xl:block
+        dark:bg-gray-800
       "
     >
       <div
@@ -62,6 +63,7 @@
           pb-2
           border border-gray-200 border-solid
           height-full
+          dark:border-gray-600
         "
       >
         <div class="mb-6">
@@ -96,9 +98,10 @@
                 px-4
                 py-1
                 pb-2
-                mb-1 mb-2
+                mb-2
                 text-sm
                 border-b border-gray-200 border-solid
+                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -161,6 +164,7 @@
           overflow-y-scroll
           border-l border-gray-200 border-solid
           base-scroll
+          dark:border-gray-600
         "
       >
         <div v-for="(estimate, index) in estimateList" :key="index">
@@ -169,9 +173,9 @@
             :id="'estimate-' + estimate.id"
             :to="`/admin/estimates/${estimate.id}/view`"
             :class="[
-              'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
+              'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent dark:hover:bg-gray-700',
               {
-                'bg-gray-100 border-l-4 border-primary-500 border-solid':
+                'bg-gray-100 border-l-4 border-primary-500 border-solid dark:border-primary-400 dark:bg-gray-700':
                   hasActiveUrl(estimate.id),
               },
             ]"
@@ -191,6 +195,7 @@
                   text-black
                   capitalize
                   truncate
+                  dark:text-white
                 "
               />
 
@@ -203,6 +208,7 @@
                   font-medium
                   leading-5
                   text-gray-600
+                  dark:text-gray-400
                 "
               >
                 {{ estimate.estimate_number }}
@@ -228,6 +234,7 @@
                   font-semibold
                   leading-8
                   text-right text-gray-900
+                  dark:text-white
                 "
               />
 
@@ -239,6 +246,7 @@
                   leading-5
                   text-right text-gray-600
                   est-date
+                  dark:text-gray-400
                 "
               >
                 {{ estimate.formatted_estimate_date }}
@@ -251,7 +259,7 @@
         </div>
         <p
           v-if="!estimateList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
         >
           {{ $t('estimates.no_matching_estimates') }}
         </p>
diff --git a/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue b/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue
index 40485425c..663e7b7d8 100644
--- a/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue
+++ b/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue
@@ -32,6 +32,8 @@
           :content-loading="isLoading"
           :calendar-button="true"
           calendar-button-icon="calendar"
+          :show-extra-options="true"
+          :source-date="estimateStore.newEstimate.estimate_date"
         />
       </BaseInputGroup>
 
diff --git a/resources/scripts/admin/views/expenses/Index.vue b/resources/scripts/admin/views/expenses/Index.vue
index 3219b2493..2610e7b80 100644
--- a/resources/scripts/admin/views/expenses/Index.vue
+++ b/resources/scripts/admin/views/expenses/Index.vue
@@ -135,7 +135,7 @@
             v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
             @click="removeMultipleExpenses"
           >
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -171,7 +171,7 @@
         <template #cell-name="{ row }">
           <router-link
             :to="{ path: `expenses/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.expense_category.name }}
           </router-link>
diff --git a/resources/scripts/admin/views/installation/Installation.vue b/resources/scripts/admin/views/installation/Installation.vue
index 31adf4172..0de9d8faa 100644
--- a/resources/scripts/admin/views/installation/Installation.vue
+++ b/resources/scripts/admin/views/installation/Installation.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="flex flex-col items-center justify-between w-full pt-10">
+    <LightDarkButton class="absolute z-10 top-2 right-2"/>
     <img
       id="logo-crater"
       src="/img/crater-logo.png"
@@ -29,6 +30,7 @@ import Step7CompanyInfo from './Step7CompanyInfo.vue'
 import Step8CompanyPreferences from './Step8CompanyPreferences.vue'
 import { useInstallationStore } from '@/scripts/admin/stores/installation'
 import { useRouter } from 'vue-router'
+import LightDarkButton from '@/scripts/components/LightDarkButton.vue'
 
 export default {
   components: {
@@ -40,6 +42,7 @@ export default {
     step_6: Step6AccountSettings,
     step_7: Step7CompanyInfo,
     step_8: Step8CompanyPreferences,
+    LightDarkButton
   },
 
   setup() {
diff --git a/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue b/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
index 7f8f644ab..830ae7aef 100644
--- a/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
+++ b/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
@@ -7,7 +7,7 @@
       <div class="mb-6">
         <div
           v-if="phpSupportInfo"
-          class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200  lg:gap-24 sm:gap-4"
+          class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 lg:gap-24 sm:gap-4 dark:border-white/10"
         >
           <div class="col-span-2 text-sm">
             {{
@@ -32,7 +32,7 @@
           <div
             v-for="(requirement, index) in requirements"
             :key="index"
-            class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200  lg:gap-24 sm:gap-4"
+            class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 dark:border-gray-600 lg:gap-24 sm:gap-4"
           >
             <div class="col-span-2 text-sm">
               {{ index }}
diff --git a/resources/scripts/admin/views/installation/Step2PermissionCheck.vue b/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
index f73303fba..f2d718d04 100644
--- a/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
+++ b/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
@@ -8,12 +8,7 @@
       <div
         v-for="(permission, index) in 3"
         :key="index"
-        class="
-          grid grid-flow-row grid-cols-3
-          lg:gap-24
-          sm:gap-4
-          border border-gray-200
-        "
+        class="grid grid-flow-row grid-cols-3 border border-gray-200 lg:gap-24 sm:gap-4 dark:border-gray-600"
       >
         <BaseContentPlaceholdersText :lines="1" class="col-span-4 p-3" />
       </div>
@@ -29,7 +24,7 @@
       <div
         v-for="(permission, index) in permissions"
         :key="index"
-        class="border border-gray-200"
+        class="border border-gray-200 dark:border-gray-600"
       >
         <div class="grid grid-flow-row grid-cols-3 lg:gap-24 sm:gap-4">
           <div class="col-span-2 p-3">
@@ -38,11 +33,11 @@
           <div class="p-3 text-right">
             <span
               v-if="permission.isSet"
-              class="inline-block w-4 h-4 ml-3 mr-2 rounded-full bg-green-500"
+              class="inline-block w-4 h-4 ml-3 mr-2 bg-green-500 rounded-full"
             />
             <span
               v-else
-              class="inline-block w-4 h-4 ml-3 mr-2 rounded-full bg-red-500"
+              class="inline-block w-4 h-4 ml-3 mr-2 bg-red-500 rounded-full"
             />
             <span>{{ permission.permission }}</span>
           </div>
diff --git a/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue b/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
index e4b938b64..df29d6ff6 100644
--- a/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
+++ b/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
@@ -2,7 +2,6 @@
   <BaseWizardStep
     :title="$t('wizard.database.database')"
     :description="$t('wizard.database.desc')"
-    step-container="w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded md:w-full"
   >
     <component
       :is="databaseData.database_connection"
diff --git a/resources/scripts/admin/views/installation/Step4VerifyDomain.vue b/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
index fd7084da5..346407f69 100644
--- a/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
+++ b/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
@@ -18,18 +18,18 @@
       </BaseInputGroup>
     </div>
 
-    <p class="mt-4 mb-0 text-sm text-gray-600">Notes:</p>
-    <ul class="w-full text-gray-600 list-disc list-inside">
+    <p class="mt-4 mb-0 text-sm text-gray-600 dark:text-white">Notes:</p>
+    <ul class="w-full text-gray-600 list-disc list-inside dark:text-gray-300">
       <li class="text-sm leading-8">
         App domain should not contain
-        <b class="inline-block px-1 bg-gray-100 rounded-sm">https://</b> or
-        <b class="inline-block px-1 bg-gray-100 rounded-sm">http</b> in front of
+        <b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">https://</b> or
+        <b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">http</b> in front of
         the domain.
       </li>
       <li class="text-sm leading-8">
         If you're accessing the website on a different port, please mention the
         port. For example:
-        <b class="inline-block px-1 bg-gray-100">localhost:8080</b>
+        <b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">localhost:8080</b>
       </li>
     </ul>
 
diff --git a/resources/scripts/admin/views/installation/Step6AccountSettings.vue b/resources/scripts/admin/views/installation/Step6AccountSettings.vue
index ad958d1d5..94c041f9e 100644
--- a/resources/scripts/admin/views/installation/Step6AccountSettings.vue
+++ b/resources/scripts/admin/views/installation/Step6AccountSettings.vue
@@ -68,13 +68,15 @@
             @input="v$.userForm.password.$touch()"
           >
             <template #right>
-              <EyeOffIcon
+              <BaseIcon
                 v-if="isShowPassword"
+                name="EyeOffIcon"
                 class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                 @click="isShowPassword = !isShowPassword"
               />
-              <EyeIcon
+              <BaseIcon
                 v-else
+                name="EyeIcon"
                 class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                 @click="isShowPassword = !isShowPassword"
               />
diff --git a/resources/scripts/admin/views/installation/Step7CompanyInfo.vue b/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
index 3890ccbda..c452488d6 100644
--- a/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
+++ b/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
@@ -2,7 +2,6 @@
   <BaseWizardStep
     :title="$t('wizard.company_info')"
     :description="$t('wizard.company_info_desc')"
-    step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
   >
     <form action="" @submit.prevent="next">
       <div class="grid grid-cols-1 mb-4 md:grid-cols-2 md:mb-6">
@@ -34,6 +33,24 @@
           />
         </BaseInputGroup>
 
+        <BaseInputGroup
+          :label="$tc('wizard.company_slug')"
+          :help-text="$t('wizard.company_slug_help_text')"
+          :error="
+            v$.companyForm.slug.$error &&
+            v$.companyForm.slug.$errors[0].$message
+          "
+          required
+        >
+          <BaseInput
+            v-model="companyForm.slug"
+            :invalid="v$.companyForm.slug.$error"
+            type="text"
+            name="slug"
+            @input="v$.companyForm.slug.$touch()"
+          />
+        </BaseInputGroup>
+
         <BaseInputGroup
           :label="$t('wizard.country')"
           :error="
@@ -57,9 +74,7 @@
             track-by="name"
           />
         </BaseInputGroup>
-      </div>
 
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
         <BaseInputGroup :label="$t('wizard.state')">
           <BaseInput
             v-model="companyForm.address.state"
@@ -144,9 +159,9 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, reactive } from 'vue'
+import { ref, computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { required, maxLength, helpers } from '@vuelidate/validators'
+import { required, minLength, maxLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
@@ -162,6 +177,7 @@ let logoFileName = ref(null)
 
 const companyForm = reactive({
   name: null,
+  slug: null,
   address: {
     address_street_1: '',
     address_street_2: '',
@@ -188,10 +204,28 @@ onMounted(async () => {
   })?.id
 })
 
+const slugValidator = (value) => {
+  return value == slugify(value)
+}
 const rules = {
   companyForm: {
     name: {
       required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+    },
+    slug: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+      slugValidator: helpers.withMessage(
+        t('validation.invalid_slug'),
+        slugValidator
+      ),
     },
     address: {
       country_id: {
@@ -249,4 +283,24 @@ async function next() {
     emit('next', 7)
   }
 }
+
+// watcher for if change company name then auto fill company slug value
+watch(
+  () => companyForm.name,
+  (currentValue) => {
+    companyForm.slug = slugify(currentValue)
+  }
+)
+
+function slugify(string) {
+  return string
+    .toString()
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '')
+    .replace(/\-\-+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '')
+}
 </script>
diff --git a/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue b/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
index ad40e60ec..180100145 100644
--- a/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
+++ b/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
@@ -2,7 +2,6 @@
   <BaseWizardStep
     :title="$t('wizard.preferences')"
     :description="$t('wizard.preferences_desc')"
-    step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
   >
     <form action="" @submit.prevent="next">
       <div>
diff --git a/resources/scripts/admin/views/invoices/Index.vue b/resources/scripts/admin/views/invoices/Index.vue
index c1b218749..bf76a9edb 100644
--- a/resources/scripts/admin/views/invoices/Index.vue
+++ b/resources/scripts/admin/views/invoices/Index.vue
@@ -56,7 +56,7 @@
         <BaseMultiselect
           v-model="filters.status"
           :groups="true"
-          :options="status"
+          :options="invoiceStatus"
           searchable
           :placeholder="$t('general.select_a_status')"
           @update:modelValue="setActiveTab"
@@ -127,14 +127,31 @@
           mt-5
           list-none
           border-b-2 border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <!-- Tabs -->
-        <BaseTabGroup class="-mb-5" @change="setStatusFilter">
-          <BaseTab :title="$t('general.all')" filter="" />
-          <BaseTab :title="$t('general.draft')" filter="DRAFT" />
-          <BaseTab :title="$t('general.sent')" filter="SENT" />
-          <BaseTab :title="$t('general.due')" filter="DUE" />
+        <BaseTabGroup
+          class="-mb-5"
+          :selected-index="selectedIndex"
+          @change="changeTabStatus"
+        >
+          <BaseTab
+            :title="invoiceTabStatus[0].title"
+            :tab-status="invoiceTabStatus[0].value"
+          />
+          <BaseTab
+            :title="invoiceTabStatus[1].title"
+            :tab-status="invoiceTabStatus[1].value"
+          />
+          <BaseTab
+            :title="invoiceTabStatus[2].title"
+            :tab-status="invoiceTabStatus[2].value"
+          />
+          <BaseTab
+            :title="invoiceTabStatus[3].title"
+            :tab-status="invoiceTabStatus[3].value"
+          />
         </BaseTabGroup>
 
         <BaseDropdown
@@ -161,7 +178,7 @@
           </template>
 
           <BaseDropdownItem @click="removeMultipleInvoices">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -203,7 +220,7 @@
         <template #cell-invoice_number="{ row }">
           <router-link
             :to="{ path: `invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.invoice_number }}
           </router-link>
@@ -289,10 +306,10 @@ const utils = inject('$utils')
 const table = ref(null)
 const showFilters = ref(false)
 
-const status = ref([
+const invoiceStatus = ref([
   {
     label: 'Status',
-    options: ['DRAFT', 'DUE', 'SENT', 'VIEWED', 'COMPLETED'],
+    options: ['DRAFT', 'SENT', 'VIEWED', 'COMPLETED'],
   },
   {
     label: 'Paid Status',
@@ -300,10 +317,29 @@ const status = ref([
   },
   ,
 ])
+
+const invoiceTabStatus = {
+  0: {
+    title: t('general.all'),
+    value: '',
+  },
+  1: {
+    title: t('general.draft'),
+    value: 'DRAFT',
+  },
+  2: {
+    title: t('general.sent'),
+    value: 'SENT',
+  },
+  3: {
+    title: t('general.due'),
+    value: 'DUE',
+  },
+}
 const isRequestOngoing = ref(true)
-const activeTab = ref('general.draft')
 const router = useRouter()
 const userStore = useUserStore()
+const selectedIndex = ref(0)
 
 let filters = reactive({
   customer_id: '',
@@ -311,6 +347,7 @@ let filters = reactive({
   from_date: '',
   to_date: '',
   invoice_number: '',
+  tab_status: '',
 })
 
 const showEmptyScreen = computed(
@@ -401,6 +438,7 @@ async function fetchData({ page, filter, sort }) {
     from_date: filters.from_date,
     to_date: filters.to_date,
     invoice_number: filters.invoice_number,
+    tab_status: filters.tab_status,
     orderByField: sort.fieldName || 'created_at',
     orderBy: sort.order || 'desc',
     page,
@@ -423,29 +461,9 @@ async function fetchData({ page, filter, sort }) {
   }
 }
 
-function setStatusFilter(val) {
-  if (activeTab.value == val.title) {
-    return true
-  }
-
-  activeTab.value = val.title
-
-  switch (val.title) {
-    case t('general.draft'):
-      filters.status = 'DRAFT'
-      break
-    case t('general.sent'):
-      filters.status = 'SENT'
-      break
-
-    case t('general.due'):
-      filters.status = 'DUE'
-      break
-
-    default:
-      filters.status = ''
-      break
-  }
+function changeTabStatus(val, index) {
+  filters.tab_status = val['tab-status']
+  selectedIndex.value = index
 }
 
 function setFilters() {
@@ -463,8 +481,6 @@ function clearFilter() {
   filters.from_date = ''
   filters.to_date = ''
   filters.invoice_number = ''
-
-  activeTab.value = t('general.all')
 }
 
 async function removeMultipleInvoices() {
@@ -505,39 +521,21 @@ function toggleFilter() {
 function setActiveTab(val) {
   switch (val) {
     case 'DRAFT':
-      activeTab.value = t('general.draft')
-      break
-    case 'SENT':
-      activeTab.value = t('general.sent')
-      break
-
-    case 'DUE':
-      activeTab.value = t('general.due')
+      selectedIndex.value = 1
       break
 
+    case 'SENT':
+    case 'VIEWED':
     case 'COMPLETED':
-      activeTab.value = t('invoices.completed')
-      break
-
     case 'PAID':
-      activeTab.value = t('invoices.paid')
+      selectedIndex.value = 2
       break
 
     case 'UNPAID':
-      activeTab.value = t('invoices.unpaid')
-      break
-
     case 'PARTIALLY_PAID':
-      activeTab.value = t('invoices.partially_paid')
-      break
-
-    case 'VIEWED':
-      activeTab.value = t('invoices.viewed')
-      break
-
-    default:
-      activeTab.value = t('general.all')
+      selectedIndex.value = 3
       break
   }
+  filters.tab_status = invoiceTabStatus[selectedIndex.value].value
 }
 </script>
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 6e2829343..c3f46d274 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -299,6 +299,7 @@ onSearched = debounce(onSearched, 500)
         xl:ml-64
         w-88
         xl:block
+        dark:bg-gray-800
       "
     >
       <div
@@ -311,6 +312,7 @@ onSearched = debounce(onSearched, 500)
           pb-2
           border border-gray-200 border-solid
           height-full
+          dark:border-gray-600
         "
       >
         <div class="mb-6">
@@ -339,9 +341,10 @@ onSearched = debounce(onSearched, 500)
                 px-2
                 py-1
                 pb-2
-                mb-1 mb-2
+                mb-2
                 text-sm
                 border-b border-gray-200 border-solid
+                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -404,6 +407,7 @@ onSearched = debounce(onSearched, 500)
           overflow-y-scroll
           border-l border-gray-200 border-solid
           base-scroll
+          dark:border-gray-600
         "
       >
         <div v-for="(invoice, index) in invoiceList" :key="index">
@@ -412,9 +416,9 @@ onSearched = debounce(onSearched, 500)
             :id="'invoice-' + invoice.id"
             :to="`/admin/invoices/${invoice.id}/view`"
             :class="[
-              'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
+              'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent dark:hover:bg-gray-700',
               {
-                'bg-gray-100 border-l-4 border-primary-500 border-solid':
+                'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
                   hasActiveUrl(invoice.id),
               },
             ]"
@@ -434,6 +438,7 @@ onSearched = debounce(onSearched, 500)
                   text-black
                   capitalize
                   truncate
+                  dark:text-white
                 "
               />
 
@@ -446,16 +451,17 @@ onSearched = debounce(onSearched, 500)
                   font-medium
                   leading-5
                   text-gray-600
+                  dark:text-gray-400
                 "
               >
                 {{ invoice.invoice_number }}
               </div>
-              <BaseEstimateStatusBadge
+              <BaseInvoiceStatusBadge
                 :status="invoice.status"
                 class="px-1 text-xs"
               >
                 {{ invoice.status }}
-              </BaseEstimateStatusBadge>
+              </BaseInvoiceStatusBadge>
             </div>
 
             <div class="flex-1 whitespace-nowrap right">
@@ -468,6 +474,7 @@ onSearched = debounce(onSearched, 500)
                   leading-8
                   text-right text-gray-900
                   block
+                  dark:text-white
                 "
                 :amount="invoice.total"
                 :currency="invoice.customer.currency"
@@ -480,6 +487,7 @@ onSearched = debounce(onSearched, 500)
                   leading-5
                   text-right text-gray-600
                   est-date
+                  dark:text-gray-400
                 "
               >
                 {{ invoice.formatted_invoice_date }}
@@ -492,7 +500,7 @@ onSearched = debounce(onSearched, 500)
         </div>
         <p
           v-if="!invoiceList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
         >
           {{ $t('invoices.no_matching_invoices') }}
         </p>
diff --git a/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue b/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue
index 9181b5734..ab01156d7 100644
--- a/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue
+++ b/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue
@@ -32,6 +32,8 @@
           :content-loading="isLoading"
           :calendar-button="true"
           calendar-button-icon="calendar"
+          :show-extra-options="true"
+          :source-date="invoiceStore.newInvoice.invoice_date"
         />
       </BaseInputGroup>
 
diff --git a/resources/scripts/admin/views/items/Index.vue b/resources/scripts/admin/views/items/Index.vue
index 1be6f8adc..af020b5dc 100644
--- a/resources/scripts/admin/views/items/Index.vue
+++ b/resources/scripts/admin/views/items/Index.vue
@@ -117,7 +117,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleItems">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -153,7 +153,7 @@
         <template #cell-name="{ row }">
           <router-link
             :to="{ path: `items/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.name }}
           </router-link>
diff --git a/resources/scripts/admin/views/modules/Index.vue b/resources/scripts/admin/views/modules/Index.vue
index 02c7fe753..4dbcab373 100644
--- a/resources/scripts/admin/views/modules/Index.vue
+++ b/resources/scripts/admin/views/modules/Index.vue
@@ -53,7 +53,7 @@
           </div>
         </div>
         <div v-else class="mt-24">
-          <label class="flex items-center justify-center text-gray-500">
+          <label class="flex items-center justify-center text-gray-500 dark:text-gray-300">
             {{ $t('modules.no_modules_installed') }}
           </label>
         </div>
@@ -61,10 +61,10 @@
     </div>
 
     <BaseCard v-else class="mt-6">
-      <h6 class="text-gray-900 text-lg font-medium">
+      <h6 class="text-gray-900 text-lg font-medium dark:text-white">
         {{ $t('modules.connect_installation') }}
       </h6>
-      <p class="mt-1 text-sm text-gray-500">
+      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
         {{
           $t('modules.api_token_description', {
             url: globalStore.config.base_url.replace(/^http:\/\//, ''),
diff --git a/resources/scripts/admin/views/payments/Create.vue b/resources/scripts/admin/views/payments/Create.vue
index 39888302e..1a6461d0a 100644
--- a/resources/scripts/admin/views/payments/Create.vue
+++ b/resources/scripts/admin/views/payments/Create.vue
@@ -82,9 +82,9 @@
             required
           >
             <BaseCustomerSelectInput
+              v-if="!isLoadingContent"
               v-model="paymentStore.currentPayment.customer_id"
               :content-loading="isLoadingContent"
-              v-if="!isLoadingContent"
               :invalid="v$.currentPayment.customer_id.$error"
               :placeholder="$t('customers.select_a_customer')"
               show-action
@@ -215,7 +215,7 @@
             <SelectNotePopup type="Payment" @select="onSelectNote" />
           </div>
 
-          <label class="mb-4 text-sm font-medium text-gray-800">
+          <label class="mb-4 text-sm font-medium text-gray-800 dark:text-gray-300">
             {{ $t('estimates.notes') }}
           </label>
 
@@ -423,7 +423,7 @@ function onCustomerChange(customer_id) {
   if (customer_id) {
     let data = {
       customer_id: customer_id,
-      status: 'DUE',
+      tab_status: 'DUE',
       limit: 'all',
     }
 
@@ -446,7 +446,11 @@ function onCustomerChange(customer_id) {
           paymentStore.currentPayment.selectedCustomer = res2.data.data
           paymentStore.currentPayment.customer = res2.data.data
           paymentStore.currentPayment.currency = res2.data.data.currency
-          if(isEdit.value && !customerStore.editCustomer && paymentStore.currentPayment.customer_id) {
+          if (
+            isEdit.value &&
+            !customerStore.editCustomer &&
+            paymentStore.currentPayment.customer_id
+          ) {
             customerStore.editCustomer = res2.data.data
           }
         }
diff --git a/resources/scripts/admin/views/payments/Index.vue b/resources/scripts/admin/views/payments/Index.vue
index c83a53af5..a0c441728 100644
--- a/resources/scripts/admin/views/payments/Index.vue
+++ b/resources/scripts/admin/views/payments/Index.vue
@@ -116,7 +116,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultiplePayments">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -158,7 +158,7 @@
         <template #cell-payment_number="{ row }">
           <router-link
             :to="{ path: `payments/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.payment_number }}
           </router-link>
diff --git a/resources/scripts/admin/views/payments/View.vue b/resources/scripts/admin/views/payments/View.vue
index 0b08827e3..53b60168e 100644
--- a/resources/scripts/admin/views/payments/View.vue
+++ b/resources/scripts/admin/views/payments/View.vue
@@ -35,6 +35,7 @@
         xl:ml-64
         w-88
         xl:block
+        dark:bg-gray-800
       "
     >
       <div
@@ -46,6 +47,7 @@
           pt-8
           pb-6
           border border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <BaseInput
@@ -77,6 +79,7 @@
                 mb-2
                 text-sm
                 border-b border-gray-200 border-solid
+                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -139,7 +142,7 @@
 
       <div
         ref="paymentListSection"
-        class="h-full overflow-y-scroll border-l border-gray-200 border-solid"
+        class="h-full overflow-y-scroll border-l border-gray-200 border-solid dark:border-gray-600"
       >
         <div v-for="(payment, index) in paymentList" :key="index">
           <router-link
@@ -147,9 +150,9 @@
             :id="'payment-' + payment.id"
             :to="`/admin/payments/${payment.id}/view`"
             :class="[
-              'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
+              'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
               {
-                'bg-gray-100 border-l-4 border-primary-500 border-solid':
+                'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
                   hasActiveUrl(payment.id),
               },
             ]"
@@ -169,6 +172,7 @@
                   text-black
                   capitalize
                   truncate
+                  dark:text-white
                 "
               />
 
@@ -181,6 +185,7 @@
                   leading-5
                   text-gray-500
                   capitalize
+                  dark:text-gray-400
                 "
               >
                 {{ payment?.payment_number }}
@@ -211,12 +216,13 @@
                   font-semibold
                   leading-8
                   text-right text-gray-900
+                  dark:text-white
                 "
                 :amount="payment?.amount"
                 :currency="payment.customer?.currency"
               />
 
-              <div class="text-sm text-right text-gray-500 non-italic">
+              <div class="text-sm text-right text-gray-500 non-italic dark:text-gray-400">
                 {{ payment.formatted_payment_date }}
               </div>
             </div>
@@ -227,7 +233,7 @@
         </div>
         <p
           v-if="!paymentList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
         >
           {{ $t('payments.no_matching_payments') }}
         </p>
diff --git a/resources/scripts/admin/views/recurring-invoices/Index.vue b/resources/scripts/admin/views/recurring-invoices/Index.vue
index 2977d1f70..f0436e5b4 100644
--- a/resources/scripts/admin/views/recurring-invoices/Index.vue
+++ b/resources/scripts/admin/views/recurring-invoices/Index.vue
@@ -121,6 +121,7 @@
           mt-5
           list-none
           border-b-2 border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <!-- Tabs -->
@@ -150,12 +151,12 @@
               "
             >
               {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" class="h-5" />
+              <BaseIcon name="ChevronDownIcon"/>
             </span>
           </template>
 
           <BaseDropdownItem @click="removeMultipleRecurringInvoices()">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -203,7 +204,7 @@
               :text="row.data.customer.name"
               :length="30"
               tag="span"
-              class="font-medium text-primary-500 flex flex-col"
+              class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
             />
 
             <BaseText
diff --git a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
index d0eb6a819..6da34f63f 100644
--- a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
+++ b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
@@ -16,11 +16,11 @@
       </div>
 
       <div class="ml-2">
-        <p class="p-0 mb-1 leading-snug text-left text-black">
+        <p class="p-0 mb-1 leading-snug text-left text-black dark:text-white">
           {{ $t('recurring_invoices.send_automatically') }}
         </p>
         <p
-          class="p-0 m-0 text-xs leading-tight text-left text-gray-500"
+          class="p-0 m-0 text-xs leading-tight text-left text-gray-500 dark:text-gray-400"
           style="max-width: 480px"
         >
           {{ $t('recurring_invoices.send_automatically_desc') }}
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
index 42445324c..d444fdfa8 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
@@ -152,6 +152,7 @@ onSearched = debounce(onSearched, 500)
       xl:ml-64
       w-88
       xl:block
+      dark:bg-gray-800
     "
   >
     <div
@@ -164,6 +165,7 @@ onSearched = debounce(onSearched, 500)
         pb-2
         border border-gray-200 border-solid
         height-full
+        dark:border-gray-600
       "
     >
       <div class="mb-6">
@@ -192,9 +194,10 @@ onSearched = debounce(onSearched, 500)
               px-2
               py-1
               pb-2
-              mb-1 mb-2
+              mb-2
               text-sm
               border-b border-gray-200 border-solid
+              dark:border-gray-600
             "
           >
             {{ $t('general.sort_by') }}
@@ -243,6 +246,7 @@ onSearched = debounce(onSearched, 500)
         overflow-y-scroll
         border-l border-gray-200 border-solid
         base-scroll
+        dark:border-gray-600
       "
     >
       <div v-for="(invoice, index) in invoiceList" :key="index">
@@ -251,9 +255,9 @@ onSearched = debounce(onSearched, 500)
           :id="'recurring-invoice-' + invoice.id"
           :to="`/admin/recurring-invoices/${invoice.id}/view`"
           :class="[
-            'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
+            'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent dark:hover:bg-gray-700',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
                 hasActiveUrl(invoice.id),
             },
           ]"
@@ -273,6 +277,7 @@ onSearched = debounce(onSearched, 500)
                 text-black
                 capitalize
                 truncate
+                dark:text-white
               "
             />
 
@@ -285,6 +290,7 @@ onSearched = debounce(onSearched, 500)
                 font-medium
                 leading-5
                 text-gray-600
+                dark:text-gray-400
               "
             >
               {{ invoice.invoice_number }}
@@ -307,6 +313,7 @@ onSearched = debounce(onSearched, 500)
                 font-semibold
                 leading-8
                 text-right text-gray-900
+                dark:text-white
               "
               :amount="invoice.total"
               :currency="invoice.customer.currency"
@@ -320,6 +327,7 @@ onSearched = debounce(onSearched, 500)
                 leading-5
                 text-right text-gray-600
                 est-date
+                dark:text-gray-400
               "
             >
               {{ invoice.formatted_starts_at }}
@@ -332,7 +340,7 @@ onSearched = debounce(onSearched, 500)
       </div>
       <p
         v-if="!invoiceList?.length && !isLoading"
-        class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+        class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
       >
         {{ $t('invoices.no_matching_invoices') }}
       </p>
diff --git a/resources/scripts/admin/views/settings/BackupSetting.vue b/resources/scripts/admin/views/settings/BackupSetting.vue
index f62e348b5..f0a60d013 100644
--- a/resources/scripts/admin/views/settings/BackupSetting.vue
+++ b/resources/scripts/admin/views/settings/BackupSetting.vue
@@ -51,14 +51,14 @@
             </div>
           </template>
 
-          <BaseDropdownItem @click="onDownloadBckup(row.data)">
-            <BaseIcon name="CloudDownloadIcon" class="mr-3 text-gray-600" />
+          <BaseDropdownItem v-slot="slotProps" @click="onDownloadBckup(row.data)">
+            <BaseIcon name="CloudDownloadIcon" :class="slotProps.class" />
 
             {{ $t('general.download') }}
           </BaseDropdownItem>
 
-          <BaseDropdownItem @click="onRemoveBackup(row.data)">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+          <BaseDropdownItem v-slot="slotProps" @click="onRemoveBackup(row.data)">
+            <BaseIcon name="TrashIcon" :class="slotProps.class" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
diff --git a/resources/scripts/admin/views/settings/CompanyInfoSettings.vue b/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
index 357b7dd60..b3354fdd6 100644
--- a/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
+++ b/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
@@ -28,6 +28,19 @@
           />
         </BaseInputGroup>
 
+        <BaseInputGroup
+          :label="$tc('settings.company_info.company_slug')"
+          :help-text="$t('settings.company_info.company_slug_help_text')"
+          :error="v$.slug.$error && v$.slug.$errors[0].$message"
+          required
+        >
+          <BaseInput
+            v-model="companyForm.slug"
+            :invalid="v$.slug.$error"
+            @blur="v$.slug.$touch()"
+          />
+        </BaseInputGroup>
+
         <BaseInputGroup :label="$tc('settings.company_info.phone')">
           <BaseInput v-model="companyForm.address.phone" />
         </BaseInputGroup>
@@ -100,10 +113,10 @@
 
       <div v-if="companyStore.companies.length !== 1" class="py-5">
         <BaseDivider class="my-4" />
-        <h3 class="text-lg leading-6 font-medium text-gray-900">
+        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
           {{ $tc('settings.company_info.delete_company') }}
         </h3>
-        <div class="mt-2 max-w-xl text-sm text-gray-500">
+        <div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
           <p>
             {{ $tc('settings.company_info.delete_company_description') }}
           </p>
@@ -160,6 +173,7 @@ let isSaving = ref(false)
 
 const companyForm = reactive({
   name: null,
+  slug: null,
   logo: null,
   address: {
     address_street_1: '',
@@ -193,7 +207,14 @@ const rules = computed(() => {
     name: {
       required: helpers.withMessage(t('validation.required'), required),
       minLength: helpers.withMessage(
-        t('validation.name_min_length'),
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+    },
+    slug: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
         minLength(3)
       ),
     },
diff --git a/resources/scripts/admin/views/settings/CustomFieldsSetting.vue b/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
index 1cad62b00..bc39c082d 100644
--- a/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
+++ b/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
@@ -27,7 +27,7 @@
     >
       <template #cell-name="{ row }">
         {{ row.data.name }}
-        <span class="text-xs text-gray-500"> ({{ row.data.slug }})</span>
+        <span class="text-xs text-gray-500 dark:text-gray-400"> ({{ row.data.slug }})</span>
       </template>
 
       <template #cell-is_required="{ row }">
@@ -60,7 +60,7 @@
         <CustomFieldDropdown
           :row="row.data"
           :table="table"
-          :load-data="refreshTable"
+          :load-data="refreshTable" 
         />
       </template>
     </BaseTable>
diff --git a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue b/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
index 8635058e1..dd37145d4 100644
--- a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
+++ b/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
@@ -7,7 +7,7 @@
           {{ $t('settings.menu_title.exchange_rate') }}
         </h6>
         <p
-          class="mt-2 text-sm leading-snug text-left text-gray-500"
+          class="mt-2 text-sm leading-snug text-left text-gray-500 dark:text-gray-400"
           style="max-width: 680px"
         >
           {{ $t('settings.exchange_rate.providers_description') }}
diff --git a/resources/scripts/admin/views/settings/FileDiskSetting.vue b/resources/scripts/admin/views/settings/FileDiskSetting.vue
index 5e5bda80b..99be2f420 100644
--- a/resources/scripts/admin/views/settings/FileDiskSetting.vue
+++ b/resources/scripts/admin/views/settings/FileDiskSetting.vue
@@ -45,27 +45,30 @@
 
           <BaseDropdownItem
             v-if="!row.data.set_as_default"
+            v-slot="slotProps"
             @click="setDefaultDiskData(row.data.id)"
           >
-            <BaseIcon class="mr-3 tetx-gray-600" name="CheckCircleIcon" />
+            <BaseIcon :class="slotProps.class" name="CheckCircleIcon" />
 
             {{ $t('settings.disk.set_default_disk') }}
           </BaseDropdownItem>
 
           <BaseDropdownItem
             v-if="row.data.type !== 'SYSTEM'"
+            v-slot="slotProps"
             @click="openEditDiskModal(row.data)"
           >
-            <BaseIcon name="PencilIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="PencilIcon" :class="slotProps.class" />
 
             {{ $t('general.edit') }}
           </BaseDropdownItem>
 
           <BaseDropdownItem
             v-if="row.data.type !== 'SYSTEM' && !row.data.set_as_default"
+            v-slot="slotProps"
             @click="removeDisk(row.data.id)"
           >
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" :class="slotProps.class" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
diff --git a/resources/scripts/admin/views/settings/PreferencesSetting.vue b/resources/scripts/admin/views/settings/PreferencesSetting.vue
index 6c46f6453..531cb83dd 100644
--- a/resources/scripts/admin/views/settings/PreferencesSetting.vue
+++ b/resources/scripts/admin/views/settings/PreferencesSetting.vue
@@ -8,7 +8,11 @@
         <BaseInputGroup
           :content-loading="isFetchingInitialData"
           :label="$tc('settings.preferences.currency')"
-          :help-text="$t('settings.preferences.company_currency_unchangeable')"
+          :help-text="
+            isCurrencyDisabled
+              ? $t('settings.preferences.company_currency_unchangeable')
+              : ''
+          "
           :error="v$.currency.$error && v$.currency.$errors[0].$message"
           required
         >
@@ -21,7 +25,7 @@
             :searchable="true"
             track-by="name"
             :invalid="v$.currency.$error"
-            disabled
+            :disabled="isCurrencyDisabled"
             class="w-full"
           >
           </BaseMultiselect>
@@ -187,6 +191,7 @@ const { t, tm } = useI18n()
 let isSaving = ref(false)
 let isDataSaving = ref(false)
 let isFetchingInitialData = ref(false)
+let isCurrencyDisabled = ref(true)
 
 const settingsForm = reactive({ ...companyStore.selectedCompanySettings })
 
@@ -282,10 +287,14 @@ setInitialData()
 async function setInitialData() {
   isFetchingInitialData.value = true
   Promise.all([
+    companyStore.checkCompanyHasCurrencyTransactions(),
     globalStore.fetchCurrencies(),
     globalStore.fetchDateFormats(),
     globalStore.fetchTimeZones(),
   ]).then(([res1]) => {
+    if (res1.data?.has_transactions == false) {
+      isCurrencyDisabled.value = false
+    }
     isFetchingInitialData.value = false
   })
 }
diff --git a/resources/scripts/admin/views/settings/UpdateAppSetting.vue b/resources/scripts/admin/views/settings/UpdateAppSetting.vue
index 53a6c99c1..971f52694 100644
--- a/resources/scripts/admin/views/settings/UpdateAppSetting.vue
+++ b/resources/scripts/admin/views/settings/UpdateAppSetting.vue
@@ -4,23 +4,14 @@
     :description="$t('settings.update_app.description')"
   >
     <div class="pb-8 ml-0">
-      <label class="text-sm not-italic font-medium input-label">
+      <label
+        class="text-sm not-italic font-medium input-label dark:text-gray-300"
+      >
         {{ $t('settings.update_app.current_version') }}
       </label>
 
       <div
-        class="
-          box-border
-          flex
-          w-16
-          p-3
-          my-2
-          text-sm text-gray-600
-          bg-gray-200
-          border border-gray-200 border-solid
-          rounded-md
-          version
-        "
+        class="box-border flex w-16 p-3 my-2 text-sm text-gray-600 bg-gray-200 border border-gray-200 border-solid dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500 rounded-md version"
       >
         {{ currentVersion }}
       </div>
@@ -42,20 +33,20 @@
           {{ $t('settings.update_app.avail_update') }}
         </BaseHeading>
 
-        <div class="rounded-md bg-primary-50 p-4 mb-3">
+        <div class="rounded-md bg-primary-50 p-4 mb-3 dark:bg-gray-600">
           <div class="flex">
             <div class="shrink-0">
               <BaseIcon
                 name="InformationCircleIcon"
-                class="h-5 w-5 text-primary-400"
+                class="h-5 w-5 text-primary-400 dark:text-primary-300"
                 aria-hidden="true"
               />
             </div>
             <div class="ml-3">
-              <h3 class="text-sm font-medium text-primary-800">
+              <h3 class="text-sm font-medium text-primary-800 dark:text-primary-300">
                 {{ $t('general.note') }}
               </h3>
-              <div class="mt-2 text-sm text-primary-700">
+              <div class="mt-2 text-sm text-primary-700 dark:text-primary-400">
                 <p>
                   {{ $t('settings.update_app.update_warning') }}
                 </p>
@@ -75,26 +66,20 @@
             w-16
             p-3
             my-2
-            text-sm text-gray-600
-            bg-gray-200
+            text-sm
+            text-gray-600 bg-gray-200
             border border-gray-200 border-solid
             rounded-md
             version
+            dark:bg-gray-600 dark:text-gray-200
+            dark:border-gray-500
           "
         >
           {{ updateData.version }}
         </div>
 
         <div
-          class="
-            pl-5
-            mt-4
-            mb-8
-            text-sm
-            leading-snug
-            text-gray-500
-            update-description
-          "
+          class="pl-5 mt-4 mb-8 text-sm leading-snug text-gray-500 update-description"
           style="white-space: pre-wrap; max-width: 480px"
           v-html="description"
         ></div>
@@ -107,7 +92,7 @@
           <tr
             v-for="(ext, i) in requiredExtentions"
             :key="i"
-            class="p-2 border-2 border-gray-200"
+            class="p-2 border-2 border-gray-200 dark:border-gray-600"
           >
             <td width="70%" class="p-2 text-sm truncate">
               {{ i }}
@@ -136,7 +121,7 @@
             {{ $t('settings.update_app.update_progress') }}
           </h6>
           <p
-            class="mb-8 text-sm leading-snug text-gray-500"
+            class="mb-8 text-sm leading-snug text-gray-500 dark:text-gray-400"
             style="max-width: 480px"
           >
             {{ $t('settings.update_app.progress_text') }}
@@ -150,18 +135,11 @@
         <li
           v-for="step in updateSteps"
           :key="step.stepUrl"
-          class="
-            flex
-            justify-between
-            w-full
-            py-3
-            border-b border-gray-200 border-solid
-            last:border-b-0
-          "
+          class="flex justify-between w-full py-3 border-b border-gray-200 dark:border-gray-600 border-solid last:border-b-0"
         >
-          <p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
+          <p class="m-0 text-sm dark:text-gray-300 leading-8">{{ $t(step.translationKey) }}</p>
           <div class="flex flex-row items-center">
-            <span v-if="step.time" class="mr-3 text-xs text-gray-500">
+            <span v-if="step.time" class="mr-3 text-xs text-gray-500 dark:text-gray-300">
               {{ step.time }}
             </span>
             <span
@@ -297,7 +275,7 @@ function statusClass(step) {
     case 'running':
       return 'text-blue-400 bg-blue-100'
     case 'error':
-      return 'text-danger bg-red-200'
+      return 'text-red-400 bg-red-200'
     default:
       return ''
   }
diff --git a/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue b/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
index 7cab418af..ba0df0004 100644
--- a/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
+++ b/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
@@ -1,12 +1,12 @@
 <template>
-  <h6 class="text-gray-900 text-lg font-medium">
-    {{ $t(`settings.customization.${type}s.${type}_number_format`) }}
-  </h6>
-  <p class="mt-1 text-sm text-gray-500">
-    {{
+  <BaseHeading
+    type="heading-title"
+    :subtitle="
       $t(`settings.customization.${type}s.${type}_number_format_description`)
-    }}
-  </p>
+    "
+  >
+    {{ $t(`settings.customization.${type}s.${type}_number_format`) }}
+  </BaseHeading>
 
   <div class="overflow-x-auto">
     <table class="w-full mt-6 table-fixed">
@@ -29,6 +29,7 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
+              dark:border-gray-600
             "
           ></th>
           <th
@@ -41,6 +42,7 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
+              dark:text-gray-300 dark:border-gray-600
             "
           >
             Component
@@ -55,6 +57,7 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
+              dark:text-gray-300 dark:border-gray-600
             "
           >
             Parameter
@@ -69,13 +72,14 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
+              dark:border-gray-600
             "
           ></th>
         </tr>
       </thead>
       <draggable
         v-model="selectedFields"
-        class="divide-y divide-gray-200"
+        class="divide-y divide-gray-200 dark:divide-gray-600"
         item-key="id"
         tag="tbody"
         handle=".handle"
@@ -97,12 +101,13 @@
                   whitespace-nowrap
                   mr-2
                   min-w-[200px]
+                  dark:text-primary-400
                 "
               >
                 {{ element.label }}
               </label>
 
-              <p class="text-xs text-gray-500 mt-1">
+              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                 {{ element.description }}
               </p>
             </td>
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
index 5dc03e344..3d68a0ba2 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
@@ -1,10 +1,12 @@
 <template>
-  <h6 class="text-gray-900 text-lg font-medium">
+  <BaseHeading
+    type="heading-title"
+    :subtitle="
+      $t('settings.customization.estimates.convert_estimate_description')
+    "
+    >
     {{ $tc('settings.customization.estimates.convert_estimate_options') }}
-  </h6>
-  <p class="mt-1 text-sm text-gray-500">
-    {{ $t('settings.customization.estimates.convert_estimate_description') }}
-  </p>
+  </BaseHeading>
 
   <BaseInputGroup required>
     <BaseRadio
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
index e996a7f45..6a964599c 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
@@ -1,11 +1,13 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <BaseHeading
+      type="heading-title"
+      :subtitle="
+        $t('settings.customization.estimates.default_formats_description')
+      "
+    >
       {{ $t('settings.customization.estimates.default_formats') }}
-    </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.estimates.default_formats_description') }}
-    </p>
+    </BaseHeading>
 
     <BaseInputGroup
       :label="
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
index 38200d5fe..c3af3d8f9 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
@@ -1,11 +1,13 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <BaseHeading
+      type="heading-title"
+      :subtitle="
+        $t('settings.customization.estimates.expiry_date_description')
+      "
+    >
       {{ $t('settings.customization.estimates.expiry_date') }}
-    </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.estimates.expiry_date_description') }}
-    </p>
+    </BaseHeading>
 
     <BaseSwitchSection
       v-model="expiryDateAutoField"
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
index daf1a5d30..c7578a067 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
@@ -1,11 +1,13 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <BaseHeading
+      type="heading-title"
+      :subtitle="
+        $t('settings.customization.invoices.default_formats_description')
+      "
+    >
       {{ $t('settings.customization.invoices.default_formats') }}
-    </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.invoices.default_formats_description') }}
-    </p>
+    </BaseHeading>
 
     <BaseInputGroup
       :label="$t('settings.customization.invoices.default_invoice_email_body')"
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
index c44780aba..f0d48cb8c 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
@@ -1,11 +1,13 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
-      {{ $t('settings.customization.invoices.due_date') }}
-    </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.invoices.due_date_description') }}
-    </p>
+    <BaseHeading
+    type="heading-title"
+    :subtitle="
+      $t('settings.customization.invoices.due_date_description')
+    "
+  >
+    {{ $t('settings.customization.invoices.due_date') }}
+  </BaseHeading>
 
     <BaseSwitchSection
       v-model="dueDateAutoField"
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
index f20ceb225..9f939a5c0 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
@@ -1,10 +1,12 @@
 <template>
-  <h6 class="text-gray-900 text-lg font-medium">
+  <BaseHeading
+    type="heading-title"
+    :subtitle="
+      $t('settings.customization.invoices.retrospective_edits_description')
+    "
+  >
     {{ $tc('settings.customization.invoices.retrospective_edits') }}
-  </h6>
-  <p class="mt-1 text-sm text-gray-500">
-    {{ $t('settings.customization.invoices.retrospective_edits_description') }}
-  </p>
+  </BaseHeading>
 
   <BaseInputGroup required>
     <BaseRadio
diff --git a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
index f8468f265..3a77dccb0 100644
--- a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
@@ -1,11 +1,13 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+     <BaseHeading
+      type="heading-title"
+      :subtitle="
+        $t('settings.customization.payments.default_formats_description')
+      "
+    >
       {{ $t('settings.customization.payments.default_formats') }}
-    </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.payments.default_formats_description') }}
-    </p>
+    </BaseHeading>
 
     <BaseInputGroup
       :label="$t('settings.customization.payments.default_payment_email_body')"
diff --git a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
index fa2ebbcf4..3de8a1f4d 100644
--- a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
@@ -51,27 +51,12 @@
         <BaseInput
           v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_secret"
           :content-loading="isFetchingInitialData"
-          :type="getInputType"
+          type="password"
           name="mailgun_secret"
           autocomplete="off"
           :invalid="v$.mailgunConfig.mail_mailgun_secret.$error"
           @input="v$.mailgunConfig.mail_mailgun_secret.$touch()"
-        >
-          <template #right>
-            <BaseIcon
-              v-if="isShowPassword"
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeOffIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-            <BaseIcon
-              v-else
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
+        />
       </BaseInputGroup>
 
       <BaseInputGroup
@@ -184,15 +169,6 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()
 
-let isShowPassword = ref(false)
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
 const rules = computed(() => {
   return {
     mailgunConfig: {
diff --git a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
index 5eae5a074..468438587 100644
--- a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
@@ -146,27 +146,12 @@
         <BaseInput
           v-model.trim="mailDriverStore.sesConfig.mail_ses_secret"
           :content-loading="isFetchingInitialData"
-          :type="getInputType"
+          type="password"
           name="mail_ses_secret"
           autocomplete="off"
           :invalid="v$.sesConfig.mail_ses_secret.$error"
           @input="v$.sesConfig.mail_ses_secret.$touch()"
-        >
-          <template #right>
-            <BaseIcon
-              v-if="isShowPassword"
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeOffIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-            <BaseIcon
-              v-else
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
+        />
       </BaseInputGroup>
     </BaseInputGrid>
 
@@ -223,7 +208,6 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()
 
-let isShowPassword = ref(false)
 const encryptions = reactive(['tls', 'ssl', 'starttls'])
 
 const rules = computed(() => {
@@ -264,13 +248,6 @@ const v$ = useVuelidate(
   computed(() => mailDriverStore)
 )
 
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
 onMounted(() => {
   for (const key in mailDriverStore.sesConfig) {
     if (props.configData.hasOwnProperty(key)) {
diff --git a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
index dbb947f2d..bf88c1743 100644
--- a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
@@ -58,24 +58,9 @@
         <BaseInput
           v-model.trim="mailDriverStore.smtpConfig.mail_password"
           :content-loading="isFetchingInitialData"
-          :type="getInputType"
+          type="password"
           name="password"
-        >
-          <template #right>
-            <BaseIcon
-              v-if="isShowPassword"
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeOffIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-            <BaseIcon
-              v-else
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
+        />
       </BaseInputGroup>
 
       <BaseInputGroup
@@ -209,17 +194,8 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()
-
-let isShowPassword = ref(false)
 const encryptions = reactive(['tls', 'ssl', 'starttls'])
 
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
 const rules = computed(() => {
   return {
     smtpConfig: {
diff --git a/resources/scripts/admin/views/users/Index.vue b/resources/scripts/admin/views/users/Index.vue
index b2f2cc64b..8116cafda 100644
--- a/resources/scripts/admin/views/users/Index.vue
+++ b/resources/scripts/admin/views/users/Index.vue
@@ -118,11 +118,11 @@
               "
             >
               {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" class="h-5" />
+              <BaseIcon name="ChevronDownIcon"/>
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleUsers">
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -158,7 +158,7 @@
         <template #cell-name="{ row }">
           <router-link
             :to="{ path: `users/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.name }}
           </router-link>
diff --git a/resources/scripts/components/CompanySwitcher.vue b/resources/scripts/components/CompanySwitcher.vue
index fd979cbaf..fc0620d94 100644
--- a/resources/scripts/components/CompanySwitcher.vue
+++ b/resources/scripts/components/CompanySwitcher.vue
@@ -1,21 +1,23 @@
 <template>
-  <div ref="companySwitchBar" class="relative rounded">
+  <div ref="companySwitchBar" class="relative rounded dark:text-white">
     <CompanyModal />
 
     <div
       class="
-        flex
-        items-center
-        justify-center
-        px-3
-        h-8
-        md:h-9
-        ml-2
-        text-sm text-white
-        bg-white
-        rounded
-        cursor-pointer
-        bg-opacity-20
+      flex
+      items-center
+      justify-center
+      px-3
+      h-8
+      md:h-9
+      ml-2
+      text-sm
+      text-white
+      bg-white
+      rounded
+      cursor-pointer
+      bg-opacity-20
+      dark:bg-gray-700
       "
       @click="isShow = !isShow"
     >
@@ -38,28 +40,42 @@
     >
       <div
         v-if="isShow"
-        class="absolute right-0 mt-2 bg-white rounded-md shadow-lg"
+        class="
+        absolute
+        right-0
+        mt-2
+        bg-white
+        rounded-md
+        shadow-lg
+        dark:border
+        dark:border-white/10
+        dark:text-white
+        dark:bg-gray-800/[.95]
+        dark:shadow-glass
+        dark:backdrop-blur-xl
+        "
       >
+        <BaseDarkHighlight class="z-[-1] top-0 left-0" />
         <div
           class="
-            overflow-y-auto
-            scrollbar-thin scrollbar-thumb-rounded-full
-            w-[250px]
-            max-h-[350px]
-            scrollbar-thumb-gray-300 scrollbar-track-gray-10
-            pb-4
+          overflow-y-auto
+          scrollbar-thin
+          scrollbar-thumb-rounded-full
+          w-[250px] max-h-[350px]
+          scrollbar-thumb-gray-300
+          scrollbar-track-gray-10
+          pb-4
           "
         >
           <label
             class="
-              px-3
-              py-2
-              text-xs
-              font-semibold
-              text-gray-400
-              mb-0.5
-              block
-              uppercase
+            px-3
+            py-2
+            text-xs
+            font-semibold
+            text-gray-400
+            mb-0.5
+            block uppercase
             "
           >
             {{ $t('company_switcher.label') }}
@@ -68,13 +84,13 @@
           <div
             v-if="companyStore.companies.length < 1"
             class="
-              flex flex-col
-              items-center
-              justify-center
-              p-2
-              px-3
-              mt-4
-              text-base text-gray-400
+            flex flex-col
+            items-center
+            justify-center
+            p-2
+            px-3
+            mt-4
+            text-base text-gray-400
             "
           >
             <BaseIcon name="ExclamationCircleIcon" class="h-5 text-gray-400" />
@@ -86,14 +102,17 @@
                 v-for="(company, index) in companyStore.companies"
                 :key="index"
                 class="
-                  p-2
-                  px-3
-                  rounded-md
-                  cursor-pointer
-                  hover:bg-gray-100 hover:text-primary-500
+                p-2
+                px-3
+                rounded-md
+                cursor-pointer
+                hover:bg-gray-100 hover:text-primary-500
+                dark:hover:bg-gray-700
+                text-gray-900
+                dark:text-white
                 "
                 :class="{
-                  'bg-gray-100 text-primary-500':
+                  'bg-gray-100 text-primary-500 dark:bg-gray-700':
                     companyStore.selectedCompany.id === company.id,
                 }"
                 @click="changeCompany(company)"
@@ -101,18 +120,19 @@
                 <div class="flex items-center">
                   <span
                     class="
-                      flex
-                      items-center
-                      justify-center
-                      mr-3
-                      overflow-hidden
-                      text-base
-                      font-semibold
-                      bg-gray-200
-                      rounded-md
-                      w-9
-                      h-9
-                      text-primary-500
+                    flex
+                    items-center
+                    justify-center
+                    mr-3
+                    overflow-hidden
+                    text-sm
+                    font-semibold
+                    bg-gray-200
+                    rounded-md
+                    w-9
+                    h-9
+                    text-primary-500
+                    dark:bg-gray-900
                     "
                   >
                     <span v-if="!company.logo">
@@ -136,15 +156,17 @@
         <div
           v-if="userStore.currentUser.is_owner"
           class="
-            flex
-            items-center
-            justify-center
-            p-4
-            pl-3
-            border-t-2 border-gray-100
-            cursor-pointer
-            text-primary-400
-            hover:text-primary-500
+          flex
+          items-center
+          justify-center
+          p-4
+          pl-3
+          border-t-2
+          border-gray-100
+          cursor-pointer
+          text-primary-400
+          hover:text-primary-500
+          dark:border-gray-600
           "
           @click="addNewCompany"
         >
diff --git a/resources/scripts/components/GlobalSearchBar.vue b/resources/scripts/components/GlobalSearchBar.vue
index b7d4f8c00..033744cd2 100644
--- a/resources/scripts/components/GlobalSearchBar.vue
+++ b/resources/scripts/components/GlobalSearchBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="searchBar" class="hidden rounded md:block relative">
+  <div ref="searchBar" class="hidden rounded md:block relative dark:text-white">
     <div>
       <BaseInput
         v-model="name"
@@ -41,6 +41,11 @@
           w-[300px]
           h-[200px]
           right-0
+          dark:border-white/10
+          dark:text-white
+          dark:bg-gray-800/[.95]
+          dark:shadow-glass
+          dark:backdrop-blur-xl
         "
       >
         <div
@@ -68,7 +73,7 @@
             <div
               v-for="(customer, index) in usersStore.customerList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
+              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
             >
               <router-link
                 :to="{ path: `/admin/customers/${customer.id}/view` }"
@@ -87,6 +92,8 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
+                    dark:bg-gray-600
+                    dark:text-primary-400
                   "
                 >
                   {{ initGenerator(customer.name) }}
@@ -116,7 +123,7 @@
             <div
               v-for="(user, index) in usersStore.userList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
+              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
             >
               <router-link
                 :to="{ path: `/admin/users/${user.id}/edit` }"
@@ -135,6 +142,8 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
+                    dark:text-primary-400
+                    dark:bg-gray-600
                   "
                 >
                   {{ initGenerator(user.name) }}
diff --git a/resources/scripts/components/InvoiceInformationCard.vue b/resources/scripts/components/InvoiceInformationCard.vue
index 132acaa1d..676f9683f 100644
--- a/resources/scripts/components/InvoiceInformationCard.vue
+++ b/resources/scripts/components/InvoiceInformationCard.vue
@@ -1,33 +1,40 @@
 <template>
-  <div class="bg-white shadow overflow-hidden rounded-lg mt-6">
+  <div class="bg-white shadow overflow-hidden rounded-lg mt-6 dark:bg-gray-800">
     <div class="px-4 py-5 sm:px-6">
-      <h3 class="text-lg leading-6 font-medium text-gray-900">
+      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
         {{ $t('invoices.invoice_information') }}
       </h3>
     </div>
-    <div v-if="invoice" class="border-t border-gray-200 px-4 py-5 sm:p-0">
-      <dl class="sm:divide-y sm:divide-gray-200">
+    <div v-if="invoice"
+      class="
+        border-t
+        border-gray-200
+        px-4 py-5 sm:p-0
+        dark:border-gray-600
+      "
+    >
+      <dl class="sm:divide-y sm:divide-gray-200 sm:dark:divide-gray-500">
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
             {{ $t('general.from') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
             {{ invoice.company.name }}
           </dd>
         </div>
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
             {{ $t('general.to') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
             {{ invoice.customer.name }}
           </dd>
         </div>
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500 capitalize">
+          <dt class="text-sm font-medium text-gray-500 capitalize dark:dark:text-gray-400">
             {{ $t('invoices.paid_status').toLowerCase() }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
             <BaseInvoiceStatusBadge
               :status="invoice.paid_status"
               class="px-3 py-1"
@@ -37,10 +44,10 @@
           </dd>
         </div>
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
             {{ $t('invoices.total') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
             <BaseFormatMoney
               :currency="invoice.currency"
               :amount="invoice.total"
diff --git a/resources/scripts/components/LightDarkButton.vue b/resources/scripts/components/LightDarkButton.vue
new file mode 100644
index 000000000..25fa2fad4
--- /dev/null
+++ b/resources/scripts/components/LightDarkButton.vue
@@ -0,0 +1,41 @@
+<template>
+   <button
+    type="button"
+    class="
+      flex
+      h-8
+      w-8
+      items-center
+      justify-center
+      rounded-md
+      transition
+      hover:bg-zinc-900/5
+      dark:hover:bg-white/5
+    "
+    @click="onChange"
+  >
+  <BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-yellow-500" name="SunIcon" />
+    <BaseIcon v-else class="h-5 w-5 text-white" name="MoonIcon" />
+  </button>
+</template>
+<script setup>
+import { computed } from 'vue'
+import { useGlobalStore } from '@/scripts/customer/stores/global'
+
+const globalStore = useGlobalStore()
+
+function onChange() {
+  globalStore.isDarkModeOn = !globalStore.isDarkModeOn
+
+  if (globalStore.isDarkModeOn) {
+    localStorage.theme = 'dark'
+    document.documentElement.classList.add('dark')
+    document.documentElement.style.setProperty('color-scheme', 'dark')
+  } else {
+    localStorage.theme = 'light'
+    document.documentElement.classList.remove('dark')
+    document.documentElement.style.setProperty('color-scheme', 'light')
+  }
+}
+</script>
+
diff --git a/resources/scripts/components/LightDarkSwitcher.vue b/resources/scripts/components/LightDarkSwitcher.vue
new file mode 100644
index 000000000..9a1fff396
--- /dev/null
+++ b/resources/scripts/components/LightDarkSwitcher.vue
@@ -0,0 +1,102 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<script lang="ts" setup>
+import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
+import { useGlobalStore } from '@/scripts/admin/stores/global'
+import { computed, ref } from 'vue'
+defineProps({
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const globalStore = useGlobalStore()
+
+const isDark = ref(
+  localStorage.getItem('theme') === 'dark'
+    || document.documentElement.classList.contains('dark'),
+)
+
+globalStore.isDarkModeOn = isDark
+
+const enabled = computed({
+  get: () => globalStore.isDarkModeOn,
+  set: (value) => {
+    if (value) {
+      localStorage.theme = 'dark'
+      document.documentElement.classList.add('dark')
+      document.documentElement.style.setProperty('color-scheme', 'dark')
+    } else {
+      localStorage.theme = 'light'
+      document.documentElement.classList.remove('dark')
+      document.documentElement.style.setProperty('color-scheme', 'light')
+    }
+    globalStore.isDarkModeOn = value
+  },
+})
+</script>
+
+<template>
+  <div class="w-full flex justify-center">
+    <SwitchGroup
+      as="div"
+      class="flex items-center"
+      :class="vertical ? 'flex-col justify-center' : 'flex-row'"
+    >
+      <Switch
+        v-model="enabled"
+        class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-gray-700"
+        :class="[enabled ? 'bg-primary-600' : 'bg-gray-200']"
+      >
+        <span class="sr-only">Use setting</span>
+        <span
+          class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+          :class="[enabled ? 'translate-x-5' : 'translate-x-0']"
+        >
+          <span
+            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+            :class="[
+              enabled
+                ? 'opacity-0 ease-out duration-100'
+                : 'opacity-100 ease-in duration-200',
+            ]"
+            aria-hidden="true"
+          >
+            <BaseIcon class="h-3 w-3 text-yellow-500" name="SunIcon" />
+          </span>
+          <span
+            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+            :class="[
+              enabled
+                ? 'opacity-100 ease-in duration-200'
+                : 'opacity-0 ease-out duration-100',
+            ]"
+            aria-hidden="true"
+          >
+            <BaseIcon class="h-3 w-3 text-primary-500" name="MoonIcon" />
+          </span>
+        </span>
+      </Switch>
+      <SwitchLabel
+        v-if="showLabel"
+        as="span"
+        class="cursor-pointer"
+        :class="vertical ? 'px-1 text-center mt-2' : 'ml-3'"
+      >
+        <span
+          v-if="enabled"
+          class="text-sm font-medium text-gray-500 dark:text-gray-400"
+        >
+          Dark Mode
+        </span>
+        <span v-else class="text-sm font-medium text-gray-500">
+          Light Mode
+        </span>
+      </SwitchLabel>
+    </SwitchGroup>
+  </div>
+</template>
diff --git a/resources/scripts/components/base-select/BaseMultiselect.vue b/resources/scripts/components/base-select/BaseMultiselect.vue
index 49b6537f2..ca7d0de80 100755
--- a/resources/scripts/components/base-select/BaseMultiselect.vue
+++ b/resources/scripts/components/base-select/BaseMultiselect.vue
@@ -437,21 +437,22 @@ export default {
       required: false,
       default: () => ({
         container:
-          'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 rounded-md bg-white text-sm leading-snug outline-none max-h-10',
+          'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-sm leading-snug outline-none max-h-10',
         containerDisabled:
-          'cursor-default bg-gray-200 bg-opacity-50 !text-gray-400',
+          'bg-gray-200 !text-gray-800 dark:!text-gray-800 !dark:text-gray-500 !cursor-not-allowed dark:opacity-50',
         containerOpen: '',
         containerOpenTop: '',
         containerActive: 'ring-1 ring-primary-400 border-primary-400',
         containerInvalid:
-          'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400',
-        containerInvalidActive: 'ring-1 border-red-400 ring-red-400',
+          'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500 dark:border-red-500 dark:ring-red-500 dark:focus:ring-red-500 dark:focus:border-red-500',
+        containerInvalidActive:
+          'ring-1 border-red-500 ring-red-500 dark:ring-1 dark:border-red-500 dark:ring-red-500',
         singleLabel:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
         multipleLabel:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
         search:
-          'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5',
+          'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5 border-transparent focus:border-transparent focus:ring-0 dark:bg-gray-700 dark:text-white',
         tags: 'grow shrink flex flex-wrap mt-1 pl-2',
         tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap',
         tagDisabled: 'pr-2 !bg-gray-400 text-white',
@@ -461,12 +462,12 @@ export default {
           'bg-multiselect-remove text-white bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
         tagsSearchWrapper: 'inline-block relative mx-1 mb-1 grow shrink h-full',
         tagsSearch:
-          'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 text-sm font-sans box-border w-full',
+          'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 sm:text-sm font-sans box-border w-full dark:bg-gray-700',
         tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
         placeholder:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 text-sm',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 sm:text-sm dark:text-gray-500',
         caret:
-          'bg-multiselect-caret bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform',
+          'bg-multiselect-caret-black dark:bg-multiselect-caret-white bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform dark:text-white',
         caretOpen: 'rotate-180 pointer-events-auto',
         clear:
           'pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80',
@@ -475,7 +476,7 @@ export default {
         spinner:
           'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0',
         dropdown:
-          'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 translate-y-full border border-gray-300 mt-1 overflow-y-auto z-50 bg-white flex flex-col rounded-md',
+          'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 translate-y-full border border-gray-300 mt-1 overflow-y-auto z-50 bg-white dark:border-gray-600 flex flex-col rounded-md dark:bg-gray-800 dark:shadow-glass',
         dropdownTop:
           '-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
         dropdownHidden: 'hidden',
@@ -483,7 +484,7 @@ export default {
         optionsTop: 'flex-col-reverse',
         group: 'p-0 m-0',
         groupLabel:
-          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
+          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 dark:bg-gray-700 dark:text-gray-400 cursor-default leading-normal',
         groupLabelPointable: 'cursor-pointer',
         groupLabelPointed: 'bg-gray-300 text-gray-700',
         groupLabelSelected: 'bg-primary-600 text-white',
@@ -493,15 +494,18 @@ export default {
           'text-primary-100 bg-primary-600 bg-opacity-50 cursor-not-allowed',
         groupOptions: 'p-0 m-0',
         option:
-          'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3',
-        optionPointed: 'text-gray-800 bg-gray-100',
+          'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3 dark:text-gray-200',
+        optionPointed:
+          'text-gray-800 bg-gray-100 dark:text-white dark:bg-gray-700/30',
         optionSelected: 'text-white bg-primary-500',
-        optionDisabled: 'text-gray-300 cursor-not-allowed',
+        optionDisabled: 'text-gray-300 cursor-not-allowed dark:text-gray-400',
         optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
         optionSelectedDisabled:
           'text-primary-100 bg-primary-500 bg-opacity-50 cursor-not-allowed',
-        noOptions: 'py-2 px-3 text-gray-600 bg-white',
-        noResults: 'py-2 px-3 text-gray-600 bg-white',
+        noOptions:
+          'py-2 px-3 text-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200',
+        noResults:
+          'py-2 px-3 text-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200',
         fakeInput:
           'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
         spacer: 'h-9 py-px box-content',
diff --git a/resources/scripts/components/base/BaseBreadcrumb.vue b/resources/scripts/components/base/BaseBreadcrumb.vue
index 07afcf028..6fe55aa5d 100644
--- a/resources/scripts/components/base/BaseBreadcrumb.vue
+++ b/resources/scripts/components/base/BaseBreadcrumb.vue
@@ -1,6 +1,6 @@
 <template>
   <nav>
-    <ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset">
+    <ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset dark:text-gray-400">
       <slot />
     </ol>
   </nav>
diff --git a/resources/scripts/components/base/BaseBreadcrumbItem.vue b/resources/scripts/components/base/BaseBreadcrumbItem.vue
index 38539440b..db60b3dd0 100644
--- a/resources/scripts/components/base/BaseBreadcrumbItem.vue
+++ b/resources/scripts/components/base/BaseBreadcrumbItem.vue
@@ -8,7 +8,9 @@
         font-medium
         leading-5
         text-gray-900
+        dark:text-gray-400
         outline-none
+        dark:focus:ring-offset-gray-900
         focus:ring-2 focus:ring-offset-2 focus:ring-primary-400
       "
       :to="to"
diff --git a/resources/scripts/components/base/BaseButton.vue b/resources/scripts/components/base/BaseButton.vue
index 6076d14b7..ec285990f 100644
--- a/resources/scripts/components/base/BaseButton.vue
+++ b/resources/scripts/components/base/BaseButton.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
+
 const props = defineProps({
   contentLoading: {
     type: Boolean,
@@ -9,7 +10,7 @@ const props = defineProps({
   defaultClass: {
     type: String,
     default:
-      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
+      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
   },
   tag: {
     type: String,
@@ -27,6 +28,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  loadingRight: {
+    type: Boolean,
+    default: false,
+  },
   size: {
     type: String,
     default: 'md',
@@ -81,17 +86,17 @@ const placeHolderSize = computed(() => {
 
 const variantClass = computed(() => {
   return {
-    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
+    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 dark:bg-primary-500 dark:hover:bg-primary-600':
       props.variant === 'primary',
     'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
       props.variant === 'secondary',
-    'border-transparent  border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-200 shadow-inner focus:ring-primary-500':
+    'border-transparent border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-100 shadow-inner focus:ring-primary-500 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-transparent dark:hover:text-primary-500 dark:hover:border-primary-500':
       props.variant == 'primary-outline',
-    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
+    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-900':
       props.variant == 'white',
     'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
       props.variant === 'danger',
-    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0':
+    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0 dark:bg-gray-600 dark:text-white dark:hover:bg-opacity-60':
       props.variant === 'gray',
   }
 })
@@ -124,6 +129,13 @@ const iconRightClass = computed(() => {
     'ml-3 -mr-1 h-5 w-5': props.size === 'lg' || props.size === 'xl',
   }
 })
+
+const buttonDisabledClass = computed(() => {
+  if (props.disabled || props.loading)
+    return 'cursor-not-allowed bg-opacity-70 dark:!bg-opacity-40 hover:!bg-opacity-70 pointer-event-none'
+
+  return ''
+})
 </script>
 
 <template>
@@ -141,15 +153,17 @@ const iconRightClass = computed(() => {
   <BaseCustomTag
     v-else
     :tag="tag"
-    :disabled="disabled"
-    :class="[defaultClass, sizeClass, variantClass, roundedClass]"
+    :disabled="disabled || loading"
+    :class="[defaultClass, sizeClass, variantClass, roundedClass, buttonDisabledClass]"
   >
-    <SpinnerIcon v-if="loading" :class="[iconLeftClass, iconVariantClass]" />
+    <SpinnerIcon v-if="loading && !loadingRight" :class="[iconLeftClass, iconVariantClass]" />
 
-    <slot v-else name="left" :class="iconLeftClass"></slot>
+    <slot v-else name="left" :class="iconLeftClass" />
 
     <slot />
 
-    <slot name="right" :class="[iconRightClass, iconVariantClass]"></slot>
+    <SpinnerIcon v-if="loading && loadingRight" :class="[iconRightClass, iconVariantClass]" />
+
+    <slot v-else name="right" :class="[iconRightClass, iconVariantClass]" />
   </BaseCustomTag>
 </template>
diff --git a/resources/scripts/components/base/BaseCard.vue b/resources/scripts/components/base/BaseCard.vue
index 1a1b7a29c..ba7fe35f5 100644
--- a/resources/scripts/components/base/BaseCard.vue
+++ b/resources/scripts/components/base/BaseCard.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="bg-white rounded-lg shadow">
+  <div
+    class="bg-white rounded-lg shadow dark:bg-gray-800 dark:text-white dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70 relative"
+  >
+    <BaseDarkHighlight class="z-[-1] mt-10" />
+
     <div
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-black border-b border-gray-100 border-solid"
diff --git a/resources/scripts/components/base/BaseCheckbox.vue b/resources/scripts/components/base/BaseCheckbox.vue
index c5e1d4d74..7fc590198 100644
--- a/resources/scripts/components/base/BaseCheckbox.vue
+++ b/resources/scripts/components/base/BaseCheckbox.vue
@@ -15,12 +15,12 @@
         v-if="label"
         :for="id"
         :class="`font-medium ${
-          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600'
+          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 dark:text-white'
         } cursor-pointer `"
       >
         {{ label }}
       </label>
-      <p v-if="description" class="text-gray-500">{{ description }}</p>
+      <p v-if="description" class="text-gray-500 dark:text-gray-400">{{ description }}</p>
     </div>
   </div>
 </template>
@@ -51,7 +51,7 @@ const props = defineProps({
   },
   checkboxClass: {
     type: String,
-    default: 'w-4 h-4 border-gray-300 rounded cursor-pointer',
+    default: 'w-4 h-4 border-gray-300 rounded cursor-pointer dark:bg-gray-600 dark:border-gray-500',
   },
   setInitialValue: {
     type: Boolean,
diff --git a/resources/scripts/components/base/BaseContentPlaceholders.vue b/resources/scripts/components/base/BaseContentPlaceholders.vue
index b64a4c1bb..c9b4133fe 100644
--- a/resources/scripts/components/base/BaseContentPlaceholders.vue
+++ b/resources/scripts/components/base/BaseContentPlaceholders.vue
@@ -39,6 +39,8 @@ $base-content-placeholders-border-radius: 6px !default;
 $base-content-placeholders-line-height: 15px !default;
 $base-content-placeholders-spacing: 10px !default;
 
+$base-content-placeholders-primary-color-dark: rgb(71, 85, 105) !default;
+$base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
 // Animations
 @keyframes vueContentPlaceholdersAnimation {
   0% {
@@ -57,6 +59,10 @@ $base-content-placeholders-spacing: 10px !default;
   min-height: $base-content-placeholders-line-height;
   background: $base-content-placeholders-secondary-color;
 
+  .dark & {
+    background: $base-content-placeholders-secondary-color-dark;
+  }
+
   .base-content-placeholders-is-rounded & {
     border-radius: $base-content-placeholders-border-radius;
   }
@@ -86,6 +92,15 @@ $base-content-placeholders-spacing: 10px !default;
     animation-name: vueContentPlaceholdersAnimation;
     animation-timing-function: linear;
   }
+
+  .dark .base-content-placeholders-is-animated &::before {
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
+      transparent 30%
+    );
+  }
 }
 
 @mixin base-content-placeholders-spacing {
@@ -156,6 +171,10 @@ $base-content-placeholders-spacing: 10px !default;
   min-height: $base-content-placeholders-line-height;
   background: $base-content-placeholders-secondary-color;
 
+  .dark & {
+    background: $base-content-placeholders-secondary-color-dark;
+  }
+  
   .base-content-placeholders-is-animated &::before {
     content: '';
     position: absolute;
@@ -177,6 +196,14 @@ $base-content-placeholders-spacing: 10px !default;
     animation-timing-function: linear;
   }
 
+    .dark .base-content-placeholders-is-animated &::before {
+      background: linear-gradient(
+      to right,
+      transparent 0%,
+      darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
+      transparent 30%
+    );
+  }
   // @include base-content-placeholders-spacing;
 }
 
diff --git a/resources/scripts/components/base/BaseCustomInput.vue b/resources/scripts/components/base/BaseCustomInput.vue
index 3b35de80d..15cc7a7b0 100644
--- a/resources/scripts/components/base/BaseCustomInput.vue
+++ b/resources/scripts/components/base/BaseCustomInput.vue
@@ -40,6 +40,7 @@
                 font-normal
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-700/60
                 rounded
                 ml-1
                 py-0.5
@@ -126,7 +127,7 @@ onMounted(() => {
 })
 
 const value = computed({
-  get: () => props.modelValue,
+  get: () => (props.modelValue ? props.modelValue : ''),
   set: (value) => {
     emit('update:modelValue', value)
   },
@@ -195,7 +196,9 @@ async function getFields() {
           { label: 'Date', value: 'INVOICE_DATE' },
           { label: 'Due Date', value: 'INVOICE_DUE_DATE' },
           { label: 'Number', value: 'INVOICE_NUMBER' },
-          { label: 'Ref Number', value: 'INVOICE_REF_NUMBER' },
+          { label: 'PDF Link', value: 'PDF_LINK' },
+          { label: 'Due Amount', value: 'DUE_AMOUNT' },
+          { label: 'Total Amount', value: 'TOTAL_AMOUNT' },
           ...invoiceFields.value.map((i) => ({
             label: i.label,
             value: i.slug,
@@ -211,7 +214,8 @@ async function getFields() {
           { label: 'Date', value: 'ESTIMATE_DATE' },
           { label: 'Expiry Date', value: 'ESTIMATE_EXPIRY_DATE' },
           { label: 'Number', value: 'ESTIMATE_NUMBER' },
-          { label: 'Ref Number', value: 'ESTIMATE_REF_NUMBER' },
+          { label: 'PDF Link', value: 'PDF_LINK' },
+          { label: 'Total Amount', value: 'TOTAL_AMOUNT' },
           ...estimateFields.value.map((i) => ({
             label: i.label,
             value: i.slug,
@@ -228,6 +232,7 @@ async function getFields() {
           { label: 'Number', value: 'PAYMENT_NUMBER' },
           { label: 'Mode', value: 'PAYMENT_MODE' },
           { label: 'Amount', value: 'PAYMENT_AMOUNT' },
+          { label: 'PDF Link', value: 'PDF_LINK' },
           ...paymentFields.value.map((i) => ({
             label: i.label,
             value: i.slug,
diff --git a/resources/scripts/components/base/BaseCustomerAddressDisplay.vue b/resources/scripts/components/base/BaseCustomerAddressDisplay.vue
index fa2a880d5..63be4fa7f 100644
--- a/resources/scripts/components/base/BaseCustomerAddressDisplay.vue
+++ b/resources/scripts/components/base/BaseCustomerAddressDisplay.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="address"
-    class="text-sm font-bold leading-5 text-black non-italic space-y-1"
+    class="text-sm font-bold leading-5 text-black non-italic space-y-1 dark:text-white"
   >
     <p v-if="address?.address_street_1">{{ address?.address_street_1 }},</p>
 
diff --git a/resources/scripts/components/base/BaseCustomerSelectPopup.vue b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
index 2c16d7c39..afbf6b0bb 100644
--- a/resources/scripts/components/base/BaseCustomerSelectPopup.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
@@ -20,6 +20,7 @@
         border border-gray-200 border-solid
         min-h-[170px]
         rounded-md
+        dark:border-white/10 dark:bg-gray-800/50
       "
       @click.stop
     >
@@ -27,7 +28,7 @@
         <BaseText
           :text="selectedCustomer.name"
           :length="30"
-          class="flex-1 text-base font-medium text-left text-gray-900"
+          class="flex-1 text-base font-medium text-left text-gray-900 dark:text-white"
         />
         <div class="flex">
           <a
@@ -192,6 +193,7 @@
             border border-gray-200 border-solid
             rounded-md
             min-h-[170px]
+            dark:border-white/10 dark:bg-gray-700/60 dark:text-white
           "
         >
           <BaseIcon
@@ -207,11 +209,12 @@
               bg-gray-200
               rounded-full
               font-base
+              dark:bg-gray-700
             "
           />
 
           <div class="mt-1">
-            <label class="text-lg font-medium text-gray-900">
+            <label class="text-lg font-medium text-gray-900 dark:text-white">
               {{ $t('customers.new_customer') }}
               <span class="text-red-500"> * </span>
             </label>
@@ -246,6 +249,11 @@
               shadow-lg
               ring-1 ring-black ring-opacity-5
               bg-white
+               dark:border
+              dark:border-white/10
+              dark:bg-gray-800
+              dark:text-white
+              dark:shadow-glass
             "
           >
             <div class="relative">
@@ -265,6 +273,7 @@
                   overflow-auto
                   list
                   border-t border-gray-200
+                  dark:border-white/10
                 "
               >
                 <li
@@ -280,6 +289,7 @@
                     hover:cursor-pointer hover:bg-gray-100
                     focus:outline-none focus:bg-gray-100
                     last:border-b-0
+                    dark:border-white/10 dark:hover:bg-gray-700/30
                   "
                   @click="selectNewCustomer(customer.id, close)"
                 >
@@ -299,6 +309,7 @@
                       bg-gray-300
                       rounded-full
                       avatar
+                      dark:bg-gray-600
                     "
                   >
                     {{ initGenerator(customer.name) }}
@@ -333,9 +344,9 @@
                 </li>
                 <div
                   v-if="customerStore.customers.length === 0"
-                  class="flex justify-center p-5 text-gray-400"
+                  class="flex justify-center p-5 text-gray-400 dark:text-gray-300"
                 >
-                  <label class="text-base text-gray-500 cursor-pointer">
+                  <label class="text-base text-gray-500 cursor-pointer dark:text-gray-300">
                     {{ $t('customers.no_customers_found') }}
                   </label>
                 </div>
@@ -357,6 +368,10 @@
                 border-none
                 outline-none
                 focus:bg-gray-300
+                dark:bg-gray-600/70
+                dark:shadow-glass
+                dark:backdrop-blur-xl
+                dark:hover:bg-gray-600/80
               "
               @click="openCustomerModal"
             >
diff --git a/resources/scripts/components/base/BaseDarkHighlight.vue b/resources/scripts/components/base/BaseDarkHighlight.vue
new file mode 100644
index 000000000..f0b608cf7
--- /dev/null
+++ b/resources/scripts/components/base/BaseDarkHighlight.vue
@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="
+      hidden
+      top-0
+      w-full
+      absolute
+      ml-auto
+      mr-auto
+      left-0
+      right-0
+      text-center
+      h-full
+      rounded-full
+      bg-highlight/[.10]
+      blur-2xl
+      dark:block
+      z-[-1]
+    "
+  />
+</template>
diff --git a/resources/scripts/components/base/BaseDatePicker.vue b/resources/scripts/components/base/BaseDatePicker.vue
index c6eb24f1e..aac77c443 100644
--- a/resources/scripts/components/base/BaseDatePicker.vue
+++ b/resources/scripts/components/base/BaseDatePicker.vue
@@ -7,52 +7,109 @@
     />
   </BaseContentPlaceholders>
 
-  <div v-else :class="computedContainerClass" class="relative flex flex-row">
-    <svg
-      v-if="showCalendarIcon && !hasIconSlot"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-      class="
-        absolute
-        w-4
-        h-4
-        mx-2
-        my-2.5
-        text-sm
-        not-italic
-        font-black
-        text-gray-400
-        cursor-pointer
-      "
-      @click="onClickDp"
+  <div v-else :class="computedContainerClass">
+    <date-picker
+      ref="vCalendar"
+      v-model="date"
+      :mode="mode"
+      :is24hr="time24hr"
+      class="w-full"
+      color="indigo"
+      :input-debounce="500"
+      :update-on-input="false"
+      :is-range="false"
+      trim-weeks
+      :is-required="isRequired"
+      :popover="{
+        visibility: disabled ? 'hidden' : 'focus',
+        showDelay: 0,
+        hideDelay: 1,
+      }"
+      :attributes="attrs"
+      :model-config="config"
+      :masks="masks"
+      :is-dark="isDarkModeOn"
+      :locale="global.locale"
     >
-      <path
-        fill-rule="evenodd"
-        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-        clip-rule="evenodd"
-      ></path>
-    </svg>
+      <template
+        #default="{ inputValue, inputEvents, togglePopover, hidePopover }"
+      >
+        <!-- calendar icon -->
+        <svg
+          v-if="showCalendarIcon && !hasIconSlot"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          class="
+            absolute
+            w-4
+            h-4
+            mx-2
+            my-2.5
+            text-sm
+            not-italic
+            font-black
+            text-gray-400
+            cursor-pointer
+          "
+          @click="togglePopover()"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
 
-    <slot v-if="showCalendarIcon && hasIconSlot" name="icon" />
+        <slot v-if="showCalendarIcon && hasIconSlot" name="icon" />
 
-    <FlatPickr
-      ref="dp"
-      v-model="date"
-      v-bind="$attrs"
-      :disabled="disabled"
-      :config="config"
-      :class="[defaultInputClass, inputInvalidClass, inputDisabledClass]"
-    />
+        <input
+          :value="inputValue"
+          :class="[defaultInputClass, inputInvalidClass, inputDisabledClass]"
+          readonly
+          v-on="inputEvents"
+          @blur="hidePopover()"
+        />
+      </template>
+
+      <template v-if="showExtraOptions" #footer>
+        <div
+          class="bg-gray-100 dark:bg-gray-800 grid grid-cols-3 gap-2 p-2 border-t dark:border-gray-500 rounded-b-lg"
+        >
+          <button type="button" class="extra-button" @click="moveToDate(sourceDate)">
+            {{ global.t('date_picker.same_day') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(7)">
+            {{ global.t('date_picker.within_7_days') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(15)">
+            {{ global.t('date_picker.within_15_days') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(30)">
+            {{ global.t('date_picker.within_30_days') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(45)">
+            {{ global.t('date_picker.within_45_days') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(60)">
+            {{ global.t('date_picker.within_60_days') }}
+          </button>
+        </div>
+      </template>
+    </date-picker>
   </div>
 </template>
 
 <script type="text/babel" setup>
-import FlatPickr from 'vue-flatpickr-component'
-import 'flatpickr/dist/flatpickr.css'
+import { Calendar, DatePicker } from 'v-calendar'
+import 'v-calendar/dist/style.css'
 import { computed, reactive, watch, ref, useSlots } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const dp = ref(null)
+import moment from 'moment'
 
 const props = defineProps({
   modelValue: {
@@ -90,40 +147,38 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
+      'border-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
   },
   time24hr: {
     type: Boolean,
     default: false,
   },
+  isRequired: {
+    type: Boolean,
+    default: false,
+  },
+  showExtraOptions: {
+    type: Boolean,
+    default: false,
+  },
+  sourceDate: {
+    type: [String, Date],
+    default: () => new Date(),
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
-
 const slots = useSlots()
-
 const companyStore = useCompanyStore()
-
-let config = reactive({
-  altInput: true,
-  enableTime: props.enableTime,
-  time_24hr: props.time24hr,
-})
-
-const date = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-
-const carbonFormat = computed(() => {
-  return companyStore.selectedCompanySettings?.carbon_date_format
-})
+const { global } = window.i18n
+const vCalendar = ref(null)
 
 const hasIconSlot = computed(() => {
   return !!slots.icon
 })
+const isDarkModeOn = computed(() =>
+  document.documentElement.classList.contains('dark')
+)
 
 const computedContainerClass = computed(() => {
   let containerClass = `${props.containerClass} `
@@ -135,7 +190,6 @@ const inputInvalidClass = computed(() => {
   if (props.invalid) {
     return 'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400'
   }
-
   return ''
 })
 
@@ -143,35 +197,97 @@ const inputDisabledClass = computed(() => {
   if (props.disabled) {
     return 'border border-solid rounded-md outline-none input-field box-border-2 base-date-picker-input placeholder-gray-400 bg-gray-200 text-gray-600 border-gray-200'
   }
-
   return ''
 })
 
-function onClickDp(params) {
-  dp.value.fp.open()
+// to convert YYYY-MM-DD | YYYY-MM-DD HH:mm format
+function convertYMDFormat(date) {
+  let format = props.enableTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'
+  return date ? moment(date).format(format) : date
 }
 
-watch(
-  () => props.enableTime,
-  (val) => {
-    if (props.enableTime) {
-      config.enableTime = props.enableTime
-    }
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
   },
-  { immediate: true }
-)
+})
+
+const mode = computed(() => {
+  return props.enableTime ? 'dateTime' : 'date'
+})
+
+const config = reactive({
+  type: 'string',
+  mask: 'YYYY-MM-DD', // Uses 'iso' if missing
+  //timeAdjust: '00:00:00',
+})
+
+const masks = reactive({
+  input: null,
+  inputDateTime: null,
+  inputDateTime24hr: null,
+})
+
+const attrs = reactive([
+  {
+    dates: new Date(),
+    highlight: {
+      fillMode: 'outline',
+    },
+    /* popover: {
+      label: 'Today Date',
+      visibility: 'hover',
+    }, */
+  },
+])
+
+const carbonFormat = computed(() => {
+  return companyStore.selectedCompanySettings?.moment_date_format
+})
 
 watch(
   () => carbonFormat,
   () => {
     if (!props.enableTime) {
-      config.altFormat = carbonFormat.value ? carbonFormat.value : 'd M Y'
+      masks.input = carbonFormat.value ? carbonFormat.value : 'DD MMM YYYY'
+      config.mask = 'YYYY-MM-DD'
     } else {
-      config.altFormat = carbonFormat.value
-        ? `${carbonFormat.value} H:i `
-        : 'd M Y H:i'
+      let timeFormat = 'HH:mm'
+      if (props.time24hr) {
+        masks.inputDateTime24hr = carbonFormat.value
+          ? `${carbonFormat.value} ${timeFormat}`
+          : `DD MMM YYYY ${timeFormat}`
+      } else {
+        masks.inputDateTime = carbonFormat.value
+          ? `${carbonFormat.value} ${timeFormat}`
+          : `DD MMM YYYY ${timeFormat}`
+      }
+      config.mask = `YYYY-MM-DD ${timeFormat}`
     }
   },
   { immediate: true }
 )
+
+async function moveToDate(_date) {
+  const calendar = vCalendar.value
+  _date = _date ? _date : convertYMDFormat(new Date())
+  date.value = _date
+  // await calendar.move(_date)
+  calendar.hidePopover()
+}
+
+async function withInDays(noOfDays) {
+  if (!noOfDays) return false
+
+  let newDate = moment(props.sourceDate).add(noOfDays, 'days').toDate()
+  newDate = convertYMDFormat(newDate)
+  moveToDate(newDate)
+}
 </script>
+
+<style scoped>
+.extra-button {
+  @apply bg-primary-500 text-white text-sm font-semibold px-2 py-1 rounded hover:bg-primary-700;
+}
+</style>
diff --git a/resources/scripts/components/base/BaseDescriptionListItem.vue b/resources/scripts/components/base/BaseDescriptionListItem.vue
index 6140fc4b4..d9c710e32 100644
--- a/resources/scripts/components/base/BaseDescriptionListItem.vue
+++ b/resources/scripts/components/base/BaseDescriptionListItem.vue
@@ -10,7 +10,7 @@
         {{ label }}
       </BaseLabel>
 
-      <p class="text-sm font-bold leading-5 text-black non-italic">
+      <p class="text-sm font-bold leading-5 text-black non-italic dark:text-white">
         {{ value }}
 
         <slot />
diff --git a/resources/scripts/components/base/BaseDialog.vue b/resources/scripts/components/base/BaseDialog.vue
index 81906cf95..07a8261b0 100644
--- a/resources/scripts/components/base/BaseDialog.vue
+++ b/resources/scripts/components/base/BaseDialog.vue
@@ -30,8 +30,13 @@
           leave-to="opacity-0"
         >
           <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
+            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:backdrop-blur-xl dark:bg-gray-900/80"
+          >
+           <BaseDarkHighlight
+            class="!bg-highlight/[.17] !top-1/2 h-60 -translate-y-1/2 mt-5"
+            :class="dialogSizeClasses"
           />
+          </DialogOverlay>
         </TransitionChild>
 
         <!-- This element is to trick the browser into centering the modal contents. -->
@@ -64,6 +69,11 @@
               shadow-xl
               sm:my-8 sm:align-middle sm:w-full sm:p-6
               relative
+              dark:backdrop-blur-xl
+              dark:shadow-glass
+              dark:border
+              dark:border-white/10
+              dark:bg-gray-800
             "
             :class="dialogSizeClasses"
           >
@@ -80,31 +90,31 @@
                   rounded-full
                 "
                 :class="{
-                  'bg-green-100': dialogStore.variant === 'primary',
-                  'bg-red-100': dialogStore.variant === 'danger',
+                  'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
+                  'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
                 }"
               >
                 <BaseIcon
                   v-if="dialogStore.variant === 'primary'"
                   name="CheckIcon"
-                  class="w-6 h-6 text-green-600"
+                  class="w-6 h-6 text-green-600 dark:text-white"
                 />
                 <BaseIcon
                   v-else
                   name="ExclamationIcon"
-                  class="w-6 h-6 text-red-600"
+                  class="w-6 h-6 text-red-600 dark:text-white"
                   aria-hidden="true"
                 />
               </div>
               <div class="mt-3 text-center sm:mt-5">
                 <DialogTitle
                   as="h3"
-                  class="text-lg font-medium leading-6 text-gray-900"
+                  class="text-lg font-medium leading-6 text-gray-900 dark:text-white"
                 >
                   {{ dialogStore.title }}
                 </DialogTitle>
                 <div class="mt-2">
-                  <p class="text-sm text-gray-500">
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
                     {{ dialogStore.message }}
                   </p>
                 </div>
diff --git a/resources/scripts/components/base/BaseDivider.vue b/resources/scripts/components/base/BaseDivider.vue
index 327cfe0eb..fbe3edaad 100644
--- a/resources/scripts/components/base/BaseDivider.vue
+++ b/resources/scripts/components/base/BaseDivider.vue
@@ -1,3 +1,3 @@
 <template>
-  <hr class="w-full text-gray-300" />
+  <div class="w-full h-px bg-gray-300 dark:bg-gray-600" />
 </template>
diff --git a/resources/scripts/components/base/BaseDropdown.vue b/resources/scripts/components/base/BaseDropdown.vue
index 453f179a2..5c2c7d57a 100644
--- a/resources/scripts/components/base/BaseDropdown.vue
+++ b/resources/scripts/components/base/BaseDropdown.vue
@@ -69,7 +69,8 @@ const props = defineProps({
 })
 
 const containerClasses = computed(() => {
-  const baseClass = `origin-top-right rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none`
+  const baseClass = `dark:border dark:border-white/10 dark:text-white dark:bg-gray-800 dark:shadow-glass
+  origin-top-right rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none`
   return `${baseClass} ${props.containerClass}`
 })
 
diff --git a/resources/scripts/components/base/BaseDropdownItem.vue b/resources/scripts/components/base/BaseDropdownItem.vue
index 9439d3577..9c82f8516 100644
--- a/resources/scripts/components/base/BaseDropdownItem.vue
+++ b/resources/scripts/components/base/BaseDropdownItem.vue
@@ -2,16 +2,20 @@
   <MenuItem v-slot="{ active }" v-bind="$attrs">
     <a
       href="#"
+      class="group flex items-center px-4 py-2 text-sm font-normal"
       :class="[
-        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-        'group flex items-center px-4 py-2 text-sm font-normal',
+        active
+          ? 'bg-gray-100 text-gray-900 dark:text-white dark:bg-gray-700'
+          : 'text-gray-700 dark:text-gray-200',
       ]"
     >
-      <slot :active="active" />
+      <slot :active="active" :class="defaultIconClass" />
     </a>
   </MenuItem>
 </template>
 
 <script setup>
 import { MenuItem } from '@headlessui/vue'
+const defaultIconClass =
+  'w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-white'
 </script>
diff --git a/resources/scripts/components/base/BaseEmptyPlaceholder.vue b/resources/scripts/components/base/BaseEmptyPlaceholder.vue
index c89265d69..37a7832ce 100644
--- a/resources/scripts/components/base/BaseEmptyPlaceholder.vue
+++ b/resources/scripts/components/base/BaseEmptyPlaceholder.vue
@@ -1,18 +1,24 @@
 <template>
   <div class="flex flex-col items-center justify-center mt-16">
-    <div class="flex flex-col items-center justify-center">
-      <slot></slot>
-    </div>
-    <div class="mt-2">
-      <label class="font-medium">{{ title }}</label>
-    </div>
-    <div class="mt-2">
-      <label class="text-gray-500">
-        {{ description }}
-      </label>
-    </div>
-    <div class="mt-6">
-      <slot name="actions" />
+    <div class="relative">
+      <BaseDarkHighlight class="bg-highlight/[.07] top-2" />
+
+      <div class="relative z-5 flex flex-col items-center">
+        <div class="flex flex-col items-center justify-center">
+          <slot />
+        </div>
+        <div class="mt-2">
+          <label class="font-medium">{{ title }}</label>
+        </div>
+        <div class="mt-2 text-center md:text-left">
+          <label class="text-gray-500 dark:text-gray-400">
+            {{ description }}
+          </label>
+        </div>
+        <div class="mt-6">
+          <slot name="actions" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/resources/scripts/components/base/BaseErrorAlert.vue b/resources/scripts/components/base/BaseErrorAlert.vue
index 6e7060683..94091f2b1 100644
--- a/resources/scripts/components/base/BaseErrorAlert.vue
+++ b/resources/scripts/components/base/BaseErrorAlert.vue
@@ -1,11 +1,18 @@
 <template>
-  <div class="rounded-md bg-red-50 p-4">
+  <div
+    class="
+      rounded-md
+      bg-red-50
+      p-4
+      dark:border dark:border-red-400 dark:bg-transparent
+    "
+  >
     <div class="flex">
       <div class="shrink-0">
-        <XCircleIcon class="h-5 w-5 text-red-400" aria-hidden="true" />
+        <XCircleIcon class="h-5 w-5 text-red-400 dark:text-red-500" aria-hidden="true" />
       </div>
       <div class="ml-3">
-        <h3 class="text-sm font-medium text-red-800">
+        <h3 class="text-sm font-medium text-red-800 dark:text-red-500">
           {{ errorTitle }}
         </h3>
         <div class="mt-2 text-sm text-red-700">
diff --git a/resources/scripts/components/base/BaseEstimateStatusBadge.vue b/resources/scripts/components/base/BaseEstimateStatusBadge.vue
index 925e72ef2..002fd1cd5 100644
--- a/resources/scripts/components/base/BaseEstimateStatusBadge.vue
+++ b/resources/scripts/components/base/BaseEstimateStatusBadge.vue
@@ -18,17 +18,17 @@ const props = defineProps({
 const badgeColorClasses = computed(() => {
   switch (props.status) {
     case 'DRAFT':
-      return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center '
+      return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
     case 'SENT':
-      return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center '
+      return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-200 dark:text-yellow-200'
     case 'VIEWED':
-      return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+      return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
     case 'EXPIRED':
-      return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm  text-red-800 uppercase font-normal text-center'
+      return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm  text-red-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
     case 'ACCEPTED':
-      return 'bg-green-400 bg-opacity-25 px-2 py-1 text-sm  text-green-800 uppercase font-normal text-center'
+      return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
     case 'REJECTED':
-      return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm  text-purple-800 uppercase font-normal text-center'
+      return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm  text-purple-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-purple-400 dark:text-purple-400'
     default:
       return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
   }
diff --git a/resources/scripts/components/base/BaseFileUploader.vue b/resources/scripts/components/base/BaseFileUploader.vue
index 6fc78c561..c7a771661 100644
--- a/resources/scripts/components/base/BaseFileUploader.vue
+++ b/resources/scripts/components/base/BaseFileUploader.vue
@@ -21,6 +21,7 @@
       group
       min-h-[100px]
       bg-gray-50
+      dark:bg-gray-700 dark:border-gray-600
     "
     :class="avatar ? 'w-32 h-32' : 'w-full'"
   >
@@ -49,7 +50,7 @@
 
       <a
         href="#"
-        class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group"
+        class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group dark:bg-gray-900"
         @click.prevent.stop="onBrowse"
       >
         <BaseIcon
@@ -95,7 +96,7 @@
 
     <div
       v-else-if="localFiles.length && avatar && !multiple"
-      class="flex w-full h-full border border-gray-200 rounded"
+      class="flex w-full h-full border border-gray-200 rounded dark:border-gray-600"
     >
       <img
         v-if="localFiles[0].image"
@@ -169,10 +170,11 @@
           -right-3
           group
           hover:border-gray-300
+          dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
         "
         @click.prevent.stop="onAvatarRemove(localFiles[0])"
       >
-        <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
+        <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
       </a>
     </div>
 
@@ -195,6 +197,7 @@
           hover:border-gray-500
           relative
           max-w-md
+          dark:border-gray-600 dark:bg-transparent dark:hover:border-gray-700
         "
         @click.prevent
       >
@@ -270,6 +273,7 @@
             -right-3
             group
             hover:border-gray-300
+            dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
           "
           @click.prevent.stop="onFileRemove(index)"
         >
@@ -293,6 +297,7 @@
           hover:border-gray-500
           relative
           max-w-md
+          dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-700
         "
         @click.prevent
       >
@@ -368,10 +373,11 @@
             -right-3
             group
             hover:border-gray-300
+            dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
           "
           @click.prevent.stop="onFileRemove(index)"
         >
-          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
+          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
         </a>
       </a>
     </div>
diff --git a/resources/scripts/components/base/BaseFilterWrapper.vue b/resources/scripts/components/base/BaseFilterWrapper.vue
index 5db8358c9..24fac54b1 100644
--- a/resources/scripts/components/base/BaseFilterWrapper.vue
+++ b/resources/scripts/components/base/BaseFilterWrapper.vue
@@ -7,7 +7,7 @@
     leave-from-class="opacity-100"
     leave-to-class="opacity-0"
   >
-    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded">
+    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded dark:bg-gray-800">
       <slot name="filter-header" />
 
       <label
@@ -20,6 +20,7 @@
           hover:text-gray-700
           top-2.5
           right-3.5
+          dark:text-gray-300
         "
         @click="$emit('clear')"
       >
diff --git a/resources/scripts/components/base/BaseHeading.vue b/resources/scripts/components/base/BaseHeading.vue
index 821a8ffa4..df493dd24 100644
--- a/resources/scripts/components/base/BaseHeading.vue
+++ b/resources/scripts/components/base/BaseHeading.vue
@@ -2,6 +2,21 @@
   <h6 :class="typeClass">
     <slot />
   </h6>
+  
+  <p
+    v-if="subtitle"
+    class="
+      mt-2
+      text-sm
+      leading-snug
+      text-gray-500
+      dark:text-gray-400
+      max-w-[680px]
+    "
+  >
+    {{ subtitle }}
+  </p>
+
 </template>
 
 <script setup>
@@ -14,12 +29,16 @@ const props = defineProps({
       return ['section-title', 'heading-title'].indexOf(value) !== -1
     },
   },
+  subtitle: {
+    type: String,
+    default: '',
+  },
 })
 
 const typeClass = computed(() => {
   return {
-    'text-gray-900 text-lg font-medium': props.type === 'heading-title',
-    'text-gray-500 uppercase text-base': props.type === 'section-title',
+    'text-gray-900 text-lg font-medium dark:text-white': props.type === 'heading-title',
+    'text-gray-500 uppercase text-base dark:text-gray-300': props.type === 'section-title',
   }
 })
 </script>
diff --git a/resources/scripts/components/base/BaseInput.vue b/resources/scripts/components/base/BaseInput.vue
index 28cd89c23..fcf59debc 100644
--- a/resources/scripts/components/base/BaseInput.vue
+++ b/resources/scripts/components/base/BaseInput.vue
@@ -65,6 +65,7 @@
         rounded-l-md
         bg-gray-50
         sm:text-sm
+        dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
       "
     >
       {{ addon }}
@@ -82,14 +83,14 @@
         pointer-events-none
       "
     >
-      <span class="text-gray-500 sm:text-sm">
+      <span class="text-gray-500 dark:text-white sm:text-sm ">
         {{ inlineAddon }}
       </span>
     </div>
 
     <input
       v-bind="$attrs"
-      :type="type"
+      :type="getType"
       :value="modelValue"
       :disabled="disabled"
       :class="[
@@ -143,6 +144,44 @@
     >
       <slot name="right" :class="iconRightClass" />
     </div>
+    <div
+      v-if="loading && loadingPosition === 'right'" class="
+        absolute
+        inset-y-0
+        right-0
+        flex
+        items-center
+        pr-3
+        pointer-events-none
+      "
+    >
+      <svg
+        class="animate-spin !text-primary-500" :class="[iconRightClass]" xmlns="http://www.w3.org/2000/svg"
+        fill="none" viewBox="0 0 24 24"
+      >
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+        <path
+          class="opacity-75" fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    </div>
+
+    <div v-if="hasRightIconSlot" class="absolute inset-y-0 right-0 flex items-center pr-3">
+      <slot name="right" :class="iconRightClass" />
+    </div>
+
+    <div v-if="type == 'password'" class="absolute inset-y-0 right-0 flex items-center pr-3">
+      <a
+        v-if="isShowPassword" href="#" class="block" data-cy="eye" tabindex="-1"
+        @click.prevent="isShowPassword = !isShowPassword"
+      >
+        <BaseIcon name="EyeOffIcon" class="w-5 h-5 mr-1 text-gray-500 cursor-pointer" />
+      </a>
+      <a v-else href="#" class="block" data-cy="eye" tabindex="-1" @click.prevent="isShowPassword = !isShowPassword">
+        <BaseIcon name="EyeIcon" class="w-5 h-5 mr-1 text-gray-500 cursor-pointer" />
+      </a>
+    </div>
   </div>
 </template>
 
@@ -199,7 +238,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
+      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black  dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500',
   },
   iconLeftClass: {
     type: String,
@@ -218,6 +257,15 @@ const slots = useSlots()
 
 const emit = defineEmits(['update:modelValue'])
 
+const isShowPassword = ref(false)
+
+const getType = computed(() => {
+  if (props.type === 'password')
+    return isShowPassword.value ? 'text' : 'password'
+
+  return props.type
+})
+
 const hasLeftIconSlot = computed(() => {
   return !!slots.left || (props.loading && props.loadingPosition === 'left')
 })
@@ -250,7 +298,8 @@ const inputAddonClass = computed(() => {
 
 const inputInvalidClass = computed(() => {
   if (props.invalid) {
-    return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
+    return 'border-red-500 dark:border-red-500 ring-red-500 dark:ring-red-500 focus:ring-red-500 dark:focus:ring-red-500  focus:border-red-500  dark:focus:border-red-500  '
+
   }
 
   return 'focus:ring-primary-400 focus:border-primary-400'
@@ -258,7 +307,7 @@ const inputInvalidClass = computed(() => {
 
 const inputDisabledClass = computed(() => {
   if (props.disabled) {
-    return `border-gray-100 bg-gray-100 !text-gray-400 ring-gray-200 focus:ring-gray-200 focus:border-gray-100`
+    return `border-gray-100 bg-gray-100 !text-gray-400 dark:!text-gray-200   ring-gray-200 focus:ring-gray-200 focus:border-gray-100 dark:opacity-25 `
   }
 
   return ''
diff --git a/resources/scripts/components/base/BaseInputGroup.vue b/resources/scripts/components/base/BaseInputGroup.vue
index 31d83fb9a..d5eddc272 100644
--- a/resources/scripts/components/base/BaseInputGroup.vue
+++ b/resources/scripts/components/base/BaseInputGroup.vue
@@ -15,6 +15,7 @@
         text-gray-800
         whitespace-nowrap
         justify-between
+        dark:text-gray-300
       "
     >
       <div>
@@ -31,7 +32,7 @@
     </label>
     <div :class="inputContainerClasses">
       <slot></slot>
-      <span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light">
+      <span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light dark:text-gray-400">
         {{ helpText }}
       </span>
       <span v-if="error" class="block mt-0.5 text-sm text-red-500">
diff --git a/resources/scripts/components/base/BaseInvoiceStatusBadge.vue b/resources/scripts/components/base/BaseInvoiceStatusBadge.vue
index a4238e013..33e1335dc 100644
--- a/resources/scripts/components/base/BaseInvoiceStatusBadge.vue
+++ b/resources/scripts/components/base/BaseInvoiceStatusBadge.vue
@@ -20,25 +20,25 @@ export default {
     const badgeColorClasses = computed(() => {
       switch (props.status) {
         case 'DRAFT':
-          return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center'
+          return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
         case 'SENT':
-          return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center '
+          return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-lime-200 dark:text-yellow-200'
         case 'VIEWED':
-          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
         case 'COMPLETED':
-          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center'
+          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
         case 'DUE':
-          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
+          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
         case 'OVERDUE':
-          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center'
+          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
         case 'UNPAID':
-          return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
+          return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
         case 'PARTIALLY_PAID':
-          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
         case 'PAID':
-          return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm  text-green-900 uppercase font-normal text-center'
+          return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
         default:
-          return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
+          return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-502 dark:text-gray-200'
       }
     })
     return { badgeColorClasses }
diff --git a/resources/scripts/components/base/BaseItemSelect.vue b/resources/scripts/components/base/BaseItemSelect.vue
index e5955a543..0ad1629a5 100644
--- a/resources/scripts/components/base/BaseItemSelect.vue
+++ b/resources/scripts/components/base/BaseItemSelect.vue
@@ -12,6 +12,7 @@
         bg-gray-200
         border border-gray-200 border-solid
         rounded
+        dark:bg-gray-900/70 dark:border-gray-700
       "
     >
       {{ item.name }}
diff --git a/resources/scripts/components/base/BaseLabel.vue b/resources/scripts/components/base/BaseLabel.vue
index 2b5671d12..cedfc8166 100644
--- a/resources/scripts/components/base/BaseLabel.vue
+++ b/resources/scripts/components/base/BaseLabel.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="text-sm not-italic font-medium leading-5 text-primary-800">
+  <label class="text-sm not-italic font-medium leading-5 text-gray-500 dark:text-gray-300">
     <slot />
   </label>
 </template>
diff --git a/resources/scripts/components/base/BaseModal.vue b/resources/scripts/components/base/BaseModal.vue
index bb55fddca..0a83dc386 100644
--- a/resources/scripts/components/base/BaseModal.vue
+++ b/resources/scripts/components/base/BaseModal.vue
@@ -29,8 +29,21 @@
             leave-to="opacity-0"
           >
             <DialogOverlay
-              class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
-            />
+              class="
+              fixed
+              inset-0
+              transition-opacity
+              bg-gray-700
+              bg-opacity-25
+              dark:backdrop-blur-sm
+              dark:bg-gray-900/80
+              "
+            >
+              <BaseDarkHighlight
+                class="!bg-highlight/[.17] !top-1/2 -translate-y-1/2 mt-5 h-96"
+                :class="modalSize"
+              />
+            </DialogOverlay>
           </TransitionChild>
 
           <!-- This element is to trick the browser into centering the modal contents. -->
@@ -61,7 +74,11 @@
               my-4
               ${modalSize}
               sm:w-full
-              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
+              dark:shadow-glass
+              dark:border
+              dark:border-white/10
+              dark:bg-gray-800/90
+              border-t-8 border-solid rounded shadow-xl border-primary-500`"
             >
               <div
                 v-if="hasHeaderSlot"
@@ -74,6 +91,8 @@
                   text-lg
                   font-medium
                   text-black
+                  dark:text-white
+                  dark:border-gray-600
                   border-b border-gray-200 border-solid
                 "
               >
diff --git a/resources/scripts/components/base/BaseModalFooter.vue b/resources/scripts/components/base/BaseModalFooter.vue
new file mode 100644
index 000000000..780464c2f
--- /dev/null
+++ b/resources/scripts/components/base/BaseModalFooter.vue
@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="
+      z-0
+      flex
+      justify-end
+      p-4
+      border-t border-gray-200 border-solid
+      dark:border-gray-600
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/scripts/components/base/BaseMoney.vue b/resources/scripts/components/base/BaseMoney.vue
index bdc4f89e2..383a36ce8 100644
--- a/resources/scripts/components/base/BaseMoney.vue
+++ b/resources/scripts/components/base/BaseMoney.vue
@@ -39,7 +39,7 @@ const props = defineProps({
   inputClass: {
     type: String,
     default:
-      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
+      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black  dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500',
   },
   disabled: {
     type: Boolean,
@@ -86,7 +86,7 @@ const currencyBindings = computed(() => {
 
 const invalidClass = computed(() => {
   if (props.invalid) {
-    return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
+    return 'border-red-500 dark:border-red-500 ring-red-500 dark:ring-red-500 focus:ring-red-500 dark:focus:ring-red-500 focus:border-red-500 dark:focus:border-red-500'
   }
   return 'focus:ring-primary-400 focus:border-primary-400'
 })
diff --git a/resources/scripts/components/base/BasePageHeader.vue b/resources/scripts/components/base/BasePageHeader.vue
index b85b53899..0c8ba4f7a 100644
--- a/resources/scripts/components/base/BasePageHeader.vue
+++ b/resources/scripts/components/base/BasePageHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-wrap justify-between">
     <div>
-      <h3 class="text-2xl font-bold text-left text-black">
+      <h3 class="text-2xl font-bold text-left text-black dark:text-white">
         {{ title }}
       </h3>
       <slot />
diff --git a/resources/scripts/components/base/BasePaidStatusBadge.vue b/resources/scripts/components/base/BasePaidStatusBadge.vue
index 2a99872ee..379b2bc27 100644
--- a/resources/scripts/components/base/BasePaidStatusBadge.vue
+++ b/resources/scripts/components/base/BasePaidStatusBadge.vue
@@ -24,15 +24,15 @@ export default {
     const badgeColorClasses = computed(() => {
       switch (props.status) {
         case 'PAID':
-          return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center'
+          return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-indigo-400 dark:text-indigo-400'
         case 'UNPAID':
-          return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center '
+          return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-orange-300 dark:text-orange-300'
         case 'PARTIALLY_PAID':
-          return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
         case 'OVERDUE':
-          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center'
+          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
         default:
-          return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center'
+          return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-300 dark:text-gray-300'
       }
     })
     return { badgeColorClasses }
diff --git a/resources/scripts/components/base/BaseRadio.vue b/resources/scripts/components/base/BaseRadio.vue
index c5347182a..e0adf9b95 100644
--- a/resources/scripts/components/base/BaseRadio.vue
+++ b/resources/scripts/components/base/BaseRadio.vue
@@ -19,7 +19,7 @@
             ]"
             aria-hidden="true"
           >
-            <span class="rounded-full bg-white w-1.5 h-1.5" />
+            <span class="rounded-full w-1.5 h-1.5"  :class="{ 'bg-white': checked }"/>
           </span>
           <div class="flex flex-col ml-3">
             <RadioGroupLabel
@@ -66,11 +66,11 @@ const props = defineProps({
   },
   checkedStateClass: {
     type: String,
-    default: 'bg-primary-600',
+    default: 'bg-primary-600 ',
   },
   unCheckedStateClass: {
     type: String,
-    default: 'bg-white ',
+    default: 'bg-white dark:bg-transparent',
   },
   optionGroupActiveStateClass: {
     type: String,
@@ -78,16 +78,16 @@ const props = defineProps({
   },
   checkedStateLabelClass: {
     type: String,
-    default: 'text-primary-900 ',
+    default: 'text-primary-900 dark:text-primary-400',
   },
   unCheckedStateLabelClass: {
     type: String,
-    default: 'text-gray-900',
+    default: 'text-gray-900 dark:text-white',
   },
   optionGroupClass: {
     type: String,
     default:
-      'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
+      'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center dark:border-gray-600',
   },
   optionGroupLabelClass: {
     type: String,
diff --git a/resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue b/resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue
index 4f33d132d..c1a0a7973 100644
--- a/resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue
+++ b/resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue
@@ -20,11 +20,11 @@ export default {
     const badgeColorClasses = computed(() => {
       switch (props.status) {
         case 'COMPLETED':
-          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center'
+          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
         case 'ON_HOLD':
-          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
+          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-200 dark:text-yellow-200'
         case 'ACTIVE':
-          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
         default:
           return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
       }
diff --git a/resources/scripts/components/base/BaseSelectAction.vue b/resources/scripts/components/base/BaseSelectAction.vue
index 5fc53ca23..4f2e8a991 100644
--- a/resources/scripts/components/base/BaseSelectAction.vue
+++ b/resources/scripts/components/base/BaseSelectAction.vue
@@ -11,6 +11,10 @@
       bg-gray-200
       cursor-pointer
       text-primary-400
+      dark:bg-gray-600/70
+      dark:backdrop-blur-xl
+      dark:shadow-glass
+      dark:hover:bg-gray-600/80
     "
   >
     <slot />
diff --git a/resources/scripts/components/base/BaseSelectInput.vue b/resources/scripts/components/base/BaseSelectInput.vue
index cbb7c5130..fdb103bf6 100644
--- a/resources/scripts/components/base/BaseSelectInput.vue
+++ b/resources/scripts/components/base/BaseSelectInput.vue
@@ -12,7 +12,7 @@
   >
     <ListboxLabel
       v-if="label"
-      class="block text-sm not-italic font-medium text-gray-800 mb-0.5"
+      class="block text-sm not-italic font-medium text-gray-800 mb-0.5 dark:text-white"
     >
       {{ label }}
     </ListboxLabel>
@@ -28,14 +28,13 @@
           pr-10
           text-left
           bg-white
-          border border-gray-200
+          dark:bg-gray-700
           rounded-md
           shadow-sm
           cursor-default
           focus:outline-none
           focus:ring-1
-          focus:ring-primary-500
-          focus:border-primary-500
+          focus:ring-primary-400 focus:border-primary-400
           sm:text-sm
         "
       >
@@ -89,6 +88,7 @@
             ring-1 ring-black ring-opacity-5
             focus:outline-none
             sm:text-sm
+            dark:bg-gray-700
           "
         >
           <ListboxOption
@@ -100,7 +100,7 @@
           >
             <li
               :class="[
-                active ? 'text-white bg-primary-600' : 'text-gray-900',
+                active ? 'text-white bg-primary-600' : 'text-gray-900 dark:text-white',
                 'cursor-default select-none relative py-2 pl-3 pr-9',
               ]"
             >
diff --git a/resources/scripts/components/base/BaseSettingCard.vue b/resources/scripts/components/base/BaseSettingCard.vue
index 99db28976..5a1e1241b 100644
--- a/resources/scripts/components/base/BaseSettingCard.vue
+++ b/resources/scripts/components/base/BaseSettingCard.vue
@@ -11,7 +11,7 @@
             mt-2
             text-sm
             leading-snug
-            text-left text-gray-500
+            text-left text-gray-500 dark:text-gray-400
             max-w-[680px]
           "
         >
diff --git a/resources/scripts/components/base/BaseSwitch.vue b/resources/scripts/components/base/BaseSwitch.vue
index fd774645a..02eb62c0f 100644
--- a/resources/scripts/components/base/BaseSwitch.vue
+++ b/resources/scripts/components/base/BaseSwitch.vue
@@ -7,7 +7,7 @@
 
       <Switch
         v-model="enabled"
-        :class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
+        :class="enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-900'"
         class="
           relative
           inline-flex
@@ -21,7 +21,11 @@
         v-bind="$attrs"
       >
         <span
-          :class="enabled ? 'translate-x-6' : 'translate-x-1'"
+          :class="
+            enabled
+              ? 'translate-x-6 dark:bg-white'
+              : 'translate-x-1 dark:bg-gray-500'
+          "
           class="
             inline-block
             w-4
diff --git a/resources/scripts/components/base/BaseSwitchSection.vue b/resources/scripts/components/base/BaseSwitchSection.vue
index 216a15525..fef235b72 100644
--- a/resources/scripts/components/base/BaseSwitchSection.vue
+++ b/resources/scripts/components/base/BaseSwitchSection.vue
@@ -5,12 +5,12 @@
     <div class="flex flex-col">
       <SwitchLabel
         as="p"
-        class="p-0 mb-1 text-sm leading-snug text-black font-medium"
+        class="p-0 mb-1 text-sm leading-snug text-black font-medium dark:text-white"
         passive
       >
         {{ title }}
       </SwitchLabel>
-      <SwitchDescription class="text-sm text-gray-500">
+      <SwitchDescription class="text-sm text-gray-500 dark:text-gray-400">
         {{ description }}
       </SwitchDescription>
     </div>
@@ -18,7 +18,7 @@
       :disabled="disabled"
       :model-value="modelValue"
       :class="[
-        modelValue ? 'bg-primary-500' : 'bg-gray-200',
+        modelValue ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-900',
         'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
       ]"
       @update:modelValue="onUpdate"
@@ -26,7 +26,7 @@
       <span
         aria-hidden="true"
         :class="[
-          modelValue ? 'translate-x-5' : 'translate-x-0',
+          modelValue ? 'translate-x-5 dark:bg-white' : 'translate-x-0 dark:bg-gray-500',
           'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
         ]"
       />
diff --git a/resources/scripts/components/base/BaseTabGroup.vue b/resources/scripts/components/base/BaseTabGroup.vue
index ea84ca12b..a7dcce178 100644
--- a/resources/scripts/components/base/BaseTabGroup.vue
+++ b/resources/scripts/components/base/BaseTabGroup.vue
@@ -1,9 +1,13 @@
 <template>
   <div>
-    <TabGroup :default-index="defaultIndex" @change="onChange">
+    <TabGroup
+      :selected-index="selectedIndex"
+      :default-index="defaultIndex"
+      @change="onChange"
+    >
       <TabList
         :class="[
-          'flex border-b border-grey-light',
+          'flex border-b border-grey-light dark:border-gray-600',
           'relative overflow-x-auto overflow-y-hidden',
           'lg:pb-0 lg:ml-0',
         ]"
@@ -18,8 +22,8 @@
             :class="[
               'px-8 py-2 text-sm leading-5 font-medium flex items-center relative border-b-2 mt-4 focus:outline-none whitespace-nowrap',
               selected
-                ? ' border-primary-400 text-black font-medium'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                ? 'border-primary-400 text-black font-medium dark:text-white'
+                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:border-gray-500',
             ]"
           >
             {{ tab.title }}
@@ -54,6 +58,10 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  selectedIndex: {
+    type: Number,
+    default: 0,
+  },
   filter: {
     type: String,
     default: null,
@@ -67,6 +75,6 @@ const slots = useSlots()
 const tabs = computed(() => slots.default().map((tab) => tab.props))
 
 function onChange(d) {
-  emit('change', tabs.value[d])
+  emit('change', tabs.value[d], d)
 }
 </script>
diff --git a/resources/scripts/components/base/BaseTextarea.vue b/resources/scripts/components/base/BaseTextarea.vue
index 434ce38b3..f185b233e 100644
--- a/resources/scripts/components/base/BaseTextarea.vue
+++ b/resources/scripts/components/base/BaseTextarea.vue
@@ -45,7 +45,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 border-solid rounded outline-none',
+      'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 dark:border-gray-600 border-solid rounded outline-none  dark:bg-gray-700 dark:text-white',
   },
   autosize: {
     type: Boolean,
diff --git a/resources/scripts/components/base/BaseWizardNavigation.vue b/resources/scripts/components/base/BaseWizardNavigation.vue
index 79dc9329b..515b0c8ee 100644
--- a/resources/scripts/components/base/BaseWizardNavigation.vue
+++ b/resources/scripts/components/base/BaseWizardNavigation.vue
@@ -1,16 +1,7 @@
 <template>
   <div
     :class="containerClass"
-    class="
-      relative
-      after:bg-gray-200
-      after:absolute
-      after:transform
-      after:top-1/2
-      after:-translate-y-1/2
-      after:h-2
-      after:w-full
-    "
+    class="relative after:bg-gray-200 dark:after:bg-gray-700 after:absolute after:transform after:top-1/2 after:-translate-y-1/2 after:h-2 after:w-full"
   >
     <a
       v-for="(number, index) in steps"
@@ -58,21 +49,21 @@ export default {
     },
     currentStepClass: {
       type: String,
-      default: 'bg-white border-primary-500',
+      default: 'bg-white border-primary-500 dark:bg-gray-600 dark:border-gray-500 dark:border-primary-600',
     },
     nextStepClass: {
       type: String,
-      default: 'border-gray-200 bg-white',
+      default: 'border-gray-200 bg-white dark:bg-gray-600 dark:border-gray-500',
     },
     previousStepClass: {
       type: String,
       default:
-        'bg-primary-500 border-primary-500 flex justify-center items-center',
+        'bg-primary-500 dark:bg-primary-600 border-primary-500 flex justify-center items-center dark:border-primary-600',
     },
     iconClass: {
       type: String,
       default:
-        'flex items-center justify-center w-full h-full text-sm font-black text-center text-white',
+        'flex items-center justify-center w-full h-full text-sm font-black text-center text-white dark:text-gray-400',
     },
   },
 
diff --git a/resources/scripts/components/base/BaseWizardStep.vue b/resources/scripts/components/base/BaseWizardStep.vue
index 57e41da24..d0fe234f7 100644
--- a/resources/scripts/components/base/BaseWizardStep.vue
+++ b/resources/scripts/components/base/BaseWizardStep.vue
@@ -9,6 +9,7 @@
       </p>
     </div>
     <slot />
+    <BaseDarkHighlight class="z-[-1]"/>
   </div>
 </template>
 
@@ -25,16 +26,16 @@ const props = defineProps({
   stepContainerClass: {
     type: String,
     default:
-      'w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded',
+      'w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded dark:from-gray-700/70 dark:to-gray-800/70 dark:bg-transparent dark:backdrop-blur-xl dark:shadow-glass dark:border dark:border-white/10',
   },
   stepTitleClass: {
     type: String,
-    default: 'text-2xl not-italic font-semibold leading-7 text-black',
+    default: 'text-2xl not-italic font-semibold leading-7 text-black dark:text-white',
   },
   stepDescriptionClass: {
     type: String,
     default:
-      'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-gray-500 lg:w-7/12 md:w-7/12 sm:w-7/12',
+      'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-gray-500 dark:text-gray-300 lg:w-7/12 md:w-7/12 sm:w-7/12',
   },
 })
 </script>
diff --git a/resources/scripts/components/base/base-editor/BaseEditor.vue b/resources/scripts/components/base/base-editor/BaseEditor.vue
index 3a781a2d8..6ec464adb 100644
--- a/resources/scripts/components/base/base-editor/BaseEditor.vue
+++ b/resources/scripts/components/base/base-editor/BaseEditor.vue
@@ -16,13 +16,15 @@
       text-left
       bg-white
       border border-gray-200
+      dark:border-gray-600
       rounded-md
       min-h-[200px]
       overflow-hidden
+      dark:bg-gray-700 dark:text-white
     "
   >
     <div v-if="editor" class="editor-content">
-      <div class="flex justify-end p-2 border-b border-gray-200 md:hidden">
+      <div class="flex justify-end p-2 border-b border-gray-200 dark:border-gray-600 md:hidden">
         <BaseDropdown width-class="w-48">
           <template #activator>
             <div
@@ -42,7 +44,7 @@
               <dots-vertical-icon class="w-6 h-6 text-gray-600" />
             </div>
           </template>
-          <div class="flex flex-wrap space-x-1">
+          <div class="flex flex-wrap space-x-1 dark:text-white">
             <span
               class="
                 flex
@@ -53,8 +55,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200': editor.isActive('bold') }"
+              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
               @click="editor.chain().focus().toggleBold().run()"
             >
               <bold-icon class="h-3 cursor-pointer fill-current" />
@@ -69,8 +72,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200': editor.isActive('italic') }"
+              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
               @click="editor.chain().focus().toggleItalic().run()"
             >
               <italic-icon class="h-3 cursor-pointer fill-current" />
@@ -85,8 +89,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200': editor.isActive('strike') }"
+              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
               @click="editor.chain().focus().toggleStrike().run()"
             >
               <strikethrough-icon class="h-3 cursor-pointer fill-current" />
@@ -101,8 +106,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200': editor.isActive('code') }"
+              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
               @click="editor.chain().focus().toggleCode().run()"
             >
               <coding-icon class="h-3 cursor-pointer fill-current" />
@@ -117,8 +123,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200': editor.isActive('paragraph') }"
+              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
               @click="editor.chain().focus().setParagraph().run()"
             >
               <paragraph-icon class="h-3 cursor-pointer fill-current" />
@@ -133,9 +140,10 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
               :class="{
-                'bg-gray-200': editor.isActive('heading', { level: 1 }),
+                'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }),
               }"
               @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
             >
@@ -151,9 +159,10 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
               :class="{
-                'bg-gray-200': editor.isActive('heading', { level: 2 }),
+                'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }),
               }"
               @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
             >
@@ -169,9 +178,10 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
               :class="{
-                'bg-gray-200': editor.isActive('heading', { level: 3 }),
+                'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }),
               }"
               @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
             >
@@ -188,8 +198,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200': editor.isActive('bulletList') }"
+              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
               @click="editor.chain().focus().toggleBulletList().run()"
             >
               <list-ul-icon class="h-3 cursor-pointer fill-current" />
@@ -204,8 +215,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200': editor.isActive('orderedList') }"
+              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
               @click="editor.chain().focus().toggleOrderedList().run()"
             >
               <list-icon class="h-3 cursor-pointer fill-current" />
@@ -220,8 +232,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200': editor.isActive('blockquote') }"
+              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
               @click="editor.chain().focus().toggleBlockquote().run()"
             >
               <quote-icon class="h-3 cursor-pointer fill-current" />
@@ -236,8 +249,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
+              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
               @click="editor.chain().focus().toggleCodeBlock().run()"
             >
               <code-block-icon class="h-3 cursor-pointer fill-current" />
@@ -252,8 +266,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200': editor.isActive('undo') }"
+              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
               @click="editor.chain().focus().undo().run()"
             >
               <undo-icon class="h-3 cursor-pointer fill-current" />
@@ -268,8 +283,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
+                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200': editor.isActive('redo') }"
+              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
               @click="editor.chain().focus().redo().run()"
             >
               <redo-icon class="h-3 cursor-pointer fill-current" />
@@ -277,7 +293,7 @@
           </div>
         </BaseDropdown>
       </div>
-      <div class="hidden p-2 border-b border-gray-200 md:flex">
+      <div class="hidden p-2 border-b border-gray-200 dark:border-gray-600 md:flex">
         <div class="flex flex-wrap space-x-1">
           <span
             class="
@@ -289,8 +305,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('bold') }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
             @click="editor.chain().focus().toggleBold().run()"
           >
             <bold-icon class="h-3 cursor-pointer fill-current" />
@@ -305,8 +322,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('italic') }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
             @click="editor.chain().focus().toggleItalic().run()"
           >
             <italic-icon class="h-3 cursor-pointer fill-current" />
@@ -321,8 +339,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('strike') }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
             @click="editor.chain().focus().toggleStrike().run()"
           >
             <strikethrough-icon class="h-3 cursor-pointer fill-current" />
@@ -337,8 +356,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('code') }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
             @click="editor.chain().focus().toggleCode().run()"
           >
             <coding-icon class="h-3 cursor-pointer fill-current" />
@@ -353,8 +373,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('paragraph') }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
             @click="editor.chain().focus().setParagraph().run()"
           >
             <paragraph-icon class="h-3 cursor-pointer fill-current" />
@@ -369,8 +390,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 1 }) }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }) }"
             @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
           >
             H1
@@ -385,8 +407,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 2 }) }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }) }"
             @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
           >
             H2
@@ -401,8 +424,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 3 }) }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }) }"
             @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
           >
             H3
@@ -418,8 +442,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('bulletList') }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
             @click="editor.chain().focus().toggleBulletList().run()"
           >
             <list-ul-icon class="h-3 cursor-pointer fill-current" />
@@ -434,8 +459,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('orderedList') }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
             @click="editor.chain().focus().toggleOrderedList().run()"
           >
             <list-icon class="h-3 cursor-pointer fill-current" />
@@ -450,8 +476,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('blockquote') }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
             @click="editor.chain().focus().toggleBlockquote().run()"
           >
             <quote-icon class="h-3 cursor-pointer fill-current" />
@@ -466,8 +493,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
             @click="editor.chain().focus().toggleCodeBlock().run()"
           >
             <code-block-icon class="h-3 cursor-pointer fill-current" />
@@ -482,8 +510,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('undo') }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
             @click="editor.chain().focus().undo().run()"
           >
             <undo-icon class="h-3 cursor-pointer fill-current" />
@@ -498,8 +527,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive('redo') }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
             @click="editor.chain().focus().redo().run()"
           >
             <redo-icon class="h-3 cursor-pointer fill-current" />
@@ -514,8 +544,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'left' }) }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'left' }) }"
             @click="editor.chain().focus().setTextAlign('left').run()"
           >
             <menu-alt2-icon class="h-5 cursor-pointer fill-current" />
@@ -530,8 +561,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'right' }) }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'right' }) }"
             @click="editor.chain().focus().setTextAlign('right').run()"
           >
             <menu-alt3-icon class="h-5 cursor-pointer fill-current" />
@@ -546,9 +578,10 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
             :class="{
-              'bg-gray-200': editor.isActive({ textAlign: 'justify' }),
+              'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'justify' }),
             }"
             @click="editor.chain().focus().setTextAlign('justify').run()"
           >
@@ -564,8 +597,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
+              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'center' }) }"
+            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'center' }) }"
             @click="editor.chain().focus().setTextAlign('center').run()"
           >
             <menu-center-icon class="h-5 cursor-pointer fill-current" />
diff --git a/resources/scripts/components/base/base-table/BaseTable.vue b/resources/scripts/components/base/base-table/BaseTable.vue
index 52ed09e49..f85f2655f 100644
--- a/resources/scripts/components/base/base-table/BaseTable.vue
+++ b/resources/scripts/components/base/base-table/BaseTable.vue
@@ -7,11 +7,18 @@
             relative
             overflow-hidden
             bg-white
-            border-b border-gray-200
+            border-b
+            border-gray-200
             shadow
             sm:rounded-lg
-          "
+            dark:shadow-glass
+            dark:border
+            dark:border-white/10
+            dark:bg-gray-800/70
+            "
         >
+          <BaseDarkHighlight v-if="darkHighlight" class="z-[-1]" />
+
           <slot name="header" />
           <table :class="tableClass">
             <thead :class="theadClass">
@@ -51,7 +58,11 @@
               <tr
                 v-for="placeRow in placeholderCount"
                 :key="placeRow"
-                :class="placeRow % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
+                :class="
+                  placeRow % 2 === 0
+                    ? 'bg-white dark:bg-gray-800'
+                    : 'bg-gray-50 dark:bg-gray-800'
+                "
               >
                 <td
                   v-for="column in columns"
@@ -75,7 +86,11 @@
               <tr
                 v-for="(row, index) in sortedRows"
                 :key="index"
-                :class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
+                :class="
+                  index % 2 === 0
+                    ? 'bg-white dark:bg-transparent'
+                    : 'bg-gray-50 dark:bg-gray-700/20 dark:border-y dark:border-gray-600'
+                "
               >
                 <td
                   v-for="column in columns"
@@ -103,7 +118,10 @@
               justify-center
               w-full
               h-full
-              bg-white bg-opacity-60
+              bg-white
+              bg-opacity-60
+              dark:bg-gray-700
+              dark:bg-opacity-60
             "
           >
             <SpinnerIcon class="w-10 h-10 text-primary-500" />
@@ -163,9 +181,12 @@ const props = defineProps({
   sortOrder: { type: String, default: '' },
   tableClass: {
     type: String,
-    default: 'min-w-full divide-y divide-gray-200',
+    default: 'min-w-full divide-y divide-gray-200 dark:divide-gray-600',
+  },
+  theadClass: {
+    type: String,
+    default: 'bg-gray-50 dark:bg-gray-800 dark:text-white',
   },
-  theadClass: { type: String, default: 'bg-gray-50' },
   tbodyClass: { type: String, default: '' },
   noResultsMessage: {
     type: String,
@@ -186,6 +207,10 @@ const props = defineProps({
     type: Number,
     default: 3,
   },
+  darkHighlight: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 let rows = reactive([])
@@ -236,7 +261,7 @@ function getColumn(columnName) {
 
 function getThClass(column) {
   let classes =
-    'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'
+    'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-white'
 
   if (column.defaultThClass) {
     classes = column.defaultThClass
@@ -256,7 +281,8 @@ function getThClass(column) {
 }
 
 function getTdClass(column) {
-  let classes = 'px-6 py-4 text-sm text-gray-500 whitespace-nowrap'
+  let classes =
+    'px-6 py-4 text-sm text-gray-500 whitespace-nowrap dark:text-gray-300'
 
   if (column.defaultTdClass) {
     classes = column.defaultTdClass
@@ -309,6 +335,7 @@ function changeSorting(column) {
   }
 
   if (!usesLocalData.value) {
+    if (pagination.value) pagination.value.currentPage = 1
     mapDataToRows()
   }
 }
@@ -326,7 +353,9 @@ async function pageChange(page) {
   await mapDataToRows()
 }
 
-async function refresh() {
+async function refresh(isPreservePage = false) {
+  if (pagination.value && !isPreservePage) pagination.value.currentPage = 1
+
   await mapDataToRows()
 }
 
diff --git a/resources/scripts/components/base/base-table/BaseTablePagination.vue b/resources/scripts/components/base/base-table/BaseTablePagination.vue
index 5b3a6d400..6e9f14af1 100644
--- a/resources/scripts/components/base/base-table/BaseTablePagination.vue
+++ b/resources/scripts/components/base/base-table/BaseTablePagination.vue
@@ -10,13 +10,14 @@
       bg-white
       border-t border-gray-200
       sm:px-6
+      dark:bg-transparent dark:border-white/10
     "
   >
     <div class="flex justify-between flex-1 sm:hidden">
       <a
         href="#"
         :class="{
-          'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400':
+          'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
             pagination.currentPage === 1,
         }"
         class="
@@ -32,6 +33,7 @@
           border border-gray-300
           rounded-md
           hover:bg-gray-50
+          dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
         "
         @click="pageClicked(pagination.currentPage - 1)"
       >
@@ -40,7 +42,7 @@
       <a
         href="#"
         :class="{
-          'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400':
+          'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
             pagination.currentPage === pagination.totalPages,
         }"
         class="
@@ -57,6 +59,7 @@
           border border-gray-300
           rounded-md
           hover:bg-gray-50
+          dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
         "
         @click="pageClicked(pagination.currentPage + 1)"
       >
@@ -65,12 +68,12 @@
     </div>
     <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
       <div>
-        <p class="text-sm text-gray-700">
+        <p class="text-sm text-gray-700 dark:text-gray-400">
           Showing
           {{ ' ' }}
           <span
             v-if="pagination.limit && pagination.currentPage"
-            class="font-medium"
+            class="font-medium dark:text-gray-200"
           >
             {{
               pagination.currentPage * pagination.limit - (pagination.limit - 1)
@@ -81,7 +84,7 @@
           {{ ' ' }}
           <span
             v-if="pagination.limit && pagination.currentPage"
-            class="font-medium"
+            class="font-medium dark:text-gray-200"
           >
             <span
               v-if="
@@ -98,7 +101,7 @@
           {{ ' ' }}
           of
           {{ ' ' }}
-          <span v-if="pagination.totalCount" class="font-medium">
+          <span v-if="pagination.totalCount" class="font-medium dark:text-gray-200">
             {{ pagination.totalCount }}
           </span>
           {{ ' ' }}
@@ -113,7 +116,7 @@
           <a
             href="#"
             :class="{
-              'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400':
+              'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
                 pagination.currentPage === 1,
             }"
             class="
@@ -129,6 +132,7 @@
               border border-gray-300
               rounded-l-md
               hover:bg-gray-50
+              dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
             "
             @click="pageClicked(pagination.currentPage - 1)"
           >
@@ -140,9 +144,9 @@
             href="#"
             aria-current="page"
             :class="{
-              'z-10 bg-primary-50 border-primary-500 text-primary-600':
+              'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white':
                 isActive(1),
-              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
+              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300':
                 !isActive(1),
             }"
             class="
@@ -173,6 +177,7 @@
               text-gray-700
               bg-white
               border border-gray-300
+              dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
             "
           >
             ...
@@ -182,9 +187,9 @@
             :key="page"
             href="#"
             :class="{
-              'z-10 bg-primary-50 border-primary-500 text-primary-600':
+              'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white':
                 isActive(page),
-              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
+              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300':
                 !isActive(page),
               disabled: page === '...',
             }"
@@ -220,6 +225,7 @@
               text-gray-700
               bg-white
               border border-gray-300
+              dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
             "
           >
             ...
@@ -229,9 +235,9 @@
             href="#"
             aria-current="page"
             :class="{
-              'z-10 bg-primary-50 border-primary-500 text-primary-600':
+              'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white':
                 isActive(pagination.totalPages),
-              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
+              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300':
                 !isActive(pagination.totalPages),
             }"
             class="
@@ -263,9 +269,10 @@
               border border-gray-300
               rounded-r-md
               hover:bg-gray-50
+              dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
             "
             :class="{
-              'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400':
+              'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
                 pagination.currentPage === pagination.totalPages,
             }"
             @click="pageClicked(pagination.currentPage + 1)"
diff --git a/resources/scripts/components/icons/dashboard/CustomerIcon.vue b/resources/scripts/components/icons/dashboard/CustomerIcon.vue
index ef982ec19..875e9e065 100644
--- a/resources/scripts/components/icons/dashboard/CustomerIcon.vue
+++ b/resources/scripts/components/icons/dashboard/CustomerIcon.vue
@@ -3,23 +3,26 @@
     width="50"
     height="50"
     viewBox="0 0 50 50"
-    :class="colorClass"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
+    <circle cx="25" cy="25" r="25" :class="bgColor" />
     <path
       d="M28.2656 23.0547C27.3021 24.0182 26.1302 24.5 24.75 24.5C23.3698 24.5 22.1849 24.0182 21.1953 23.0547C20.2318 22.0651 19.75 20.8802 19.75 19.5C19.75 18.1198 20.2318 16.9479 21.1953 15.9844C22.1849 14.9948 23.3698 14.5 24.75 14.5C26.1302 14.5 27.3021 14.9948 28.2656 15.9844C29.2552 16.9479 29.75 18.1198 29.75 19.5C29.75 20.8802 29.2552 22.0651 28.2656 23.0547ZM28.2656 25.75C29.6979 25.75 30.9219 26.2708 31.9375 27.3125C32.9792 28.3281 33.5 29.5521 33.5 30.9844V32.625C33.5 33.1458 33.3177 33.5885 32.9531 33.9531C32.5885 34.3177 32.1458 34.5 31.625 34.5H17.875C17.3542 34.5 16.9115 34.3177 16.5469 33.9531C16.1823 33.5885 16 33.1458 16 32.625V30.9844C16 29.5521 16.5078 28.3281 17.5234 27.3125C18.5651 26.2708 19.8021 25.75 21.2344 25.75H21.8984C22.8099 26.1667 23.7604 26.375 24.75 26.375C25.7396 26.375 26.6901 26.1667 27.6016 25.75H28.2656Z"
-      fill="currentColor"
+      :class="color"
     />
   </svg>
 </template>
 
 <script setup>
 const props = defineProps({
-  colorClass: {
+  color: {
     type: String,
-    default: 'text-primary-500',
+    default: 'fill-primary-500 dark:fill-white',
+  },
+  bgColor: {
+    type: String,
+    default: 'fill-gray-100 dark:fill-primary-400',
   },
 })
 </script>
diff --git a/resources/scripts/components/icons/dashboard/DollarIcon.vue b/resources/scripts/components/icons/dashboard/DollarIcon.vue
index f49218b15..dfa512150 100644
--- a/resources/scripts/components/icons/dashboard/DollarIcon.vue
+++ b/resources/scripts/components/icons/dashboard/DollarIcon.vue
@@ -6,10 +6,24 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <circle cx="25" cy="25" r="25" fill="#FDE4E5" />
+    <circle :class="bgColor" cx="25" cy="25" r="25" />
     <path
+      :class="color"
       d="M27.2031 23.6016C28.349 23.9401 29.2083 24.6562 29.7812 25.75C30.3802 26.8438 30.4714 27.9766 30.0547 29.1484C29.7422 30.0078 29.2083 30.6979 28.4531 31.2188C27.6979 31.7135 26.8516 31.974 25.9141 32V33.875C25.9141 34.0573 25.849 34.2005 25.7188 34.3047C25.6146 34.4349 25.4714 34.5 25.2891 34.5H24.0391C23.8568 34.5 23.7005 34.4349 23.5703 34.3047C23.4661 34.2005 23.4141 34.0573 23.4141 33.875V32C22.1641 32 21.0443 31.6094 20.0547 30.8281C19.8984 30.6979 19.8073 30.5417 19.7812 30.3594C19.7552 30.1771 19.8203 30.0208 19.9766 29.8906L21.3047 28.5625C21.5651 28.3281 21.8255 28.3021 22.0859 28.4844C22.4766 28.7448 22.9193 28.875 23.4141 28.875H25.9922C26.3307 28.875 26.6042 28.7708 26.8125 28.5625C27.0469 28.3281 27.1641 28.0417 27.1641 27.7031C27.1641 27.1302 26.8906 26.7656 26.3438 26.6094L22.3203 25.4375C21.4349 25.1771 20.6927 24.7083 20.0938 24.0312C19.4948 23.3542 19.1432 22.5729 19.0391 21.6875C18.9349 20.4115 19.2995 19.3177 20.1328 18.4062C20.9922 17.4688 22.0599 17 23.3359 17H23.4141V15.125C23.4141 14.9427 23.4661 14.7995 23.5703 14.6953C23.7005 14.5651 23.8568 14.5 24.0391 14.5H25.2891C25.4714 14.5 25.6146 14.5651 25.7188 14.6953C25.849 14.7995 25.9141 14.9427 25.9141 15.125V17C27.1641 17 28.2839 17.3906 29.2734 18.1719C29.4297 18.3021 29.5208 18.4583 29.5469 18.6406C29.5729 18.8229 29.5078 18.9792 29.3516 19.1094L28.0234 20.4375C27.763 20.6719 27.5026 20.6979 27.2422 20.5156C26.8516 20.2552 26.4089 20.125 25.9141 20.125H23.3359C22.9974 20.125 22.7109 20.2422 22.4766 20.4766C22.2682 20.6849 22.1641 20.9583 22.1641 21.2969C22.1641 21.5312 22.2422 21.7526 22.3984 21.9609C22.5547 22.1693 22.75 22.3125 22.9844 22.3906L27.2031 23.6016Z"
       fill="#FB7178"
     />
   </svg>
 </template>
+<script setup>
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'fill-red-400 dark:fill-white',
+  },
+  bgColor: {
+    type: String,
+    default: 'fill-red-100 dark:fill-red-400',
+  },
+})
+</script>
+
diff --git a/resources/scripts/components/icons/dashboard/EstimateIcon.vue b/resources/scripts/components/icons/dashboard/EstimateIcon.vue
index 659cbf37e..37c869c6b 100644
--- a/resources/scripts/components/icons/dashboard/EstimateIcon.vue
+++ b/resources/scripts/components/icons/dashboard/EstimateIcon.vue
@@ -5,21 +5,24 @@
     viewBox="0 0 50 50"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    :class="colorClass"
   >
-    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
+    <circle cx="25" cy="25" r="25" :class="bgColor" />
     <path
       d="M26.75 19.8125C26.75 20.0729 26.8411 20.2943 27.0234 20.4766C27.2057 20.6589 27.4271 20.75 27.6875 20.75H33V33.5625C33 33.8229 32.9089 34.0443 32.7266 34.2266C32.5443 34.4089 32.3229 34.5 32.0625 34.5H18.9375C18.6771 34.5 18.4557 34.4089 18.2734 34.2266C18.0911 34.0443 18 33.8229 18 33.5625V15.4375C18 15.1771 18.0911 14.9557 18.2734 14.7734C18.4557 14.5911 18.6771 14.5 18.9375 14.5H26.75V19.8125ZM33 19.2656V19.5H28V14.5H28.2344C28.4948 14.5 28.7161 14.5911 28.8984 14.7734L32.7266 18.6016C32.9089 18.7839 33 19.0052 33 19.2656Z"
-      fill="currentColor"
+      :class="color"
     />
   </svg>
 </template>
 
 <script setup>
 const props = defineProps({
-  colorClass: {
+  color: {
     type: String,
-    default: 'text-primary-500',
+    default: 'fill-primary-500 dark:fill-white',
+  },
+  bgColor: {
+    type: String,
+    default: 'fill-gray-100 dark:fill-primary-400',
   },
 })
 </script>
diff --git a/resources/scripts/components/icons/dashboard/InvoiceIcon.vue b/resources/scripts/components/icons/dashboard/InvoiceIcon.vue
index b835e48e3..99fb26273 100644
--- a/resources/scripts/components/icons/dashboard/InvoiceIcon.vue
+++ b/resources/scripts/components/icons/dashboard/InvoiceIcon.vue
@@ -5,21 +5,24 @@
     viewBox="0 0 50 50"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    :class="colorClass"
   >
-    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
+    <circle cx="25" cy="25" r="25" :class="bgColor" />
     <path
       d="M28.25 24.5V27H20.75V24.5H28.25ZM31.7266 18.6016C31.9089 18.7839 32 19.0052 32 19.2656V19.5H27V14.5H27.2344C27.4948 14.5 27.7161 14.5911 27.8984 14.7734L31.7266 18.6016ZM25.75 19.8125C25.75 20.0729 25.8411 20.2943 26.0234 20.4766C26.2057 20.6589 26.4271 20.75 26.6875 20.75H32V33.5625C32 33.8229 31.9089 34.0443 31.7266 34.2266C31.5443 34.4089 31.3229 34.5 31.0625 34.5H17.9375C17.6771 34.5 17.4557 34.4089 17.2734 34.2266C17.0911 34.0443 17 33.8229 17 33.5625V15.4375C17 15.1771 17.0911 14.9557 17.2734 14.7734C17.4557 14.5911 17.6771 14.5 17.9375 14.5H25.75V19.8125ZM19.5 17.3125V17.9375C19.5 18.1458 19.6042 18.25 19.8125 18.25H22.9375C23.1458 18.25 23.25 18.1458 23.25 17.9375V17.3125C23.25 17.1042 23.1458 17 22.9375 17H19.8125C19.6042 17 19.5 17.1042 19.5 17.3125ZM19.5 19.8125V20.4375C19.5 20.6458 19.6042 20.75 19.8125 20.75H22.9375C23.1458 20.75 23.25 20.6458 23.25 20.4375V19.8125C23.25 19.6042 23.1458 19.5 22.9375 19.5H19.8125C19.6042 19.5 19.5 19.6042 19.5 19.8125ZM29.5 31.6875V31.0625C29.5 30.8542 29.3958 30.75 29.1875 30.75H26.0625C25.8542 30.75 25.75 30.8542 25.75 31.0625V31.6875C25.75 31.8958 25.8542 32 26.0625 32H29.1875C29.3958 32 29.5 31.8958 29.5 31.6875ZM29.5 23.875C29.5 23.6927 29.4349 23.5495 29.3047 23.4453C29.2005 23.3151 29.0573 23.25 28.875 23.25H20.125C19.9427 23.25 19.7865 23.3151 19.6562 23.4453C19.5521 23.5495 19.5 23.6927 19.5 23.875V27.625C19.5 27.8073 19.5521 27.9635 19.6562 28.0938C19.7865 28.1979 19.9427 28.25 20.125 28.25H28.875C29.0573 28.25 29.2005 28.1979 29.3047 28.0938C29.4349 27.9635 29.5 27.8073 29.5 27.625V23.875Z"
-      fill="currentColor"
+      :class="color"
     />
   </svg>
 </template>
 
 <script setup>
 const props = defineProps({
-  colorClass: {
+  color: {
     type: String,
-    default: 'text-primary-500',
+    default: 'fill-primary-500 dark:fill-white',
+  },
+  bgColor: {
+    type: String,
+    default: 'fill-gray-100 dark:fill-primary-400',
   },
 })
 </script>
diff --git a/resources/scripts/components/icons/dashboard/PaymentIcon.vue b/resources/scripts/components/icons/dashboard/PaymentIcon.vue
index 8e0684763..f7b685a9c 100644
--- a/resources/scripts/components/icons/dashboard/PaymentIcon.vue
+++ b/resources/scripts/components/icons/dashboard/PaymentIcon.vue
@@ -5,27 +5,30 @@
     viewBox="0 0 50 50"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    :class="colorClass"
   >
-    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
+    <circle cx="25" cy="25" r="25" :class="bgColor" />
     <path
       d="M17.8 17.8C17.1635 17.8 16.5531 18.0529 16.103 18.503C15.6529 18.9531 15.4 19.5635 15.4 20.2V21.4H34.6V20.2C34.6 19.5635 34.3472 18.9531 33.8971 18.503C33.447 18.0529 32.8365 17.8 32.2 17.8H17.8Z"
-      fill="currentColor"
+      :class="color"
     />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M34.6 23.8H15.4V29.8C15.4 30.4366 15.6529 31.047 16.103 31.4971C16.5531 31.9472 17.1635 32.2 17.8 32.2H32.2C32.8365 32.2 33.447 31.9472 33.8971 31.4971C34.3472 31.047 34.6 30.4366 34.6 29.8V23.8ZM17.8 28.6C17.8 28.2818 17.9265 27.9766 18.1515 27.7515C18.3765 27.5265 18.6818 27.4 19 27.4H20.2C20.5183 27.4 20.8235 27.5265 21.0486 27.7515C21.2736 27.9766 21.4 28.2818 21.4 28.6C21.4 28.9183 21.2736 29.2235 21.0486 29.4486C20.8235 29.6736 20.5183 29.8 20.2 29.8H19C18.6818 29.8 18.3765 29.6736 18.1515 29.4486C17.9265 29.2235 17.8 28.9183 17.8 28.6ZM23.8 27.4C23.4818 27.4 23.1765 27.5265 22.9515 27.7515C22.7265 27.9766 22.6 28.2818 22.6 28.6C22.6 28.9183 22.7265 29.2235 22.9515 29.4486C23.1765 29.6736 23.4818 29.8 23.8 29.8H25C25.3183 29.8 25.6235 29.6736 25.8486 29.4486C26.0736 29.2235 26.2 28.9183 26.2 28.6C26.2 28.2818 26.0736 27.9766 25.8486 27.7515C25.6235 27.5265 25.3183 27.4 25 27.4H23.8Z"
-      fill="currentColor"
+      :class="color"
     />
   </svg>
 </template>
 
 <script setup>
 const props = defineProps({
-  colorClass: {
+  color: {
+  type: String,
+  default: 'fill-primary-500 dark:fill-white',
+  },
+  bgColor: {
     type: String,
-    default: 'text-primary-500',
+    default: 'fill-gray-100 dark:fill-primary-400',
   },
 })
 </script>
diff --git a/resources/scripts/components/list/BaseListItem.vue b/resources/scripts/components/list/BaseListItem.vue
index 1d6360ec5..078b400b3 100644
--- a/resources/scripts/components/list/BaseListItem.vue
+++ b/resources/scripts/components/list/BaseListItem.vue
@@ -28,13 +28,13 @@ export default {
     },
   },
   setup(props, { slots }) {
-    const defaultClass = `cursor-pointer pb-2 pr-0 text-sm font-medium leading-5  flex items-center`
+    const defaultClass = `cursor-pointer pb-2 pr-0 text-sm font-medium leading-5 flex items-center`
     let hasIconSlot = computed(() => {
       return !!slots.icon
     })
     let containerClass = computed(() => {
-      if (props.active) return `${defaultClass} text-primary-500`
-      else return `${defaultClass} text-gray-500`
+      if (props.active) return `${defaultClass} text-primary-500 dark:text-primary-400`
+      else return `${defaultClass} text-gray-500 dark:text-gray-300`
     })
     return {
       hasIconSlot,
diff --git a/resources/scripts/components/notifications/NotificationItem.vue b/resources/scripts/components/notifications/NotificationItem.vue
index 2a61b6eff..37944231c 100644
--- a/resources/scripts/components/notifications/NotificationItem.vue
+++ b/resources/scripts/components/notifications/NotificationItem.vue
@@ -1,6 +1,8 @@
 <template>
   <div
-    :class="success || info ? 'bg-white' : 'bg-red-50'"
+    :class="success || info
+      ? 'bg-white dark:border dark:border-white/10 dark:text-white dark:bg-gray-800/[.80] dark:shadow-glass dark:backdrop-blur-sm'
+      : 'bg-red-50 dark:bg-red-400/[.70] dark:shadow-glass dark:backdrop-blur-sm'"
     class="
       max-w-sm
       mb-3
@@ -48,7 +50,7 @@
             </svg>
             <svg
               v-if="error"
-              class="w-6 h-6 text-red-400"
+              class="w-6 h-6 text-red-400 dark:text-white"
               fill="currentColor"
               viewBox="0 0 24 24"
             >
@@ -62,7 +64,9 @@
           <div class="flex-1 w-0 ml-3 text-left">
             <p
               :class="`text-sm leading-5 font-medium ${
-                success || info ? 'text-gray-900' : 'text-red-800'
+                success || info
+                  ? 'text-gray-900 dark:text-white'
+                  : 'text-red-800 dark:text-white'
               }`"
             >
               {{
@@ -75,7 +79,9 @@
             </p>
             <p
               :class="`mt-1 text-sm leading-5 ${
-                success || info ? 'text-gray-500' : 'text-red-700'
+                success || info
+                  ? 'text-gray-500 dark:text-gray-400'
+                  : 'text-red-700 dark:text-red-200'
               }`"
             >
               {{
@@ -92,7 +98,7 @@
               :class="
                 success || info
                   ? ' text-gray-400 focus:text-gray-500'
-                  : 'text-red-400 focus:text-red-500'
+                  : 'text-red-400 focus:text-red-500 dark:text-red-100'
               "
               class="
                 inline-flex
diff --git a/resources/scripts/components/svg/LoginBottomVector.vue b/resources/scripts/components/svg/LoginBottomVector.vue
index d734938bb..1973928b4 100644
--- a/resources/scripts/components/svg/LoginBottomVector.vue
+++ b/resources/scripts/components/svg/LoginBottomVector.vue
@@ -3,6 +3,7 @@
     <path
       d="M690 4.08004C518 -9.91998 231 4.08004 -6 176.361L231 197.08L1170 219.08C1113.33 175.747 909.275 21.928 690 4.08004Z"
       fill="white"
+      class="dark:fill-gray-900"
       fill-opacity="0.1"
     />
   </svg>
diff --git a/resources/scripts/customer/layouts/LayoutBasic.vue b/resources/scripts/customer/layouts/LayoutBasic.vue
index e37005b75..9bffa5d13 100644
--- a/resources/scripts/customer/layouts/LayoutBasic.vue
+++ b/resources/scripts/customer/layouts/LayoutBasic.vue
@@ -6,7 +6,7 @@
 
     <!-- <SiteSidebar /> -->
 
-    <main class="mt-16 pb-16 h-screen overflow-y-auto min-h-0">
+    <main class="h-screen min-h-0 pb-16 mt-16 overflow-y-auto">
       <router-view />
     </main>
   </div>
diff --git a/resources/scripts/customer/layouts/LayoutLogin.vue b/resources/scripts/customer/layouts/LayoutLogin.vue
index 5ff1ae347..61286d3ce 100644
--- a/resources/scripts/customer/layouts/LayoutLogin.vue
+++ b/resources/scripts/customer/layouts/LayoutLogin.vue
@@ -1,31 +1,24 @@
 <template>
   <div
-    class="
-      min-h-screen
-      bg-gray-200
-      flex flex-col
-      justify-center
-      py-12
-      sm:px-6
-      lg:px-8
-    "
+    class="flex flex-col justify-center h-full min-h-screen py-12 overflow-hidden bg-gray-100 sm:px-6 lg:px-8 dark:bg-gray-800/80 dark:text-white font-base "
   >
     <NotificationRoot />
 
-    <div class="sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
+    <div class="px-4 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
       <MainLogo
         v-if="!customerLogo"
-        class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
+        class="block w-48 h-auto max-w-full mx-auto text-primary-400"
       />
       <img
         v-else
         :src="customerLogo"
-        class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
+        class="block w-48 h-auto max-w-full mx-auto text-primary-400"
       />
     </div>
 
-    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
-      <div class="bg-white py-8 px-4 shadow rounded-lg sm:px-10">
+    <div class="px-4 mt-8 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
+      <div class="px-4 py-8 bg-white rounded-lg shadow sm:px-10 dark:from-gray-700/70 dark:to-gray-800/70 dark:bg-transparent dark:backdrop-blur-xl dark:shadow-glass dark:border dark:border-white/10">
+      <BaseDarkHighlight/>
         <router-view />
       </div>
     </div>
diff --git a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue b/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
index 29558c2d2..47182bda0 100644
--- a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
@@ -2,8 +2,9 @@
   <Disclosure
     v-slot="{ open }"
     as="nav"
-    class="bg-white shadow-sm fixed top-0 left-0 z-20 w-full"
+    class="bg-white shadow-sm fixed top-0 left-0 z-20 w-full dark:bg-gray-800"
   >
+    <BaseDarkHighlight />
     <div class="mx-auto px-8">
       <div class="flex justify-between h-16 w-full">
         <div class="flex">
@@ -33,8 +34,8 @@
               :to="`/${globalStore.companySlug}${item.link}`"
               :class="[
                 hasActiveUrl(item.link)
-                  ? 'border-primary-500 text-primary-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                  ? 'text-primary-600 border-primary-600 dark:border-primary-400 dark:text-primary-400'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-200',
                 'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
               ]"
             >
@@ -43,20 +44,8 @@
           </div>
         </div>
         <div class="hidden sm:ml-6 sm:flex sm:items-center">
-          <button
-            type="button"
-            class="
-              bg-white
-              p-1
-              rounded-full
-              text-gray-400
-              hover:text-gray-500
-              focus:outline-none
-              focus:ring-2
-              focus:ring-offset-2
-              focus:ring-primary-500
-            "
-          ></button>
+          <!-- Dark mode Toggle -->
+          <LightDarkButton/>
 
           <!-- Profile dropdown -->
 
@@ -85,7 +74,7 @@
               <router-link :to="{ name: 'customer.profile' }">
                 <BaseDropdownItem>
                   <CogIcon
-                    class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                    class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200"
                     aria-hidden="true"
                   />
                   {{ $t('navigation.settings') }}
@@ -94,7 +83,7 @@
 
               <BaseDropdownItem @click="logout">
                 <LogoutIcon
-                  class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                  class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200"
                   aria-hidden="true"
                 />
                 {{ $t('navigation.logout') }}
@@ -118,6 +107,8 @@
               focus:ring-2
               focus:ring-offset-2
               focus:ring-primary-500
+              dark:bg-gray-700
+              dark:focus:ring-offset-gray-900
             "
           >
             <span class="sr-only">Open main menu</span>
@@ -136,43 +127,31 @@
           :to="`/${globalStore.companySlug}${item.link}`"
           :class="[
             hasActiveUrl(item.link)
-              ? 'bg-primary-50 border-primary-500 text-primary-700'
-              : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
+              ? 'bg-primary-50 border-primary-500 text-primary-700 dark:bg-gray-700 dark:text-primary-400'
+              : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
             'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
           ]"
           :aria-current="item.current ? 'page' : undefined"
           >{{ item.title }}
         </router-link>
       </div>
-      <div class="pt-4 pb-3 border-t border-gray-200">
-        <div class="flex items-center px-4">
-          <div class="shrink-0">
-            <img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
-          </div>
-          <div class="ml-3">
-            <div class="text-base font-medium text-gray-800">
-              {{ globalStore.currentUser.title }}
+      <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-500">
+        <div class="flex items-center justify-between pr-5">
+          <div class="flex items-center px-4">
+            <div class="shrink-0">
+              <img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
             </div>
-            <div class="text-sm font-medium text-gray-500">
-              {{ globalStore.currentUser.email }}
+            <div class="ml-3">
+              <div class="text-base font-medium text-gray-800">
+                {{ globalStore.currentUser.title }}
+              </div>
+              <div class="text-sm font-medium text-gray-500 dark:text-gray-200">
+                {{ globalStore.currentUser.email }}
+              </div>
             </div>
-          </div>
-          <button
-            type="button"
-            class="
-              ml-auto
-              bg-white
-              shrink-0
-              p-1
-              rounded-full
-              text-gray-400
-              hover:text-gray-500
-              focus:outline-none
-              focus:ring-2
-              focus:ring-offset-2
-              focus:ring-primary-500
-            "
-          ></button>
+        </div>
+          <!-- Dark mode Toggle -->
+          <LightDarkButton/>
         </div>
         <div class="mt-3 space-y-1">
           <router-link
@@ -182,7 +161,7 @@
             :class="[
               hasActiveUrl(item.link)
                 ? 'bg-primary-50 border-primary-500 text-primary-700'
-                : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
+                : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
               'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
             ]"
             >{{ item.title }}</router-link
@@ -199,6 +178,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { ref, watch, computed } from 'vue'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
 import MainLogo from '@/scripts/components/icons/MainLogo.vue'
+import LightDarkButton from '@/scripts/components/LightDarkButton.vue'
 import {
   Disclosure,
   DisclosureButton,
diff --git a/resources/scripts/customer/stores/global.js b/resources/scripts/customer/stores/global.js
index 44197465d..245b96920 100644
--- a/resources/scripts/customer/stores/global.js
+++ b/resources/scripts/customer/stores/global.js
@@ -13,7 +13,8 @@ export const useGlobalStore = defineStore({
     currentUser: null,
     companySlug: '',
     mainMenu: null,
-    enabledModules: []
+    enabledModules: [],
+    isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark')
   }),
 
   actions: {
diff --git a/resources/scripts/customer/views/auth/ForgotPassword.vue b/resources/scripts/customer/views/auth/ForgotPassword.vue
index e4ff913ec..af9692bf5 100644
--- a/resources/scripts/customer/views/auth/ForgotPassword.vue
+++ b/resources/scripts/customer/views/auth/ForgotPassword.vue
@@ -31,7 +31,7 @@
     <div class="mt-4 mb-4 text-sm">
       <router-link
         to="login"
-        class="text-sm text-primary-400 hover:text-gray-700"
+        class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
       >
         {{ $t('general.back_to_login') }}
       </router-link>
diff --git a/resources/scripts/customer/views/auth/Login.vue b/resources/scripts/customer/views/auth/Login.vue
index 569ed28ee..b6f6fec8a 100644
--- a/resources/scripts/customer/views/auth/Login.vue
+++ b/resources/scripts/customer/views/auth/Login.vue
@@ -32,30 +32,15 @@
     >
       <BaseInput
         v-model="authStore.loginData.password"
-        :type="getInputType"
         :invalid="v$.loginData.password.$error"
+        type="password"
         @input="v$.loginData.password.$touch()"
-      >
-        <template #right>
-          <BaseIcon
-            v-if="isShowPassword"
-            name="EyeOffIcon"
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          />
-          <BaseIcon
-            v-else
-            name="EyeIcon"
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          />
-        </template>
-      </BaseInput>
+      />
     </BaseInputGroup>
     <div class="flex items-center justify-between">
       <router-link
         :to="{ name: 'customer.forgot-password' }"
-        class="text-sm text-primary-600 hover:text-gray-500"
+        class="text-sm text-primary-400 hover:text-gray-500 dark:hover:text-primary-500"
       >
         {{ $t('login.forgot_password') }}
       </router-link>
@@ -91,14 +76,6 @@ const authStore = useAuthStore()
 const { t } = useI18n()
 
 let isLoading = ref(false)
-const isShowPassword = ref(false)
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
 
 const rules = computed(() => {
   return {
diff --git a/resources/scripts/customer/views/auth/ResetPassword.vue b/resources/scripts/customer/views/auth/ResetPassword.vue
index 9a0d9b84e..a94f441b4 100644
--- a/resources/scripts/customer/views/auth/ResetPassword.vue
+++ b/resources/scripts/customer/views/auth/ResetPassword.vue
@@ -23,23 +23,11 @@
     >
       <BaseInput
         v-model="loginData.password"
-        :type="isShowPassword ? 'text' : 'password'"
+        type="password"
         name="password"
         :invalid="v$.password.$error"
         @input="v$.password.$touch()"
-      >
-        <template #right>
-          <EyeOffIcon
-            v-if="isShowPassword"
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          />
-          <EyeIcon
-            v-else
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          /> </template
-      ></BaseInput>
+      />
     </BaseInputGroup>
 
     <BaseInputGroup
@@ -93,7 +81,6 @@ const loginData = reactive({
 
 const globalStore = useGlobalStore()
 
-let isShowPassword = ref(false)
 let isLoading = ref(false)
 
 const rules = computed(() => {
diff --git a/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue b/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue
index a5827484f..e77f8bf37 100644
--- a/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue
@@ -12,18 +12,24 @@
       hover:bg-gray-50
       xl:p-4
       lg:col-span-2
+      dark:backdrop-blur-xl
+      dark:shadow-glass
+      dark:border
+      dark:border-white/10
+      dark:bg-gray-800/70
     "
     :class="{ 'lg:!col-span-3': large }"
     :to="route"
   >
     <div>
-      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
+      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl dark:text-white">
         <slot />
       </span>
-      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
+      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg dark:text-gray-300">
         {{ label }}
       </span>
     </div>
+      <BaseDarkHighlight class="!bg-highlight/[.17] !top-5" />
     <div class="flex items-center">
       <component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
     </div>
diff --git a/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue b/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
index a114818da..d199a8941 100644
--- a/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseContentPlaceholders
     :rounded="true"
-    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
+    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4 dark:bg-gray-800"
   >
     <div>
       <BaseContentPlaceholdersText
diff --git a/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue b/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
index 90ad7a11a..b65cb4115 100644
--- a/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
@@ -12,6 +12,7 @@
       shadow
       lg:col-span-2
       xl:p-4
+      dark:bg-gray-800
     "
   >
     <div>
diff --git a/resources/scripts/customer/views/dashboard/DashboardTable.vue b/resources/scripts/customer/views/dashboard/DashboardTable.vue
index 25f57d96f..90bd14531 100644
--- a/resources/scripts/customer/views/dashboard/DashboardTable.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardTable.vue
@@ -26,7 +26,7 @@
             :to="{
               path: `/${globalStore.companySlug}/customer/invoices/${row.data.id}/view`,
             }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.invoice_number }}
           </router-link>
@@ -73,7 +73,7 @@
             :to="{
               path: `/${globalStore.companySlug}/customer/estimates/${row.data.id}/view`,
             }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.estimate_number }}
           </router-link>
diff --git a/resources/scripts/customer/views/estimates/Index.vue b/resources/scripts/customer/views/estimates/Index.vue
index b64387a43..e77916e23 100644
--- a/resources/scripts/customer/views/estimates/Index.vue
+++ b/resources/scripts/customer/views/estimates/Index.vue
@@ -100,7 +100,7 @@
         <template #cell-estimate_number="{ row }">
           <router-link
             :to="{ path: `estimates/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.estimate_number }}
           </router-link>
@@ -119,11 +119,11 @@
         <template #cell-actions="{ row }">
           <BaseDropdown>
             <template #activator>
-              <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+              <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500 dark:text-gray-200" />
             </template>
             <router-link :to="`estimates/${row.data.id}/view`">
               <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
+                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-200" />
                 {{ $t('general.view') }}
               </BaseDropdownItem>
             </router-link>
diff --git a/resources/scripts/customer/views/estimates/View.vue b/resources/scripts/customer/views/estimates/View.vue
index 01ce63ffc..a84032182 100644
--- a/resources/scripts/customer/views/estimates/View.vue
+++ b/resources/scripts/customer/views/estimates/View.vue
@@ -25,7 +25,7 @@
 
     <!-- Sidebar -->
     <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
     >
       <div
         class="
@@ -36,6 +36,7 @@
           pt-8
           pb-6
           border border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <BaseInput
@@ -70,6 +71,7 @@
                 mb-2
                 text-sm
                 border-b border-gray-200 border-solid
+                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -124,7 +126,7 @@
             </div>
           </BaseDropdown>
 
-          <BaseButton class="ml-1" variant="white" @click="sortData">
+          <BaseButton class="ml-1" variant="gray" @click="sortData">
             <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
             <BaseIcon v-else name="SortDescendingIcon" class="h-5" />
           </BaseButton>
@@ -138,6 +140,7 @@
           overflow-y-scroll
           border-l border-gray-200 border-solid
           sw-scroll
+          dark:border-gray-600
         "
       >
         <router-link
@@ -146,9 +149,9 @@
           :key="index"
           :to="`/${globalStore.companySlug}/customer/estimates/${estimate.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
                 hasActiveUrl(estimate.id),
             },
           ]"
@@ -164,6 +167,7 @@
                 leading-5
                 text-gray-500
                 capitalize
+                dark:text-gray-400
               "
             >
               {{ estimate.estimate_number }}
@@ -184,11 +188,12 @@
                 leading-8
                 text-right text-gray-900
                 block
+                dark:text-white
               "
               :amount="estimate.total"
               :currency="estimate.currency"
             />
-            <div class="text-sm text-right text-gray-500 non-italic">
+            <div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
               {{ estimate.formatted_estimate_date }}
             </div>
           </div>
@@ -196,7 +201,7 @@
 
         <p
           v-if="!estimateStore.estimates.length"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
         >
           {{ $t('estimates.no_matching_estimates') }}
         </p>
diff --git a/resources/scripts/customer/views/invoices/Index.vue b/resources/scripts/customer/views/invoices/Index.vue
index b40fabc5a..5ffbf4165 100644
--- a/resources/scripts/customer/views/invoices/Index.vue
+++ b/resources/scripts/customer/views/invoices/Index.vue
@@ -95,7 +95,7 @@
         <template #cell-invoice_number="{ row }">
           <router-link
             :to="{ path: `invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.invoice_number }}
           </router-link>
@@ -126,11 +126,11 @@
         <template #cell-actions="{ row }">
           <BaseDropdown>
             <template #activator>
-              <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+              <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500 dark:text-gray-200" />
             </template>
             <router-link :to="`invoices/${row.data.id}/view`">
               <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
+                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600  dark:text-gray-200" />
                 {{ $t('general.view') }}
               </BaseDropdownItem>
             </router-link>
diff --git a/resources/scripts/customer/views/invoices/View.vue b/resources/scripts/customer/views/invoices/View.vue
index 28442aea7..810d5f9d4 100644
--- a/resources/scripts/customer/views/invoices/View.vue
+++ b/resources/scripts/customer/views/invoices/View.vue
@@ -31,7 +31,7 @@
 
     <!-- Sidebar -->
     <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
     >
       <div
         class="
@@ -42,6 +42,7 @@
           pt-8
           pb-6
           border border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <BaseInput
@@ -76,6 +77,7 @@
                 mb-2
                 text-sm
                 border-b border-gray-200 border-solid
+                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -130,7 +132,7 @@
             </div>
           </BaseDropdown>
 
-          <BaseButton class="ml-1" variant="white" @click="sortData">
+          <BaseButton class="ml-1" variant="gray" @click="sortData">
             <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
             <BaseIcon v-else name="SortDescendingIcon" class="h-5" />
           </BaseButton>
@@ -144,6 +146,7 @@
           overflow-y-scroll
           border-l border-gray-200 border-solid
           sw-scroll
+          dark:border-gray-600
         "
       >
         <router-link
@@ -152,9 +155,9 @@
           :key="index"
           :to="`/${globalStore.companySlug}/customer/invoices/${invoice.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
                 hasActiveUrl(invoice.id),
             },
           ]"
@@ -170,6 +173,7 @@
                 text-gray-500
                 capitalize
                 text-md
+                dark:text-gray-400
               "
             >
               {{ invoice.invoice_number }}
@@ -189,12 +193,13 @@
                 leading-8
                 text-right text-gray-900
                 block
+               dark:text-white
               "
               :amount="invoice.total"
               :currency="invoice.currency"
             />
 
-            <div class="text-sm text-right text-gray-500 non-italic">
+            <div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
               {{ invoice.formatted_invoice_date }}
             </div>
           </div>
@@ -202,7 +207,7 @@
 
         <p
           v-if="!invoiceStore.invoices.length"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
         >
           {{ $t('invoices.no_matching_invoices') }}
         </p>
diff --git a/resources/scripts/customer/views/payments/Index.vue b/resources/scripts/customer/views/payments/Index.vue
index 2157a34d5..95495b13a 100644
--- a/resources/scripts/customer/views/payments/Index.vue
+++ b/resources/scripts/customer/views/payments/Index.vue
@@ -78,7 +78,7 @@
             :to="{
               path: `payments/${row.data.id}/view`,
             }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.payment_number }}
           </router-link>
@@ -111,11 +111,11 @@
         <template #cell-actions="{ row }">
           <BaseDropdown>
             <template #activator>
-              <BaseIcon name="DotsHorizontalIcon" class="w-5 text-gray-500" />
+              <BaseIcon name="DotsHorizontalIcon" class="w-5 text-gray-500  dark:text-gray-200" />
             </template>
             <router-link :to="`payments/${row.data.id}/view`">
               <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
+                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600  dark:text-gray-200" />
                 {{ $t('general.view') }}
               </BaseDropdownItem>
             </router-link>
diff --git a/resources/scripts/customer/views/payments/View.vue b/resources/scripts/customer/views/payments/View.vue
index 1e03a2d1b..2ca62a2e2 100644
--- a/resources/scripts/customer/views/payments/View.vue
+++ b/resources/scripts/customer/views/payments/View.vue
@@ -19,7 +19,7 @@
 
     <!-- Sidebar -->
     <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
     >
       <div
         class="
@@ -30,6 +30,7 @@
           pt-8
           pb-6
           border border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <BaseInput
@@ -64,6 +65,7 @@
                 mb-2
                 text-sm
                 border-b border-gray-200 border-solid
+                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -118,7 +120,7 @@
             </div>
           </BaseDropdown>
 
-          <BaseButton class="ml-1" variant="white" @click="sortData">
+          <BaseButton class="ml-1" variant="gray" @click="sortData">
             <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
             <BaseIcon v-else name="SortDescendingIcon" class="h-5" />
           </BaseButton>
@@ -132,6 +134,7 @@
           overflow-y-scroll
           border-l border-gray-200 border-solid
           sw-scroll
+          dark:border-gray-600
         "
       >
         <router-link
@@ -140,9 +143,9 @@
           :key="index"
           :to="`/${globalStore.companySlug}/customer/payments/${payment.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
                 hasActiveUrl(payment.id),
             },
           ]"
@@ -158,6 +161,7 @@
                 leading-5
                 text-gray-500
                 capitalize
+                dark:text-gray-400
               "
             >
               {{ payment.payment_number }}
@@ -174,12 +178,13 @@
                 leading-8
                 text-right text-gray-900
                 block
+                dark:text-white
               "
               :amount="payment.amount"
               :currency="payment.currency"
             />
 
-            <div class="text-sm text-right text-gray-500 non-italic">
+            <div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
               {{ payment.formatted_payment_date }}
             </div>
           </div>
@@ -187,7 +192,7 @@
 
         <p
           v-if="!paymentStore.payments.length"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
         >
           {{ $t('payments.no_matching_payments') }}
         </p>
diff --git a/resources/scripts/customer/views/settings/CustomerSettings.vue b/resources/scripts/customer/views/settings/CustomerSettings.vue
index 0a4ab3c13..d271a5104 100644
--- a/resources/scripts/customer/views/settings/CustomerSettings.vue
+++ b/resources/scripts/customer/views/settings/CustomerSettings.vue
@@ -66,24 +66,10 @@
         >
           <BaseInput
             v-model="userStore.userForm.password"
-            :type="isShowPassword ? 'text' : 'password'"
+            type="password"
             :invalid="v$.userForm.password.$error"
             @input="v$.userForm.password.$touch()"
-          >
-            <template #right>
-              <BaseIcon
-                v-if="isShowPassword"
-                name="EyeOffIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowPassword = !isShowPassword"
-              />
-              <BaseIcon
-                v-else
-                name="EyeIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowPassword = !isShowPassword"
-              /> </template
-          ></BaseInput>
+          />
         </BaseInputGroup>
 
         <BaseInputGroup
@@ -95,24 +81,10 @@
         >
           <BaseInput
             v-model="userStore.userForm.confirm_password"
-            :type="isShowConfirmPassword ? 'text' : 'password'"
+            type="password"
             :invalid="v$.userForm.confirm_password.$error"
             @input="v$.userForm.confirm_password.$touch()"
-          >
-            <template #right>
-              <BaseIcon
-                v-if="isShowConfirmPassword"
-                name="EyeOffIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowConfirmPassword = !isShowConfirmPassword"
-              />
-              <BaseIcon
-                v-else
-                name="EyeIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowConfirmPassword = !isShowConfirmPassword"
-              /> </template
-          ></BaseInput>
+          />
         </BaseInputGroup>
       </div>
 
@@ -151,8 +123,6 @@ const { t, tm } = useI18n()
 let imgFiles = ref([])
 let isSaving = ref(false)
 let avatarFileBlob = ref(null)
-let isShowPassword = ref(false)
-let isShowConfirmPassword = ref(false)
 const isCustomerAvatarRemoved = ref(false)
 
 if (userStore.userForm.avatar) {
diff --git a/resources/scripts/helpers/use-popper.js b/resources/scripts/helpers/use-popper.js
index 1196190fb..bf1acd2c1 100644
--- a/resources/scripts/helpers/use-popper.js
+++ b/resources/scripts/helpers/use-popper.js
@@ -7,12 +7,12 @@ export function usePopper(options) {
   let popper = ref(null)
 
   onMounted(() => {
-    watchEffect(onInvalidate => {
+    watchEffect((onInvalidate) => {
       if (!container.value) return
       if (!activator.value) return
 
       let containerEl = container.value.el || container.value
-      let activatorEl = activator.value.el || activator.value
+      let activatorEl = activator.value.$el || activator.value
 
       if (!(activatorEl instanceof HTMLElement)) return
       if (!(containerEl instanceof HTMLElement)) return
diff --git a/resources/scripts/locales/en.json b/resources/scripts/locales/en.json
index 977459b03..83ec7f7d1 100644
--- a/resources/scripts/locales/en.json
+++ b/resources/scripts/locales/en.json
@@ -863,6 +863,8 @@
     "company_info": {
       "company_info": "Company info",
       "company_name": "Company Name",
+      "company_slug": "Company Slug",
+      "company_slug_help_text": "A unique URL friendly name for your company (It will appear on Customer Portal URL)",
       "company_logo": "Company Logo",
       "section_description": "Information about your company that will be displayed on invoices, estimates and other documents created by Crater.",
       "phone": "Phone",
@@ -1324,6 +1326,8 @@
     "company_info": "Company Information",
     "company_info_desc": "This information will be displayed on invoices. Note that you can edit this later on settings page.",
     "company_name": "Company Name",
+    "company_slug": "Company Slug",
+    "company_slug_help_text": "A unique URL friendly name for your company (It will appear on Customer Portal URL)",
     "company_logo": "Company Logo",
     "logo_preview": "Logo Preview",
     "preferences": "Company Preferences",
@@ -1454,7 +1458,8 @@
     "at_least_one_ability": "Please select atleast one Permission.",
     "valid_driver_key": "Please enter a valid {driver} key.",
     "valid_exchange_rate": "Please enter a valid exchange rate.",
-    "company_name_not_same": "Company name must match with given name."
+    "company_name_not_same": "Company name must match with given name.",
+    "invalid_slug": "Invalid Slug"
   },
   "errors": {
     "starter_plan": "This feature is available on Starter plan and onwards!",
@@ -1522,5 +1527,13 @@
   "pdf_bill_to": "Bill to,",
   "pdf_ship_to": "Ship to,",
   "pdf_received_from": "Received from:",
-  "pdf_tax_label": "Tax"
+  "pdf_tax_label": "Tax",
+  "date_picker": {
+    "same_day": "Same Day",
+    "within_7_days": "Within 7 Days",
+    "within_15_days": "Within 15 Days",
+    "within_30_days": "Within 30 Days",
+    "within_45_days": "Within 45 Days",
+    "within_60_days": "Within 60 Days"
+  }
 }
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 80aed3113..9f20595df 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -17,7 +17,7 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
     <!-- Module Styles -->
-    @foreach(\Crater\Services\Module\ModuleFacade::allStyles() as $name => $path)
+    @foreach (\Crater\Services\Module\ModuleFacade::allStyles() as $name => $path)
         <link rel="stylesheet" href="/modules/styles/{{ $name }}">
     @endforeach
 
@@ -25,8 +25,8 @@
 </head>
 
 <body
-    class="h-full overflow-hidden bg-gray-100 font-base
-    @if(isset($current_theme)) theme-{{ $current_theme }} @else theme-{{get_app_setting('admin_portal_theme') ?? 'crater'}} @endif ">
+    class="h-full overflow-hidden bg-gray-100 dark:bg-gray-900 dark:text-white font-base
+    @if (isset($current_theme)) theme-{{ $current_theme }} @else theme-{{ get_app_setting('admin_portal_theme') ?? 'crater' }} @endif ">
 
     <!-- Module Scripts -->
     @foreach (\Crater\Services\Module\ModuleFacade::allScripts() as $name => $path)
@@ -38,6 +38,14 @@ class="h-full overflow-hidden bg-gray-100 font-base
     @endforeach
 
     <script type="module">
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark')
+            document.documentElement.style.setProperty('color-scheme', 'dark');
+        } else {
+            document.documentElement.classList.remove('dark')
+            document.documentElement.style.setProperty('color-scheme', 'light')
+        }
+
         @if(isset($customer_logo))
 
         window.customer_logo = "/storage/{{$customer_logo}}"
@@ -57,12 +65,12 @@ class="h-full overflow-hidden bg-gray-100 font-base
 
         window.login_page_description = "{{$login_page_description}}"
 
-        @endif     
+        @endif
         @if(isset($copyright_text))
 
         window.copyright_text = "{{$copyright_text}}"
 
-        @endif    
+        @endif
 
         window.Crater.start()
     </script>
diff --git a/tailwind.config.js b/tailwind.config.js
index 245f2eec1..14cd8210c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,6 +19,7 @@ module.exports = {
     './resources/scripts/**/*.js',
     './resources/scripts/**/*.vue',
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
@@ -35,6 +36,7 @@ module.exports = {
           900: withOpacityValue('--color-primary-900'),
         },
         black: '#040405',
+        highlight: 'rgb(56, 189, 248)',
         red: colors.red,
         teal: colors.teal,
         gray: colors.slate,
@@ -43,10 +45,15 @@ module.exports = {
         88: '22rem',
       },
       backgroundImage: (theme) => ({
-        'multiselect-caret': `url("${svgToDataUri(
-          `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
-</svg>`
+        'multiselect-caret-black': `url("${svgToDataUri(
+          `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="black">
+            <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>`,
+        )}")`,
+        'multiselect-caret-white': `url("${svgToDataUri(
+          `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
+            <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>`,
         )}")`,
         'multiselect-spinner': `url("${svgToDataUri(
           `<svg viewBox="0 0 512 512" fill="${theme(
diff --git a/tests/Feature/Admin/EstimateTest.php b/tests/Feature/Admin/EstimateTest.php
index c726c043f..0a06f83df 100644
--- a/tests/Feature/Admin/EstimateTest.php
+++ b/tests/Feature/Admin/EstimateTest.php
@@ -415,32 +415,31 @@
 
     $response = putJson('api/v1/estimates/'.$estimate->id, $estimate2);
 
-    $this->assertDatabaseHas('estimates', [
-        'id' => $estimate['id'],
-        'template_name' => $estimate2['template_name'],
-        'estimate_number' => $estimate2['estimate_number'],
-        'discount_type' => $estimate2['discount_type'],
-        'discount_val' => $estimate2['discount_val'],
-        'sub_total' => $estimate2['sub_total'],
-        'discount' => $estimate2['discount'],
-        'customer_id' => $estimate2['customer_id'],
-        'total' => $estimate2['total'],
-        'tax' => $estimate2['tax'],
-        'exchange_rate' => $estimate2['exchange_rate'],
-        'base_discount_val' => $estimate2['base_discount_val'],
-        'base_sub_total' => $estimate2['base_sub_total'],
-        'base_total' => $estimate2['base_total'],
-        'base_tax' => $estimate2['base_tax'],
-    ]);
-
-    $this->assertDatabaseHas('estimate_items', [
-        'estimate_id' => $estimate2['items'][0]['estimate_id'],
-        'exchange_rate' => $estimate2['items'][0]['exchange_rate'],
-        'base_price' => $estimate2['items'][0]['base_price'],
-        'base_discount_val' => $estimate2['items'][0]['base_discount_val'],
-        'base_tax' => $estimate2['items'][0]['base_tax'],
-        'base_total' => $estimate2['items'][0]['base_total'],
-    ]);
+    $estimate_assert = collect($estimate2)
+        ->only([
+            'id',
+            'template_name',
+            'estimate_number',
+            'discount_type',
+            'discount_val',
+            'sub_total',
+            'discount',
+            'customer_id',
+            'total',
+            'tax'
+        ])
+        ->toArray();
+
+    $this->assertDatabaseHas('estimates', $estimate_assert);
+
+    $estimate_item_assert = collect($estimate2['items'][0])
+        ->only([
+            'estimate_id',
+            'amount'
+        ])
+        ->toArray();
+
+    $this->assertDatabaseHas('estimate_items', $estimate_item_assert);
 
     $response->assertStatus(200);
 });
diff --git a/tests/Feature/Admin/ExpenseTest.php b/tests/Feature/Admin/ExpenseTest.php
index 0e46c0f41..38a5c8dd5 100644
--- a/tests/Feature/Admin/ExpenseTest.php
+++ b/tests/Feature/Admin/ExpenseTest.php
@@ -37,13 +37,15 @@
 
     postJson('api/v1/expenses', $expense)->assertStatus(201);
 
-    $this->assertDatabaseHas('expenses', [
-        'notes' => $expense['notes'],
-        'expense_category_id' => $expense['expense_category_id'],
-        'amount' => $expense['amount'],
-        'exchange_rate' => $expense['exchange_rate'],
-        'base_amount' => $expense['base_amount'],
-    ]);
+    $expense = collect($expense)
+        ->only([
+            'notes',
+            'expense_category_id',
+            'amount'
+        ])
+        ->toArray();
+
+    $this->assertDatabaseHas('expenses', $expense);
 });
 
 test('store validates using a form request', function () {
@@ -146,11 +148,13 @@
 
     putJson('api/v1/expenses/'.$expense->id, $expense2)->assertOk();
 
-    $this->assertDatabaseHas('expenses', [
-        'id' => $expense->id,
-        'expense_category_id' => $expense2['expense_category_id'],
-        'amount' => $expense2['amount'],
-        'exchange_rate' => $expense2['exchange_rate'],
-        'base_amount' => $expense2['base_amount'],
-    ]);
+    $expense2 = collect($expense2)
+        ->only([
+            'id',
+            'expense_category_id',
+            'amount'
+        ])
+        ->toArray();
+
+    $this->assertDatabaseHas('expenses', $expense2);
 });
diff --git a/tests/Feature/Admin/InvoiceTest.php b/tests/Feature/Admin/InvoiceTest.php
index ef8a716e6..dce605a51 100644
--- a/tests/Feature/Admin/InvoiceTest.php
+++ b/tests/Feature/Admin/InvoiceTest.php
@@ -9,7 +9,6 @@
 use Crater\Models\User;
 use Illuminate\Support\Facades\Artisan;
 use Laravel\Sanctum\Sanctum;
-
 use function Pest\Laravel\getJson;
 use function Pest\Laravel\postJson;
 use function Pest\Laravel\putJson;
@@ -431,31 +430,36 @@
 
     putJson('api/v1/invoices/'.$invoice->id, $invoice2)->assertOk();
 
-    $this->assertDatabaseHas('invoices', [
-        'id' => $invoice['id'],
-        'invoice_number' => $invoice2['invoice_number'],
-        'sub_total' => $invoice2['sub_total'],
-        'total' => $invoice2['total'],
-        'tax' => $invoice2['tax'],
-        'discount' => $invoice2['discount'],
-        'customer_id' => $invoice2['customer_id'],
-        'template_name' => $invoice2['template_name'],
-        'exchange_rate' => $invoice2['exchange_rate'],
-        'base_total' => $invoice2['base_total'],
-    ]);
-
-    $this->assertDatabaseHas('invoice_items', [
-        'invoice_id' => $invoice2['items'][0]['invoice_id'],
-        'item_id' => $invoice2['items'][0]['item_id'],
-        'name' => $invoice2['items'][0]['name'],
-        'exchange_rate' => $invoice2['items'][0]['exchange_rate'],
-        'base_price' => $invoice2['items'][0]['base_price'],
-        'base_total' => $invoice2['items'][0]['base_total'],
-    ]);
-
-    $this->assertDatabaseHas('taxes', [
-        'amount' => $invoice2['taxes'][0]['amount'],
-        'name' => $invoice2['taxes'][0]['name'],
-        'base_amount' => $invoice2['taxes'][0]['base_amount'],
-    ]);
+    $invoice_assert = collect($invoice2)
+        ->only([
+            'invoice_number',
+            'template_name',
+            'sub_total',
+            'total',
+            'tax',
+            'discount',
+            'customer_id',
+        ])
+        ->toArray();
+
+    $this->assertDatabaseHas('invoices', $invoice_assert);
+
+    $invoice_item_assert = collect($invoice2['items'][0])
+        ->only([
+            'invoice_id',
+            'item_id',
+            'name',
+        ])
+        ->toArray();
+
+    $this->assertDatabaseHas('invoice_items', $invoice_item_assert);
+
+    $invoice_tax_assert = collect($invoice2['taxes'][0])
+        ->only([
+            'name',
+            'amount'
+        ])
+        ->toArray();
+
+    $this->assertDatabaseHas('taxes', $invoice_tax_assert);
 });
diff --git a/yarn.lock b/yarn.lock
index 842c02729..2f0cb4bfc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,43 +15,30 @@
     "@babel/highlight" "^7.10.4"
 
 "@babel/code-frame@^7.0.0":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
-  integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
   dependencies:
-    "@babel/highlight" "^7.14.5"
+    "@babel/highlight" "^7.16.7"
 
-"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9":
-  version "7.14.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
-  integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
-  integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.16.7":
+  version "7.16.10"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
+  integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.14.5"
+    "@babel/helper-validator-identifier" "^7.16.7"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.12.0":
-  version "7.15.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.3.tgz#3416d9bea748052cfcb63dbcc27368105b1ed862"
-  integrity sha512-O0L6v/HvqbdJawj0iBEfVQMc3/6WP+AeOsovsIgBFyJaG+W2w7eqvZB7puddATmWuARlm1SX7DwxJ/JJUnDpEA==
-
-"@babel/parser@^7.15.0":
-  version "7.15.7"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.7.tgz#0c3ed4a2eb07b165dfa85b3cc45c727334c4edae"
-  integrity sha512-rycZXvQ+xS9QyIcJ9HXeDWf1uxqlbVFAUq0Rq0dbc50Zb/+wUe/ehyfzGfm9KZZF0kBejYgxltBXocP+gKdL2g==
-
-"@babel/types@^7.12.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
-  integrity sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.14.9"
-    to-fast-properties "^2.0.0"
+"@babel/parser@^7.16.4":
+  version "7.17.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
+  integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
 
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
@@ -68,15 +55,15 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@headlessui/vue@^1.4.0":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.4.2.tgz#1098f52cb6c583772708a980b3487222ac0ae65e"
-  integrity sha512-+uOaPwHncxHZ6JBwYycu3YxDDrY0v1tcxCtK04H1WGBLBm07dqVi38Q2RB7eY867FUhD0sL6q+Fj69rVn8P0OQ==
+"@headlessui/vue@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.5.0.tgz#8cd4877d3d344e482073a04ae8e3b7f987bb267c"
+  integrity sha512-jAp6XYpqdEv32xhszaj5ejvjaX5qhu20sCbxu7lplePEfZL+4ffabivJBBTZAiPWczqAXmnZWNWG5DOyqjRa4w==
 
 "@heroicons/vue@^1.0.1":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@heroicons/vue/-/vue-1.0.4.tgz#dcfd957a9abc827321054e643f6fb73629b3eef6"
-  integrity sha512-jm7JMoUGr7Asn07oYNmewxkdQALnskTzRo17iGpHG/apLcc+GFdvdN4XvWZ2awStodaqeZ4eYWg7UcI0LvLETQ==
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@heroicons/vue/-/vue-1.0.6.tgz#d8b90734b436eb5a87f40cc300b64a0fb0031f7f"
+  integrity sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==
 
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
@@ -88,65 +75,65 @@
     minimatch "^3.0.4"
 
 "@humanwhocodes/object-schema@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
-  integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
-
-"@intlify/core-base@9.1.7":
-  version "9.1.7"
-  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.1.7.tgz#a454a492683690bc3d0abab82605ab5a23645bd0"
-  integrity sha512-q1W2j81xbHyfKrNcca/CeJyf0Bcx4u9UDu05l7AaiJbqOseTme2o2I3wp1hDDCtmC7k7HgX0sAygyHNJH9swuQ==
-  dependencies:
-    "@intlify/devtools-if" "9.1.7"
-    "@intlify/message-compiler" "9.1.7"
-    "@intlify/message-resolver" "9.1.7"
-    "@intlify/runtime" "9.1.7"
-    "@intlify/shared" "9.1.7"
-    "@intlify/vue-devtools" "9.1.7"
-
-"@intlify/devtools-if@9.1.7":
-  version "9.1.7"
-  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.1.7.tgz#a5df0f33e06c3ead3e53b7f4d4b10a2d52309361"
-  integrity sha512-/DcN5FUySSkQhDqx5y1RvxfuCXO3Ot/dUEIOs472qbM7Hyb2qif+eXCnwHBzlI4+wEfQVT6L0PiM1a7Er/ro9g==
-  dependencies:
-    "@intlify/shared" "9.1.7"
-
-"@intlify/message-compiler@9.1.7":
-  version "9.1.7"
-  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.1.7.tgz#4663fcc2a190f3cc6970e12565c8d6f22beeb719"
-  integrity sha512-JZNkAhr3O7tnbdbRBcpYfqr/Ai26WTzX0K/lV8Y1KVdOIj/dGiamaffdWUdFiDXUnbJRNbPiOaKxy7Pwip3KxQ==
-  dependencies:
-    "@intlify/message-resolver" "9.1.7"
-    "@intlify/shared" "9.1.7"
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+
+"@intlify/core-base@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.1.9.tgz#e4e8c951010728e4af3a0d13d74cf3f9e7add7f6"
+  integrity sha512-x5T0p/Ja0S8hs5xs+ImKyYckVkL4CzcEXykVYYV6rcbXxJTe2o58IquSqX9bdncVKbRZP7GlBU1EcRaQEEJ+vw==
+  dependencies:
+    "@intlify/devtools-if" "9.1.9"
+    "@intlify/message-compiler" "9.1.9"
+    "@intlify/message-resolver" "9.1.9"
+    "@intlify/runtime" "9.1.9"
+    "@intlify/shared" "9.1.9"
+    "@intlify/vue-devtools" "9.1.9"
+
+"@intlify/devtools-if@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.1.9.tgz#a30e1dd1256ff2c5c98d8d75d075384fba898e5d"
+  integrity sha512-oKSMKjttG3Ut/1UGEZjSdghuP3fwA15zpDPcjkf/1FjlOIm6uIBGMNS5jXzsZy593u+P/YcnrZD6cD3IVFz9vQ==
+  dependencies:
+    "@intlify/shared" "9.1.9"
+
+"@intlify/message-compiler@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.1.9.tgz#1193cbd224a71c2fb981455b8534a3c766d2948d"
+  integrity sha512-6YgCMF46Xd0IH2hMRLCssZI3gFG4aywidoWQ3QP4RGYQXQYYfFC54DxhSgfIPpVoPLQ+4AD29eoYmhiHZ+qLFQ==
+  dependencies:
+    "@intlify/message-resolver" "9.1.9"
+    "@intlify/shared" "9.1.9"
     source-map "0.6.1"
 
-"@intlify/message-resolver@9.1.7":
-  version "9.1.7"
-  resolved "https://registry.yarnpkg.com/@intlify/message-resolver/-/message-resolver-9.1.7.tgz#a95d13866c8de85784358039c8845668152e4162"
-  integrity sha512-WTK+OaXJYjyquLGhuCyDvU2WHkG+kXzXeHagmVFHn+s118Jf2143zzkLLUrapP5CtZ/csuyjmYg7b3xQRQAmvw==
+"@intlify/message-resolver@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/message-resolver/-/message-resolver-9.1.9.tgz#3155ccd2f5e6d0dc16cad8b7f1d8e97fcda05bfc"
+  integrity sha512-Lx/DBpigeK0sz2BBbzv5mu9/dAlt98HxwbG7xLawC3O2xMF9MNWU5FtOziwYG6TDIjNq0O/3ZbOJAxwITIWXEA==
 
-"@intlify/runtime@9.1.7":
-  version "9.1.7"
-  resolved "https://registry.yarnpkg.com/@intlify/runtime/-/runtime-9.1.7.tgz#67e0d6b2fd85a5b0b301a151c2f436f93154c3c6"
-  integrity sha512-QURPSlzhOVnRwS2XMGpCDsDkP42kfVBh94aAORxh/gVGzdgJip2vagrIFij/J69aEqdB476WJkMhVjP8VSHmiA==
+"@intlify/runtime@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/runtime/-/runtime-9.1.9.tgz#2c12ce29518a075629efed0a8ed293ee740cb285"
+  integrity sha512-XgPw8+UlHCiie3fI41HPVa/VDJb3/aSH7bLhY1hJvlvNV713PFtb4p4Jo+rlE0gAoMsMCGcsiT982fImolSltg==
   dependencies:
-    "@intlify/message-compiler" "9.1.7"
-    "@intlify/message-resolver" "9.1.7"
-    "@intlify/shared" "9.1.7"
+    "@intlify/message-compiler" "9.1.9"
+    "@intlify/message-resolver" "9.1.9"
+    "@intlify/shared" "9.1.9"
 
-"@intlify/shared@9.1.7":
-  version "9.1.7"
-  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.1.7.tgz#e7d8bc90cb59dc17dd7b4c85a73db16fcb7891fc"
-  integrity sha512-zt0zlUdalumvT9AjQNxPXA36UgOndUyvBMplh8uRZU0fhWHAwhnJTcf0NaG9Qvr8I1n3HPSs96+kLb/YdwTavQ==
+"@intlify/shared@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.1.9.tgz#0baaf96128b85560666bec784ffb01f6623cc17a"
+  integrity sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==
 
-"@intlify/vue-devtools@9.1.7":
-  version "9.1.7"
-  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.1.7.tgz#b08d39bb5f21ba9b1954eab9466e9408129425a7"
-  integrity sha512-DI5Wc0aOiohtBUGUkKAcryCWbbuaO4/PK4Pa/LaNCsFNxbtgR5qkIDmhBv9xVPYGTUhySXxaDDAMvOpBjhPJjw==
+"@intlify/vue-devtools@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.1.9.tgz#2be8f4dbe7f7ed4115676eb32348141d411e426b"
+  integrity sha512-YPehH9uL4vZcGXky4Ev5qQIITnHKIvsD2GKGXgqf+05osMUI6WSEQHaN9USRa318Rs8RyyPCiDfmA0hRu3k7og==
   dependencies:
-    "@intlify/message-resolver" "9.1.7"
-    "@intlify/runtime" "9.1.7"
-    "@intlify/shared" "9.1.7"
+    "@intlify/message-resolver" "9.1.9"
+    "@intlify/runtime" "9.1.9"
+    "@intlify/shared" "9.1.9"
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -169,30 +156,25 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@popperjs/core@^2.10.1":
-  version "2.10.1"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.1.tgz#728ecd95ab207aab8a9a4e421f0422db329232be"
-  integrity sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==
+"@popperjs/core@2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.0.tgz#0e1bdf8d021e7ea58affade33d9d607e11365915"
+  integrity sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==
 
-"@popperjs/core@^2.6.0":
-  version "2.10.2"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
-  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
-
-"@popperjs/core@^2.8.3", "@popperjs/core@^2.9.2":
-  version "2.9.3"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.3.tgz#8b68da1ebd7fc603999cf6ebee34a4899a14b88e"
-  integrity sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ==
+"@popperjs/core@^2.10.1", "@popperjs/core@^2.11.0", "@popperjs/core@^2.9.0", "@popperjs/core@^2.9.2":
+  version "2.11.4"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.4.tgz#d8c7b8db9226d2d7664553a0741ad7d0397ee503"
+  integrity sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==
 
 "@rvxlab/tailwind-plugin-ios-full-height@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@rvxlab/tailwind-plugin-ios-full-height/-/tailwind-plugin-ios-full-height-1.0.0.tgz#4bd2243454c5e35943b049a6ef435a7a0626731d"
-  integrity sha512-zy9TRxkLev8nwmD9pUDtxNXi3f+C6Q9sAA+/4mq8CPGZue+lEYV7wzJHRnV9vsE4Z0MwzP/wXiQ0DKj8b1/Axg==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@rvxlab/tailwind-plugin-ios-full-height/-/tailwind-plugin-ios-full-height-1.1.0.tgz#ef28929e7dd5a4ca9bdd45df155beb2b78bfef82"
+  integrity sha512-jPIxXn0raN/YTk8nXesqM+JbS2WWd5XaUk/MbaAgVDDPyYtsPfeN3B26xIhSa2oE2+JB66tegPUMSOmixzroXg==
 
 "@stripe/stripe-js@^1.21.2":
-  version "1.21.2"
-  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.21.2.tgz#3501100a1dcd34bbf6d97c5d3e97b18eaa43c242"
-  integrity sha512-iIXe+XF9XdyO4/1i+TPRdsjy4rFOkYLeCsmB/uuSrCVs+Y0nxCdaRK3oD6n7c7lEi1sxDbAQX615wlt9E4EqWQ==
+  version "1.25.0"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.25.0.tgz#74334e3f9971e8dfd352a67581c6e02dc5c2ebf8"
+  integrity sha512-cywIoKu3sJnBPQ1eKi3BzFHWslA2ePqHvQhcxp7iYYlo1tWcVgEKTSh7y7hb6GoR4TyT3DwlK4v1vOZpVg8u4Q==
 
 "@tailwindcss/aspect-ratio@^0.4.0":
   version "0.4.0"
@@ -200,213 +182,211 @@
   integrity sha512-WJu0I4PpqNPuutpaA9zDUq2JXR+lorZ7PbLcKNLmb6GL9/HLfC7w3CRsMhJF4BbYd/lkY6CfXOvkYpuGnZfkpQ==
 
 "@tailwindcss/forms@^0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.4.0.tgz#a46715e347a32d216a3973eb67473bd29ae3798e"
-  integrity sha512-DeaQBx6EgEeuZPQACvC+mKneJsD8am1uiJugjgQK1+/Vt+Ai0GpFBC2T2fqnUad71WgOxyrZPE6BG1VaI6YqfQ==
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.4.1.tgz#5a47ccd60490cbba84e662f2b9cf3d71a5126d17"
+  integrity sha512-gS9xjCmJjUBz/eP12QlENPLnf0tCx68oYE3mri0GMP5jdtVwLbGUNSRpjsp6NzLAZzZy3ueOwrcqB78Ax6Z84A==
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
 "@tailwindcss/line-clamp@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.3.0.tgz#bb342d7bdc11a6568dc6d2aacacd531b25eae7cf"
-  integrity sha512-ffDDclrqr3sy8cpChCozedDUAN8enxqAiWeH8d4dGQ2hcXlxf51+7KleveFi/n/TxEuRVApoL7hICeDOdYPKpg==
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.3.1.tgz#4d8441b509b87ece84e94f28a4aa9998413ab849"
+  integrity sha512-pNr0T8LAc3TUx/gxCfQZRe9NB2dPEo/cedPHzUGIPxqDMhgjwNm6jYxww4W5l0zAsAddxr+XfZcqttGiFDgrGg==
 
 "@tailwindcss/typography@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.0.tgz#47886ec46ac41e1211d24fea05301046d9b30906"
-  integrity sha512-1p/3C6C+JJziS/ghtG8ACYalbA2SyLJY27Pm33cVTlAoY6VQ7zfm2H64cPxUMBkVIlWXTtWHhZcZJPobMRmQAA==
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.2.tgz#24b069dab24d7a2467d01aca0dd432cb4b29f0ee"
+  integrity sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==
   dependencies:
     lodash.castarray "^4.4.0"
     lodash.isplainobject "^4.0.6"
     lodash.merge "^4.6.2"
-    lodash.uniq "^4.5.0"
 
-"@tiptap/core@^2.0.0-beta.85", "@tiptap/core@^2.0.0-beta.99":
-  version "2.0.0-beta.99"
-  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.0.0-beta.99.tgz#6ff2ef0a089b1d33713e5e57cff2f691dba5bddf"
-  integrity sha512-DoSIgeYyWGWTDVHyquVM5SM61T4U8kKWjlmOtSPcee13Z5zXrbCBSxCTgtC3uh7I+OcoE/PNQQFMU9yWZzKnhw==
+"@tiptap/core@^2.0.0-beta.174", "@tiptap/core@^2.0.0-beta.85":
+  version "2.0.0-beta.174"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.0.0-beta.174.tgz#cfdf16b7d7401e4b255dc69147d784f5f537b942"
+  integrity sha512-APQDto40PdvagG1HTwkKlieQS4Vp6GXNe7qgV1Qo2QCgJCLyxc/fXCTghtrOx0CQb+9JT7fjSLZxbSyUFXjx7Q==
   dependencies:
     "@types/prosemirror-commands" "^1.0.4"
-    "@types/prosemirror-inputrules" "^1.0.4"
     "@types/prosemirror-keymap" "^1.0.4"
-    "@types/prosemirror-model" "^1.13.1"
+    "@types/prosemirror-model" "^1.16.0"
     "@types/prosemirror-schema-list" "^1.0.3"
-    "@types/prosemirror-state" "^1.2.7"
-    "@types/prosemirror-transform" "^1.1.4"
-    "@types/prosemirror-view" "^1.17.2"
-    prosemirror-commands "^1.1.10"
-    prosemirror-inputrules "^1.1.3"
-    prosemirror-keymap "^1.1.3"
-    prosemirror-model "^1.14.3"
-    prosemirror-schema-list "^1.1.5"
+    "@types/prosemirror-state" "^1.2.8"
+    "@types/prosemirror-transform" "^1.1.5"
+    "@types/prosemirror-view" "^1.23.1"
+    prosemirror-commands "^1.2.1"
+    prosemirror-keymap "^1.1.5"
+    prosemirror-model "^1.16.1"
+    prosemirror-schema-list "^1.1.6"
     prosemirror-state "^1.3.4"
-    prosemirror-transform "^1.3.2"
-    prosemirror-view "^1.19.0"
+    prosemirror-transform "^1.3.3"
+    prosemirror-view "^1.23.6"
 
-"@tiptap/extension-blockquote@^2.0.0-beta.15":
-  version "2.0.0-beta.15"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.0.0-beta.15.tgz#40be203f7db47e027ea1a5ba42bbb0e33bb6c004"
-  integrity sha512-Cso44KsYsqKqaNveQmx5KVaLy9krq5AzE9WhGVDBSFqWhvuIJkQYrTRBbOTfUDs/st9VuwJrbjTDD65ow50wEw==
-  dependencies:
-    prosemirror-inputrules "^1.1.3"
+"@tiptap/extension-blockquote@^2.0.0-beta.26":
+  version "2.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.0.0-beta.26.tgz#e5ae4b7bd9376db37407a23e22080c7b11287f3b"
+  integrity sha512-A6yjcYovONJfOjQFk6vDYXswaCdCtCwjL7w9VTB0R2DLTuJvvRt9DWN0IDcMrj5G+aMgDq4GUUTitv+2Y8krDg==
 
-"@tiptap/extension-bold@^2.0.0-beta.15":
-  version "2.0.0-beta.15"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.0.0-beta.15.tgz#cf9ddb3fc316be9707753ad4e497bfb8a3ebb0c2"
-  integrity sha512-jKyV6iiwhxwa0+7uuKD74jNDVNLNOS1GmU14MgaA95pY5e1fyaRBPPX8Gtt89niz2CLOY711AV17RPZTe/e60w==
+"@tiptap/extension-bold@^2.0.0-beta.26":
+  version "2.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.0.0-beta.26.tgz#aa1c7850df28cec8e0614fde437183bd4ae3e66b"
+  integrity sha512-pnO0I5sEQM3pmowjMGQ74adLzvc6HqGyLyqMizaGMicPu9uTYlSdId+qckYEEgPwPMaEShtv2Vg+ZHs7KVqfcg==
 
-"@tiptap/extension-bubble-menu@^2.0.0-beta.29":
-  version "2.0.0-beta.29"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.0-beta.29.tgz#570bcc606cff4deb10b4ef3b7a6e116c92c028ec"
-  integrity sha512-fOzUaMRCEQEtNUsJXeiuSbQuw19DObLISTbF78HQQh8VTsUu1uLeIxSlEcZ0u3Cl/kMFcDCKeIZb+jkRfEAjNw==
+"@tiptap/extension-bubble-menu@^2.0.0-beta.55":
+  version "2.0.0-beta.55"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.0-beta.55.tgz#a26ad892cea6af9eeada22235701b06d0921af48"
+  integrity sha512-v32/QnwwRbepdbrho8mTYru1/XNW/rJi3Mjrgo3rrIs67R86aEPmhmdzD3QEQUJhAJkduuwdw8zElmVWqIJQ9w==
   dependencies:
     prosemirror-state "^1.3.4"
-    prosemirror-view "^1.19.0"
-    tippy.js "^6.3.1"
+    prosemirror-view "^1.23.6"
+    tippy.js "^6.3.7"
 
-"@tiptap/extension-bullet-list@^2.0.0-beta.15":
-  version "2.0.0-beta.15"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.0.0-beta.15.tgz#74876851a8d227ba1a031d031631ed621c175e05"
-  integrity sha512-5i44JzsZOh8Ci6CuYRQy6W3jCpYgX0+VuJKeHvZ6Aomy4Qqrtc9Jk43PBmCj91lNUUtH6Io9l+kDrLCumEFnEg==
-  dependencies:
-    prosemirror-inputrules "^1.1.3"
+"@tiptap/extension-bullet-list@^2.0.0-beta.26":
+  version "2.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.0.0-beta.26.tgz#b42126d2d984c04041b14037e8d3ec1bcf16e7ec"
+  integrity sha512-1n5HV8gY1tLjPk4x48nva6SZlFHoPlRfF6pqSu9JcJxPO7FUSPxUokuz4swYNe0LRrtykfyNz44dUcxKVhoFow==
 
-"@tiptap/extension-code-block@^2.0.0-beta.17":
-  version "2.0.0-beta.17"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.0.0-beta.17.tgz#b12ab35561da08b359f4d8dced2b8c30eb62fcdb"
-  integrity sha512-u3RY991mXtjuw+trVaDwbAhuPPlU8l6kS4rXIxWJ5W/sNElbmfHLVu7RP++YwM8KOQrCrQl8TJbZTEIekMw61w==
+"@tiptap/extension-code-block@^2.0.0-beta.37":
+  version "2.0.0-beta.37"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.0.0-beta.37.tgz#c07c007248a21d9e0434458fd05c363b7078227f"
+  integrity sha512-mJAM+PHaNoKRYwM3D36lZ51/aoPxxvZNQn3UBnZ6G7l0ZJSgB3JvBEzqK6S8nNFeYIIxGwv4QF6vXe4MG9ie2g==
   dependencies:
-    prosemirror-inputrules "^1.1.3"
+    prosemirror-state "^1.3.4"
 
-"@tiptap/extension-code@^2.0.0-beta.16":
-  version "2.0.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.0.0-beta.16.tgz#b258ff90ebe703a4d36ff0c650e6b2cab634028d"
-  integrity sha512-Kakg/RMiVrxjzIkLVDXtbCzRh/9W8dgSG04IhMZNOI8N9vWn8Z78jdUyxEEDTcL/JyWWcMxn9AsJw2U5ajO3pA==
+"@tiptap/extension-code@^2.0.0-beta.26":
+  version "2.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.0.0-beta.26.tgz#bbfa600a252ee2cded6947b56b6c4c33d998e53a"
+  integrity sha512-QcFWdEFfbJ1n5UFFBD17QPPAJ3J5p/b7XV484u0shCzywO7aNPV32QeHy1z0eMoyZtCbOWf6hg/a7Ugv8IwpHw==
 
-"@tiptap/extension-document@^2.0.0-beta.13":
-  version "2.0.0-beta.13"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.0.0-beta.13.tgz#8cfb29d4de64bf4a790817f730c05b4f9b7167b2"
-  integrity sha512-nrufdKziA/wovaY4DjGkc8OGuIZi8CH8CW3+yYfeWbruwFKkyZHlZy9nplFWSEqBHPAeqD+px9r91yGMW3ontA==
+"@tiptap/extension-document@^2.0.0-beta.15":
+  version "2.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.0.0-beta.15.tgz#5d17a0289244a913ab2ef08e8495a1e46950711e"
+  integrity sha512-ypENC+xUYD5m2t+KOKNYqyXnanXd5fxyIyhR1qeEEwwQwMXGNrO3kCH6O4mIDCpy+/WqHvVay2tV5dVsXnvY8w==
 
-"@tiptap/extension-dropcursor@^2.0.0-beta.18":
-  version "2.0.0-beta.18"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.0.0-beta.18.tgz#25f0676b0cae6900ac18e11a2e1ea2627904dfa3"
-  integrity sha512-P9cMKO7YXsqp62WA2sliWA6TZThO0yoQprv8Em5BPnW53ttZn9RR9sZaeLL/y02cl/aLVtqdLtl2CPSER43ieA==
+"@tiptap/extension-dropcursor@^2.0.0-beta.25":
+  version "2.0.0-beta.25"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.0.0-beta.25.tgz#962f290a200259533a26194daca5a4b4a53e72d3"
+  integrity sha512-GYf5s6dkZtsDy+TEkrQK6kLbfbitG4qnk02D+FlhlJMI/Nnx8rYCRJbwEHDdqrfX7XwZzULMqqqHvzxZYrEeNg==
   dependencies:
-    "@types/prosemirror-dropcursor" "^1.0.2"
-    prosemirror-dropcursor "^1.3.5"
+    "@types/prosemirror-dropcursor" "^1.0.3"
+    prosemirror-dropcursor "^1.4.0"
 
-"@tiptap/extension-floating-menu@^2.0.0-beta.23":
-  version "2.0.0-beta.23"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.0-beta.23.tgz#d2075e58449585fe4e365a1fbf1f708bf54dc2c5"
-  integrity sha512-vhJjqf0iCbn8sG/WSbGW/5QkJNoh/l25In7zGG6eRRwzxKiQy2POdkSxCZdcFKjyg8xNu8OXZURWkpSx8XJKSA==
+"@tiptap/extension-floating-menu@^2.0.0-beta.50":
+  version "2.0.0-beta.50"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.0-beta.50.tgz#e8785d5f051a848ae053ce139581dce96b951a35"
+  integrity sha512-aQu1HtthMIYEPylr6kzioLxMiObLbcgwx9xZzF03KwNnkjQLbjZOeJX2RwSYVpiVgtfPBGOm3N/br6NSYec4yQ==
   dependencies:
     prosemirror-state "^1.3.4"
-    prosemirror-view "^1.19.0"
-    tippy.js "^6.3.1"
+    prosemirror-view "^1.23.6"
+    tippy.js "^6.3.7"
 
-"@tiptap/extension-gapcursor@^2.0.0-beta.19":
-  version "2.0.0-beta.19"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.0-beta.19.tgz#6d826c240496b1a77808999d51b8917adb372cc5"
-  integrity sha512-GZYMR+Z45bn87CMuOHyxzTJOFoCv58mNakIBdSGX+8A+ExBFeZr/qLqxDxN3wz+LRqy7pREe5K3UxJxpsYnCzA==
+"@tiptap/extension-gapcursor@^2.0.0-beta.34":
+  version "2.0.0-beta.34"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.0-beta.34.tgz#0e4971affb1621934422dd5fc4bf2dd7a84f70f7"
+  integrity sha512-Vm8vMWWQ2kJcUOLfB5CEo5pYgyudI7JeeiZvX9ScPmUmgKVYhEpt3EAICY9pUYJ41aAVH35gZLXkUtsz2f9GHw==
   dependencies:
     "@types/prosemirror-gapcursor" "^1.0.4"
-    prosemirror-gapcursor "^1.1.5"
+    prosemirror-gapcursor "^1.2.1"
 
-"@tiptap/extension-hard-break@^2.0.0-beta.15":
-  version "2.0.0-beta.15"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.0.0-beta.15.tgz#ce00dd40f5abeaff8574f2288ade6815ab696c94"
-  integrity sha512-MS7MjGOtKtC1bVNAShwCetFRuk8nPr/j18OOzKChNrJFrZXWNJrid3dUojwDLqCraYdzSTmiOmMgU+yoUe/gnw==
+"@tiptap/extension-hard-break@^2.0.0-beta.30":
+  version "2.0.0-beta.30"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.0.0-beta.30.tgz#165494f1194a7bad08907e6d64d349dd15851b72"
+  integrity sha512-X9xj/S+CikrbIE7ccUFVwit5QHEbflnKVxod+4zPwr1cxogFbE9AyLZE2MpYdx3z9LcnTYYi9leBqFrP4T/Olw==
 
-"@tiptap/extension-heading@^2.0.0-beta.15":
-  version "2.0.0-beta.15"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.0.0-beta.15.tgz#d62f32a2ec8ce5a6d4e716aa7a45dfb707283848"
-  integrity sha512-UoXDwEdCV9KiPh0wj0jj2Jt6VDqkoTaSU3d9bmEBLwg1Gjgbuv39JDst7oxSqbf9rgbl3txbeOy35wVBKe9CqA==
-  dependencies:
-    prosemirror-inputrules "^1.1.3"
+"@tiptap/extension-heading@^2.0.0-beta.26":
+  version "2.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.0.0-beta.26.tgz#112b14b4d488772bda36abbf7cb2bc8aba7c42f5"
+  integrity sha512-nR6W/3rjnZH1Swo7tGBoYsmO6xMvu9MGq6jlm3WVHCB7B3CsrRvCkTwGjVIbKTaZC4bQfx5gvAUpQFvwuU+M5w==
 
-"@tiptap/extension-history@^2.0.0-beta.15":
-  version "2.0.0-beta.15"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.0.0-beta.15.tgz#c1275d89fda44a45aaf47e95b21f74d07b45018d"
-  integrity sha512-6UtsNu9eTDnSTsAw1DdOoOh4rf6pL2sn0my93vkNLe7GUf5RbasPPhWX8Qe6JZMkbBTRPTzqfw92jPhJTchggQ==
+"@tiptap/extension-history@^2.0.0-beta.21":
+  version "2.0.0-beta.21"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.0.0-beta.21.tgz#5d96a17a83a7130744f0757a3275dd5b11eb1bf7"
+  integrity sha512-0v8Cl30V4dsabdpspLdk+f+lMoIvLFlJN5WRxtc7RRZ5gfJVxPHwooIKdvC51brfh/oJtWFCNMRjhoz0fRaF9A==
   dependencies:
     "@types/prosemirror-history" "^1.0.3"
-    prosemirror-history "^1.1.3"
+    prosemirror-history "^1.2.0"
 
-"@tiptap/extension-horizontal-rule@^2.0.0-beta.19":
-  version "2.0.0-beta.19"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.0.0-beta.19.tgz#d98d0070a2cead32a497b62586c0e259d31f3f2e"
-  integrity sha512-RrU7+inExgC+rRmFWoTxALbu/IgRGRik11LPhMhqrCB+n0XFRUMyVEb/jbfgHWVrPmTXq0MbSWW6LYw3iREzRA==
+"@tiptap/extension-horizontal-rule@^2.0.0-beta.31":
+  version "2.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.0.0-beta.31.tgz#efb383a6cedbbf4f2175d7d207eaeeba626faab0"
+  integrity sha512-MNc4retfjRgkv3qxqGya0+/BEd1Kmn+oMsCRvE+8x3sXyKIse+vdqMuG5qUcA6np0ZD/9hh1riiQ1GQdgc23Ng==
   dependencies:
     prosemirror-state "^1.3.4"
 
-"@tiptap/extension-italic@^2.0.0-beta.15":
-  version "2.0.0-beta.15"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.0.0-beta.15.tgz#9a81f686cf221110478935596f0b47a76d4c2f45"
-  integrity sha512-ZCz1vCysLdvOUrwODuyBP0BDaemCLh6ib7qTYoSDKdive9kfn0Vc5Fg3o8xgHrtrUfwKIJz/sWOknjDEGIc9cw==
+"@tiptap/extension-italic@^2.0.0-beta.26":
+  version "2.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.0.0-beta.26.tgz#b00c9e32b81b1bd94eaed24bb2a22e44d5dc54a3"
+  integrity sha512-vejGe2ra4K5ipFOn1U9viqF9X9nPTX8WSJpSOux+9UbKjHpANy7bz69tp66OIi/Wh5L/MMDc+luH/04qfVnpZw==
 
-"@tiptap/extension-list-item@^2.0.0-beta.14":
-  version "2.0.0-beta.14"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.14.tgz#65a9ff9daa11bc9ca8bc2989a891abe68081cfbd"
-  integrity sha512-t6xwEqP+d5443Ul2Jvqz9kXb3ro7bA7yY9HA0vskm3120WxxHW9jxgxZN+82Ot5Tm7nXOAlsN6vuqnt4idnxZQ==
+"@tiptap/extension-list-item@^2.0.0-beta.20":
+  version "2.0.0-beta.20"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.20.tgz#7169528b226dee4590e013bdf6e5fc6d83729b0f"
+  integrity sha512-5IPEspJt38t9ROj4xLUesOVEYlTT/R9Skd9meHRxJQZX1qrzBICs5PC/WRIsnexrvTBhdxpYgCYjpvpsJBlKuQ==
 
-"@tiptap/extension-ordered-list@^2.0.0-beta.15":
-  version "2.0.0-beta.15"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.0.0-beta.15.tgz#5645efe300489d5ea2ed7f98eaa84fbdb6951af8"
-  integrity sha512-j9Xh8CYtV+C/wrTXEWN+U7NJIQ/cQrjta80Mm2hFiE2KDtFNkpsPqG6UBoky04EPFphR5xDUsO1nCT7T7Tei5A==
-  dependencies:
-    prosemirror-inputrules "^1.1.3"
+"@tiptap/extension-ordered-list@^2.0.0-beta.27":
+  version "2.0.0-beta.27"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.0.0-beta.27.tgz#ed48a53a9b012d578613b68375db31e8664bfdc9"
+  integrity sha512-apFDeignxdZb3cA3p1HJu0zw1JgJdBYUBz1r7f99qdNybYuk3I/1MPUvlOuOgvIrBB/wydoyVDP+v9F7QN3tfQ==
 
-"@tiptap/extension-paragraph@^2.0.0-beta.17":
-  version "2.0.0-beta.17"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.0.0-beta.17.tgz#f8f0263359b95dec9c10078699697908568d9be9"
-  integrity sha512-qCQVCf9c2hgaeIdfy22PaoZyW5Vare/1aGkOEAaZma5RjrUbV9hrRKwoW9LsDjnh1EN1fIeKdg02yEhnHWtG8A==
+"@tiptap/extension-paragraph@^2.0.0-beta.23":
+  version "2.0.0-beta.23"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.0.0-beta.23.tgz#2ab77308519494994d7a9e5a4acd14042f45f28c"
+  integrity sha512-VWAxyzecErYWk97Kv/Gkghh97zAQTcaVOisEnYYArZAlyYDaYM48qVssAC/vnRRynP2eQxb1EkppbAxE+bMHAA==
 
-"@tiptap/extension-strike@^2.0.0-beta.17":
-  version "2.0.0-beta.17"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.17.tgz#2280ea4e8c50189c2729814d2ae484e58c712a36"
-  integrity sha512-+WRd0RuCK4+jFKNVN+4rHTa5VMqqGDO2uc+TknkqhFqWp/z96OAGlpHJOwPrnW1fLbpjEBBQIr1vVYSw6KgcZg==
+"@tiptap/extension-strike@^2.0.0-beta.27":
+  version "2.0.0-beta.27"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.27.tgz#c5187bf3c28837f95a5c0c0617d0dd31c318353d"
+  integrity sha512-2dmCgtesuDdivM/54Q+Y6Tc3JbGz1SkHP6c62piuqBiYLWg3xa16zChZOhfN8szbbQlBgLT6XRTDt3c2Ux+Dug==
 
-"@tiptap/extension-text@^2.0.0-beta.13":
-  version "2.0.0-beta.13"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.0.0-beta.13.tgz#da0af8d9a3f149d20076e15d88c6af21fb6d940f"
-  integrity sha512-0EtAwuRldCAoFaL/iXgkRepEeOd55rPg5N4FQUN1xTwZT7PDofukP0DG/2jff/Uj17x4uTaJAa9qlFWuNnDvjw==
+"@tiptap/extension-text-align@^2.0.0-beta.29":
+  version "2.0.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-align/-/extension-text-align-2.0.0-beta.29.tgz#31df3d23e7c66caf401a1850a80b88f5cedab0a8"
+  integrity sha512-FNGpl0tVtgG7AK9kVWF/+CGYHta05NpoME4/j6+vhNlZLBNXRA+AKg7W5T8UxmtaC9yGoJsBs2X8M9eCxWVaEQ==
+
+"@tiptap/extension-text@^2.0.0-beta.15":
+  version "2.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.0.0-beta.15.tgz#f08cff1b78f1c6996464dfba1fef8ec1e107617f"
+  integrity sha512-S3j2+HyV2gsXZP8Wg/HA+YVXQsZ3nrXgBM9HmGAxB0ESOO50l7LWfip0f3qcw1oRlh5H3iLPkA6/f7clD2/TFA==
 
 "@tiptap/starter-kit@^2.0.0-beta.81":
-  version "2.0.0-beta.97"
-  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.0.0-beta.97.tgz#8eccba0900af144b8e30cd39ead75b1472e8b4c0"
-  integrity sha512-ySnJPG6px/Pv99TGCrgXOi7Ahh1qkpV171C791lLlFuH+lXMo719bWaeCTEiBDxjamVzh18nEJkIxyu6sucpSg==
-  dependencies:
-    "@tiptap/core" "^2.0.0-beta.99"
-    "@tiptap/extension-blockquote" "^2.0.0-beta.15"
-    "@tiptap/extension-bold" "^2.0.0-beta.15"
-    "@tiptap/extension-bullet-list" "^2.0.0-beta.15"
-    "@tiptap/extension-code" "^2.0.0-beta.16"
-    "@tiptap/extension-code-block" "^2.0.0-beta.17"
-    "@tiptap/extension-document" "^2.0.0-beta.13"
-    "@tiptap/extension-dropcursor" "^2.0.0-beta.18"
-    "@tiptap/extension-gapcursor" "^2.0.0-beta.19"
-    "@tiptap/extension-hard-break" "^2.0.0-beta.15"
-    "@tiptap/extension-heading" "^2.0.0-beta.15"
-    "@tiptap/extension-history" "^2.0.0-beta.15"
-    "@tiptap/extension-horizontal-rule" "^2.0.0-beta.19"
-    "@tiptap/extension-italic" "^2.0.0-beta.15"
-    "@tiptap/extension-list-item" "^2.0.0-beta.14"
-    "@tiptap/extension-ordered-list" "^2.0.0-beta.15"
-    "@tiptap/extension-paragraph" "^2.0.0-beta.17"
-    "@tiptap/extension-strike" "^2.0.0-beta.17"
-    "@tiptap/extension-text" "^2.0.0-beta.13"
+  version "2.0.0-beta.183"
+  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.0.0-beta.183.tgz#35ff9f4b236bd321ffdd44c5061514959c1b4b9d"
+  integrity sha512-Lcms6lEfFfdL1oHoATcNKfu1C8+yhuZnI5Pq+U6o2zSslfnUSDf3jgmy6nSoZrrkqvFoXjQk4dxMDFg3giw2Kg==
+  dependencies:
+    "@tiptap/core" "^2.0.0-beta.174"
+    "@tiptap/extension-blockquote" "^2.0.0-beta.26"
+    "@tiptap/extension-bold" "^2.0.0-beta.26"
+    "@tiptap/extension-bullet-list" "^2.0.0-beta.26"
+    "@tiptap/extension-code" "^2.0.0-beta.26"
+    "@tiptap/extension-code-block" "^2.0.0-beta.37"
+    "@tiptap/extension-document" "^2.0.0-beta.15"
+    "@tiptap/extension-dropcursor" "^2.0.0-beta.25"
+    "@tiptap/extension-gapcursor" "^2.0.0-beta.34"
+    "@tiptap/extension-hard-break" "^2.0.0-beta.30"
+    "@tiptap/extension-heading" "^2.0.0-beta.26"
+    "@tiptap/extension-history" "^2.0.0-beta.21"
+    "@tiptap/extension-horizontal-rule" "^2.0.0-beta.31"
+    "@tiptap/extension-italic" "^2.0.0-beta.26"
+    "@tiptap/extension-list-item" "^2.0.0-beta.20"
+    "@tiptap/extension-ordered-list" "^2.0.0-beta.27"
+    "@tiptap/extension-paragraph" "^2.0.0-beta.23"
+    "@tiptap/extension-strike" "^2.0.0-beta.27"
+    "@tiptap/extension-text" "^2.0.0-beta.15"
 
 "@tiptap/vue-3@^2.0.0-beta.38":
-  version "2.0.0-beta.52"
-  resolved "https://registry.yarnpkg.com/@tiptap/vue-3/-/vue-3-2.0.0-beta.52.tgz#31c3d1df19df60a15b6edd7662320b051ec4da6d"
-  integrity sha512-bHfJuhlCYOp+V3njGS4qQUVwyfjjb7KtPhZwl0FfYSNJ6/BTHYltd6L+UiQzVdcaoWFvPyF47fZajx602B5FGA==
+  version "2.0.0-beta.90"
+  resolved "https://registry.yarnpkg.com/@tiptap/vue-3/-/vue-3-2.0.0-beta.90.tgz#139bfc26ce95a47fae88f9d076876e6c3ecbd878"
+  integrity sha512-5QwYpwqomqD1DmEL9DVS0wXuVouzp+2CThXl9QzPxXXsE+pm03yjjk+VhNMiFkA+DaY0hhnrvtWU7n0o00ExRQ==
   dependencies:
-    "@tiptap/extension-bubble-menu" "^2.0.0-beta.29"
-    "@tiptap/extension-floating-menu" "^2.0.0-beta.23"
+    "@tiptap/extension-bubble-menu" "^2.0.0-beta.55"
+    "@tiptap/extension-floating-menu" "^2.0.0-beta.50"
     prosemirror-state "^1.3.4"
-    prosemirror-view "^1.19.0"
-    vue "^3.0.0"
+    prosemirror-view "^1.23.6"
+
+"@types/lodash@^4.14.165":
+  version "4.14.179"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.179.tgz#490ec3288088c91295780237d2497a3aa9dfb5c5"
+  integrity sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==
 
 "@types/orderedmap@*":
   version "1.0.0"
@@ -427,10 +407,10 @@
     "@types/prosemirror-state" "*"
     "@types/prosemirror-view" "*"
 
-"@types/prosemirror-dropcursor@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-dropcursor/-/prosemirror-dropcursor-1.0.2.tgz#476b90a661f32d6d6a21599f53fcd71e36c65a1f"
-  integrity sha512-5Ez7yIAvHQgn5YJkuafEh0w4sHV7pksCX9LTPBFRjCuznamcKsnYCez4mR0PwIWq/WuPDvHkR+wqKb4l0t9/aQ==
+"@types/prosemirror-dropcursor@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-dropcursor/-/prosemirror-dropcursor-1.0.3.tgz#49250849b8a0b86e8c29eb1ba70a463e53e46947"
+  integrity sha512-b0/8njnJ4lwyHKcGuCMf3x7r1KjxyugB1R/c2iMCjplsJHSC7UY9+OysqgJR5uUXRekUSGniiLgBtac/lvH6wg==
   dependencies:
     "@types/prosemirror-state" "*"
 
@@ -450,14 +430,6 @@
     "@types/prosemirror-model" "*"
     "@types/prosemirror-state" "*"
 
-"@types/prosemirror-inputrules@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-inputrules/-/prosemirror-inputrules-1.0.4.tgz#4cb75054d954aa0f6f42099be05eb6c0e6958bae"
-  integrity sha512-lJIMpOjO47SYozQybUkpV6QmfuQt7GZKHtVrvS+mR5UekA8NMC5HRIVMyaIauJLWhKU6oaNjpVaXdw41kh165g==
-  dependencies:
-    "@types/prosemirror-model" "*"
-    "@types/prosemirror-state" "*"
-
 "@types/prosemirror-keymap@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@types/prosemirror-keymap/-/prosemirror-keymap-1.0.4.tgz#f73c79810e8d0e0a20d153d84f998f02e5afbc0c"
@@ -468,10 +440,10 @@
     "@types/prosemirror-state" "*"
     "@types/prosemirror-view" "*"
 
-"@types/prosemirror-model@*", "@types/prosemirror-model@^1.13.1":
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-model/-/prosemirror-model-1.13.2.tgz#2adad3ec478f83204f155d7fb94c9dfde2fc3296"
-  integrity sha512-a2rDB0aZ+7aIP7uBqQq1wLb4Hg4qqEvpkCqvhsgT/gG8IWC0peCAZfQ24sgTco0qSJLeDgIbtPeU6mgr869/kg==
+"@types/prosemirror-model@*", "@types/prosemirror-model@^1.16.0":
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-model/-/prosemirror-model-1.16.1.tgz#0ce6c80cd81b398b8a11b1bf7cf695bff3160c9a"
+  integrity sha512-SrrCe2cHlYrQ9o55e2i/c3wt1yRajTTpRLvzfmB+2DWjWEbBLTByVWyjrdpKtQTxAaTeU2aeDGo1iuwl/jF27w==
   dependencies:
     "@types/orderedmap" "*"
 
@@ -484,290 +456,164 @@
     "@types/prosemirror-model" "*"
     "@types/prosemirror-state" "*"
 
-"@types/prosemirror-state@*", "@types/prosemirror-state@^1.2.7":
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-state/-/prosemirror-state-1.2.7.tgz#cd55062e4043a31e3426f47668f1d7038b5d8dfb"
-  integrity sha512-clJf5uw3/XQnBJtl2RqYXoLMGBySnLYl43xtDvFfQZKkLnnYcM1SDU8dcz7lWjl2Dm+H98RpLOl44pp7DYT+wA==
+"@types/prosemirror-state@*", "@types/prosemirror-state@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-state/-/prosemirror-state-1.2.8.tgz#65080eeec52f63c50bf7034377f07773b4f6b2ac"
+  integrity sha512-mq9uyQWcpu8jeamO6Callrdvf/e1H/aRLR2kZWSpZrPHctEsxWHBbluD/wqVjXBRIOoMHLf6ZvOkrkmGLoCHVA==
   dependencies:
     "@types/prosemirror-model" "*"
     "@types/prosemirror-transform" "*"
     "@types/prosemirror-view" "*"
 
-"@types/prosemirror-transform@*", "@types/prosemirror-transform@^1.1.4":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-transform/-/prosemirror-transform-1.1.4.tgz#c3565e81b2ef3ce3254e6927d6f63eb8d7bb20d0"
-  integrity sha512-HP1PauvkqSgDquZut8HaLOTUDQ6jja/LAy4OA7tTS1XG7wqRnX3gLUyEj0mD6vFd4y8BPkNddNdOh/BeGHlUjg==
+"@types/prosemirror-transform@*", "@types/prosemirror-transform@^1.1.5":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-transform/-/prosemirror-transform-1.1.6.tgz#4a06979f656331c46c2725039a57360cc35853af"
+  integrity sha512-7HwXOWc5vZQqIfEUUVAz13lPgBqAWJTv89qEpzAtBFB6hOszFmhsvQ02Jqe2LvKauAoJDa3Qpv/dbJAmgyiTuQ==
   dependencies:
     "@types/prosemirror-model" "*"
 
-"@types/prosemirror-view@*", "@types/prosemirror-view@^1.17.2":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-view/-/prosemirror-view-1.18.0.tgz#3ec23f48f0d8d9fe290a9bd43a91ce0622bec9b1"
-  integrity sha512-7NBy7qIV/ig49ThfkrIJrvW8E+HwumMgmpopUTYJlKwOh/fQ6SVUG/RtdnAIBLD+4uK0R2SMObbGZm06x6OwbA==
+"@types/prosemirror-view@*", "@types/prosemirror-view@^1.23.1":
+  version "1.23.1"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-view/-/prosemirror-view-1.23.1.tgz#a9a926bb6b6e6873e3a9d8caa61c32f3402629eb"
+  integrity sha512-6e1B2oKUnhmZPUrsVvYjDqeVjE6jGezygjtoHsAK4ZENAxHzHqy5NT4jUvdPTWjCYeH0t2Y7pSfRPNrPIyQX4A==
   dependencies:
     "@types/prosemirror-model" "*"
     "@types/prosemirror-state" "*"
     "@types/prosemirror-transform" "*"
 
 "@vitejs/plugin-vue@^1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.10.0.tgz#d015c12d905bb7f76274c2bb272c3662151bf3c0"
-  integrity sha512-XkSN7lduhQ3z/WMXv2spqt9TCS0znCjnvIGmbud2bxViWWWR4JWXE+x/cQZ/klR0Ug4Ts9eubL7LXAysON5Uvg==
-
-"@vue/compiler-core@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.19.tgz#b537dd377ce51fdb64e9b30ebfbff7cd70a64cb9"
-  integrity sha512-8dOPX0YOtaXol0Zf2cfLQ4NU/yHYl2H7DCKsLEZ7gdvPK6ZSEwGLJ7IdghhY2YEshEpC5RB9QKdC5I07z8Dtjg==
-  dependencies:
-    "@babel/parser" "^7.15.0"
-    "@vue/shared" "3.2.19"
-    estree-walker "^2.0.2"
-    source-map "^0.6.1"
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz#d718479e2789d8a94b63e00f23f1898ba239253a"
+  integrity sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==
 
-"@vue/compiler-core@3.2.22":
-  version "3.2.22"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.22.tgz#5e3d3b983cc7f430ddbc6a8773c872dcf410dc89"
-  integrity sha512-uAkovrVeTcjzpiM4ECmVaMrv/bjdgAaLzvjcGqQPBEyUrcqsCgccT9fHJ/+hWVGhyMahmBwLqcn4guULNx7sdw==
+"@vue/compiler-core@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.31.tgz#d38f06c2cf845742403b523ab4596a3fda152e89"
+  integrity sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==
   dependencies:
-    "@babel/parser" "^7.15.0"
-    "@vue/shared" "3.2.22"
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.31"
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-core@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.4.tgz#a98d295771998c1e8dccc4ee3d52feb14b02aea9"
-  integrity sha512-c8NuQq7mUXXxA4iqD5VUKpyVeklK53+DMbojYMyZ0VPPrb0BUWrZWFiqSDT+MFDv0f6Hv3QuLiHWb1BWMXBbrw==
-  dependencies:
-    "@babel/parser" "^7.12.0"
-    "@babel/types" "^7.12.0"
-    "@vue/shared" "3.2.4"
-    estree-walker "^2.0.1"
-    source-map "^0.6.1"
-
-"@vue/compiler-dom@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.19.tgz#0607bc90de6af55fde73b09b3c4d0bf8cb597ed8"
-  integrity sha512-WzQoE8rfkFjPtIioc7SSgTsnz9g2oG61DU8KHnzPrRS7fW/lji6H2uCYJfp4Z6kZE8GjnHc1Ljwl3/gxDes0cw==
-  dependencies:
-    "@vue/compiler-core" "3.2.19"
-    "@vue/shared" "3.2.19"
-
-"@vue/compiler-dom@3.2.22":
-  version "3.2.22"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.22.tgz#221cc358a6c0651c04e1dd22a8470b21e56ee1a5"
-  integrity sha512-VZdsw/VuO1ODs8K7NQwnMQzKITDkIFlYYC03SVnunuf6eNRxBPEonSyqbWNoo6qNaHAEBTG6VVcZC5xC9bAx1g==
-  dependencies:
-    "@vue/compiler-core" "3.2.22"
-    "@vue/shared" "3.2.22"
-
-"@vue/compiler-dom@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.4.tgz#3a43de243eba127abbe57e796a0b969d2df78c08"
-  integrity sha512-uj1nwO4794fw2YsYas5QT+FU/YGrXbS0Qk+1c7Kp1kV7idhZIghWLTjyvYibpGoseFbYLPd+sW2/noJG5H04EQ==
-  dependencies:
-    "@vue/compiler-core" "3.2.4"
-    "@vue/shared" "3.2.4"
-
-"@vue/compiler-sfc@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.19.tgz#d412195a98ebd49b84602f171719294a1d9549be"
-  integrity sha512-pLlbgkO1UHTO02MSpa/sFOXUwIDxSMiKZ1ozE5n71CY4DM+YmI+G3gT/ZHZ46WBId7f3VTF/D8pGwMygcQbrQA==
-  dependencies:
-    "@babel/parser" "^7.15.0"
-    "@vue/compiler-core" "3.2.19"
-    "@vue/compiler-dom" "3.2.19"
-    "@vue/compiler-ssr" "3.2.19"
-    "@vue/ref-transform" "3.2.19"
-    "@vue/shared" "3.2.19"
+"@vue/compiler-dom@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.31.tgz#b1b7dfad55c96c8cc2b919cd7eb5fd7e4ddbf00e"
+  integrity sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==
+  dependencies:
+    "@vue/compiler-core" "3.2.31"
+    "@vue/shared" "3.2.31"
+
+"@vue/compiler-sfc@3.2.31", "@vue/compiler-sfc@^3.2.22":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.31.tgz#d02b29c3fe34d599a52c5ae1c6937b4d69f11c2f"
+  integrity sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.31"
+    "@vue/compiler-dom" "3.2.31"
+    "@vue/compiler-ssr" "3.2.31"
+    "@vue/reactivity-transform" "3.2.31"
+    "@vue/shared" "3.2.31"
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
     postcss "^8.1.10"
     source-map "^0.6.1"
 
-"@vue/compiler-sfc@^3.2.22":
-  version "3.2.22"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.22.tgz#ffd0e5e35479b6ade18d12fefec369cbaf2f7718"
-  integrity sha512-tWRQ5ge1tsTDhUwHgueicKJ8rYm6WUVAPTaIpFW3GSwZKcOEJ2rXdfkHFShNVGupeRALz2ET2H84OL0GeRxY0A==
-  dependencies:
-    "@babel/parser" "^7.15.0"
-    "@vue/compiler-core" "3.2.22"
-    "@vue/compiler-dom" "3.2.22"
-    "@vue/compiler-ssr" "3.2.22"
-    "@vue/ref-transform" "3.2.22"
-    "@vue/shared" "3.2.22"
-    estree-walker "^2.0.2"
-    magic-string "^0.25.7"
-    postcss "^8.1.10"
-    source-map "^0.6.1"
-
-"@vue/compiler-ssr@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.19.tgz#3e91ecf70f8f961c5f63eacd2139bcdab9a7a07c"
-  integrity sha512-oLon0Cn3O7WEYzzmzZavGoqXH+199LT+smdjBT3Uf3UX4HwDNuBFCmvL0TsqV9SQnIgKvBRbQ7lhbpnd4lqM3w==
-  dependencies:
-    "@vue/compiler-dom" "3.2.19"
-    "@vue/shared" "3.2.19"
-
-"@vue/compiler-ssr@3.2.22":
-  version "3.2.22"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.22.tgz#23552c31b76b45baf5f244713c81d77ab59447d2"
-  integrity sha512-Cl6aoLJtXzzBkk1sKod8S0WBJLts3+ugVC91d22gGpbkw/64WnF12tOZi7Rg54PPLi1NovqyNWPsLH/SAFcu+w==
-  dependencies:
-    "@vue/compiler-dom" "3.2.22"
-    "@vue/shared" "3.2.22"
-
-"@vue/devtools-api@^6.0.0-beta.14", "@vue/devtools-api@^6.0.0-beta.7":
-  version "6.0.0-beta.15"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
-  integrity sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA==
-
-"@vue/devtools-api@^6.0.0-beta.20.1":
-  version "6.0.0-beta.20.1"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.1.tgz#5b499647e929c35baf2a66a399578f9aa4601142"
-  integrity sha512-R2rfiRY+kZugzWh9ZyITaovx+jpU4vgivAEAiz80kvh3yviiTU3CBuGuyWpSwGz9/C7TkSWVM/FtQRGlZ16n8Q==
-
-"@vue/reactivity@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.19.tgz#fc6e0f0106f295226835cfed5ff5f84d927bea65"
-  integrity sha512-FtachoYs2SnyrWup5UikP54xDX6ZJ1s5VgHcJp4rkGoutU3Ry61jhs+nCX7J64zjX992Mh9gGUC0LqTs8q9vCA==
-  dependencies:
-    "@vue/shared" "3.2.19"
-
-"@vue/reactivity@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.4.tgz#a020ad7e50f674219a07764b105b5922e61597ea"
-  integrity sha512-ljWTR0hr8Tn09hM2tlmWxZzCBPlgGLnq/k8K8X6EcJhtV+C8OzFySnbWqMWataojbrQOocThwsC8awKthSl2uQ==
+"@vue/compiler-ssr@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.31.tgz#4fa00f486c9c4580b40a4177871ebbd650ecb99c"
+  integrity sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==
   dependencies:
-    "@vue/shared" "3.2.4"
+    "@vue/compiler-dom" "3.2.31"
+    "@vue/shared" "3.2.31"
 
-"@vue/ref-transform@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.19.tgz#cf0f986486bb26838fbd09749e927bab19745600"
-  integrity sha512-03wwUnoIAeKti5IGGx6Vk/HEBJ+zUcm5wrUM3+PQsGf7IYnXTbeIfHHpx4HeSeWhnLAjqZjADQwW8uA4rBmVbg==
-  dependencies:
-    "@babel/parser" "^7.15.0"
-    "@vue/compiler-core" "3.2.19"
-    "@vue/shared" "3.2.19"
-    estree-walker "^2.0.2"
-    magic-string "^0.25.7"
+"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.7", "@vue/devtools-api@^6.1.0":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.1.3.tgz#a44c52e8fa6d22f84db3abdcdd0be5135b7dd7cf"
+  integrity sha512-79InfO2xHv+WHIrH1bHXQUiQD/wMls9qBk6WVwGCbdwP7/3zINtvqPNMtmSHXsIKjvUAHc8L0ouOj6ZQQRmcXg==
 
-"@vue/ref-transform@3.2.22":
-  version "3.2.22"
-  resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.22.tgz#16b03994eac71528cceff4cf76178ed9b44ac90a"
-  integrity sha512-qalVWbq5xWWxLZ0L9OroBg/JZhzavQuCcDXblfErxyDEH6Xc5gIJ4feo1SVCICFzhAUgLgQTdSFLpgjBawbFpw==
+"@vue/reactivity-transform@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.31.tgz#0f5b25c24e70edab2b613d5305c465b50fc00911"
+  integrity sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==
   dependencies:
-    "@babel/parser" "^7.15.0"
-    "@vue/compiler-core" "3.2.22"
-    "@vue/shared" "3.2.22"
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.31"
+    "@vue/shared" "3.2.31"
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/runtime-core@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.19.tgz#807715b7f4728abb84fa4a8efdbe37d8ddb4c6d3"
-  integrity sha512-qArZSWKxWsgKfxk9BelZ32nY0MZ31CAW2kUUyVJyxh4cTfHaXGbjiQB5JgsvKc49ROMNffv9t3/qjasQqAH+RQ==
-  dependencies:
-    "@vue/reactivity" "3.2.19"
-    "@vue/shared" "3.2.19"
-
-"@vue/runtime-core@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.4.tgz#da5dde3dc1e48df99dd31ea9a972f5c02acdc3f5"
-  integrity sha512-W6PtEOs8P8jKYPo3JwaMAozZQivxInUleGfNwI2pK1t8ZLZIxn4kAf7p4VF4jJdQB8SZBzpfWdLUc06j7IOmpQ==
+"@vue/reactivity@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.31.tgz#fc90aa2cdf695418b79e534783aca90d63a46bbd"
+  integrity sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==
   dependencies:
-    "@vue/reactivity" "3.2.4"
-    "@vue/shared" "3.2.4"
+    "@vue/shared" "3.2.31"
 
-"@vue/runtime-dom@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.19.tgz#7e8bf645754703e360fa132e4be9113edf2377bb"
-  integrity sha512-hIRboxXwafeHhbZEkZYNV0MiJXPNf4fP0X6hM2TJb0vssz8BKhD9cF92BkRgZztTQevecbhk0gu4uAPJ3dxL9A==
+"@vue/runtime-core@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.31.tgz#9d284c382f5f981b7a7b5971052a1dc4ef39ac7a"
+  integrity sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==
   dependencies:
-    "@vue/runtime-core" "3.2.19"
-    "@vue/shared" "3.2.19"
-    csstype "^2.6.8"
+    "@vue/reactivity" "3.2.31"
+    "@vue/shared" "3.2.31"
 
-"@vue/runtime-dom@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.4.tgz#1025595f2ae99a12fe0e1e6bce8df6761efec24b"
-  integrity sha512-HcVtLyn2SGwsf6BFPwkvDPDOhOqkOKcfHDpBp5R1coX+qMsOFrY8lJnGXIY+JnxqFjND00E9+u+lq5cs/W7ooA==
+"@vue/runtime-dom@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.31.tgz#79ce01817cb3caf2c9d923f669b738d2d7953eff"
+  integrity sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==
   dependencies:
-    "@vue/runtime-core" "3.2.4"
-    "@vue/shared" "3.2.4"
+    "@vue/runtime-core" "3.2.31"
+    "@vue/shared" "3.2.31"
     csstype "^2.6.8"
 
-"@vue/server-renderer@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.19.tgz#870bcec9f7cdaee0c2187a169b6e636ab4362fb1"
-  integrity sha512-A9FNT7fgQJXItwdzWREntAgWKVtKYuXHBKGev/H4+ByTu8vB7gQXGcim01QxaJshdNg4dYuH2tEBZXCNCNx+/w==
+"@vue/server-renderer@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.31.tgz#201e9d6ce735847d5989403af81ef80960da7141"
+  integrity sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==
   dependencies:
-    "@vue/compiler-ssr" "3.2.19"
-    "@vue/shared" "3.2.19"
-
-"@vue/shared@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.19.tgz#111ec3da18337d86274446984c49925b1b2b2dd7"
-  integrity sha512-Knqhx7WieLdVgwCAZgTVrDCXZ50uItuecLh9JdLC8O+a5ayaSyIQYveUK3hCRNC7ws5zalHmZwfdLMGaS8r4Ew==
-
-"@vue/shared@3.2.22":
-  version "3.2.22"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.22.tgz#26dcbe5e530f6c1f2de5ca9aeab92ab00f523b41"
-  integrity sha512-qWVav014mpjEtbWbEgl0q9pEyrrIySKum8UVYjwhC6njrKzknLZPvfuYdQyVbApsqr94tf/3dP4pCuZmmjdCWQ==
+    "@vue/compiler-ssr" "3.2.31"
+    "@vue/shared" "3.2.31"
 
-"@vue/shared@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.4.tgz#ba2a09527afff27b28d08f921b4a597e9504ca7a"
-  integrity sha512-j2j1MRmjalVKr3YBTxl/BClSIc8UQ8NnPpLYclxerK65JIowI4O7n8O8lElveEtEoHxy1d7BelPUDI0Q4bumqg==
+"@vue/shared@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.31.tgz#c90de7126d833dcd3a4c7534d534be2fb41faa4e"
+  integrity sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==
 
 "@vuelidate/components@^1.1.12":
-  version "1.1.12"
-  resolved "https://registry.yarnpkg.com/@vuelidate/components/-/components-1.1.12.tgz#00c54248b5be7e5a0e15d1301a7d668557f31ad1"
-  integrity sha512-oXib7k251vwT50LmnW6G65TvNylqWTOQGnqwWzDuAAfJu+qao9Oa2AfbDD44D54esZEYFvVqASg9w4TAY19hlA==
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/@vuelidate/components/-/components-1.1.15.tgz#9cc4f61d96b6316c7de8c059b1788f81e9a3967c"
+  integrity sha512-uFF98Ano3DOHd2Qy8hGgP6DZRqf6dybMZrkXO80d1keEnneDxSTqMBVuf37nXFedkZr4Y2+CU/ZGFoquKtRRcg==
   dependencies:
-    "@vuelidate/core" "^2.0.0-alpha.32"
+    "@vuelidate/core" "^2.0.0-alpha.35"
 
-"@vuelidate/core@^2.0.0-alpha.32":
-  version "2.0.0-alpha.32"
-  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.0-alpha.32.tgz#1ad6f4e6480a3fa061d5c0fe3d26f7c7b23e55dd"
-  integrity sha512-bB5YJzorKZyRm+R4d3svGChwpHjPw+ECOLwlKfvKJIuyC+y25Wf7NGbr/9odZggoGTi/rKPUYXhpbp5RXb4ssw==
+"@vuelidate/core@^2.0.0-alpha.32", "@vuelidate/core@^2.0.0-alpha.35":
+  version "2.0.0-alpha.35"
+  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.0-alpha.35.tgz#22d91787147b0883d31585fab44d0218622b7560"
+  integrity sha512-BSGQElu5lyI0GzqehFzUWy7GXhEUC7Z8oEpdxgCyGGN5gOFlAQ5Zr4dDFzfIOhU4jik3CfPHK+i+Juqg2OCKNw==
   dependencies:
     vue-demi "^0.12.0"
 
 "@vuelidate/validators@^2.0.0-alpha.25":
-  version "2.0.0-alpha.25"
-  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.0-alpha.25.tgz#c58aede525772f1ae120b308de08cd5196ba0cb3"
-  integrity sha512-+Cz9itIlPbloXE8hWmTWCS/EXYdgZ0y/mH76v9Ou0ILirVUjErTtgEx/jCfkijbFJAttBTdwJmxaWakwQuA0qA==
+  version "2.0.0-alpha.27"
+  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.0-alpha.27.tgz#260f81b2e3c0695159a9576ee7930d7d0a2e698b"
+  integrity sha512-omCUVP+gr2kKBMQwdKsOYPWYk/Fu92K93LRnl8Vk856UudNlb89wCreh0/Q8DpVEOisLljI3T7026QCo9eSq4Q==
   dependencies:
     vue-demi "^0.12.0"
 
-"@vueuse/core@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-6.0.0.tgz#ebb6ad380682adc6c7d6c3be4f3e4003543845fd"
-  integrity sha512-PuBfNo/Zv+NkLcZaYWBA1WjqxQhTDC0DMQpoAIJdo/GFul/1SpBbONhUho2zqtOmq8vyGuK200wNFvyA4YUAMg==
-  dependencies:
-    "@vueuse/shared" "6.0.0"
-    vue-demi "*"
-
-"@vueuse/core@^6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-6.5.3.tgz#15848eaccad18652df4cb4b6ccae7bd7921a0c7e"
-  integrity sha512-o3CTu4nEqs371sDY5qLBX0r4QOm6GVpm3ApQc2Y+p8OMI2rRGartQo8xRykpUfsyq602A+SVtm/wxIWBkD/KCQ==
+"@vueuse/core@^6.0.0", "@vueuse/core@^6.5.3":
+  version "6.9.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-6.9.2.tgz#76b16d01f33cf367dd1a2d7f2e31d106443ceb8a"
+  integrity sha512-FRwl4ccSFuHZBHLGgS9TMv/+Dd6XFaL4o9nph2qtgQIV+z29RBFokw08XjHfykiENRzB01MjYHJ7iRUnsIFQXg==
   dependencies:
-    "@vueuse/shared" "6.5.3"
+    "@vueuse/shared" "6.9.2"
     vue-demi "*"
 
-"@vueuse/shared@6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-6.0.0.tgz#e6b8804541a1853615db3dd869d07653b244451f"
-  integrity sha512-PLjjqL8bxI5q86qk/ifXy572nfQE3rJc1RMem+dKcGayaagMnC4kXHEt64V98DVielSwr2FuYaeFodi4KJrvdg==
-  dependencies:
-    vue-demi "*"
-
-"@vueuse/shared@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-6.5.3.tgz#6503fa4bfbf45d0616bacedb8a4bd003f01da73b"
-  integrity sha512-ChOKu3mECyZeqGJ/gHVm0CaHoZK5/TwNZr1ZM/aqH+RaRNQvC1qkLf1/8PBugzN3yRgC3BtZ/M1kLpGe/BFylw==
+"@vueuse/shared@6.9.2":
+  version "6.9.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-6.9.2.tgz#97e4369fa7262ebc96fe1d6e210268f30b037005"
+  integrity sha512-lAiMh6XROs0kSKVd0Yb/6GKoQMxC1fYrFDi6opvQWISPtcqRNluRrQxLUZ3WTI78ovtoKRLktjhkFAtydcfFDg==
   dependencies:
     vue-demi "*"
 
@@ -806,9 +652,9 @@ ajv@^6.10.0, ajv@^6.12.4:
     uri-js "^4.2.2"
 
 ajv@^8.0.1:
-  version "8.6.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.6.2.tgz#2fb45e0e5fcbc0813326c1c3da535d1881bb0571"
-  integrity sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
+  integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
   dependencies:
     fast-deep-equal "^3.1.1"
     json-schema-traverse "^1.0.0"
@@ -820,10 +666,10 @@ ansi-colors@^4.1.1:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
   integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
 
-ansi-regex@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
-  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
 ansi-styles@^3.2.1:
   version "3.2.1"
@@ -865,16 +711,16 @@ astral-regex@^2.0.0:
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
 autoprefixer@^10.4.0:
-  version "10.4.0"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.0.tgz#c3577eb32a1079a440ec253e404eaf1eb21388c8"
-  integrity sha512-7FdJ1ONtwzV1G43GDD0kpVMn/qbiNqyOPMFTX5nRffI+7vgWoFEc6DcXOxHJxrWNDXrZh18eDsZjvZGUljSRGA==
+  version "10.4.4"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.4.tgz#3e85a245b32da876a893d3ac2ea19f01e7ea5a1e"
+  integrity sha512-Tm8JxsB286VweiZ5F0anmbyGiNI3v3wGv3mz9W+cxEDYB/6jbnj6GM9H9mK3wIL8ftgl+C07Lcwb8PG5PCCPzA==
   dependencies:
-    browserslist "^4.17.5"
-    caniuse-lite "^1.0.30001272"
-    fraction.js "^4.1.1"
+    browserslist "^4.20.2"
+    caniuse-lite "^1.0.30001317"
+    fraction.js "^4.2.0"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
-    postcss-value-parser "^4.1.0"
+    postcss-value-parser "^4.2.0"
 
 axios@^0.19:
   version "0.19.2"
@@ -913,22 +759,17 @@ braces@^3.0.1, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.17.5:
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.19.1.tgz#4ac0435b35ab655896c31d53018b6dd5e9e4c9a3"
-  integrity sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==
+browserslist@^4.20.2:
+  version "4.20.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88"
+  integrity sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==
   dependencies:
-    caniuse-lite "^1.0.30001286"
-    electron-to-chromium "^1.4.17"
+    caniuse-lite "^1.0.30001317"
+    electron-to-chromium "^1.4.84"
     escalade "^3.1.1"
-    node-releases "^2.0.1"
+    node-releases "^2.0.2"
     picocolors "^1.0.0"
 
-bytes@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
-  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
-
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -939,10 +780,10 @@ camelcase-css@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001272, caniuse-lite@^1.0.30001286:
-  version "1.0.30001287"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001287.tgz#5fab6a46ab9e47146d5dd35abfe47beaf8073c71"
-  integrity sha512-4udbs9bc0hfNrcje++AxBuc6PfLNHwh3PO9kbwnfCQWyqtlzg3py0YgFu8jyRTTo85VAz4U+VLxSlID09vNtWA==
+caniuse-lite@^1.0.30001317:
+  version "1.0.30001319"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001319.tgz#eb4da4eb3ecdd409f7ba1907820061d56096e88f"
+  integrity sha512-xjlIAFHucBRSMUo1kb5D4LYgcN1M45qdKP++lhqowDpwJwGkpIRTt5qQqnhxjj1vHcI7nrJxWhCC1ATrCEBTcw==
 
 chalk@^2.0.0:
   version "2.4.2"
@@ -984,10 +825,10 @@ chartjs-color@^2.1.0:
     chartjs-color-string "^0.6.0"
     color-convert "^1.9.3"
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
-  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
   dependencies:
     anymatch "~3.1.2"
     braces "~3.0.2"
@@ -1000,9 +841,9 @@ chartjs-color@^2.1.0:
     fsevents "~2.3.2"
 
 clipboard@^2.0.6:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
-  integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.10.tgz#e61f6f7139ac5044c58c0484dcac9fb2a918bfd6"
+  integrity sha512-cz3m2YVwFz95qSEbCDi2fzLN/epEN9zXBvfgAoGkvGOJZATMl9gtTDVOtBYkx2ODUJl2kvmud7n32sV2BpYR4g==
   dependencies:
     good-listener "^1.2.2"
     select "^1.1.2"
@@ -1032,41 +873,15 @@ color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.6.0.tgz#c3915f61fe267672cb7e1e064c9d692219f6c312"
-  integrity sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/color/-/color-4.0.1.tgz#21df44cd10245a91b1ccf5ba031609b0e10e7d67"
-  integrity sha512-rpZjOKN5O7naJxkH2Rx1sZzzBgaiWECc6BYXjeCE6kF0kcASJYbUq02u7JqIHwCb/j3NhV+QhRL2683aICeGZA==
-  dependencies:
-    color-convert "^2.0.1"
-    color-string "^1.6.0"
-
-colorette@^1.2.2:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.3.0.tgz#ff45d2f0edb244069d3b772adeb04fed38d0a0af"
-  integrity sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==
-
-commander@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
-  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
 core-js@^3.6.5:
-  version "3.18.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.1.tgz#289d4be2ce0085d40fc1244c0b1a54c00454622f"
-  integrity sha512-vJlUi/7YdlCZeL6fXvWNaLUPh/id12WXj3MbkMw5uOyF0PfWPBNOCNbs53YqgrvtujLNlt9JQpruyIKkUZ+PKA==
+  version "3.21.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
+  integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==
 
 cosmiconfig@^7.0.1:
   version "7.0.1"
@@ -1113,25 +928,25 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-css-color-names@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
-
-css-unit-converter@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
-  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
 csstype@^2.6.8:
-  version "2.6.17"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e"
-  integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==
+  version "2.6.20"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
+  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
+
+date-fns-tz@^1.0.12:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.0.tgz#6c83d4bdf20d54060cf176d96a3ca45043b36a84"
+  integrity sha512-r6ye6PmGEvkF467/41qzU71oGwv9kHTnV3vtSZdyV6VThwPID47ZH7FtR7zQWrhgOUWkYySm2ems2w6ZfNUqoA==
+
+date-fns@^2.16.1:
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
 
 debug@=3.1.0:
   version "3.1.0"
@@ -1141,16 +956,16 @@ debug@=3.1.0:
     ms "2.0.0"
 
 debug@^4.0.1, debug@^4.1.1:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
-  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
 deep-is@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
-  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
 deepmerge@^4.2.2:
   version "4.2.2"
@@ -1198,10 +1013,10 @@ dotenv@^8.2.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"
   integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==
 
-electron-to-chromium@^1.4.17:
-  version "1.4.23"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.23.tgz#c8fa28db6354062bbd388e24d95c4a263fff5cac"
-  integrity sha512-q3tB59Api3+DMbLnDPkW/UBHBO7KTGcF+rDCeb0GAGyqFj562s6y+c/2tDKTS/y5lbC+JOvT4MSUALJLPqlcSA==
+electron-to-chromium@^1.4.84:
+  version "1.4.90"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.90.tgz#4a518590f118828d54fff045728f547fef08143f"
+  integrity sha512-ZwKgSA0mQMyEhz+NR0F8dRzkrCLeHLzLkjx/CWf16+zV85hQ6meXPQbKanvhnpkYb7b2uJNj+enQJ/N877ND4Q==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -1222,113 +1037,131 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-esbuild-android-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz#3fc3ff0bab76fe35dd237476b5d2b32bb20a3d44"
-  integrity sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==
-
-esbuild-darwin-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz#8e9169c16baf444eacec60d09b24d11b255a8e72"
-  integrity sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==
-
-esbuild-darwin-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz#1b07f893b632114f805e188ddfca41b2b778229a"
-  integrity sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==
-
-esbuild-freebsd-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz#0b8b7eca1690c8ec94c75680c38c07269c1f4a85"
-  integrity sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==
-
-esbuild-freebsd-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz#2e1a6c696bfdcd20a99578b76350b41db1934e52"
-  integrity sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==
-
-esbuild-linux-32@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz#6fd39f36fc66dd45b6b5f515728c7bbebc342a69"
-  integrity sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==
-
-esbuild-linux-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz#9cb8e4bcd7574e67946e4ee5f1f1e12386bb6dd3"
-  integrity sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==
-
-esbuild-linux-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz#3891aa3704ec579a1b92d2a586122e5b6a2bfba1"
-  integrity sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==
-
-esbuild-linux-arm@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz#8a00e99e6a0c6c9a6b7f334841364d8a2b4aecfe"
-  integrity sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==
-
-esbuild-linux-mips64le@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz#36b07cc47c3d21e48db3bb1f4d9ef8f46aead4f7"
-  integrity sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==
-
-esbuild-linux-ppc64le@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz#f7e6bba40b9a11eb9dcae5b01550ea04670edad2"
-  integrity sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==
-
-esbuild-netbsd-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz#a2fedc549c2b629d580a732d840712b08d440038"
-  integrity sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==
-
-esbuild-openbsd-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz#b22c0e5806d3a1fbf0325872037f885306b05cd7"
-  integrity sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==
-
-esbuild-sunos-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz#d0b6454a88375ee8d3964daeff55c85c91c7cef4"
-  integrity sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==
-
-esbuild-windows-32@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz#c96d0b9bbb52f3303322582ef8e4847c5ad375a7"
-  integrity sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==
-
-esbuild-windows-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz#1f79cb9b1e1bb02fb25cd414cb90d4ea2892c294"
-  integrity sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==
-
-esbuild-windows-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz#482173070810df22a752c686509c370c3be3b3c3"
-  integrity sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==
-
-esbuild@^0.13.2:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.15.tgz#db56a88166ee373f87dbb2d8798ff449e0450cdf"
-  integrity sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==
+esbuild-android-64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.27.tgz#b868bbd9955a92309c69df628d8dd1945478b45c"
+  integrity sha512-LuEd4uPuj/16Y8j6kqy3Z2E9vNY9logfq8Tq+oTE2PZVuNs3M1kj5Qd4O95ee66yDGb3isaOCV7sOLDwtMfGaQ==
+
+esbuild-android-arm64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.27.tgz#e7d6430555e8e9c505fd87266bbc709f25f1825c"
+  integrity sha512-E8Ktwwa6vX8q7QeJmg8yepBYXaee50OdQS3BFtEHKrzbV45H4foMOeEE7uqdjGQZFBap5VAqo7pvjlyA92wznQ==
+
+esbuild-darwin-64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.27.tgz#4dc7484127564e89b4445c0a560a3cb50b3d68e1"
+  integrity sha512-czw/kXl/1ZdenPWfw9jDc5iuIYxqUxgQ/Q+hRd4/3udyGGVI31r29LCViN2bAJgGvQkqyLGVcG03PJPEXQ5i2g==
+
+esbuild-darwin-arm64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.27.tgz#469e59c665f84a8ed323166624c5e7b9b2d22ac1"
+  integrity sha512-BEsv2U2U4o672oV8+xpXNxN9bgqRCtddQC6WBh4YhXKDcSZcdNh7+6nS+DM2vu7qWIWNA4JbRG24LUUYXysimQ==
+
+esbuild-freebsd-64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.27.tgz#895df03bf5f87094a56c9a5815bf92e591903d70"
+  integrity sha512-7FeiFPGBo+ga+kOkDxtPmdPZdayrSzsV9pmfHxcyLKxu+3oTcajeZlOO1y9HW+t5aFZPiv7czOHM4KNd0tNwCA==
+
+esbuild-freebsd-arm64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.27.tgz#0b72a41a6b8655e9a8c5608f2ec1afdcf6958441"
+  integrity sha512-8CK3++foRZJluOWXpllG5zwAVlxtv36NpHfsbWS7TYlD8S+QruXltKlXToc/5ZNzBK++l6rvRKELu/puCLc7jA==
+
+esbuild-linux-32@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.27.tgz#43b8ba3803b0bbe7f051869c6a8bf6de1e95de28"
+  integrity sha512-qhNYIcT+EsYSBClZ5QhLzFzV5iVsP1YsITqblSaztr3+ZJUI+GoK8aXHyzKd7/CKKuK93cxEMJPpfi1dfsOfdw==
+
+esbuild-linux-64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.27.tgz#dc8072097327ecfadba1735562824ce8c05dd0bd"
+  integrity sha512-ESjck9+EsHoTaKWlFKJpPZRN26uiav5gkI16RuI8WBxUdLrrAlYuYSndxxKgEn1csd968BX/8yQZATYf/9+/qg==
+
+esbuild-linux-arm64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.27.tgz#c52b58cbe948426b1559910f521b0a3f396f10b8"
+  integrity sha512-no6Mi17eV2tHlJnqBHRLekpZ2/VYx+NfGxKcBE/2xOMYwctsanCaXxw4zapvNrGE9X38vefVXLz6YCF8b1EHiQ==
+
+esbuild-linux-arm@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.27.tgz#df869dbd67d4ee3a04b3c7273b6bd2b233e78a18"
+  integrity sha512-JnnmgUBdqLQO9hoNZQqNHFWlNpSX82vzB3rYuCJMhtkuaWQEmQz6Lec1UIxJdC38ifEghNTBsF9bbe8dFilnCw==
+
+esbuild-linux-mips64le@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.27.tgz#a2b646d9df368b01aa970a7b8968be6dd6b01d19"
+  integrity sha512-NolWP2uOvIJpbwpsDbwfeExZOY1bZNlWE/kVfkzLMsSgqeVcl5YMen/cedRe9mKnpfLli+i0uSp7N+fkKNU27A==
+
+esbuild-linux-ppc64le@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.27.tgz#9a21af766a0292578a3009c7408b8509cac7cefd"
+  integrity sha512-/7dTjDvXMdRKmsSxKXeWyonuGgblnYDn0MI1xDC7J1VQXny8k1qgNp6VmrlsawwnsymSUUiThhkJsI+rx0taNA==
+
+esbuild-linux-riscv64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.27.tgz#344a27f91568056a5903ad5841b447e00e78d740"
+  integrity sha512-D+aFiUzOJG13RhrSmZgrcFaF4UUHpqj7XSKrIiCXIj1dkIkFqdrmqMSOtSs78dOtObWiOrFCDDzB24UyeEiNGg==
+
+esbuild-linux-s390x@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.27.tgz#73a7309bd648a07ef58f069658f989a5096130db"
+  integrity sha512-CD/D4tj0U4UQjELkdNlZhQ8nDHU5rBn6NGp47Hiz0Y7/akAY5i0oGadhEIg0WCY/HYVXFb3CsSPPwaKcTOW3bg==
+
+esbuild-netbsd-64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.27.tgz#482a587cdbd18a6c264a05136596927deb46c30a"
+  integrity sha512-h3mAld69SrO1VoaMpYl3a5FNdGRE/Nqc+E8VtHOag4tyBwhCQXxtvDDOAKOUQexBGca0IuR6UayQ4ntSX5ij1Q==
+
+esbuild-openbsd-64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.27.tgz#e99f8cdc63f1628747b63edd124d53cf7796468d"
+  integrity sha512-xwSje6qIZaDHXWoPpIgvL+7fC6WeubHHv18tusLYMwL+Z6bEa4Pbfs5IWDtQdHkArtfxEkIZz77944z8MgDxGw==
+
+esbuild-sunos-64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.27.tgz#8611d825bcb8239c78d57452e83253a71942f45c"
+  integrity sha512-/nBVpWIDjYiyMhuqIqbXXsxBc58cBVH9uztAOIfWShStxq9BNBik92oPQPJ57nzWXRNKQUEFWr4Q98utDWz7jg==
+
+esbuild-windows-32@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.27.tgz#c06374206d4d92dd31d4fda299b09f51a35e82f6"
+  integrity sha512-Q9/zEjhZJ4trtWhFWIZvS/7RUzzi8rvkoaS9oiizkHTTKd8UxFwn/Mm2OywsAfYymgUYm8+y2b+BKTNEFxUekw==
+
+esbuild-windows-64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.27.tgz#756631c1d301dfc0d1a887deed2459ce4079582f"
+  integrity sha512-b3y3vTSl5aEhWHK66ngtiS/c6byLf6y/ZBvODH1YkBM+MGtVL6jN38FdHUsZasCz9gFwYs/lJMVY9u7GL6wfYg==
+
+esbuild-windows-arm64@0.14.27:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.27.tgz#ad7e187193dcd18768b16065a950f4441d7173f4"
+  integrity sha512-I/reTxr6TFMcR5qbIkwRGvldMIaiBu2+MP0LlD7sOlNXrfqIl9uNjsuxFPGEG4IRomjfQ5q8WT+xlF/ySVkqKg==
+
+esbuild@^0.14.14:
+  version "0.14.27"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.27.tgz#41fe0f1b6b68b9f77cac025009bc54bb96e616f1"
+  integrity sha512-MZQt5SywZS3hA9fXnMhR22dv0oPGh6QtjJRIYbgL1AeqAoQZE+Qn5ppGYQAoHv/vq827flj4tIJ79Mrdiwk46Q==
   optionalDependencies:
-    esbuild-android-arm64 "0.13.15"
-    esbuild-darwin-64 "0.13.15"
-    esbuild-darwin-arm64 "0.13.15"
-    esbuild-freebsd-64 "0.13.15"
-    esbuild-freebsd-arm64 "0.13.15"
-    esbuild-linux-32 "0.13.15"
-    esbuild-linux-64 "0.13.15"
-    esbuild-linux-arm "0.13.15"
-    esbuild-linux-arm64 "0.13.15"
-    esbuild-linux-mips64le "0.13.15"
-    esbuild-linux-ppc64le "0.13.15"
-    esbuild-netbsd-64 "0.13.15"
-    esbuild-openbsd-64 "0.13.15"
-    esbuild-sunos-64 "0.13.15"
-    esbuild-windows-32 "0.13.15"
-    esbuild-windows-64 "0.13.15"
-    esbuild-windows-arm64 "0.13.15"
+    esbuild-android-64 "0.14.27"
+    esbuild-android-arm64 "0.14.27"
+    esbuild-darwin-64 "0.14.27"
+    esbuild-darwin-arm64 "0.14.27"
+    esbuild-freebsd-64 "0.14.27"
+    esbuild-freebsd-arm64 "0.14.27"
+    esbuild-linux-32 "0.14.27"
+    esbuild-linux-64 "0.14.27"
+    esbuild-linux-arm "0.14.27"
+    esbuild-linux-arm64 "0.14.27"
+    esbuild-linux-mips64le "0.14.27"
+    esbuild-linux-ppc64le "0.14.27"
+    esbuild-linux-riscv64 "0.14.27"
+    esbuild-linux-s390x "0.14.27"
+    esbuild-netbsd-64 "0.14.27"
+    esbuild-openbsd-64 "0.14.27"
+    esbuild-sunos-64 "0.14.27"
+    esbuild-windows-32 "0.14.27"
+    esbuild-windows-64 "0.14.27"
+    esbuild-windows-arm64 "0.14.27"
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -1346,14 +1179,14 @@ escape-string-regexp@^4.0.0:
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
 eslint-config-prettier@^8.3.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
-  integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
+  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
 
 eslint-plugin-vue@^7.0.0-beta.4:
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-7.16.0.tgz#7fe9fea039a190b108319c1380adf543ef57707d"
-  integrity sha512-0E2dVvVC7I2Xm1HXyx+ZwPj9CNX4NJjs4K4r+GVsHWyt5Pew3JLD4fI7A91b2jeL0TXE7LlszrwLSTJU9eqehw==
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-7.20.0.tgz#98c21885a6bfdf0713c3a92957a5afeaaeed9253"
+  integrity sha512-oVNDqzBC9h3GO+NTgWeLMhhGigy6/bQaQbHS+0z7C4YEu/qK/yxHvca/2PTZtGNPsCrHwOTgKMrwu02A9iPBmw==
   dependencies:
     eslint-utils "^2.1.0"
     natural-compare "^1.4.0"
@@ -1474,11 +1307,11 @@ estraverse@^4.1.1:
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
 estraverse@^5.1.0, estraverse@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
-  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
-estree-walker@^2.0.1, estree-walker@^2.0.2:
+estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -1508,10 +1341,10 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.7:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
-  integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
+fast-glob@^3.2.11:
+  version "3.2.11"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
+  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -1530,9 +1363,9 @@ fast-levenshtein@^2.0.6:
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
 fastq@^1.6.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.12.0.tgz#ed7b6ab5d62393fb2cc591c853652a5c318bf794"
-  integrity sha512-VNX0QkHK3RsXVKr9KrlUv/FoTa0NdbYoHHl7uXHv2rzyHSlxjdNAKug2twd9luJxpcyNeAgf5iPPMutJO67Dfg==
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
   dependencies:
     reusify "^1.0.4"
 
@@ -1559,14 +1392,14 @@ flat-cache@^3.0.4:
     rimraf "^3.0.2"
 
 flatpickr@^4.6.9:
-  version "4.6.9"
-  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.9.tgz#9a13383e8a6814bda5d232eae3fcdccb97dc1499"
-  integrity sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==
+  version "4.6.11"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.11.tgz#c92f5108269c551c6b5069ecd754be610574574c"
+  integrity sha512-/rnbE/hu5I5zndLEyYfYvqE4vPDvI5At0lFcQA5eOPfjquZLcQ0HMKTL7rv5/+DvbPM3/vJcXpXjB/DjBh+1jw==
 
 flatted@^3.1.0:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.2.tgz#64bfed5cb68fe3ca78b3eb214ad97b63bedce561"
-  integrity sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
+  integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
 follow-redirects@1.5.10:
   version "1.5.10"
@@ -1575,19 +1408,10 @@ follow-redirects@1.5.10:
   dependencies:
     debug "=3.1.0"
 
-fraction.js@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.1.1.tgz#ac4e520473dae67012d618aab91eda09bcb400ff"
-  integrity sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==
-
-fs-extra@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
-  integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
+fraction.js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
+  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
 fs.realpath@^1.0.0:
   version "1.0.0"
@@ -1621,13 +1445,6 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.1.tgz#42054f685eb6a44e7a7d189a96efa40a54971aa7"
-  integrity sha512-kEVjS71mQazDBHKcsq4E9u/vUzaLcw1A8EtUeydawvIWQCJM0qQ08G1H7/XTjFUulla6XQiDOG6MXSaG0HDKog==
-  dependencies:
-    is-glob "^4.0.1"
-
 glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
@@ -1635,10 +1452,10 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob@^7.0.0, glob@^7.1.3:
-  version "7.1.7"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
-  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+glob@^7.1.3:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -1648,9 +1465,9 @@ glob@^7.0.0, glob@^7.1.3:
     path-is-absolute "^1.0.0"
 
 globals@^13.6.0, globals@^13.9.0:
-  version "13.11.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.11.0.tgz#40ef678da117fe7bd2e28f1fab24951bd0255be7"
-  integrity sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==
+  version "13.13.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.13.0.tgz#ac32261060d8070e2719dd6998406e27d2b5727b"
+  integrity sha512-EQ7Q18AJlPwp3vUDL4mKA0KXrXyNIQyWon6T6XQiBQF0XHvRsiCSrWmmeATpUzdJN2HhWZU6Pdl0a9zdep5p6A==
   dependencies:
     type-fest "^0.20.2"
 
@@ -1661,11 +1478,6 @@ good-listener@^1.2.2:
   dependencies:
     delegate "^3.1.2"
 
-graceful-fs@^4.1.6, graceful-fs@^4.2.0:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
-  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
-
 guid@0.0.12:
   version "0.0.12"
   resolved "https://registry.yarnpkg.com/guid/-/guid-0.0.12.tgz#9137c52b185f7de12490b9bebcc1660b9025fe0c"
@@ -1688,26 +1500,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hex-color-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
-  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
-
-hsl-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
-  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
-
-hsla-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
-  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
-
-html-tags@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
-  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
-
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
@@ -1718,12 +1510,10 @@ ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-import-cwd@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92"
-  integrity sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==
-  dependencies:
-    import-from "^3.0.0"
+immutable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
+  integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
 
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
@@ -1733,13 +1523,6 @@ import-fresh@^3.0.0, import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-3.0.0.tgz#055cfec38cd5a27d8057ca51376d7d3bf0891966"
-  integrity sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==
-  dependencies:
-    resolve-from "^5.0.0"
-
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -1763,11 +1546,6 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -1775,22 +1553,10 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-color-stop@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
-  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
-  dependencies:
-    css-color-names "^0.0.4"
-    hex-color-regex "^1.1.0"
-    hsl-regex "^1.0.0"
-    hsla-regex "^1.0.0"
-    rgb-regex "^1.0.1"
-    rgba-regex "^1.0.0"
-
-is-core-module@^2.2.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.6.0.tgz#d7553b2526fe59b92ba3e40c8df757ec8a709e19"
-  integrity sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==
+is-core-module@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
+  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
   dependencies:
     has "^1.0.3"
 
@@ -1804,14 +1570,7 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
-  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
-  dependencies:
-    is-extglob "^2.1.1"
-
-is-glob@^4.0.3:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -1871,15 +1630,6 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-jsonfile@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
-  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
-  dependencies:
-    universalify "^2.0.0"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 laravel-vite@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/laravel-vite/-/laravel-vite-0.0.7.tgz#f8fa3614bf0ba5e5eba9815e4bad977f7f2e0019"
@@ -1898,15 +1648,15 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lilconfig@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.3.tgz#68f3005e921dafbd2a2afb48379986aa6d2579fd"
-  integrity sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==
+lilconfig@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.4.tgz#f4507d043d7058b380b6a8f5cb7bcd4b34cee082"
+  integrity sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==
 
 lines-and-columns@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
-  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
 lodash-es@^4.17.21:
   version "4.17.21"
@@ -1918,11 +1668,6 @@ lodash.castarray@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
   integrity sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=
 
-lodash.clonedeep@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
-  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
-
 lodash.isplainobject@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
@@ -1933,22 +1678,12 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash.topath@^4.5.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
-  integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=
-
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
 
-lodash.uniq@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
-  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
-
-lodash@^4.17.13, lodash@^4.17.21:
+lodash@^4.17.13, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -1961,16 +1696,16 @@ lru-cache@^6.0.0:
     yallist "^4.0.0"
 
 magic-string@^0.25.7:
-  version "0.25.7"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
-  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
+  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
   dependencies:
-    sourcemap-codec "^1.4.4"
+    sourcemap-codec "^1.4.8"
 
 maska@^1.4.6:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/maska/-/maska-1.4.7.tgz#f4044b8b05cf0b93e55836276f1c3857c2aa9cdf"
-  integrity sha512-CgLhredtwK6XYmkMvt15DNfqGCfSBxus1+VrIeR3KwjzAGMdnTduvLhoW9sc1Dazk6OdrifEX6+NRBhbVZkSgA==
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/maska/-/maska-1.5.0.tgz#6e2f6386d290ab7dc8b44cfc04f34891e06a1e25"
+  integrity sha512-BwZXzs5gHeu6wtn3iWFqrKRtcsM3sTpkHvfAngVNVNlN7tl9ZyQUeHTz11s9Sy7Bq1MoQ+xyR/+IzghY8nR84Q==
 
 merge-stream@^2.0.0:
   version "2.0.0"
@@ -1996,26 +1731,21 @@ mimic-fn@^2.1.0:
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
 mini-svg-data-uri@^1.2.3, mini-svg-data-uri@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.3.3.tgz#91d2c09f45e056e5e1043340b8b37ba7b50f4fac"
-  integrity sha512-+fA2oRcR1dJI/7ITmeQJDrYWks0wodlOz0pAEhKYJ2IVc1z0AnwJUsKY2fzFmPAM3Jo9J0rBx8JAA9QQSJ5PuA==
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
 
 minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
   dependencies:
     brace-expansion "^1.1.7"
 
 minimist@^1.1.1:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-
-modern-normalize@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
-  integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
 moment@^2.10.2, moment@^2.29.1:
   version "2.29.1"
@@ -2032,15 +1762,10 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-nanoid@^3.1.23:
-  version "3.1.25"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152"
-  integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==
-
-nanoid@^3.1.30:
-  version "3.1.30"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
-  integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
+nanoid@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
+  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
 
 natural-compare@^1.4.0:
   version "1.4.0"
@@ -2052,17 +1777,10 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-node-emoji@^1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
-  integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==
-  dependencies:
-    lodash "^4.17.21"
-
-node-releases@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5"
-  integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
+node-releases@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
+  integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
@@ -2113,9 +1831,9 @@ optionator@^0.9.1:
     word-wrap "^1.2.3"
 
 orderedmap@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-1.1.1.tgz#c618e77611b3b21d0fe3edc92586265e0059c789"
-  integrity sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ==
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-1.1.5.tgz#4174c90b61bd7c25294932edf789f3b5677744d0"
+  integrity sha512-/fzlCGKRmfayGoI9UUXvJfc2nMZlJHW30QqEvwPvlg8tsX7jyiUSomYie6mYqx7Z9bOMGoag0H/q1PS/0PjYkg==
 
 parent-module@^1.0.0:
   version "1.0.1"
@@ -2149,7 +1867,7 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.6:
+path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
@@ -2170,33 +1888,31 @@ picocolors@^1.0.0:
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
-  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
 pinia@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.4.tgz#06f6a03f6f19e6ec8b63cc06459011d96948e53d"
-  integrity sha512-nAc2f9HmOcBbWRlnGDuBGedM1G6uFAR10FnJWP1/dgm1I2tM5jbgKL/3IgynP4mBnPCy//ky7g0WpCZl5Mmxsg==
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.12.tgz#4c6f7f59cb41f56f20deee71c403e66d8d3c637d"
+  integrity sha512-tUeuYGFrLU5irmGyRAIxp35q1OTcZ8sKpGT4XkPeVcG35W4R6cfXDbCGexzmVqH5lTQJJTXXbNGutIu9yS5yew==
   dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.20.1"
+    "@vue/devtools-api" "^6.1.0"
     vue-demi "*"
 
-postcss-js@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33"
-  integrity sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==
+postcss-js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
+  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
   dependencies:
     camelcase-css "^2.0.1"
-    postcss "^8.1.6"
 
 postcss-load-config@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.0.tgz#d39c47091c4aec37f50272373a6a648ef5e97829"
-  integrity sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.3.tgz#21935b2c43b9a86e6581a576ca7ee1bde2bd1d23"
+  integrity sha512-5EYgaM9auHGtO//ljHH+v/aC/TQ5LHXtL7bQajNAUBKUVKiYE8rYpFms7+V26D9FncaGe2zwCoPQsFKb5zF/Hw==
   dependencies:
-    import-cwd "^3.0.0"
-    lilconfig "^2.0.3"
+    lilconfig "^2.0.4"
     yaml "^1.10.2"
 
 postcss-nested@5.0.6:
@@ -2206,63 +1922,27 @@ postcss-nested@5.0.6:
   dependencies:
     postcss-selector-parser "^6.0.6"
 
-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.6:
-  version "6.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea"
-  integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==
-  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
-
-postcss-selector-parser@^6.0.7:
-  version "6.0.7"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.7.tgz#48404830a635113a71fd79397de8209ed05a66fc"
-  integrity sha512-U+b/Deoi4I/UmE6KOVPpnhS7I7AYdKbhGcat+qTQ27gycvaACvNEw11ba6RrkwVmDVRW7sigWgLj4/KbbJjeDA==
+postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
+  integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^3.3.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
-postcss-value-parser@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
-  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
-
 postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.1.10, postcss@^8.1.6, postcss@^8.2.1:
-  version "8.3.6"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea"
-  integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==
-  dependencies:
-    colorette "^1.2.2"
-    nanoid "^3.1.23"
-    source-map-js "^0.6.2"
-
-postcss@^8.3.8:
-  version "8.3.11"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
-  integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
+postcss@^8.1.10, postcss@^8.4.5, postcss@^8.4.6:
+  version "8.4.12"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
+  integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
   dependencies:
-    nanoid "^3.1.30"
+    nanoid "^3.3.1"
     picocolors "^1.0.0"
-    source-map-js "^0.6.2"
-
-postcss@^8.4.5:
-  version "8.4.5"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
-  integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
-  dependencies:
-    nanoid "^3.1.30"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.1"
+    source-map-js "^1.0.2"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -2270,49 +1950,44 @@ prelude-ls@^1.2.1:
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
 prettier@^2.3.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
-  integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
-
-pretty-hrtime@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
-  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.0.tgz#12f8f504c4d8ddb76475f441337542fa799207d4"
+  integrity sha512-m2FgJibYrBGGgQXNzfd0PuDGShJgRavjUoRCw1mZERIWVSXF0iLzLm+aOqTAbLnC3n6JzUhAA8uZnFVghHJ86A==
 
 progress@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prosemirror-commands@^1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.1.10.tgz#406a6589966e6cd80809cea2d801fb998639b37d"
-  integrity sha512-IWyBBXNAd44RM6NnBPljwq+/CM2oYCQJkF+YhKEAZNwzW0uFdGf4qComhjbKZzqFdu6Iub2ZhNsXgwPibA0lCQ==
+prosemirror-commands@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.2.2.tgz#1bd167372ee20abf488aca9cece63c43fab182c9"
+  integrity sha512-TX+KpWudMon06frryfpO/u7hsQv2hu8L4VSVbCpi3/7wXHBgl+35mV85qfa3RpT8xD2f3MdeoTqH0vy5JdbXPg==
   dependencies:
     prosemirror-model "^1.0.0"
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.0.0"
 
-prosemirror-dropcursor@^1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.3.5.tgz#d2808c17089df0e441ad66016aecc2b6457c8a1f"
-  integrity sha512-tNUwcF2lPAkwKBZPZRtbxpwljnODRNZ3eiYloN1DSUqDjMT1nBZm0nejaEMS1TvNQ+3amibUSAiV4hX+jpASFA==
+prosemirror-dropcursor@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.4.0.tgz#91a859d4ee79c99b1c0ba6ee61c093b195c0d9f0"
+  integrity sha512-6+YwTjmqDwlA/Dm+5wK67ezgqgjA/MhSDgaNxKUzH97SmeuWFXyLeDRxxOPZeSo7yTxcDGUCWTEjmQZsVBuMrQ==
   dependencies:
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.1.0"
     prosemirror-view "^1.1.0"
 
-prosemirror-gapcursor@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.1.5.tgz#0c37fd6cbb1d7c46358c2e7397f8da9a8b5c6246"
-  integrity sha512-SjbUZq5pgsBDuV3hu8GqgIpZR5eZvGLM+gPQTqjVVYSMUCfKW3EGXTEYaLHEl1bGduwqNC95O3bZflgtAb4L6w==
+prosemirror-gapcursor@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.2.2.tgz#7394613ba4a1601fad1f36f1cff8961968c22ffa"
+  integrity sha512-7YzuRBbu9W7HGQde84kCHfIjaRLNcAdeijbgqrm/R9dsdTWkV+rrdcmic/sCc+bptiNpvjCEE+R6hrbT8zFQeQ==
   dependencies:
     prosemirror-keymap "^1.0.0"
     prosemirror-model "^1.0.0"
     prosemirror-state "^1.0.0"
     prosemirror-view "^1.0.0"
 
-prosemirror-history@^1.1.3:
+prosemirror-history@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.2.0.tgz#04cc4df8d2f7b2a46651a2780de191ada6d465ea"
   integrity sha512-B9v9xtf4fYbKxQwIr+3wtTDNLDZcmMMmGiI3TAPShnUzvo+Rmv1GiUrsQChY1meetHl7rhML2cppF3FTs7f7UQ==
@@ -2321,33 +1996,25 @@ prosemirror-history@^1.1.3:
     prosemirror-transform "^1.0.0"
     rope-sequence "^1.3.0"
 
-prosemirror-inputrules@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz#93f9199ca02473259c30d7e352e4c14022d54638"
-  integrity sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw==
-  dependencies:
-    prosemirror-state "^1.0.0"
-    prosemirror-transform "^1.0.0"
-
-prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.3:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz#8b481bf8389a5ac40d38dbd67ec3da2c7eac6a6d"
-  integrity sha512-Al8cVUOnDFL4gcI5IDlG6xbZ0aOD/i3B17VT+1JbHWDguCgt/lBHVTHUBcKvvbSg6+q/W4Nj1Fu6bwZSca3xjg==
+prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.1.5.tgz#b5984c7d30f5c75956c853126c54e9e624c0327b"
+  integrity sha512-8SZgPH3K+GLsHL2wKuwBD9rxhsbnVBTwpHCO4VUO5GmqUQlxd/2GtBVWTsyLq4Dp3N9nGgPd3+lZFKUDuVp+Vw==
   dependencies:
     prosemirror-state "^1.0.0"
     w3c-keyname "^2.2.0"
 
-prosemirror-model@^1.0.0, prosemirror-model@^1.14.3:
-  version "1.14.3"
-  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.14.3.tgz#a9c250d3c4023ddf10ecb41a0a7a130e9741d37e"
-  integrity sha512-yzZlBaSxfUPIIP6U5Edh5zKxJPZ5f7bwZRhiCuH3UYkWhj+P3d8swHsbuAMOu/iDatDc5J/Qs5Mb3++mZf+CvQ==
+prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.16.1:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.16.1.tgz#fb388270bc9609b66298d6a7e15d0cc1d6c61253"
+  integrity sha512-r1/w0HDU40TtkXp0DyKBnFPYwd8FSlUSJmGCGFv4DeynfeSlyQF2FD0RQbVEMOe6P3PpUSXM6LZBV7W/YNZ4mA==
   dependencies:
     orderedmap "^1.1.0"
 
-prosemirror-schema-list@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.1.5.tgz#e7ad9e337ea3d77da6d6a4250f3d7bd51ae980a4"
-  integrity sha512-9gadhga/wySVfb/iZ2vOpndbG0XroeLw0HkkZN5demNbOea6U5oQtJmvyYWC7ZVf3WkhmVdVsOXrllM9JcC20A==
+prosemirror-schema-list@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.1.6.tgz#c3e13fe2f74750e4a53ff88d798dc0c4ccca6707"
+  integrity sha512-aFGEdaCWmJzouZ8DwedmvSsL50JpRkqhQ6tcpThwJONVVmCgI36LJHtoQ4VGZbusMavaBhXXr33zyD2IVsTlkw==
   dependencies:
     prosemirror-model "^1.0.0"
     prosemirror-transform "^1.0.0"
@@ -2360,19 +2027,19 @@ prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.4:
     prosemirror-model "^1.0.0"
     prosemirror-transform "^1.0.0"
 
-prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.3.2.tgz#5620ebe7379e6fae4f34ecc881886cb22ce96579"
-  integrity sha512-/G6d/u9Mf6Bv3H1XR8VxhpjmUO75LYmnvj+s3ZfZpakU1hnQbsvCEybml1B3f2IWUAAQRFkbO1PnsbFhLZsYsw==
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.3.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.4.0.tgz#057344b7ef38d1a4ba370390eba8c35f9afe6b36"
+  integrity sha512-P+bv4JiLHcRy4krHByUglXR1yAMCuzHRAaSKInsoW7Rjy3aomPXM/MwRs+b7TGtC1e6ZM31KbapbvE4wV1X9RA==
   dependencies:
     prosemirror-model "^1.0.0"
 
-prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.19.0:
-  version "1.19.3"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.19.3.tgz#8d9bc91705bcf9cb5ae3b4de2668f73c7b93fa14"
-  integrity sha512-YP/ZzVwqPPwbHbJi97U2/CeyZ8PIHmLJt0gIhZWP8XfnuBRGG3y+jwLzUoBVmiuoUCy3R6PSB+pOATliGzLfPg==
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.23.6:
+  version "1.23.10"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.23.10.tgz#a3fb6a7c780c8cd84488fdd451c23becab9dbefb"
+  integrity sha512-/p8Orb1VeJEbf7Z/BltU9GMWADZRqKlna6TlQGK1snJ6fTdLRC4f4yF2MgNK4OMQjmAwJISUtEp5+Vu5CSbR1w==
   dependencies:
-    prosemirror-model "^1.14.3"
+    prosemirror-model "^1.16.0"
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.1.0"
 
@@ -2381,16 +2048,6 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-purgecss@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742"
-  integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==
-  dependencies:
-    commander "^6.0.0"
-    glob "^7.0.0"
-    postcss "^8.2.1"
-    postcss-selector-parser "^6.0.2"
-
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -2415,14 +2072,6 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-reduce-css-calc@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
-  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss-value-parser "^3.3.0"
-
 regexpp@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
@@ -2438,45 +2087,31 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve-from@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
-  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
-
-resolve@^1.20.0:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
-  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+resolve@^1.22.0:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
   dependencies:
-    is-core-module "^2.2.0"
-    path-parse "^1.0.6"
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
 
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rgb-regex@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
-  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
-
-rgba-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
-  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
-
-rimraf@^3.0.0, rimraf@^3.0.2:
+rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
   dependencies:
     glob "^7.1.3"
 
-rollup@^2.57.0:
-  version "2.60.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.60.1.tgz#4b34cd247f09b421f10a3c9286eda2ecf9972079"
-  integrity sha512-akwfnpjY0rXEDSn1UTVfKXJhPsEBu+imi1gqBA1ZkHGydUnkV/fWCC90P7rDaLEW8KTwBcS1G3N4893Ndz+jwg==
+rollup@^2.59.0:
+  version "2.70.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.1.tgz#824b1f1f879ea396db30b0fc3ae8d2fead93523e"
+  integrity sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -2493,11 +2128,13 @@ run-parallel@^1.1.9:
     queue-microtask "^1.2.2"
 
 sass@^1.32.12:
-  version "1.38.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.38.0.tgz#2f3e60a1efdcdc910586fa79dc89d3399a145b4f"
-  integrity sha512-WBccZeMigAGKoI+NgD7Adh0ab1HUq+6BmyBUEaGxtErbUtWUevEbdgo5EZiJQofLUGcKtlNaO2IdN73AHEua5g==
+  version "1.49.9"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9"
+  integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
 
 select@^1.1.2:
   version "1.1.2"
@@ -2546,16 +2183,9 @@ shebang-regex@^3.0.0:
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
 signal-exit@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
-  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
-
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
-  dependencies:
-    is-arrayish "^0.3.1"
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
 slice-ansi@^4.0.0:
   version "4.0.0"
@@ -2571,22 +2201,17 @@ sortablejs@1.14.0:
   resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
   integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
 
-source-map-js@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
-  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
-
-source-map-js@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
-  integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
 source-map@0.6.1, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-sourcemap-codec@^1.4.4:
+sourcemap-codec@^1.4.8:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
@@ -2596,21 +2221,21 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
-string-width@^4.2.0:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
-  integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
+string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
   dependencies:
     emoji-regex "^8.0.0"
     is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.0"
+    strip-ansi "^6.0.1"
 
-strip-ansi@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
-  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
-    ansi-regex "^5.0.0"
+    ansi-regex "^5.0.1"
 
 strip-final-newline@^2.0.0:
   version "2.0.0"
@@ -2636,17 +2261,21 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 table@^6.0.9:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
-  integrity sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"
+  integrity sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==
   dependencies:
     ajv "^8.0.1"
-    lodash.clonedeep "^4.5.0"
     lodash.truncate "^4.4.2"
     slice-ansi "^4.0.0"
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
 
 tailwind-scrollbar@^1.3.1:
   version "1.3.1"
@@ -2655,70 +2284,32 @@ tailwind-scrollbar@^1.3.1:
   dependencies:
     tailwindcss ">1.9.6"
 
-tailwindcss@>1.9.6:
-  version "2.2.16"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.16.tgz#32f81bdf1758b639cb83b9d30bf7cbecdda49e5e"
-  integrity sha512-EireCtpQyyJ4Xz8NYzHafBoy4baCOO96flM0+HgtsFcIQ9KFy/YBK3GEtlnD+rXen0e4xm8t3WiUcKBJmN6yjg==
+tailwindcss@>1.9.6, tailwindcss@^3.0.6:
+  version "3.0.23"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.23.tgz#c620521d53a289650872a66adfcb4129d2200d10"
+  integrity sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==
   dependencies:
     arg "^5.0.1"
-    bytes "^3.0.0"
     chalk "^4.1.2"
-    chokidar "^3.5.2"
-    color "^4.0.1"
-    cosmiconfig "^7.0.1"
-    detective "^5.2.0"
-    didyoumean "^1.2.2"
-    dlv "^1.1.3"
-    fast-glob "^3.2.7"
-    fs-extra "^10.0.0"
-    glob-parent "^6.0.1"
-    html-tags "^3.1.0"
-    is-color-stop "^1.1.0"
-    is-glob "^4.0.1"
-    lodash "^4.17.21"
-    lodash.topath "^4.5.2"
-    modern-normalize "^1.1.0"
-    node-emoji "^1.11.0"
-    normalize-path "^3.0.0"
-    object-hash "^2.2.0"
-    postcss-js "^3.0.3"
-    postcss-load-config "^3.1.0"
-    postcss-nested "5.0.6"
-    postcss-selector-parser "^6.0.6"
-    postcss-value-parser "^4.1.0"
-    pretty-hrtime "^1.0.3"
-    purgecss "^4.0.3"
-    quick-lru "^5.1.1"
-    reduce-css-calc "^2.1.8"
-    resolve "^1.20.0"
-    tmp "^0.2.1"
-
-tailwindcss@^3.0.6:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.6.tgz#1981a0bb55919c0af566c98870ab2ec672599efb"
-  integrity sha512-+CA2f09rbHFDsdQ1iDvsOGbF1tZFmyPoRhUeaF9/5FRT5GYObtp+UjTSCdmeDcu6T90bx4WAaOkddYFPBkjbAA==
-  dependencies:
-    arg "^5.0.1"
-    chalk "^4.1.2"
-    chokidar "^3.5.2"
+    chokidar "^3.5.3"
     color-name "^1.1.4"
     cosmiconfig "^7.0.1"
     detective "^5.2.0"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.2.7"
+    fast-glob "^3.2.11"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
     normalize-path "^3.0.0"
     object-hash "^2.2.0"
-    postcss-js "^3.0.3"
+    postcss "^8.4.6"
+    postcss-js "^4.0.0"
     postcss-load-config "^3.1.0"
     postcss-nested "5.0.6"
-    postcss-selector-parser "^6.0.7"
+    postcss-selector-parser "^6.0.9"
     postcss-value-parser "^4.2.0"
     quick-lru "^5.1.1"
-    resolve "^1.20.0"
-    tmp "^0.2.1"
+    resolve "^1.22.0"
 
 text-table@^0.2.0:
   version "0.2.0"
@@ -2735,24 +2326,12 @@ tinycolor2@^1.4.2:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
   integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
 
-tippy.js@^6.3.1:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.1.tgz#3788a007be7015eee0fd589a66b98fb3f8f10181"
-  integrity sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==
-  dependencies:
-    "@popperjs/core" "^2.8.3"
-
-tmp@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
-  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
+tippy.js@^6.3.7:
+  version "6.3.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
+  integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
   dependencies:
-    rimraf "^3.0.0"
-
-to-fast-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
-  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+    "@popperjs/core" "^2.9.0"
 
 to-regex-range@^5.0.1:
   version "5.0.1"
@@ -2773,11 +2352,6 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-universalify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
-  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
-
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -2790,17 +2364,28 @@ util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
-v-money3@^3.13.5:
+v-calendar@3.0.0-alpha.8:
+  version "3.0.0-alpha.8"
+  resolved "https://registry.yarnpkg.com/v-calendar/-/v-calendar-3.0.0-alpha.8.tgz#3bc8c69f4788fb527c39706f41fd2a502a17c827"
+  integrity sha512-T23H5UbK0EomrwArlF/jrT2LFbV/lu+Bp9JroZ1paN6rPoaMyvE+HrLxvAmUgi+pODrdTURDMzM3+WPgeFKEBQ==
+  dependencies:
+    "@popperjs/core" "2.4.0"
+    "@types/lodash" "^4.14.165"
+    date-fns "^2.16.1"
+    date-fns-tz "^1.0.12"
+    lodash "^4.17.20"
+
+v-money3@3.16.1:
   version "3.16.1"
   resolved "https://registry.yarnpkg.com/v-money3/-/v-money3-3.16.1.tgz#1cbc126792772ddd9f0d9605745961bae29f2e5a"
   integrity sha512-U0GjmdybvEwfxCpZiTUbKugSglJbX6wxlyMeg0YJdLTAKlnjMRDph3hpNJlTlg5Gs8MQRpDVdaLysBjV749HLg==
 
 v-tooltip@^4.0.0-alpha.1:
-  version "4.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-4.0.0-alpha.1.tgz#0a4658342b681d87fa16fe0d423e871937943f33"
-  integrity sha512-TTNLJ/IVyoburxW0M3gxHhRb+d18xbozI5c0q2LCqIw4YUZzLKCG0ufx72d+j/1Xkqam9kDNHZChZq4KfsVpvw==
+  version "4.0.0-beta.17"
+  resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-4.0.0-beta.17.tgz#914ab8fe801c2c45f1328f1260b770ec2049da64"
+  integrity sha512-d7v/6KEXQOtcj3NT3Z1LpbDv8SBh8JgbsD+3s/zGIGCxiXC2SoVW6wGV4X0MlCo97PiosibcSe+VKbFiy4AKnQ==
   dependencies:
-    "@popperjs/core" "^2.6.0"
+    "@popperjs/core" "^2.11.0"
     vue-resize "^2.0.0-alpha.1"
 
 v8-compile-cache@^2.0.3:
@@ -2809,14 +2394,14 @@ v8-compile-cache@^2.0.3:
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
 vite@^2.6.1:
-  version "2.6.14"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.6.14.tgz#35c09a15e4df823410819a2a239ab11efb186271"
-  integrity sha512-2HA9xGyi+EhY2MXo0+A2dRsqsAG3eFNEVIo12olkWhOmc8LfiM+eMdrXf+Ruje9gdXgvSqjLI9freec1RUM5EA==
-  dependencies:
-    esbuild "^0.13.2"
-    postcss "^8.3.8"
-    resolve "^1.20.0"
-    rollup "^2.57.0"
+  version "2.8.6"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.8.6.tgz#32d50e23c99ca31b26b8ccdc78b1d72d4d7323d3"
+  integrity sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==
+  dependencies:
+    esbuild "^0.14.14"
+    postcss "^8.4.6"
+    resolve "^1.22.0"
+    rollup "^2.59.0"
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -2825,20 +2410,15 @@ vue-class-component@^8.0.0-0:
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz#db692cd97656eb9a08206c03d0b7398cdb1d9420"
   integrity sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==
 
-vue-demi@*:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.11.3.tgz#dd7495b92b495ecfa35675bf024b1358a7add150"
-  integrity sha512-DpM0TTMpclRZDV6AIacgg837zrim/C9Zn+2ztXBs9hsESJN9vC83ztjTe4KC4HgJuVle8YUjPp7HTwWtwOHfmg==
-
-vue-demi@^0.12.0:
-  version "0.12.1"
-  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c"
-  integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==
+vue-demi@*, vue-demi@^0.12.0:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.4.tgz#420dd17628f95f1bbce1102ad3c51074713a8049"
+  integrity sha512-ztPDkFt0TSUdoq1ZI6oD730vgztBkiByhUW7L1cOTebiSBqSYfSQgnhYakYigBkyAybqCTH7h44yZuDJf2xILQ==
 
 vue-eslint-parser@^7.10.0:
-  version "7.10.0"
-  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz#ea4e4b10fd10aa35c8a79ac783488d8abcd29be8"
-  integrity sha512-7tc/ewS9Vq9Bn741pvpg8op2fWJPH3k32aL+jcIcWGCTzh/zXSdh7pZ5FV3W2aJancP9+ftPAv292zY5T5IPCg==
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"
+  integrity sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==
   dependencies:
     debug "^4.1.1"
     eslint-scope "^5.1.1"
@@ -2849,20 +2429,20 @@ vue-eslint-parser@^7.10.0:
     semver "^6.3.0"
 
 vue-flatpickr-component@^9.0.3:
-  version "9.0.4"
-  resolved "https://registry.yarnpkg.com/vue-flatpickr-component/-/vue-flatpickr-component-9.0.4.tgz#b064fffb11b0e351213434d2f6b2a291d753438c"
-  integrity sha512-E8XfzLhrPsQBtZluWYEn3m21VHn7PArYnel3QPYL3auBrVMc07WaK6b20e04OK8LUCq9V+OKNZe4MoI0znY/Hw==
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/vue-flatpickr-component/-/vue-flatpickr-component-9.0.5.tgz#350ec73b7f3d7f80b050c170c088234f9c3bd14c"
+  integrity sha512-fKuz/D4ePQKi+jPo4xjYRgBCLTWrTsCoKbx8nam63x4kTDtSqvFOjNwLvy0QgwC0lC+aFpUWa1dNYTH0hgUcCA==
   dependencies:
     flatpickr "^4.6.9"
 
 vue-i18n@^9.1.7:
-  version "9.1.7"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.1.7.tgz#6f28dd2135197066508e2e65ab204a019750d773"
-  integrity sha512-ujuuDanoHqtEd4GejWrbG/fXE9nrP51ElsEGxp0WBHfv+/ki0/wyUqkO+4fLikki2obGtXdviTPH0VNpas5K6g==
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.1.9.tgz#cb53e06ab5cc5b7eed59332f151caf48d47be9bb"
+  integrity sha512-JeRdNVxS2OGp1E+pye5XB6+M6BBkHwAv9C80Q7+kzoMdUDGRna06tjC0vCB/jDX9aWrl5swxOMFcyAr7or8XTA==
   dependencies:
-    "@intlify/core-base" "9.1.7"
-    "@intlify/shared" "9.1.7"
-    "@intlify/vue-devtools" "9.1.7"
+    "@intlify/core-base" "9.1.9"
+    "@intlify/shared" "9.1.9"
+    "@intlify/vue-devtools" "9.1.9"
     "@vue/devtools-api" "^6.0.0-beta.7"
 
 vue-resize@^2.0.0-alpha.1:
@@ -2871,16 +2451,16 @@ vue-resize@^2.0.0-alpha.1:
   integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
 
 vue-router@^4.0.0-0, vue-router@^4.0.8:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.11.tgz#cd649a0941c635281763a20965b599643ddc68ed"
-  integrity sha512-sha6I8fx9HWtvTrFZfxZkiQQBpqSeT+UCwauYjkdOQYRvwsGwimlQQE2ayqUwuuXGzquFpCPoXzYKWlzL4OuXg==
+  version "4.0.14"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.14.tgz#ce2028c1c5c33e30c7287950c973f397fce1bd65"
+  integrity sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==
   dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.14"
+    "@vue/devtools-api" "^6.0.0"
 
 vue-types@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/vue-types/-/vue-types-4.1.0.tgz#8dcbbaccf9d5c3815449ac7cb8ae5864454cfff0"
-  integrity sha512-oPAeKKx5vY5Q8c7lMQPQyrBIbmWQGael5XEHqO1f+Y3V/RUZNuISz7KxI4woGjh79Vy/gDDaPX9j9zKYpaaA2g==
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/vue-types/-/vue-types-4.1.1.tgz#7d7a4e4a01249a51b6da3faa301248c2ea5f5b97"
+  integrity sha512-Jq2GZ/w6rExJbLA/h7nHBFLciu+YNekgox0DB64wN1snZ4IIJMq+qnqp1/vE4fc7vEjZcP5KGhLzkkSjIHLRzw==
   dependencies:
     is-plain-object "5.0.0"
 
@@ -2930,25 +2510,16 @@ vue3-storage@^0.1.11:
     vue-class-component "^8.0.0-0"
     vue-router "^4.0.0-0"
 
-vue@^3.0.0, vue@^3.2.0-beta.5:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.4.tgz#d94d88675e41c050d3a722d0848a7063b5e87a60"
-  integrity sha512-rNCFmoewm8IwmTK0nj3ysKq53iRpNEFKoBJ4inar6tIh7Oj7juubS39RI8UI+VE7x+Cs2z6PBsadtZu7z2qppg==
-  dependencies:
-    "@vue/compiler-dom" "3.2.4"
-    "@vue/runtime-dom" "3.2.4"
-    "@vue/shared" "3.2.4"
-
-vue@^3.2.6:
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.19.tgz#da2c80a6a0271c7097fee9e31692adfd9d569c8f"
-  integrity sha512-6KAMdIfAtlK+qohTIUE4urwAv4A3YRuo8uAbByApUmiB0CziGAAPs6qVugN6oHPia8YIafHB/37K0O6KZ7sGmA==
-  dependencies:
-    "@vue/compiler-dom" "3.2.19"
-    "@vue/compiler-sfc" "3.2.19"
-    "@vue/runtime-dom" "3.2.19"
-    "@vue/server-renderer" "3.2.19"
-    "@vue/shared" "3.2.19"
+vue@^3.0.0, vue@^3.2.0-beta.5, vue@^3.2.6:
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.31.tgz#e0c49924335e9f188352816788a4cca10f817ce6"
+  integrity sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==
+  dependencies:
+    "@vue/compiler-dom" "3.2.31"
+    "@vue/compiler-sfc" "3.2.31"
+    "@vue/runtime-dom" "3.2.31"
+    "@vue/server-renderer" "3.2.31"
+    "@vue/shared" "3.2.31"
 
 vuedraggable@^4.1.0:
   version "4.1.0"