diff --git a/Asset/css/qualkard.css b/Asset/css/qualkard.css
new file mode 100644
index 0000000..c68f315
--- /dev/null
+++ b/Asset/css/qualkard.css
@@ -0,0 +1,18 @@
+/* QualKard mastery badge (under the card title on the board). */
+.qk-line {
+    margin-top: 2px;
+}
+
+.qk-badge {
+    display: inline-block;
+    padding: 0 6px;
+    border-radius: 3px;
+    color: #fff;
+    font-size: 0.85em;
+    font-weight: bold;
+}
+
+.qk-new  { background: #e6b800; } /* unread */
+.qk-low  { background: #c0392b; } /* < 50% */
+.qk-mid  { background: #27ae60; } /* 50-89% */
+.qk-high { background: #2980b9; } /* >= 90% */
diff --git a/Template/board/badge.php b/Template/board/badge.php
new file mode 100644
index 0000000..d0dd136
--- /dev/null
+++ b/Template/board/badge.php
@@ -0,0 +1,12 @@
+<?php
+// Mastery badge under the card title on a QualKard board. Server-rendered (survives board refresh).
+// Yellow "new" for an unread card; otherwise a percent of 5, red (<50) / green (<90) / blue (>=90).
+if (empty($task['project_id']) || ! $this->QualKardHelper->isEnabled($task['project_id'])) {
+    return;
+}
+
+$b = $this->QualKardHelper->cardBadge($task['id']);
+?>
+<div class="qk-line">
+    <span class="qk-badge <?= $b['class'] ?>"><?= $this->text->e($b['label']) ?></span>
+</div>