diff --git a/src/ui/layout/Breadcrumbs.scss b/src/ui/layout/Breadcrumbs.scss
index dc9c1f48..0ca3e975 100644
--- a/src/ui/layout/Breadcrumbs.scss
+++ b/src/ui/layout/Breadcrumbs.scss
@@ -2,8 +2,17 @@
 @use "../../styles/fonts" as fonts;
 @use "../../styles/variables" as vars;
 
+// Matches Angular's `flights-page-breadcrumbs .p-breadcrumb`:
+// dark-blue-opacity chip with 3px/10px/4px/10px padding and
+// `$space-s` bottom margin. Renders as a translucent pill over
+// the hero background rather than plain inline text.
 .breadcrumbs {
-  margin-bottom: vars.$space-m;
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px 4px 10px;
+  margin-bottom: vars.$space-s;
+  background-color: colors.$dark-blue-opacity;
+  border-radius: vars.$border-radius;
 
   &__list {
     display: flex;