diff --git a/src/JobsMedical.Web/Pages/Jobs/Index.cshtml b/src/JobsMedical.Web/Pages/Jobs/Index.cshtml
index eab5f74..804b46a 100644
--- a/src/JobsMedical.Web/Pages/Jobs/Index.cshtml
+++ b/src/JobsMedical.Web/Pages/Jobs/Index.cshtml
@@ -18,6 +18,18 @@
 </div>
 
 <div class="container section">
+    @if (Model.Roles.Count > 0)
+    {
+        @* Internal links to the SEO landing pages (/استخدام/{نقش}) — and since this page IS the
+           landing page, every landing page cross-links to all the others. *@
+        <div class="role-links">
+            <span class="rl-label">استخدام بر اساس نقش:</span>
+            @foreach (var r in Model.Roles.Take(14))
+            {
+                <a class="rl-chip" href="/استخدام/@JobsMedical.Web.Services.SeoSlug.Of(r.Name)">@r.Name</a>
+            }
+        </div>
+    }
     <div class="layout-2">
         <aside class="card card-pad filter-card">
             <h3>فیلترها</h3>
diff --git a/src/JobsMedical.Web/Pages/Shifts/Index.cshtml b/src/JobsMedical.Web/Pages/Shifts/Index.cshtml
index ce68bfc..b2a2f11 100644
--- a/src/JobsMedical.Web/Pages/Shifts/Index.cshtml
+++ b/src/JobsMedical.Web/Pages/Shifts/Index.cshtml
@@ -18,6 +18,17 @@
 </div>
 
 <div class="container section">
+    @if (Model.Roles.Count > 0)
+    {
+        @* Internal links to the SEO landing pages (/شیفت/{نقش}); this page is itself such a page. *@
+        <div class="role-links">
+            <span class="rl-label">شیفت بر اساس نقش:</span>
+            @foreach (var r in Model.Roles.Take(14))
+            {
+                <a class="rl-chip" href="/شیفت/@JobsMedical.Web.Services.SeoSlug.Of(r.Name)">@r.Name</a>
+            }
+        </div>
+    }
     <div class="layout-2">
         <aside class="card card-pad filter-card">
             <h3>فیلترها</h3>
diff --git a/src/JobsMedical.Web/wwwroot/css/site.css b/src/JobsMedical.Web/wwwroot/css/site.css
index 8b311ac..1c0fe7d 100644
--- a/src/JobsMedical.Web/wwwroot/css/site.css
+++ b/src/JobsMedical.Web/wwwroot/css/site.css
@@ -320,6 +320,12 @@ mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 3px;
 .hero-chips .hc-label { color: rgba(255,255,255,.85); }
 .hero-chips a { background: rgba(255,255,255,.16); color: #fff; padding: 5px 13px; border-radius: 999px; font-weight: 600; transition: background .15s; }
 .hero-chips a:hover { background: rgba(255,255,255,.3); }
+/* Role quick-links on the list pages — internal links to the SEO landing pages. */
+.role-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; }
+.role-links .rl-label { color: var(--muted); font-size: 13px; font-weight: 700; }
+.role-links .rl-chip { background: var(--surface); border: 1px solid var(--line); color: var(--ink);
+  padding: 5px 12px; border-radius: 999px; font-size: 13px; transition: all .15s; }
+.role-links .rl-chip:hover { border-color: var(--primary); color: var(--primary); }
 @media (max-width: 560px) {
   /* Smaller, tighter typography on phones */
   .hero { padding: 28px 0 32px; }