diff --git a/backend/templates/directeur.html b/backend/templates/directeur.html
index a1bc5b8..6fdbee1 100644
--- a/backend/templates/directeur.html
+++ b/backend/templates/directeur.html
@@ -65,16 +65,25 @@
         .lft-cb:has(input:checked) { background: var(--primary); border-color: var(--primary); color: white; }
         .lft-cb input { display: none; }
         .table-wrap { overflow-x: auto; }
-        table { width: 100%; border-collapse: collapse; font-size: .83rem; }
-        thead { background: var(--gray-50); position: sticky; top: 0; z-index: 5; }
-        th { padding: .65rem .6rem; text-align: center; font-weight: 600; color: var(--gray-600); border-bottom: 2px solid var(--gray-200); white-space: nowrap; }
-        th.goal-col { text-align: left; min-width: 240px; }
-        th.klas-col { min-width: 75px; font-size: .75rem; }
-        td { padding: .45rem .6rem; border-bottom: 1px solid var(--gray-100); text-align: center; }
-        td.goal-cell { text-align: left; }
-        tr:hover { background: var(--gray-50); }
+        table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .83rem; }
+        thead { position: sticky; top: 0; z-index: 10; }
+        th { padding: .6rem .5rem; text-align: center; font-weight: 600; color: var(--gray-600);
+             border-bottom: 2px solid var(--gray-200); white-space: nowrap;
+             background: var(--gray-50); }
+        th.goal-col { text-align: left; min-width: 220px; max-width: 280px;
+                      position: sticky; left: 0; z-index: 11;
+                      background: var(--gray-50); box-shadow: 2px 0 4px rgba(0,0,0,.06); }
+        th.klas-col { min-width: 64px; max-width: 90px; font-size: .72rem;
+                      overflow: hidden; text-overflow: ellipsis; }
+        th.sum-col  { min-width: 56px; }
+        td { padding: .4rem .5rem; border-bottom: 1px solid var(--gray-100); text-align: center; }
+        td.goal-cell { text-align: left; position: sticky; left: 0; z-index: 1;
+                       background: white; box-shadow: 2px 0 4px rgba(0,0,0,.06); }
+        tr:hover td { background: var(--gray-50); }
+        tr:hover td.goal-cell { background: var(--gray-50); }
         .goal-nr { font-weight: 600; font-size: .82rem; }
-        .goal-desc { font-size: .77rem; color: var(--gray-500); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .goal-desc { font-size: .77rem; color: var(--gray-500); max-width: 220px;
+                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
         .lft-badges { display: flex; flex-wrap: wrap; gap: .2rem; }
         .lft-badge { font-size: .68rem; padding: .1rem .3rem; background: var(--gray-200); border-radius: 3px; color: var(--gray-600); }
         .si { width: 26px; height: 26px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; }
@@ -119,6 +128,9 @@
             th,thead { background:#1e293b!important;color:#94a3b8!important;border-color:#334155!important; }
             td { border-color:#1e293b!important; }
             tr:hover { background:#263548!important; }
+            td.goal-cell { background:#0f172a!important; }
+            tr:hover td.goal-cell { background:#263548!important; }
+            th.goal-col { background:#1e293b!important;box-shadow:2px 0 4px rgba(0,0,0,.3)!important; }
             select,input { background:#0f172a!important;color:#e2e8f0!important;border-color:#334155!important; }
             .vak-card,.klas-chip { background:#162032!important;border-color:#334155!important; }
             .lft-badge { background:#334155!important;color:#94a3b8!important; }
@@ -320,7 +332,7 @@ let currentUser  = null;
 // ── Init ───────────────────────────────────────────────────────────────────────
 document.addEventListener('DOMContentLoaded', async () => {
     // Leeftijd checkboxes dynamisch aanmaken (vermijdt Jinja in inline handlers)
-    const ages = ['2,5-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12'];
+    const ages = ['3-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12'];
     const cbContainer = document.getElementById('leeftijdCbs');
     ages.forEach(age => {
         const lbl = document.createElement('label');
@@ -642,9 +654,12 @@ function applyFilters() {
 function renderTable(rows, klassen) {
     const thead = document.getElementById('tblHead');
     const tbody = document.getElementById('tblBody');
-    let hdr = '<tr><th class="goal-col">Doel</th><th>Leeftijden</th>';
-    klassen.forEach(k => hdr += `<th class="klas-col">${k.name}</th>`);
-    hdr += '<th>Samenvatting</th></tr>';
+    let hdr = '<tr><th class="goal-col">Doel</th><th style="min-width:72px;">Leeftijden</th>';
+    klassen.forEach(k => {
+        const label = k.name.length > 6 ? k.name.substring(0,6) + '…' : k.name;
+        hdr += `<th class="klas-col" title="${k.name}">${label}</th>`;
+    });
+    hdr += '<th class="sum-col">∑</th></tr>';
     thead.innerHTML = hdr;
     if (!rows.length) {
         tbody.innerHTML = `<tr><td colspan="${klassen.length+3}" class="empty">Geen doelen gevonden met huidige filters</td></tr>`;
@@ -703,7 +718,10 @@ function renderVergelijk() {
     const goals  = allGoals[vakId] || [];
     if (!goals.length) { el.innerHTML = '<div class="empty">Vak nog niet geladen of geen doelen</div>'; return; }
     let html = `<div class="table-wrap"><table>
-        <thead><tr><th class="goal-col">Doel</th><th class="klas-col">${klasA?.name||'A'}</th><th class="klas-col">${klasB?.name||'B'}</th></tr></thead><tbody>`;
+        <thead><tr><th class="goal-col">Doel</th>
+        <th class="klas-col" title="${klasA?.name||'A'}">${(klasA?.name||'A').substring(0,8)}</th>
+        <th class="klas-col" title="${klasB?.name||'B'}">${(klasB?.name||'B').substring(0,8)}</th>
+        </tr></thead><tbody>`;
     goals.forEach(goal => {
         const sA = goalsA[goal.id]||'', sB = goalsB[goal.id]||'';
         const symA = sA==='groen'?'✓':sA==='oranje'?'~':sA==='roze'?'!':'○';
diff --git a/backend/templates/leerkracht.html b/backend/templates/leerkracht.html
index d283cdb..4f6c6e3 100644
--- a/backend/templates/leerkracht.html
+++ b/backend/templates/leerkracht.html
@@ -267,7 +267,7 @@
             <div class="filter-group" style="grid-column:span 2;">
                 <label>Leeftijd</label>
                 <div class="leeftijd-checkboxes">
-                    {% for age in ['2,5-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12'] %}
+                    {% for age in ['3-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12'] %}
                     <label class="leeftijd-checkbox"><input type="checkbox" value="{{ age }}"><span>{{ age }}</span></label>
                     {% endfor %}
                 </div>