diff --git a/client/src/components/Screen.css b/client/src/components/Screen.css
index b9a9f20..f37f766 100644
--- a/client/src/components/Screen.css
+++ b/client/src/components/Screen.css
@@ -387,14 +387,22 @@
 
 .chart-stats b { color: var(--text-primary); font-weight: 620; }
 
-/* Badges / tables ---------------------------------------------------------- */
-.badge-grid {
+/* Awards / tables ---------------------------------------------------------- */
+/* Named .award, not .badge: Framework7 ships its own bare `.badge` for the
+   little grey notification dot, its stylesheet lands last in the bundle, and
+   it was flattening every one of these cards into a 20px pill. */
+.award-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 0.6rem;
 }
 
-.badge {
+.award {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 0.35rem;
+  min-height: 4.4rem;
   background: var(--surface-1);
   border: 1px solid var(--border);
   border-left: 3px solid var(--series-4);
@@ -402,9 +410,32 @@
   padding: 0.65rem 0.8rem;
 }
 
-.badge-name { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
-.badge-meta { margin-top: 0.28rem; font-size: 0.72rem; color: var(--text-muted); display: flex; gap: 0.45rem; }
-.badge-count { color: var(--accent); font-weight: 600; }
+.award-name {
+  font-size: 0.84rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.35;
+}
+
+.award-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.45rem;
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  /* Dates line up across the grid instead of wandering with the digits. */
+  font-variant-numeric: tabular-nums;
+}
+
+.award-count {
+  flex: none;
+  padding: 0.05rem 0.36rem;
+  border-radius: 5px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 650;
+}
 
 .table-wrap {
   border: 1px solid var(--border);
diff --git a/client/src/pages/ExercisePage.tsx b/client/src/pages/ExercisePage.tsx
index 30c5ed5..6b66f81 100644
--- a/client/src/pages/ExercisePage.tsx
+++ b/client/src/pages/ExercisePage.tsx
@@ -279,14 +279,14 @@ function ExercisePage() {
                 {year === '未知' ? '未知年份' : `${year} 年`}
                 <span className="sec-count">{list.length} 个</span>
               </h3>
-              <div className="badge-grid">
+              <div className="award-grid">
                 {list.map((b) => (
-                  <div className="badge" key={b.id}>
-                    <div className="badge-name">{b.name || b.badge_key}</div>
-                    <div className="badge-meta">
-                      {day(b.earned_date)}
+                  <div className="award" key={b.id}>
+                    <div className="award-name">{b.name || b.badge_key}</div>
+                    <div className="award-meta">
+                      <span>{day(b.earned_date)}</span>
                       {b.earned_count && b.earned_count > 1 && (
-                        <span className="badge-count">×{b.earned_count}</span>
+                        <span className="award-count">×{b.earned_count}</span>
                       )}
                     </div>
                   </div>
diff --git a/client/src/pages/Settings.css b/client/src/pages/Settings.css
index f47442e..2f64dfe 100644
--- a/client/src/pages/Settings.css
+++ b/client/src/pages/Settings.css
@@ -68,29 +68,6 @@
   font-size: 0.82rem;
 }
 
-/* State is spelled out in the badge text; colour only reinforces it. */
-.badge {
-  display: inline-block;
-  padding: 0.15rem 0.55rem;
-  border-radius: 999px;
-  font-size: 0.74rem;
-  font-weight: 650;
-  white-space: nowrap;
-  border: 1px solid transparent;
-}
-
-.badge.ok {
-  background: color-mix(in srgb, var(--status-good) 12%, transparent);
-  color: var(--status-good);
-  border-color: color-mix(in srgb, var(--status-good) 30%, transparent);
-}
-
-.badge.off {
-  background: var(--surface-0);
-  color: var(--text-muted);
-  border-color: var(--border);
-}
-
 .badge-default {
   margin-left: 0.4rem;
   padding: 0.05rem 0.4rem;