diff --git a/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/instellingen_back_up_definitief/code.html b/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/instellingen_back_up_definitief/code.html
deleted file mode 100644
index a4ca7e58..00000000
--- a/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/instellingen_back_up_definitief/code.html
+++ /dev/null
@@ -1,392 +0,0 @@
-<!DOCTYPE html>
-
-<html class="dark" lang="nl"><head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
-<style>
-        .material-symbols-outlined {
-            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-        }
-        .glass-panel {
-            background: rgba(15, 23, 42, 0.6);
-            backdrop-filter: blur(12px);
-            border: 1px solid rgba(30, 41, 59, 0.5);
-        }
-        .glass-panel:hover {
-            background: rgba(45, 52, 73, 0.5);
-            transform: translateY(-2px);
-        }
-        .active-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background-color: #4edea3;
-            box-shadow: 0 0 8px #4edea3;
-        }
-        .pulse-animation {
-            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-        }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: .5; }
-        }
-        body {
-            background-color: #0b1326;
-            color: #dbe2fd;
-        }
-    </style>
-<script id="tailwind-config">
-        tailwind.config = {
-            darkMode: "class",
-            theme: {
-                extend: {
-                    "colors": {
-                        "on-error-container": "#ffdad6",
-                        "surface-glass": "rgba(15, 23, 42, 0.6)",
-                        "on-surface": "#dbe2fd",
-                        "inverse-surface": "#dbe2fd",
-                        "background": "#0b1326",
-                        "surface-dim": "#0b1326",
-                        "on-primary": "#292b5e",
-                        "surface": "#0b1326",
-                        "on-tertiary": "#4f2500",
-                        "on-tertiary-fixed-variant": "#703700",
-                        "surface-container-highest": "#2d3449",
-                        "on-secondary": "#003824",
-                        "on-primary-fixed": "#131449",
-                        "tertiary": "#ffb783",
-                        "on-error": "#690005",
-                        "inverse-primary": "#585990",
-                        "primary-fixed": "#e1e0ff",
-                        "outline": "#908fa0",
-                        "secondary": "#4edea3",
-                        "secondary-fixed-dim": "#4edea3",
-                        "error": "#ffb4ab",
-                        "inverse-on-surface": "#283044",
-                        "outline-variant": "rgba(30, 41, 59, 0.5)",
-                        "primary-fixed-dim": "#c0c1ff",
-                        "error-container": "#93000a",
-                        "tertiary-container": "#d97721",
-                        "status-degraded": "#ffb783",
-                        "secondary-fixed": "#6ffbbe",
-                        "on-secondary-fixed-variant": "#005236",
-                        "surface-container-lowest": "#060d20",
-                        "primary-container": "#8a8cc6",
-                        "tertiary-fixed": "#ffdcc5",
-                        "surface-container": "#171f33",
-                        "on-primary-fixed-variant": "#404176",
-                        "on-secondary-fixed": "#002114",
-                        "on-secondary-container": "#003e28",
-                        "surface-variant": "#2d3449",
-                        "on-surface-variant": "#c7c4d7",
-                        "surface-bright": "#31394e",
-                        "primary": "#c0c1ff",
-                        "surface-container-high": "#222a3e",
-                        "on-background": "#dbe2fd",
-                        "surface-container-low": "#131b2e",
-                        "tertiary-fixed-dim": "#ffb783",
-                        "on-tertiary-container": "#452000",
-                        "secondary-container": "#00b47d",
-                        "status-online": "#4edea3",
-                        "on-primary-container": "#222457",
-                        "status-offline": "#ffb4ab",
-                        "surface-tint": "#c0c1ff",
-                        "on-tertiary-fixed": "#301400"
-                    },
-                    "borderRadius": {
-                        "DEFAULT": "0.25rem",
-                        "lg": "0.5rem",
-                        "xl": "0.75rem",
-                        "full": "9999px"
-                    },
-                    "spacing": {
-                        "stack-lg": "48px",
-                        "margin-mobile": "16px",
-                        "base": "8px",
-                        "stack-sm": "12px",
-                        "stack-md": "24px",
-                        "container-max": "1440px",
-                        "margin-desktop": "40px",
-                        "gutter": "24px"
-                    },
-                    "fontFamily": {
-                        "headline-md": ["Geist"],
-                        "body-lg": ["Inter"],
-                        "display-lg": ["Geist"],
-                        "label-md": ["Geist"],
-                        "headline-lg": ["Geist"],
-                        "body-md": ["Inter"],
-                        "headline-lg-mobile": ["Geist"],
-                        "code-sm": ["Geist"]
-                    },
-                    "fontSize": {
-                        "headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "500"}],
-                        "body-lg": ["18px", {"lineHeight": "28px", "fontWeight": "400"}],
-                        "display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
-                        "label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.02em", "fontWeight": "500"}],
-                        "headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
-                        "body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
-                        "headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
-                        "code-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}]
-                    }
-                },
-            },
-        }
-    </script>
-</head>
-<body class="font-body-md text-on-surface">
-<!-- Top Navigation Bar -->
-<header class="fixed top-0 w-full z-50 flex justify-between items-center h-16 px-gutter backdrop-blur-xl border-b border-outline-variant/20 bg-surface-glass shadow-sm">
-<div class="flex items-center gap-base">
-<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">terminal</span>
-<h1 class="font-headline-md text-headline-md font-bold text-primary">DockDeck</h1>
-</div>
-<div class="hidden md:flex flex-1 max-w-2xl mx-12">
-<div class="relative w-full">
-<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
-<input class="w-full h-10 pl-12 pr-4 rounded-xl bg-surface-container-low border-none focus:ring-2 focus:ring-primary-container text-body-md transition-all" placeholder="Zoek in instellingen..." type="text"/>
-</div>
-</div>
-<div class="flex items-center gap-4">
-<button class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors active:scale-95 duration-150">
-<span class="material-symbols-outlined text-on-surface-variant">settings</span>
-</button>
-<button class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors active:scale-95 duration-150">
-<span class="material-symbols-outlined text-on-surface-variant">account_circle</span>
-</button>
-</div>
-</header>
-<!-- Side Navigation Bar -->
-<aside class="fixed left-0 top-16 h-[calc(100vh-64px)] w-64 bg-surface-container-low border-r border-outline-variant/10 hidden xl:flex flex-col p-base gap-stack-sm z-40">
-<div class="flex items-center gap-3 px-4 py-6">
-<div class="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center">
-<span class="material-symbols-outlined text-on-secondary-container" style="font-variation-settings: 'FILL' 1;">person</span>
-</div>
-<div>
-<p class="font-label-md text-label-md text-primary font-bold">Admin</p>
-<p class="text-[12px] text-on-surface-variant">Unraid Server</p>
-</div>
-</div>
-<nav class="flex-1 space-y-1">
-<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200" href="#">
-<span class="material-symbols-outlined">dashboard</span>
-<span class="font-label-md text-label-md">Dashboard</span>
-</a>
-<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200" href="#">
-<span class="material-symbols-outlined">layers</span>
-<span class="font-label-md text-label-md">Containers</span>
-</a>
-<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200" href="#">
-<span class="material-symbols-outlined">image</span>
-<span class="font-label-md text-label-md">Images</span>
-</a>
-<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200" href="#">
-<span class="material-symbols-outlined">lan</span>
-<span class="font-label-md text-label-md">Network</span>
-</a>
-<a class="flex items-center gap-3 px-4 py-3 rounded-lg bg-secondary-container text-on-secondary-container font-bold transition-all" href="#">
-<span class="material-symbols-outlined">settings</span>
-<span class="font-label-md text-label-md">Settings</span>
-</a>
-</nav>
-<div class="pt-4 border-t border-outline-variant/10 space-y-1">
-<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all" href="#">
-<span class="material-symbols-outlined">description</span>
-<span class="font-label-md text-label-md">Docs</span>
-</a>
-<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-error hover:bg-error-container/20 transition-all" href="#">
-<span class="material-symbols-outlined">logout</span>
-<span class="font-label-md text-label-md">Logout</span>
-</a>
-</div>
-</aside>
-<!-- Main Content Canvas -->
-<main class="xl:ml-64 mt-16 p-6 md:p-10 min-h-screen">
-<div class="max-w-container-max mx-auto space-y-stack-lg">
-<!-- Page Header -->
-<section class="space-y-2">
-<h2 class="font-headline-lg text-headline-lg text-primary">Back-up & Herstel</h2>
-<p class="font-body-md text-on-surface-variant max-w-3xl">Beheer de configuratie van uw DockDeck omgeving. Exporteer uw huidige setup naar een lokaal bestand of herstel een eerdere sessie.</p>
-</section>
-<!-- Warning Callout -->
-<div class="glass-panel rounded-xl p-4 flex gap-4 border-l-4 border-tertiary">
-<span class="material-symbols-outlined text-tertiary">warning</span>
-<div>
-<h4 class="font-label-md text-label-md text-tertiary">Belangrijke informatie over secrets</h4>
-<p class="text-sm text-on-surface-variant mt-1">Om veiligheidsredenen worden gevoelige gegevens zoals API-sleutels, wachtwoorden en database-credentials <strong>niet</strong> meegeëxporteerd. Deze moeten na een herstel handmatig opnieuw worden ingevoerd.</p>
-</div>
-</div>
-<!-- Bento Grid Layout -->
-<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
-<!-- Export Card -->
-<div class="glass-panel rounded-2xl p-8 flex flex-col justify-between min-h-[320px] transition-all group">
-<div>
-<div class="w-12 h-12 rounded-xl bg-primary-container/20 flex items-center justify-center mb-6 text-primary">
-<span class="material-symbols-outlined text-[32px]">download</span>
-</div>
-<h3 class="font-headline-md text-headline-md text-on-surface mb-3">Configuratie exporteren</h3>
-<p class="font-body-md text-on-surface-variant">Creëer een JSON-snapshot van al uw dashboard-instellingen, container-links en UI-voorkeuren. Handig voor migraties of herstel bij dataverlies.</p>
-</div>
-<div class="mt-8">
-<button class="w-full bg-primary text-on-primary py-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:brightness-110 active:scale-[0.98] transition-all">
-<span class="material-symbols-outlined">cloud_download</span>
-                            Start Export (.json)
-                        </button>
-</div>
-</div>
-<!-- Import Card (Drag & Drop) -->
-<div class="glass-panel rounded-2xl p-8 flex flex-col border-2 border-dashed border-outline-variant/40 hover:border-secondary/50 min-h-[320px] transition-all relative group cursor-pointer" id="drop-zone">
-<div class="flex-1 flex flex-col items-center justify-center text-center">
-<div class="w-16 h-16 rounded-full bg-secondary-container/20 flex items-center justify-center mb-6 text-secondary group-hover:scale-110 transition-transform">
-<span class="material-symbols-outlined text-[40px]">upload_file</span>
-</div>
-<h3 class="font-headline-md text-headline-md text-on-surface mb-3">Back-up importeren</h3>
-<p class="font-body-md text-on-surface-variant px-4">Sleep uw configuratiebestand hierheen of klik om te bladeren.</p>
-<input accept=".json" class="hidden" id="file-input" type="file"/>
-</div>
-<!-- Validation Status (Hidden by default) -->
-<div class="hidden mt-6 p-4 rounded-xl bg-surface-container-highest border border-outline-variant/30 animate-in fade-in slide-in-from-bottom-4 duration-300" id="validation-status">
-<div class="flex items-center justify-between">
-<div class="flex items-center gap-3">
-<span class="material-symbols-outlined" id="status-icon">hourglass_empty</span>
-<div>
-<p class="font-label-md text-label-md text-on-surface font-bold" id="file-name">backup_2023.json</p>
-<p class="text-xs text-on-surface-variant" id="status-text">Bezig met valideren...</p>
-</div>
-</div>
-<div class="w-3 h-3 rounded-full bg-on-surface-variant" id="status-indicator"></div>
-</div>
-</div>
-</div>
-</div>
-<!-- Recent Activity / History -->
-<section class="space-y-stack-sm">
-<div class="flex items-center justify-between">
-<h3 class="font-headline-md text-headline-md text-on-surface">Recente Back-ups</h3>
-<button class="text-secondary text-sm font-bold hover:underline">Geschiedenis wissen</button>
-</div>
-<div class="glass-panel rounded-xl overflow-hidden">
-<table class="w-full text-left">
-<thead class="bg-surface-container-high/50 text-on-surface-variant text-xs uppercase tracking-wider">
-<tr>
-<th class="px-6 py-4 font-semibold">Datum</th>
-<th class="px-6 py-4 font-semibold">Bestand</th>
-<th class="px-6 py-4 font-semibold">Grootte</th>
-<th class="px-6 py-4 font-semibold">Status</th>
-<th class="px-6 py-4 font-semibold text-right">Actie</th>
-</tr>
-</thead>
-<tbody class="divide-y divide-outline-variant/10">
-<tr class="hover:bg-surface-variant/20 transition-colors">
-<td class="px-6 py-4 font-label-md text-label-md">Vandaag, 14:20</td>
-<td class="px-6 py-4 font-body-md">dockdeck_full_config.json</td>
-<td class="px-6 py-4 text-on-surface-variant">1.2 MB</td>
-<td class="px-6 py-4">
-<span class="flex items-center gap-2 text-secondary text-sm">
-<span class="active-dot pulse-animation"></span>
-                                        Succesvol
-                                    </span>
-</td>
-<td class="px-6 py-4 text-right">
-<button class="text-primary hover:text-primary-fixed transition-colors">
-<span class="material-symbols-outlined">download</span>
-</button>
-</td>
-</tr>
-<tr class="hover:bg-surface-variant/20 transition-colors">
-<td class="px-6 py-4 font-label-md text-label-md">12 Okt 2023</td>
-<td class="px-6 py-4 font-body-md">manual_export.json</td>
-<td class="px-6 py-4 text-on-surface-variant">845 KB</td>
-<td class="px-6 py-4">
-<span class="flex items-center gap-2 text-secondary text-sm">
-<span class="active-dot"></span>
-                                        Succesvol
-                                    </span>
-</td>
-<td class="px-6 py-4 text-right">
-<button class="text-primary hover:text-primary-fixed transition-colors">
-<span class="material-symbols-outlined">download</span>
-</button>
-</td>
-</tr>
-</tbody>
-</table>
-</div>
-</section>
-</div>
-</main>
-<!-- Bottom Navigation (Mobile Only) -->
-<nav class="md:hidden fixed bottom-0 w-full h-16 bg-surface-glass backdrop-blur-xl border-t border-outline-variant/20 flex justify-around items-center px-4 z-50">
-<button class="flex flex-col items-center text-on-surface-variant hover:text-secondary">
-<span class="material-symbols-outlined">dashboard</span>
-</button>
-<button class="flex flex-col items-center text-on-surface-variant hover:text-secondary">
-<span class="material-symbols-outlined">layers</span>
-</button>
-<button class="flex flex-col items-center text-secondary font-bold">
-<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">settings</span>
-</button>
-<button class="flex flex-col items-center text-on-surface-variant hover:text-secondary">
-<span class="material-symbols-outlined">person</span>
-</button>
-</nav>
-<script>
-        const dropZone = document.getElementById('drop-zone');
-        const fileInput = document.getElementById('file-input');
-        const validationStatus = document.getElementById('validation-status');
-        const fileNameLabel = document.getElementById('file-name');
-        const statusText = document.getElementById('status-text');
-        const statusIndicator = document.getElementById('status-indicator');
-        const statusIcon = document.getElementById('status-icon');
-
-        dropZone.addEventListener('click', () => fileInput.click());
-
-        dropZone.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            dropZone.classList.add('border-secondary', 'bg-secondary/5');
-        });
-
-        dropZone.addEventListener('dragleave', () => {
-            dropZone.classList.remove('border-secondary', 'bg-secondary/5');
-        });
-
-        dropZone.addEventListener('drop', (e) => {
-            e.preventDefault();
-            dropZone.classList.remove('border-secondary', 'bg-secondary/5');
-            const files = e.dataTransfer.files;
-            if (files.length) handleFile(files[0]);
-        });
-
-        fileInput.addEventListener('change', (e) => {
-            if (e.target.files.length) handleFile(e.target.files[0]);
-        });
-
-        function handleFile(file) {
-            validationStatus.classList.remove('hidden');
-            fileNameLabel.textContent = file.name;
-            statusText.textContent = 'Valideren...';
-            statusIndicator.className = 'w-3 h-3 rounded-full bg-tertiary pulse-animation';
-            statusIcon.textContent = 'hourglass_empty';
-            statusIcon.className = 'material-symbols-outlined text-tertiary';
-
-            // Simulate validation
-            setTimeout(() => {
-                if (file.name.endsWith('.json')) {
-                    statusText.textContent = 'Geldige configuratie gevonden';
-                    statusIndicator.className = 'w-3 h-3 rounded-full bg-secondary';
-                    statusIcon.textContent = 'check_circle';
-                    statusIcon.className = 'material-symbols-outlined text-secondary';
-                } else {
-                    statusText.textContent = 'Ongeldig bestandstype. Gebruik .json';
-                    statusIndicator.className = 'w-3 h-3 rounded-full bg-error';
-                    statusIcon.textContent = 'error';
-                    statusIcon.className = 'material-symbols-outlined text-error';
-                }
-            }, 1500);
-        }
-    </script>
-</body></html>
\ No newline at end of file

Datum	Bestand	Grootte	Status	Actie
Vandaag, 14:20	dockdeck_full_config.json	1.2 MB	- - - Succesvol - -	- -
12 Okt 2023	manual_export.json	845 KB	- - - Succesvol - -	- -