diff --git a/core/templates/core/payroll_dashboard.html b/core/templates/core/payroll_dashboard.html
index 1240d9c..3cb797e 100644
--- a/core/templates/core/payroll_dashboard.html
+++ b/core/templates/core/payroll_dashboard.html
@@ -513,10 +513,14 @@
                             <td class="ps-4 align-middle"><a href="#" class="worker-lookup-link fw-bold"
                                    data-worker-id="{{ loan.worker.id }}">{{ loan.worker.name }}</a></td>
                             <td class="align-middle">
+                                {# Loan vs Advance: same semantic palette as the Adjustments tab #}
+                                {# Loan-type rows wear amber (.loan-flag-badge), advances wear blue #}
+                                {# (.advance-flag-badge). Transactional state ("Active" / "Paid Off") #}
+                                {# is separate — see the next cell — and stays on Bootstrap colours. #}
                                 {% if loan.loan_type == 'advance' %}
-                                <span class="badge bg-info text-dark">Advance</span>
+                                <span class="badge advance-flag-badge">Advance</span>
                                 {% else %}
-                                <span class="badge bg-primary">Loan</span>
+                                <span class="badge loan-flag-badge">Loan</span>
                                 {% endif %}
                             </td>
                             <td class="align-middle">R {{ loan.principal_amount|floatformat:2 }}</td>
@@ -2556,8 +2560,12 @@ document.addEventListener('DOMContentLoaded', function() {
                         var topRow = document.createElement('div');
                         topRow.className = 'd-flex justify-content-between align-items-center mb-1';
 
+                        // Loan-type badge in the Preview-payslip / Worker-lookup modal's
+                        // "Active Loans & Advances" card — mirrors the server-rendered
+                        // /payroll/?status=loans colours so the same loan looks the same
+                        // everywhere. See custom.css .loan-flag-badge / .advance-flag-badge.
                         var badge = document.createElement('span');
-                        badge.className = 'badge ' + (loan.type === 'advance' ? 'bg-info text-dark' : 'bg-primary');
+                        badge.className = 'badge ' + (loan.type === 'advance' ? 'advance-flag-badge' : 'loan-flag-badge');
                         badge.textContent = loan.type_label;
                         topRow.appendChild(badge);
 
diff --git a/docs/design-tokens.md b/docs/design-tokens.md
index 14d4177..93508f2 100644
--- a/docs/design-tokens.md
+++ b/docs/design-tokens.md
@@ -40,9 +40,9 @@ Token definitions live in `static/css/custom.css`:
 | `--badge-bonus-*` (green) | Adjustments tab type badge; By-Type group-header left-border accent |
 | `--badge-overtime-*` (mauve) | Adjustments tab type badge; By-Type group-header accent |
 | `--badge-deduction-*` (purple) | Adjustments tab type badge; By-Type group-header accent |
-| `--badge-loan-*` (amber/yellow) | Adjustments tab type badge; By-Type group-header accent; Pending tab "Loan" worker flag (`.loan-flag-badge`) |
+| `--badge-loan-*` (amber/yellow) | Adjustments tab type badge; By-Type group-header accent; Pending tab "Loan" worker flag (`.loan-flag-badge`); Loans-and-Advances tab row badge for Loan-type rows (`.loan-flag-badge`); Preview-payslip modal's Active Loans card |
 | `--badge-loan-rep-*` (deeper amber, +15% saturation) | Adjustments tab type badge for Loan Repayment; By-Type group-header accent |
-| `--badge-advance-*` (blue) | Adjustments tab type badge; By-Type group-header accent |
+| `--badge-advance-*` (blue) | Adjustments tab type badge; By-Type group-header accent; Loans-and-Advances tab row badge for Advance-type rows (`.advance-flag-badge`); Preview-payslip modal's Active Loans card |
 | `--badge-advance-rep-*` (deeper blue, +15% saturation) | Adjustments tab type badge for Advance Repayment; By-Type group-header accent |
 
 ## Transactional-state colours (Bootstrap — unchanged)
diff --git a/static/css/custom.css b/static/css/custom.css
index 8b6af55..cd09f9c 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1941,14 +1941,18 @@ body, .card, .modal-content, .form-control, .form-select,
 .badge-type-advance-repayment { background: var(--badge-advance-rep-bg); color: var(--badge-advance-rep-fg); }
 
 /* --- Status flags that borrow a type's colour for semantic consistency.
-       "Has an active loan or advance" -> Loan-type amber/yellow, so the
-       worker flag on the Pending tab visually matches the Adjustments
-       type badge for Loan. Keeps the Loan colour family unified across
-       the app regardless of which tab you're looking at. --- */
+       The Pending tab's "Loan" worker flag (Has-an-active-loan-or-advance),
+       and the Loans-and-Advances tab's per-row type badge (Loan vs Advance),
+       should all look like the Adjustments tab's Loan + Advance type badges.
+       Same concept, same colour, every tab. --- */
 .loan-flag-badge {
     background: var(--badge-loan-bg);
     color: var(--badge-loan-fg);
 }
+.advance-flag-badge {
+    background: var(--badge-advance-bg);
+    color: var(--badge-advance-fg);
+}
 
 /* --- Sticky filter bar (keeps filters visible as the table scrolls) --- */
 .adjustments-filter-bar {