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/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/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>