diff --git a/backend/templates/directeur.html b/backend/templates/directeur.html
index 9705e34..d6478d7 100644
--- a/backend/templates/directeur.html
+++ b/backend/templates/directeur.html
@@ -30,6 +30,16 @@
         .stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); margin-top: 0.25rem; }
         .section { background: white; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
         .section h2 { font-size: 1.1rem; color: var(--gray-700); margin-bottom: 1rem; }
+
+        .status-selector { width: 22px; height: 22px; border-radius: 5px; border: 2px solid var(--gray-300); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: bold; flex-shrink: 0; }
+        .status-selector.status-groen  { background: var(--status-groen);  border-color: var(--status-groen);  color: white; }
+        .status-selector.status-groen::after  { content: '\u2713'; }
+        .status-selector.status-oranje { background: var(--status-oranje); border-color: var(--status-oranje); color: white; }
+        .status-selector.status-oranje::after { content: '~'; }
+        .status-selector.status-roze   { background: var(--status-roze);   border-color: var(--status-roze);   color: white; }
+        .status-selector.status-roze::after   { content: '!'; }
+        .status-selector.status-none   { background: white; border-color: var(--gray-300); color: var(--gray-400); }
+        .status-selector.status-none::after   { content: '\u25cb'; }
         .filters-bar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
         .filter-group { display: flex; flex-direction: column; gap: 0.25rem; }
         .filter-group label { font-size: 0.75rem; font-weight: 500; color: var(--gray-500); }
@@ -365,7 +375,35 @@
             </table>
         </div>
     </div>
-</div>
+    </div><!-- /panel-doelen -->
+
+    <!-- Tab: Klasoverzicht -->
+    <div id="panel-klassen" class="section" style="display:none;">
+        <div id="klasOverzichtContent">
+            <p style="color:var(--gray-400);font-style:italic;">Laden...</p>
+        </div>
+    </div>
+
+    <!-- Tab: Klasvergelijking -->
+    <div id="panel-vergelijk" class="section" style="display:none;">
+        <div style="display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
+            <div class="filter-group">
+                <label>Klas A</label>
+                <select id="vergelijkKlasA"><option value="">-- Kies klas --</option></select>
+            </div>
+            <div class="filter-group">
+                <label>Klas B</label>
+                <select id="vergelijkKlasB"><option value="">-- Kies klas --</option></select>
+            </div>
+            <div class="filter-group">
+                <label>Vak</label>
+                <select id="vergelijkVak"><option value="">Alle vakken</option></select>
+            </div>
+        </div>
+        <div id="vergelijkContent">
+            <p style="color:var(--gray-400);font-style:italic;">Selecteer twee klassen om te vergelijken.</p>
+        </div>
+    </div>
 
 <!-- Modal: leerkracht toevoegen -->
 <div class="modal-overlay" id="addTeacherModal">