diff --git a/resources/scripts/admin/components/CopyInputField.vue b/resources/scripts/admin/components/CopyInputField.vue
index 851a0bc4..66049440 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/estimate-invoice-common/CreateTotal.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
index 3c6e7911..3bd7f1ba 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
@@ -30,7 +30,16 @@
 
       <label
         v-else
-        class="flex items-center justify-center m-0 text-lg text-black uppercase dark:text-white"
+        class="
+          flex
+          items-center
+          justify-center
+          m-0
+          text-lg
+          text-black
+          dark:text-white
+          uppercase
+        "
       >
         <BaseFormatMoney
           :amount="store.getSubTotal"
@@ -60,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>
@@ -167,7 +185,16 @@
     </div>
 
     <div
-      class="flex items-center justify-between w-full pt-2 mt-5 border-t border-gray-200 border-solid dark:border-gray-600"
+      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" />
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
index a355facd..ac7a5394 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
@@ -3,7 +3,16 @@
     <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 dark:text-white">
+    <label
+      class="
+        flex
+        items-center
+        justify-center
+        text-lg
+        text-black
+        dark:text-white
+      "
+    >
       <BaseFormatMoney :amount="tax.amount" :currency="currency" />
 
       <BaseIcon
diff --git a/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue b/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
index c85f2916..3be1905e 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/CustomerModal.vue b/resources/scripts/admin/components/modal-components/CustomerModal.vue
index b0a9d264..0fbced9d 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>
 
diff --git a/resources/scripts/admin/layouts/LayoutLogin.vue b/resources/scripts/admin/layouts/LayoutLogin.vue
index 91540649..956170b3 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/views/auth/ForgotPassword.vue b/resources/scripts/admin/views/auth/ForgotPassword.vue
index d5bfeca3..5a63d8a8 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 d3b9686f..cf226c37 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 a40a2a6b..4dfa93ee 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/partials/CustomerInfo.vue b/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
index 128dcc82..6d113ac7 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/modules/Index.vue b/resources/scripts/admin/views/modules/Index.vue
index 02c7fe75..4dbcab37 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 60b704b3..1a6461d0 100644
--- a/resources/scripts/admin/views/payments/Create.vue
+++ b/resources/scripts/admin/views/payments/Create.vue
@@ -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>
 
diff --git a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
index d0eb6a81..6da34f63 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/settings/CustomFieldsSetting.vue b/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
index 1cad62b0..bc39c082 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/UpdateAppSetting.vue b/resources/scripts/admin/views/settings/UpdateAppSetting.vue
index 53a6c99c..ee4aac7b 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>
@@ -150,14 +135,7 @@
         <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 border-solid last:border-b-0"
         >
           <p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
           <div class="flex flex-row items-center">
diff --git a/resources/scripts/components/base-select/BaseMultiselect.vue b/resources/scripts/components/base-select/BaseMultiselect.vue
index db8fea80..ca7d0de8 100755
--- a/resources/scripts/components/base-select/BaseMultiselect.vue
+++ b/resources/scripts/components/base-select/BaseMultiselect.vue
@@ -439,7 +439,7 @@ export default {
         container:
           '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:
-          'bg-gray-200 bg-opacity-50 !text-gray-400 dark:!text-gray-800 !dark:text-gray-500 !cursor-default dark:opacity-25',
+          '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',
diff --git a/resources/scripts/components/base/BaseDatePicker.vue b/resources/scripts/components/base/BaseDatePicker.vue
index 250ae51f..aac77c44 100644
--- a/resources/scripts/components/base/BaseDatePicker.vue
+++ b/resources/scripts/components/base/BaseDatePicker.vue
@@ -28,6 +28,7 @@
       :attributes="attrs"
       :model-config="config"
       :masks="masks"
+      :is-dark="isDarkModeOn"
       :locale="global.locale"
     >
       <template
@@ -72,7 +73,7 @@
 
       <template v-if="showExtraOptions" #footer>
         <div
-          class="bg-gray-100 grid grid-cols-3 gap-2 p-2 border-t rounded-b-lg"
+          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') }}
@@ -146,7 +147,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'border-2 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,
@@ -163,7 +164,7 @@ const props = defineProps({
   sourceDate: {
     type: [String, Date],
     default: () => new Date(),
-  }
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -175,6 +176,9 @@ 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} `
diff --git a/resources/scripts/components/base/BaseDivider.vue b/resources/scripts/components/base/BaseDivider.vue
index ddbb4b58..fbe3edaa 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 dark:bg-gray-600" />
+  <div class="w-full h-px bg-gray-300 dark:bg-gray-600" />
 </template>
diff --git a/resources/scripts/components/base/BaseInputGroup.vue b/resources/scripts/components/base/BaseInputGroup.vue
index 31d83fb9..d5eddc27 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/BaseLabel.vue b/resources/scripts/components/base/BaseLabel.vue
index 2b5671d1..cedfc816 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/BaseRadio.vue b/resources/scripts/components/base/BaseRadio.vue
index dc7f3832..e0adf9b9 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"  :class="{ 'bg-white': checked }"/>
+            <span class="rounded-full w-1.5 h-1.5"  :class="{ 'bg-white': checked }"/>
           </span>
           <div class="flex flex-col ml-3">
             <RadioGroupLabel
diff --git a/resources/scripts/components/base/BaseSelectInput.vue b/resources/scripts/components/base/BaseSelectInput.vue
index aec9a698..fdb103bf 100644
--- a/resources/scripts/components/base/BaseSelectInput.vue
+++ b/resources/scripts/components/base/BaseSelectInput.vue
@@ -29,14 +29,12 @@
           text-left
           bg-white
           dark:bg-gray-700
-          border border-gray-200
           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
         "
       >
diff --git a/resources/scripts/components/icons/dashboard/PaymentIcon.vue b/resources/scripts/components/icons/dashboard/PaymentIcon.vue
index 8e068476..f7b685a9 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/svg/LoginBottomVector.vue b/resources/scripts/components/svg/LoginBottomVector.vue
index d734938b..1973928b 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 e37005b7..9bffa5d1 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 5ff1ae34..61286d3c 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 29558c2d..197074a6 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,6 @@
           </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>
 
           <!-- Profile dropdown -->
 
@@ -85,7 +72,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 +81,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 +105,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,15 +125,15 @@
           :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="pt-4 pb-3 border-t border-gray-200 dark:border-gray-500">
         <div class="flex items-center px-4">
           <div class="shrink-0">
             <img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
@@ -153,26 +142,10 @@
             <div class="text-base font-medium text-gray-800">
               {{ globalStore.currentUser.title }}
             </div>
-            <div class="text-sm font-medium text-gray-500">
+            <div class="text-sm font-medium text-gray-500 dark:text-gray-200">
               {{ globalStore.currentUser.email }}
             </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>
         <div class="mt-3 space-y-1">
           <router-link
@@ -182,7 +155,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
diff --git a/resources/scripts/customer/views/auth/ForgotPassword.vue b/resources/scripts/customer/views/auth/ForgotPassword.vue
index e4ff913e..af9692bf 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 569ed28e..f4ab5d8a 100644
--- a/resources/scripts/customer/views/auth/Login.vue
+++ b/resources/scripts/customer/views/auth/Login.vue
@@ -55,7 +55,7 @@
     <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>
diff --git a/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue b/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue
index a5827484..e77f8bf3 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 a114818d..d199a894 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 90ad7a11..b65cb411 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/estimates/Index.vue b/resources/scripts/customer/views/estimates/Index.vue
index b64387a4..aeafe639 100644
--- a/resources/scripts/customer/views/estimates/Index.vue
+++ b/resources/scripts/customer/views/estimates/Index.vue
@@ -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 01ce63ff..a8403218 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 b40fabc5..e1099967 100644
--- a/resources/scripts/customer/views/invoices/Index.vue
+++ b/resources/scripts/customer/views/invoices/Index.vue
@@ -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 28442aea..810d5f9d 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 2157a34d..a6e3eadc 100644
--- a/resources/scripts/customer/views/payments/Index.vue
+++ b/resources/scripts/customer/views/payments/Index.vue
@@ -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 1e03a2d1..2ca62a2e 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>