diff --git a/src/css/custom.css b/src/css/custom.css
index dfb8092e..e2fe6599 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -39,6 +39,9 @@
   --ifm-heading-color: #041834;
   --ifm-font-weight-bold: 500;
   --ifm-footer-padding-vertical: 2.375rem;
+  --ifm-breadcrumb-separator: url("data:image/svg+xml, %3Csvg%20width=%228%22%20height=%2213%22%20viewBox=%220%200%208%2013%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d=%22M1%2012L7%206.5L1%201%22%20stroke=%22%23415067%22%20stroke-width=%221.25%22%2F%3E%0A%3C%2Fsvg%3E%0A");
+  --ifm-breadcrumb-item-background-active: #FFF;
+  --ifm-breadcrumb-spacing: 0.875rem;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -86,6 +89,19 @@ figure figcaption {
   margin-bottom: 3.3rem;
 }
 
+[class^=docMainContainer_] .breadcrumbs__link {
+  color: var(--ifm-heading-color);
+}
+
+[class^=docMainContainer_] .breadcrumbs__item:not(:last-child):after {
+  opacity: 1;
+  margin-left: 0.1rem;
+}
+
+[class^=docMainContainer_] .breadcrumbs__item--active .breadcrumbs__link {
+  border: 1px solid var(--ifm-color-border);
+}
+
 [class^=docMainContainer_] h1 {
   --ifm-heading-font-weight: 300;
   --ifm-heading-font-family: "Beausite", sans-serif;