diff --git a/public/index.html b/public/index.html
index 602ad29..2aa1b61 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1088,26 +1088,37 @@
         
         <!-- Gelöschte Schaltungen Tab -->
         <div id="geloeschte" class="tab-content">
-            <h2>Gelöschte Schaltungen</h2>
-            <div class="table-container">
-                <table id="geloeschteSchaltungenTable">
-                    <thead>
-                        <tr>
-                            <th>Schaltungs-ID</th>
-                            <th>Eingabe-Datum</th>
-                            <th>Schaltungs-Datum</th>
-                            <th>Name</th>
-                            <th>Firma</th>
-                            <th>Rufnummer</th>
-                            <th>Anbieter</th>
-                            <th>Tarif</th>
-                            <th>Hardware</th>
-                            <th>Löschgrund</th>
-                            <th>Gelöscht am</th>
-                        </tr>
-                    </thead>
-                    <tbody></tbody>
-                </table>
+            <div class="flex flex-col gap-lg">
+
+                <!-- Page header -->
+                <div class="flex justify-between items-end flex-wrap gap-md">
+                    <div>
+                        <h1 class="text-headline-md text-on-background mb-xs">Gelöschte Schaltungen</h1>
+                        <p class="text-body-sm text-on-surface-variant">Archiv aller soft-gelöschten Schaltungen mit Löschgrund und Zeitstempel.</p>
+                    </div>
+                </div>
+
+                <!-- Data table -->
+                <div class="bg-surface-container-lowest border border-outline-variant rounded-lg shadow-[0_2px_4px_rgba(0,0,0,0.04)] overflow-hidden">
+                    <div class="overflow-x-auto">
+                        <table id="geloeschteSchaltungenTable" class="w-full text-left border-collapse">
+                            <thead class="bg-surface-container-high border-b-2 border-outline-variant">
+                                <tr>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase text-right w-[80px]">ID</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Daten</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Kunde / Firma</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Rufnummer</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Anbieter</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Tarif</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Hardware</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Löschgrund</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase w-[140px]">Gelöscht am</th>
+                                </tr>
+                            </thead>
+                            <tbody class="text-body-sm text-on-surface"></tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
         
diff --git a/public/script.js b/public/script.js
index ad06287..52fb18b 100644
--- a/public/script.js
+++ b/public/script.js
@@ -277,10 +277,8 @@ function showTab(tabName) {
             loadProvisionen();
         }
     } else if (tabName === 'geloeschte') {
-        // Check if data is already loaded, if not load it
-        if (!document.getElementById('geloeschteList') || !document.getElementById('geloeschteList').innerHTML.trim()) {
-            loadGeloeschteSchaltungen();
-        }
+        // Always refresh — the archive is rarely shown so this is cheap.
+        loadGeloeschteSchaltungen();
     } else if (tabName === 'admin') {
         // Check if admin data is already loaded
         if (!document.getElementById('anbieterList') || !document.getElementById('anbieterList').innerHTML.trim()) {
@@ -2037,27 +2035,43 @@ async function loadGeloeschteSchaltungen() {
     try {
         const geloeschte = await apiRequest('/api/geloeschte-schaltungen');
         const tbody = document.querySelector('#geloeschteSchaltungenTable tbody');
-        
+        if (!tbody) return;
         tbody.innerHTML = '';
-        
+
+        if (!geloeschte.length) {
+            tbody.innerHTML = '<tr><td colspan="9" class="px-md py-lg text-center text-body-sm text-on-surface-variant">Keine gelöschten Schaltungen</td></tr>';
+            return;
+        }
+
         geloeschte.forEach(s => {
-            const row = document.createElement('tr');
-            row.innerHTML = `
-                <td>${escapeHtml(s.schaltungs_id)}</td>
-                <td>${escapeHtml(formatDate(s.eingabe_datum))}</td>
-                <td>${escapeHtml(formatDate(s.schaltungs_datum))}</td>
-                <td>${escapeHtml(s.vorname)} ${escapeHtml(s.nachname)}</td>
-                <td>${escapeHtml(s.firma || '-')}</td>
-                <td>${escapeHtml(s.rufnummer)}</td>
-                <td>${escapeHtml(s.anbieter_name)}</td>
-                <td>${escapeHtml(s.tarif_name)}</td>
-                <td>${escapeHtml(s.hardware || '')}</td>
-                <td><strong style="color: #e74c3c;">${escapeHtml(s.loeschgrund)}</strong></td>
-                <td>${escapeHtml(formatDateTime(s.geloescht_am))}</td>
+            const tr = document.createElement('tr');
+            tr.className = 'border-b border-outline-variant/30 even:bg-surface-container-low/50 hover:bg-surface-variant/30 transition-colors';
+            tr.innerHTML = `
+                <td class="px-md py-xs font-label-numeric text-label-numeric text-right text-on-surface-variant">${escapeHtml(s.schaltungs_id)}</td>
+                <td class="px-md py-xs">
+                    <div class="flex flex-col gap-0.5">
+                        <span class="font-label-numeric text-[11px] text-on-surface-variant">E: ${escapeHtml(formatDate(s.eingabe_datum))}</span>
+                        <span class="font-label-numeric text-[11px] text-primary">A: ${escapeHtml(formatDate(s.schaltungs_datum))}</span>
+                    </div>
+                </td>
+                <td class="px-md py-xs">
+                    <div class="font-semibold text-on-background">${escapeHtml((s.vorname || '') + ' ' + (s.nachname || ''))}</div>
+                    <div class="text-[12px] text-on-surface-variant">${escapeHtml(s.firma || '–')}</div>
+                </td>
+                <td class="px-md py-xs font-label-numeric text-label-numeric text-on-surface-variant">${escapeHtml(s.rufnummer || '–')}</td>
+                <td class="px-md py-xs">
+                    <span class="bg-primary/10 text-primary border border-primary/20 px-2 py-0.5 rounded-full text-label-caps">${escapeHtml(s.anbieter_name || '')}</span>
+                </td>
+                <td class="px-md py-xs">${escapeHtml(s.tarif_name || '')}</td>
+                <td class="px-md py-xs text-on-surface-variant">${escapeHtml(s.hardware || '–')}</td>
+                <td class="px-md py-xs">
+                    <span class="bg-error/10 text-error border border-error/20 px-2 py-0.5 rounded-full text-label-caps">${escapeHtml(s.loeschgrund || '')}</span>
+                </td>
+                <td class="px-md py-xs font-label-numeric text-label-numeric text-on-surface-variant">${escapeHtml(formatDateTime(s.geloescht_am))}</td>
             `;
-            tbody.appendChild(row);
+            tbody.appendChild(tr);
         });
-        
+
     } catch (error) {
         console.error('Fehler beim Laden der gelöschten Schaltungen:', error);
     }