diff --git a/app/app/static/app.js b/app/app/static/app.js
index 8ef6d9c..4f3c5ee 100644
--- a/app/app/static/app.js
+++ b/app/app/static/app.js
@@ -63,6 +63,10 @@ function metric(label, value) {
   return `<div class="metric"><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></div>`;
 }
 
+function metricHtml(label, valueHtml) {
+  return `<div class="metric"><span>${escapeHtml(label)}</span><strong>${valueHtml}</strong></div>`;
+}
+
 function makeRecordKey(row, index) {
   return row.record_id || JSON.stringify([index, row.date, row.time, row.student, row.duration, row.teacher, row.subject]);
 }
@@ -257,7 +261,9 @@ function statusClass(status) {
 
 function renderPayments(payments) {
   if (!payments.length) return "暂无缴费记录";
-  return payments.map((item) => `${item.date}：${fmtHours(item.hours)} 小时`).join("，");
+  return payments
+    .map((item) => `<span class="payment-line">${escapeHtml(item.date)}：${fmtHours(item.hours)} 小时</span>`)
+    .join("");
 }
 
 function renderInlineAccount(account) {
@@ -272,7 +278,7 @@ function renderInlineAccount(account) {
     <div class="inline-account-grid">
       ${metric("剩余课时", fmtHours(account.remaining))}
       ${metric("缴费次数", account.payments_count)}
-      ${metric("缴费记录", renderPayments(account.payments))}
+      ${metricHtml("缴费记录", renderPayments(account.payments))}
       ${metric("备注", account.note || "无")}
     </div>`;
 }
diff --git a/app/app/static/styles.css b/app/app/static/styles.css
index 8f2ab82..13d0218 100644
--- a/app/app/static/styles.css
+++ b/app/app/static/styles.css
@@ -293,6 +293,10 @@ select:focus {
   line-height: 1.2;
 }
 
+.payment-line {
+  display: block;
+}
+
 .inline-account {
   padding: 14px 16px;
   border-bottom: 1px solid var(--line);