diff --git a/src/views/Page/Breadcrumbs.svelte b/src/views/Page/Breadcrumbs.svelte
index 33edb8c..119a0ba 100644
--- a/src/views/Page/Breadcrumbs.svelte
+++ b/src/views/Page/Breadcrumbs.svelte
@@ -47,23 +47,25 @@
 
 <!-- https://devdojo.com/pines/docs/breadcrumbs -->
 <div
-  class="flex justify-between overflow-x-auto rounded-md border border-neutral-200/60 px-3.5 py-1"
+  class="flex justify-between overflow-x-auto rounded-md border border-neutral-200/60 px-3.5 py-1 dark:border-neutral-700"
   bind:this={breadcrumbsEl}
 >
   <ol
-    class="inline-flex items-center space-x-1 text-xs text-neutral-500 sm:mb-0 [&_.active-breadcrumb]:font-medium [&_.active-breadcrumb]:text-neutral-600"
+    class="inline-flex items-center space-x-1 text-xs text-neutral-500 dark:text-neutral-300 sm:mb-0 [&_.active-breadcrumb]:font-medium [&_.active-breadcrumb]:text-neutral-600 dark:[&_.active-breadcrumb]:text-neutral-200"
   >
     {#each $pageBreadcrumbs as crumb, index}
       <li>
         <a
           href={inject(routes.Page, { worldId, pageId: crumb })}
-          class="inline-flex items-center text-ellipsis whitespace-nowrap py-1 font-normal hover:text-neutral-900 focus:outline-none"
+          class="font-norma inline-flex items-center text-ellipsis whitespace-nowrap py-1 focus:outline-none"
           class:active-breadcrumb={crumb === pageId}
           >{$crumbsTitles[index] || crumb}</a
         >
       </li>
       {#if index !== $pageBreadcrumbs.length - 1}
-        <ChevronRight class="h-5 w-5 fill-current text-gray-400/70" />
+        <ChevronRight
+          class="h-5 w-5 fill-current text-gray-400/70 dark:text-gray-500"
+        />
       {/if}
     {/each}
   </ol>