diff --git a/resources/scripts/components/base/BaseBreadcrumb.vue b/resources/scripts/components/base/BaseBreadcrumb.vue
index 07afcf02..6fe55aa5 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 38539440..db60b3dd 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/BasePageHeader.vue b/resources/scripts/components/base/BasePageHeader.vue
index b85b5389..0c8ba4f7 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 />