diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
index b62ada2..163329e 100644
--- a/layouts/partials/breadcrumbs.html
+++ b/layouts/partials/breadcrumbs.html
@@ -1,6 +1,14 @@
-<nav aria-label="breadcrumb" style="background-color: #e9ecef; padding-top: 64px">
-    <ol class="breadcrumb container">
-        <li class="breadcrumb-item"><a href="../">{{ i18n "home" }}</a></li>
-        <li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
-    </ol>
+<nav class="hd-breadcrumb" aria-label="breadcrumb">
+    <div class="container">
+        <ol class="hd-breadcrumb__trail">
+            <li>
+                <a href="/{{ .Site.Language.Lang }}/">
+                    <i class="bi bi-house-door-fill"></i> {{ i18n "home" }}
+                </a>
+            </li>
+            <li>
+                <span class="current" aria-current="page">{{ .Title }}</span>
+            </li>
+        </ol>
+    </div>
 </nav>
diff --git a/layouts/partials/breadcrumbs_usage.html b/layouts/partials/breadcrumbs_usage.html
index 2615556..ac0ec37 100644
--- a/layouts/partials/breadcrumbs_usage.html
+++ b/layouts/partials/breadcrumbs_usage.html
@@ -1,14 +1,36 @@
-<nav aria-label="breadcrumb" style="background-color: #e9ecef; padding-top: 64px">
-    <div class="container d-flex gap-1">
-        <div class="align-self-center">
-            {{ i18n "usage-discover-pre" }} <span style="font-family: var(--hd-font-brand)">happy<strong>Domain</strong></span> {{ i18n "usage-discover-post" }}
-        </div>
-        <ol class="breadcrumb mb-0">
-            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/freelance" }}">{{ i18n "freelance" }}</a></li>
-            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/sysadmin" }}">{{ i18n "sysadmin" }}</a></li>
-            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/devops" }}">{{ i18n "devops" }}</a></li>
-            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/cio" }}">{{ i18n "cio" }}</a></li>
-            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/geek" }}">{{ i18n "geek" }}</a></li>
-        </ol>
+<nav class="hd-breadcrumb hd-breadcrumb--usage" aria-label="breadcrumb">
+    <div class="hd-breadcrumb__row container">
+        <p class="hd-breadcrumb__lead">
+            {{ i18n "usage-discover-pre" }}
+            <span class="brand">happy<strong>Domain</strong></span>
+            {{ i18n "usage-discover-post" }}
+        </p>
+        <ul class="hd-breadcrumb__personas">
+            <li>
+                <a href="{{ ref . "/use-happyDomain/freelance" }}">
+                    <i class="bi bi-person-workspace"></i> {{ i18n "freelance" }}
+                </a>
+            </li>
+            <li>
+                <a href="{{ ref . "/use-happyDomain/sysadmin" }}">
+                    <i class="bi bi-hdd-rack"></i> {{ i18n "sysadmin" }}
+                </a>
+            </li>
+            <li>
+                <a href="{{ ref . "/use-happyDomain/devops" }}">
+                    <i class="bi bi-infinity"></i> {{ i18n "devops" }}
+                </a>
+            </li>
+            <li>
+                <a href="{{ ref . "/use-happyDomain/cio" }}">
+                    <i class="bi bi-building"></i> {{ i18n "cio" }}
+                </a>
+            </li>
+            <li>
+                <a href="{{ ref . "/use-happyDomain/geek" }}">
+                    <i class="bi bi-controller"></i> {{ i18n "geek" }}
+                </a>
+            </li>
+        </ul>
     </div>
 </nav>
diff --git a/static/css/custom.css b/static/css/custom.css
index a51a327..3d41426 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -93,6 +93,153 @@ nav.navbar.scrolled {
     border-bottom: 1px solid var(--hd-accent);
 }
 
+/* ── Page breadcrumb band ──
+   Sits directly under the fixed navbar (64px tall) and gives pages a proper
+   header strip: a soft brand-tinted band with a clickable trail. */
+.hd-breadcrumb {
+    position: relative;
+    padding-top: calc(64px + 30px);
+    padding-bottom: 26px;
+    background:
+        radial-gradient(
+            120% 160% at 0% 0%,
+            var(--hd-accent-subtle) 0%,
+            transparent 52%
+        ),
+        linear-gradient(
+            180deg,
+            var(--hd-bg-subtle) 0%,
+            var(--hd-bg-canvas) 100%
+        );
+    border-bottom: 1px solid var(--hd-border-1);
+    overflow: hidden;
+}
+
+/* Thin accent rule along the bottom edge */
+.hd-breadcrumb::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+    width: 180px;
+    height: 2px;
+    background: linear-gradient(
+        90deg,
+        var(--hd-accent) 0%,
+        var(--hd-brand-dark) 100%
+    );
+}
+
+.hd-breadcrumb__trail {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 0.8125rem;
+    line-height: 1;
+}
+
+.hd-breadcrumb__trail li {
+    display: inline-flex;
+    align-items: center;
+}
+
+.hd-breadcrumb__trail li + li::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    margin: 0 6px;
+    border-right: 1.5px solid var(--hd-border-3);
+    border-bottom: 1.5px solid var(--hd-border-3);
+    transform: rotate(-45deg);
+}
+
+.hd-breadcrumb__trail a {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--hd-fg-3);
+    text-decoration: none;
+    font-weight: 500;
+    padding: 4px 9px;
+    border-radius: var(--hd-radius);
+    transition:
+        color 0.15s,
+        background-color 0.15s;
+}
+
+.hd-breadcrumb__trail a:hover {
+    color: var(--hd-accent);
+    background: var(--hd-accent-subtle);
+}
+
+.hd-breadcrumb__trail .bi {
+    font-size: 0.875rem;
+}
+
+.hd-breadcrumb__trail .current {
+    color: var(--hd-fg-1);
+    font-weight: 600;
+    padding: 4px 2px;
+}
+
+/* ── Usage / persona breadcrumb band (row of persona pills) ── */
+.hd-breadcrumb--usage .hd-breadcrumb__row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 14px 18px;
+}
+
+.hd-breadcrumb__lead {
+    font-size: 0.9375rem;
+    color: var(--hd-fg-2);
+    margin: 0;
+}
+
+.hd-breadcrumb__lead .brand {
+    font-family: var(--hd-font-brand);
+    color: var(--hd-fg-1);
+}
+
+.hd-breadcrumb__personas {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.hd-breadcrumb__personas a {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--hd-fg-2);
+    text-decoration: none;
+    padding: 6px 13px;
+    background: var(--hd-bg-canvas);
+    border: 1px solid var(--hd-border-1);
+    border-radius: var(--hd-radius-full);
+    transition:
+        color 0.15s,
+        border-color 0.15s,
+        background-color 0.15s,
+        transform 0.15s;
+}
+
+.hd-breadcrumb__personas a:hover {
+    color: var(--hd-accent);
+    border-color: var(--hd-accent-border);
+    background: var(--hd-accent-subtle);
+    transform: translateY(-1px);
+}
+
 a.card {
     background: var(--hd-bg-subtle);
     transition: transform 250ms;
@@ -143,6 +290,7 @@ a.card:hover {
 
 .text-hilight {
     background-color: yellow;
+    color: black !important;
 }
 
 #voxppl {