diff --git a/app/static/index.html b/app/static/index.html
index 81cdd5c..32d3a62 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -71,7 +71,7 @@
                     <span class="trainer-text">Тренажёр SRS</span>
                     <span id="srs-badge" class="srs-due-badge">0</span>
                 </button>
-                <button id="stats-open-btn" class="btn btn-outline btn-sm stat-open-btn" title="Активность (GitHub Heatmap) и аналитика">
+                <button id="stats-open-btn" class="btn btn-outline btn-sm stat-open-btn" title="Календарь активности и статистика">
                     <span>📊 Статистика</span>
                 </button>
                 <button id="export-open-btn" class="btn btn-outline btn-sm" title="Экспорт словаря">
@@ -569,10 +569,10 @@
                     </div>
                 </div>
 
-                <!-- GitHub-Style Contribution Heatmap -->
+                <!-- Contribution Activity Heatmap -->
                 <div class="heatmap-section">
                     <div class="heatmap-header">
-                        <h4>🟩 Календарь активности (GitHub-style Heatmap)</h4>
+                        <h4>🟩 Календарь активности</h4>
                         <div class="heatmap-legend">
                             <span>Меньше</span>
                             <span class="legend-cell lvl-0" title="0 повторений"></span>
diff --git a/app/static/js/app.js b/app/static/js/app.js
index 3efd012..f9c2ed0 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -699,33 +699,34 @@ document.addEventListener('DOMContentLoaded', () => {
 
         allCards.forEach(c => {
             const cardEl = document.createElement('div');
-            cardEl.className = `vocab-card-item ${isBatchMode && selectedIds.has(c.id) ? 'selected' : ''}`;
+            cardEl.className = `vocab-card ${isBatchMode && selectedIds.has(c.id) ? 'is-selected' : ''}`;
 
             // SRS state indicator dot
             const srsStateClass = c.srs_state === 'mastered' ? 'dot-mastered' : (c.srs_state === 'review' ? 'dot-review' : (c.srs_state === 'learning' ? 'dot-learning' : 'dot-new'));
 
             cardEl.innerHTML = `
-                <div class="card-item-left">
-                    ${isBatchMode ? `<input type="checkbox" class="batch-card-check" data-id="${c.id}" ${selectedIds.has(c.id) ? 'checked' : ''}>` : ''}
-                    <span class="dot ${srsStateClass}" title="SRS статус: ${c.srs_state || 'new'}"></span>
-                    <div class="card-item-content">
-                        <div class="card-item-header">
-                            <span class="card-term">${escapeHtml(c.term)}</span>
-                            ${c.phonetic ? `<span class="card-phonetic">${escapeHtml(c.phonetic)}</span>` : ''}
-                            ${c.part_of_speech ? `<span class="badge-pos-xs">${escapeHtml(c.part_of_speech)}</span>` : ''}
-                            ${c.audio_url ? `<button class="icon-btn-xs audio-inline-btn" data-audio="${encodeURIComponent(c.audio_url)}" title="Озвучить">🔊</button>` : ''}
-                        </div>
-                        <div class="card-translation">${escapeHtml(c.translation)}</div>
-                        ${c.context_sentence ? `<div class="card-context">“${escapeHtml(c.context_sentence)}”</div>` : ''}
-                        <div class="card-meta-row">
-                            <span class="card-col-badge">📁 ${escapeHtml(c.collection || 'General')}</span>
-                            ${c.tags ? c.tags.split(',').map(t => `<span class="card-tag">#${escapeHtml(t.trim())}</span>`).join(' ') : ''}
-                        </div>
+                <div class="card-top">
+                    <div class="card-term-group">
+                        ${isBatchMode ? `<input type="checkbox" class="card-select-checkbox batch-card-check" data-id="${c.id}" ${selectedIds.has(c.id) ? 'checked' : ''}>` : ''}
+                        <span class="dot ${srsStateClass}" title="SRS статус: ${c.srs_state || 'new'}"></span>
+                        <span class="card-term">${escapeHtml(c.term)}</span>
+                        ${c.phonetic ? `<span class="card-phonetic">${escapeHtml(c.phonetic)}</span>` : ''}
+                        ${c.part_of_speech ? `<span class="card-pos">${escapeHtml(c.part_of_speech)}</span>` : ''}
+                        ${c.audio_url ? `<button class="icon-btn audio-btn audio-inline-btn" data-audio="${encodeURIComponent(c.audio_url)}" title="Озвучить">🔊</button>` : ''}
+                    </div>
+                    <div class="card-actions">
+                        <button class="icon-btn edit-card-btn" data-id="${c.id}" title="Редактировать">✏️</button>
+                        <button class="icon-btn delete-card-btn" data-id="${c.id}" title="Удалить">🗑️</button>
                     </div>
                 </div>
-                <div class="card-item-actions">
-                    <button class="btn btn-xs btn-outline edit-card-btn" data-id="${c.id}">✏️</button>
-                    <button class="btn btn-xs btn-danger delete-card-btn" data-id="${c.id}">🗑️</button>
+                <div class="card-translation">${escapeHtml(c.translation)}</div>
+                ${c.context_sentence ? `<div class="card-context">“${escapeHtml(c.context_sentence)}”</div>` : ''}
+                <div class="card-bottom">
+                    <div class="card-tags">
+                        <span class="card-tag">📁 ${escapeHtml(c.collection || 'General')}</span>
+                        ${c.tags ? c.tags.split(',').map(t => `<span class="card-tag">#${escapeHtml(t.trim())}</span>`).join(' ') : ''}
+                    </div>
+                    ${c.notes ? `<div class="card-notes">💡 ${escapeHtml(c.notes)}</div>` : ''}
                 </div>
             `;