diff --git a/admin.php b/admin.php
index 4457f5a..8cc90b5 100644
--- a/admin.php
+++ b/admin.php
@@ -176,7 +176,7 @@ require_once __DIR__ . '/includes/header.php';
 
 <div class="space-y-8 max-w-7xl mx-auto pb-12">
     <!-- Top Header Banner -->
-    <div class="relative overflow-hidden bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-8 shadow-xs backdrop-blur-xl transition">
+    <div class="relative overflow-hidden fociz-card p-6 sm:p-8">
         <div class="absolute -top-24 -right-24 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none"></div>
         <div class="absolute -bottom-24 -left-24 w-80 h-80 bg-sky-500/10 rounded-full blur-3xl pointer-events-none"></div>
 
@@ -217,7 +217,7 @@ require_once __DIR__ . '/includes/header.php';
 
     <!-- Stat kaarten rij -->
     <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
-        <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-5 flex items-center space-x-4 shadow-xs transition">
+        <div class="fociz-card p-5 flex items-center space-x-4">
             <div class="w-12 h-12 rounded-xl bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800/60 flex items-center justify-center text-indigo-600 dark:text-indigo-400 flex-shrink-0">
                 <i data-lucide="users" class="w-6 h-6"></i>
             </div>
@@ -228,7 +228,7 @@ require_once __DIR__ . '/includes/header.php';
             </div>
         </div>
 
-        <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-5 flex items-center space-x-4 shadow-xs transition">
+        <div class="fociz-card p-5 flex items-center space-x-4">
             <div class="w-12 h-12 rounded-xl bg-sky-50 dark:bg-sky-950/40 border border-sky-200 dark:border-sky-800/60 flex items-center justify-center text-sky-600 dark:text-sky-400 flex-shrink-0">
                 <i data-lucide="calendar" class="w-6 h-6"></i>
             </div>
@@ -239,7 +239,7 @@ require_once __DIR__ . '/includes/header.php';
             </div>
         </div>
 
-        <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-5 flex items-center space-x-4 shadow-xs transition">
+        <div class="fociz-card p-5 flex items-center space-x-4">
             <div class="w-12 h-12 rounded-xl bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800/60 flex items-center justify-center text-indigo-600 dark:text-indigo-400 flex-shrink-0">
                 <i data-lucide="check-square" class="w-6 h-6"></i>
             </div>
@@ -250,7 +250,7 @@ require_once __DIR__ . '/includes/header.php';
             </div>
         </div>
 
-        <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-5 flex items-center space-x-4 shadow-xs transition">
+        <div class="fociz-card p-5 flex items-center space-x-4">
             <div class="w-12 h-12 rounded-xl bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800/60 flex items-center justify-center text-amber-600 dark:text-amber-400 flex-shrink-0">
                 <i data-lucide="mail" class="w-6 h-6"></i>
             </div>
@@ -269,7 +269,7 @@ require_once __DIR__ . '/includes/header.php';
         <div class="lg:col-span-8 space-y-8">
             
             <!-- 1. Microsoft 365 Azure App Registratie -->
-            <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-7 shadow-xs transition">
+            <div class="fociz-card p-6 sm:p-7">
                 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-slate-100 dark:border-slate-800/80">
                     <div class="flex items-center space-x-3.5">
                         <div class="w-12 h-12 rounded-xl bg-sky-50 dark:bg-sky-950/40 border border-sky-200 dark:border-sky-800/60 flex items-center justify-center text-sky-600 dark:text-sky-400 font-bold shadow-xs">
@@ -409,7 +409,7 @@ require_once __DIR__ . '/includes/header.php';
             </div>
 
             <!-- 2. Atlassian Jira Bedrijfsinstellingen -->
-            <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-7 shadow-xs transition">
+            <div class="fociz-card p-6 sm:p-7">
                 <div class="flex items-center space-x-3.5 pb-6 border-b border-slate-100 dark:border-slate-800/80">
                     <div class="w-12 h-12 rounded-xl bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800/60 flex items-center justify-center text-indigo-600 dark:text-indigo-400 font-bold shadow-xs">
                         <i data-lucide="trello" class="w-6 h-6"></i>
@@ -453,7 +453,7 @@ require_once __DIR__ . '/includes/header.php';
             </div>
 
             <!-- 3. Organisatie Werkdag Standaarden (Release v1.4) -->
-            <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-7 shadow-xs space-y-6 transition">
+            <div class="fociz-card p-6 sm:p-7 space-y-6">
                 <div class="flex items-center justify-between pb-4 border-b border-slate-100 dark:border-slate-800/80">
                     <div class="flex items-center space-x-3.5">
                         <div class="w-12 h-12 rounded-xl bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800/60 flex items-center justify-center text-indigo-600 dark:text-indigo-400 font-bold shadow-xs">
@@ -565,7 +565,7 @@ require_once __DIR__ . '/includes/header.php';
             </div>
 
             <!-- 4. AI & Brainstorm Co-Pilot (Release v1.5) -->
-            <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-7 shadow-xs space-y-6 transition">
+            <div class="fociz-card p-6 sm:p-7 space-y-6">
                 <div class="flex items-center justify-between pb-4 border-b border-slate-100 dark:border-slate-800/80">
                     <div class="flex items-center space-x-3.5">
                         <div class="w-12 h-12 rounded-xl bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800/60 flex items-center justify-center text-amber-600 dark:text-amber-400 font-bold shadow-xs">
@@ -626,7 +626,7 @@ require_once __DIR__ . '/includes/header.php';
         <div class="lg:col-span-4 space-y-6">
             
             <!-- Team Status Overzicht -->
-            <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 shadow-xs space-y-5 transition">
+            <div class="fociz-card p-6 space-y-5">
                 <div class="flex items-center justify-between pb-4 border-b border-slate-100 dark:border-slate-800/80">
                     <div class="flex items-center space-x-2.5">
                         <i data-lucide="activity" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
@@ -671,7 +671,7 @@ require_once __DIR__ . '/includes/header.php';
             </div>
 
             <!-- Systeem Gezondheid & Beveiliging -->
-            <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 shadow-xs space-y-4 transition">
+            <div class="fociz-card p-6 space-y-4">
                 <div class="flex items-center space-x-2 text-teal-600 dark:text-teal-400 text-xs font-semibold">
                     <i data-lucide="shield-check" class="w-4 h-4"></i>
                     <span>Systeem & Beveiliging</span>
diff --git a/brainstorm.php b/brainstorm.php
index bfc7496..db62073 100644
--- a/brainstorm.php
+++ b/brainstorm.php
@@ -42,21 +42,21 @@ require_once __DIR__ . '/includes/header.php';
 
 <div class="space-y-6 max-w-7xl mx-auto">
     <!-- Header -->
-    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-6 sm:p-7 shadow-xs transition">
+    <div class="fociz-card p-6 sm:p-7 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <div>
-            <div class="flex items-center space-x-2 text-indigo-600 dark:text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-1">
+            <div class="flex items-center space-x-2 text-indigo-600 dark:text-indigo-400 text-xs font-bold uppercase tracking-wider mb-1">
                 <i data-lucide="lightbulb" class="w-4 h-4"></i>
                 <span>Creatie & Innovatie</span>
             </div>
-            <h1 class="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white tracking-tight">
+            <h1 class="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white tracking-tight">
                 Brainstorm Sessies
             </h1>
-            <p class="text-slate-500 dark:text-slate-400 text-xs sm:text-sm mt-1">
+            <p class="text-slate-500 dark:text-slate-400 text-xs sm:text-sm mt-1 max-w-2xl">
                 Brainstorm met collega's, verzamel ideeën en knelpunten, en transformeer ze direct tot een werkbare roadmap.
             </p>
         </div>
 
-        <button onclick="document.getElementById('newSessionModal').classList.remove('hidden')" class="flex items-center space-x-2 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold transition shadow-xs flex-shrink-0 cursor-pointer">
+        <button onclick="document.getElementById('newSessionModal').classList.remove('hidden')" class="flex items-center space-x-2 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold transition shadow-xs flex-shrink-0 cursor-pointer">
             <i data-lucide="plus" class="w-4 h-4"></i>
             <span>Nieuwe Sessie Starten</span>
         </button>
@@ -71,25 +71,25 @@ require_once __DIR__ . '/includes/header.php';
     <!-- Grid met sessies -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
         <?php if (empty($sessions)): ?>
-            <div class="col-span-full bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-12 text-center shadow-xs">
+            <div class="col-span-full fociz-card p-12 text-center shadow-xs">
                 <i data-lucide="lightbulb" class="w-12 h-12 text-slate-300 dark:text-slate-700 mx-auto mb-3"></i>
-                <h3 class="text-base font-semibold text-slate-900 dark:text-white">Nog geen brainstormsessies gestart</h3>
+                <h3 class="text-base font-bold text-slate-900 dark:text-white">Nog geen brainstormsessies gestart</h3>
                 <p class="text-xs text-slate-500 dark:text-slate-400 mt-1 max-w-sm mx-auto">
                     Start uw eerste brainstormsessie om ideeën te verzamelen en ze met één klik om te vormen naar planningsitems.
                 </p>
-                <button onclick="document.getElementById('newSessionModal').classList.remove('hidden')" class="mt-4 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded-xl text-xs transition cursor-pointer shadow-xs">
+                <button onclick="document.getElementById('newSessionModal').classList.remove('hidden')" class="mt-4 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-xl text-xs transition cursor-pointer shadow-xs">
                     Sessie Starten
                 </button>
             </div>
         <?php else: ?>
             <?php foreach ($sessions as $sess): ?>
-                <a href="/brainstorm_canvas.php?id=<?= $sess['id'] ?>" class="group bg-white hover:bg-slate-50/70 dark:bg-[#111622] dark:hover:bg-[#151b2a] border border-slate-200/80 hover:border-indigo-300 dark:border-slate-800 dark:hover:border-indigo-700/60 rounded-2xl p-5 shadow-xs hover:shadow-sm transition flex flex-col justify-between">
+                <a href="/brainstorm_canvas.php?id=<?= $sess['id'] ?>" class="group fociz-card-interactive p-5 flex flex-col justify-between hover:border-indigo-400 dark:hover:border-indigo-500/60">
                     <div>
                         <div class="flex items-center justify-between mb-3">
-                            <span class="px-2.5 py-0.5 rounded-md bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/20 text-indigo-700 dark:text-indigo-400 font-medium text-[11px]">
+                            <span class="px-2.5 py-0.5 rounded-lg bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/20 text-indigo-700 dark:text-indigo-400 font-semibold text-[11px]">
                                 <?= htmlspecialchars($sess['theme']) ?>
                             </span>
-                            <span class="flex items-center space-x-1 text-slate-400 dark:text-slate-500 text-xs">
+                            <span class="flex items-center space-x-1 text-slate-400 dark:text-slate-500 text-xs font-medium">
                                 <i data-lucide="message-square" class="w-3.5 h-3.5"></i>
                                 <span><?= $sess['cards_count'] ?> kaarten</span>
                             </span>
@@ -107,8 +107,8 @@ require_once __DIR__ . '/includes/header.php';
                     </div>
 
                     <div class="mt-5 pt-4 border-t border-slate-100 dark:border-slate-800/80 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
-                        <span>Door <?= htmlspecialchars($sess['creator_name']) ?></span>
-                        <div class="flex items-center space-x-1 text-indigo-600 dark:text-indigo-400 group-hover:translate-x-1 transition font-medium">
+                        <span class="truncate">Door <?= htmlspecialchars($sess['creator_name']) ?></span>
+                        <div class="flex items-center space-x-1 text-indigo-600 dark:text-indigo-400 group-hover:translate-x-1 transition font-bold flex-shrink-0 ml-2">
                             <span>Open canvas</span>
                             <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                         </div>
@@ -120,15 +120,15 @@ require_once __DIR__ . '/includes/header.php';
 </div>
 
 <!-- Modal: Nieuwe sessie -->
-<div id="newSessionModal" class="hidden fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-xs flex items-center justify-center p-4">
-    <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800 rounded-2xl p-6 sm:p-7 shadow-xl max-w-lg w-full transition">
-        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100 dark:border-slate-800">
-            <h3 class="text-sm font-semibold text-slate-900 dark:text-white flex items-center space-x-2">
+<div id="newSessionModal" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fociz-card p-6 sm:p-7 shadow-2xl max-w-lg w-full space-y-4">
+        <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
+            <h3 class="text-sm font-bold text-slate-900 dark:text-white flex items-center space-x-2">
                 <i data-lucide="sparkles" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
                 <span>Nieuwe Brainstormsessie</span>
             </h3>
-            <button onclick="document.getElementById('newSessionModal').classList.add('hidden')" class="text-slate-400 hover:text-slate-600 dark:hover:text-white cursor-pointer">
-                <i data-lucide="x" class="w-5 h-5"></i>
+            <button onclick="document.getElementById('newSessionModal').classList.add('hidden')" class="p-1.5 text-slate-400 hover:text-slate-600 dark:hover:text-white rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer">
+                <i data-lucide="x" class="w-4 h-4"></i>
             </button>
         </div>
 
@@ -137,13 +137,13 @@ require_once __DIR__ . '/includes/header.php';
 
             <div>
                 <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Onderwerp / Titel</label>
-                <input type="text" name="title" required placeholder="Bijv. Q4 Automatisering & Klantreis" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3.5 py-2.5 text-slate-900 dark:text-white text-xs placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                <input type="text" name="title" required placeholder="Bijv. Q4 Automatisering & Klantreis" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3.5 py-2.5 text-slate-900 dark:text-white text-xs placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
             </div>
 
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Thema / Categorie</label>
-                    <select name="theme" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <select name="theme" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                         <option value="Product & Strategie">Product & Strategie</option>
                         <option value="Procesverbetering">Procesverbetering</option>
                         <option value="Klant & Service">Klant & Service</option>
@@ -153,15 +153,15 @@ require_once __DIR__ . '/includes/header.php';
                 </div>
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Doel / Beschrijving</label>
-                    <input type="text" name="description" placeholder="Doel van deze sessie..." class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3.5 py-2 text-slate-900 dark:text-white text-xs placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <input type="text" name="description" placeholder="Doel van deze sessie..." class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3.5 py-2 text-slate-900 dark:text-white text-xs placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                 </div>
             </div>
 
-            <div class="flex space-x-2 pt-2">
-                <button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2.5 px-4 rounded-xl text-xs transition cursor-pointer shadow-xs">
+            <div class="flex space-x-2 pt-2 border-t border-slate-100 dark:border-slate-800/80">
+                <button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2.5 px-4 rounded-xl text-xs transition cursor-pointer shadow-xs">
                     Sessie Aanmaken & Canvas Openen
                 </button>
-                <button type="button" onclick="document.getElementById('newSessionModal').classList.add('hidden')" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-xs transition cursor-pointer">
+                <button type="button" onclick="document.getElementById('newSessionModal').classList.add('hidden')" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-xs font-semibold transition cursor-pointer">
                     Annuleren
                 </button>
             </div>
diff --git a/brainstorm_canvas.php b/brainstorm_canvas.php
index 34d729f..ed5fcc8 100644
--- a/brainstorm_canvas.php
+++ b/brainstorm_canvas.php
@@ -71,19 +71,19 @@ $categories = [
 
 <div class="space-y-6 max-w-7xl mx-auto">
     <!-- Top Bar -->
-    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-5 shadow-xs transition">
+    <div class="fociz-card p-5 flex flex-col lg:flex-row lg:items-center justify-between gap-4">
         <div class="flex items-center space-x-4">
             <a href="/brainstorm.php" class="p-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition cursor-pointer">
                 <i data-lucide="arrow-left" class="w-5 h-5"></i>
             </a>
             <div>
                 <div class="flex items-center space-x-2 text-xs">
-                    <span class="px-2.5 py-0.5 rounded-md bg-indigo-50 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-400 font-semibold border border-indigo-200 dark:border-indigo-500/20">
+                    <span class="px-2.5 py-0.5 rounded-lg bg-indigo-50 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-400 font-bold border border-indigo-200 dark:border-indigo-500/20">
                         <?= htmlspecialchars($session['theme']) ?>
                     </span>
                     <span class="text-slate-400 dark:text-slate-500">Gestart door <?= htmlspecialchars($session['creator_name']) ?></span>
                 </div>
-                <h1 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-white tracking-tight mt-0.5">
+                <h1 class="text-xl sm:text-2xl font-black text-slate-900 dark:text-white tracking-tight mt-0.5">
                     <?= htmlspecialchars($session['title']) ?>
                 </h1>
             </div>
@@ -91,24 +91,24 @@ $categories = [
 
         <div class="flex flex-wrap items-center gap-2.5">
             <?php if ($aiSettings['ai_enabled'] && $aiSettings['has_key']): ?>
-                <button onclick="aiGenerateIdeas(this)" class="flex items-center space-x-1.5 px-3 py-2 rounded-xl bg-violet-50 hover:bg-violet-100 dark:bg-violet-950/50 dark:hover:bg-violet-900/50 text-violet-700 dark:text-violet-300 border border-violet-200 dark:border-violet-800/60 text-xs font-semibold transition cursor-pointer shadow-xs" title="Genereer 4 innovatieve ideeën via AI Co-Pilot">
+                <button onclick="aiGenerateIdeas(this)" class="flex items-center space-x-1.5 px-3 py-2 rounded-xl bg-violet-50 hover:bg-violet-100 dark:bg-violet-950/50 dark:hover:bg-violet-900/50 text-violet-700 dark:text-violet-300 border border-violet-200 dark:border-violet-800/60 text-xs font-bold transition cursor-pointer shadow-xs" title="Genereer 4 innovatieve ideeën via AI Co-Pilot">
                     <i data-lucide="sparkles" class="w-4 h-4 text-violet-500"></i>
                     <span>💡 AI Ideeën</span>
                 </button>
 
-                <button onclick="aiCategorizeCards(this)" class="flex items-center space-x-1.5 px-3 py-2 rounded-xl bg-indigo-50 hover:bg-indigo-100 dark:bg-indigo-950/50 dark:hover:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-800/60 text-xs font-semibold transition cursor-pointer shadow-xs" title="Sorteer alle kaartjes automatisch in Ideeën, Knelpunten, Oplossingen of Quick Wins">
+                <button onclick="aiCategorizeCards(this)" class="flex items-center space-x-1.5 px-3 py-2 rounded-xl bg-indigo-50 hover:bg-indigo-100 dark:bg-indigo-950/50 dark:hover:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-800/60 text-xs font-bold transition cursor-pointer shadow-xs" title="Sorteer alle kaartjes automatisch in Ideeën, Knelpunten, Oplossingen of Quick Wins">
                     <i data-lucide="wand-2" class="w-4 h-4 text-indigo-500"></i>
                     <span>✨ Auto-Categoriseer</span>
                 </button>
             <?php endif; ?>
 
-            <button onclick="openAddCardModal()" class="flex items-center space-x-1.5 px-3.5 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 text-xs font-semibold border border-slate-200 dark:border-slate-700 transition cursor-pointer shadow-xs">
+            <button onclick="openAddCardModal()" class="flex items-center space-x-1.5 px-3.5 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 text-xs font-bold border border-slate-200 dark:border-slate-700 transition cursor-pointer shadow-xs">
                 <i data-lucide="plus" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
                 <span>Nieuwe Kaart</span>
             </button>
 
             <!-- De Kernfeature: Zet om naar Roadmap! -->
-            <button onclick="openConvertModal()" class="flex items-center space-x-2 px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold transition shadow-xs cursor-pointer">
+            <button onclick="openConvertModal()" class="flex items-center space-x-2 px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold transition shadow-xs cursor-pointer">
                 <i data-lucide="map" class="w-4 h-4"></i>
                 <span>Zet om naar Roadmap</span>
             </button>
@@ -120,14 +120,14 @@ $categories = [
         <?php foreach ($categories as $catKey => $catConfig): 
             $catCards = array_filter($cards, fn($c) => $c['category'] === $catKey);
         ?>
-            <div class="bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-4 flex flex-col min-h-[500px] shadow-xs transition">
+            <div class="fociz-card p-4 flex flex-col min-h-[500px]">
                 <!-- Column Header -->
                 <div class="flex items-center justify-between pb-3 mb-3 border-b border-slate-100 dark:border-slate-800">
                     <div class="flex items-center space-x-2">
                         <i data-lucide="<?= $catConfig['icon'] ?>" class="w-4 h-4 text-<?= $catConfig['color'] ?>-500"></i>
-                        <h3 class="text-xs font-semibold text-slate-900 dark:text-white uppercase tracking-wider"><?= $catConfig['title'] ?></h3>
+                        <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider"><?= $catConfig['title'] ?></h3>
                     </div>
-                    <span class="text-xs font-mono font-semibold px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400">
+                    <span class="text-xs font-mono font-bold px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-slate-700">
                         <?= count($catCards) ?>
                     </span>
                 </div>
@@ -135,22 +135,22 @@ $categories = [
                 <!-- Cards Container -->
                 <div class="flex-1 space-y-3">
                     <?php if (empty($catCards)): ?>
-                        <div class="py-8 text-center text-slate-400 dark:text-slate-600 text-xs">
+                        <div class="py-8 text-center text-slate-400 dark:text-slate-600 text-xs font-medium">
                             Nog geen kaarten in deze categorie.
                         </div>
                     <?php else: ?>
                         <?php foreach ($catCards as $card): ?>
-                            <div class="group relative rounded-xl p-4 border <?= $catConfig['border'] ?> <?= $catConfig['bg'] ?> backdrop-blur-sm shadow-xs transition hover:-translate-y-0.5" id="card-<?= $card['id'] ?>">
+                            <div class="group relative rounded-xl p-4 border <?= $catConfig['border'] ?> <?= $catConfig['bg'] ?> backdrop-blur-sm shadow-2xs transition hover:-translate-y-0.5" id="card-<?= $card['id'] ?>">
                                 
                                 <!-- Top: Checkbox voor selectie + Roadmap badge -->
                                 <div class="flex items-center justify-between mb-2">
                                     <label class="flex items-center space-x-2 cursor-pointer">
                                         <input type="checkbox" value="<?= $card['id'] ?>" data-content="<?= htmlspecialchars($card['content'], ENT_QUOTES) ?>" class="card-checkbox w-4 h-4 rounded bg-white dark:bg-slate-900 border-slate-300 dark:border-slate-700 text-indigo-600 focus:ring-0">
-                                        <span class="text-[10px] text-slate-500 dark:text-slate-400">Selecteer</span>
+                                        <span class="text-[10px] text-slate-500 dark:text-slate-400 font-medium">Selecteer</span>
                                     </label>
 
                                     <?php if (!empty($card['converted_to_roadmap_item_id'])): ?>
-                                        <span class="px-2 py-0.5 rounded-md bg-teal-50 dark:bg-teal-500/15 text-teal-700 dark:text-teal-400 font-semibold text-[10px] flex items-center space-x-1 border border-teal-200 dark:border-teal-500/20">
+                                        <span class="px-2 py-0.5 rounded-md bg-teal-50 dark:bg-teal-500/15 text-teal-700 dark:text-teal-400 font-bold text-[10px] flex items-center space-x-1 border border-teal-200 dark:border-teal-500/20">
                                             <i data-lucide="check" class="w-3 h-3"></i>
                                             <span>Op Roadmap</span>
                                         </span>
@@ -185,7 +185,7 @@ $categories = [
                 </div>
 
                 <!-- Quick add button at column bottom -->
-                <button onclick="openAddCardModal('<?= $catKey ?>')" class="mt-3 w-full py-2 rounded-xl border border-dashed border-slate-200 dark:border-slate-800 hover:border-indigo-300 dark:hover:border-indigo-700/60 text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 text-xs transition flex items-center justify-center space-x-1 cursor-pointer">
+                <button onclick="openAddCardModal('<?= $catKey ?>')" class="mt-3 w-full py-2 rounded-xl border border-dashed border-slate-200 dark:border-slate-800 hover:border-indigo-300 dark:hover:border-indigo-700/60 text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 text-xs font-semibold transition flex items-center justify-center space-x-1 cursor-pointer">
                     <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                     <span>Kaart toevoegen</span>
                 </button>
@@ -195,22 +195,22 @@ $categories = [
 </div>
 
 <!-- Modal: Nieuwe Kaart Toevoegen -->
-<div id="addCardModal" class="hidden fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-xs flex items-center justify-center p-4">
-    <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-xl max-w-md w-full transition">
-        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100 dark:border-slate-800">
-            <h3 class="text-sm font-semibold text-slate-900 dark:text-white flex items-center space-x-2">
+<div id="addCardModal" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fociz-card p-6 shadow-2xl max-w-md w-full space-y-4">
+        <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
+            <h3 class="text-sm font-bold text-slate-900 dark:text-white flex items-center space-x-2">
                 <i data-lucide="sticky-note" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
                 <span>Brainstormkaart Toevoegen</span>
             </h3>
-            <button onclick="closeAddCardModal()" class="text-slate-400 hover:text-slate-600 dark:hover:text-white cursor-pointer">
-                <i data-lucide="x" class="w-5 h-5"></i>
+            <button onclick="closeAddCardModal()" class="p-1.5 text-slate-400 hover:text-slate-600 dark:hover:text-white rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer">
+                <i data-lucide="x" class="w-4 h-4"></i>
             </button>
         </div>
 
         <div class="space-y-4">
             <div>
                 <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Categorie</label>
-                <select id="modalCardCategory" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                <select id="modalCardCategory" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                     <option value="Ideeën">💡 Ideeën & Concepten</option>
                     <option value="Knelpunten">⚠️ Knelpunten & Uitdagingen</option>
                     <option value="Oplossingen">🚀 Oplossingen & Features</option>
@@ -220,14 +220,14 @@ $categories = [
 
             <div>
                 <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Idee / Beschrijving</label>
-                <textarea id="modalCardContent" rows="4" placeholder="Schrijf hier uw inzicht, idee of knelpunt..." class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl p-3 text-slate-900 dark:text-white text-xs placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 resize-none"></textarea>
+                <textarea id="modalCardContent" rows="4" placeholder="Schrijf hier uw inzicht, idee of knelpunt..." class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl p-3 text-slate-900 dark:text-white text-xs placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 resize-none shadow-2xs"></textarea>
             </div>
 
-            <div class="flex space-x-2 pt-2">
-                <button onclick="submitNewCard()" class="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2.5 px-4 rounded-xl text-xs transition cursor-pointer shadow-xs">
+            <div class="flex space-x-2 pt-2 border-t border-slate-100 dark:border-slate-800/80">
+                <button onclick="submitNewCard()" class="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2.5 px-4 rounded-xl text-xs transition cursor-pointer shadow-xs">
                     Plaats op Canvas
                 </button>
-                <button onclick="closeAddCardModal()" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-xs transition cursor-pointer">
+                <button onclick="closeAddCardModal()" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-xs font-semibold transition cursor-pointer">
                     Annuleren
                 </button>
             </div>
@@ -236,20 +236,20 @@ $categories = [
 </div>
 
 <!-- Modal: Zet om naar Roadmap -->
-<div id="convertModal" class="hidden fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-xs flex items-center justify-center p-4">
-    <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-xl max-w-lg w-full transition">
-        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100 dark:border-slate-800">
-            <h3 class="text-sm font-semibold text-slate-900 dark:text-white flex items-center space-x-2">
+<div id="convertModal" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fociz-card p-6 shadow-2xl max-w-lg w-full space-y-4">
+        <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
+            <h3 class="text-sm font-bold text-slate-900 dark:text-white flex items-center space-x-2">
                 <i data-lucide="map" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
                 <span>Zet Brainstorm om naar Roadmap</span>
             </h3>
-            <button onclick="closeConvertModal()" class="text-slate-400 hover:text-slate-600 dark:hover:text-white cursor-pointer">
-                <i data-lucide="x" class="w-5 h-5"></i>
+            <button onclick="closeConvertModal()" class="p-1.5 text-slate-400 hover:text-slate-600 dark:hover:text-white rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer">
+                <i data-lucide="x" class="w-4 h-4"></i>
             </button>
         </div>
 
         <div class="space-y-4">
-            <div class="bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/20 rounded-xl p-3 text-xs text-indigo-800 dark:text-indigo-300">
+            <div class="bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/20 rounded-xl p-3 text-xs text-indigo-800 dark:text-indigo-300 font-semibold">
                 <span id="selectedCountText" class="font-bold">0</span> kaarten geselecteerd om om te zetten naar planbare roadmap items.
             </div>
 
@@ -259,7 +259,7 @@ $categories = [
                         <i data-lucide="sparkles" class="w-4 h-4 text-violet-500 flex-shrink-0"></i>
                         <span class="text-[11px] font-medium leading-tight">Laat AI Co-Pilot kwartaal, type & prioriteit adviseren</span>
                     </div>
-                    <button type="button" onclick="aiSuggestRoadmapMeta(this)" id="aiSuggestBtn" class="px-2.5 py-1 bg-violet-600 hover:bg-violet-700 text-white rounded-lg text-xs font-semibold transition flex items-center space-x-1 cursor-pointer flex-shrink-0 shadow-xs">
+                    <button type="button" onclick="aiSuggestRoadmapMeta(this)" id="aiSuggestBtn" class="px-2.5 py-1 bg-violet-600 hover:bg-violet-700 text-white rounded-lg text-xs font-bold transition flex items-center space-x-1 cursor-pointer flex-shrink-0 shadow-xs">
                         <span>✨ AI Advies</span>
                     </button>
                 </div>
@@ -268,7 +268,7 @@ $categories = [
             <div class="grid grid-cols-2 gap-3">
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Doel Kwartaal</label>
-                    <select id="roadmapQuarter" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <select id="roadmapQuarter" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                         <option value="Q1">Q1 (Jan - Mrt)</option>
                         <option value="Q2">Q2 (Apr - Jun)</option>
                         <option value="Q3" selected>Q3 (Jul - Sep)</option>
@@ -278,7 +278,7 @@ $categories = [
 
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Item Type</label>
-                    <select id="roadmapType" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <select id="roadmapType" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                         <option value="FEATURE" selected>Feature / Functionaliteit</option>
                         <option value="EPIC">Epic (Groot project)</option>
                         <option value="MILESTONE">Mijlpaal</option>
@@ -290,7 +290,7 @@ $categories = [
             <div class="grid grid-cols-2 gap-3">
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Prioriteit</label>
-                    <select id="roadmapPriority" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <select id="roadmapPriority" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                         <option value="HIGH" selected>Hoog (Belangrijke milestone)</option>
                         <option value="CRITICAL">Kritiek (Must-have)</option>
                         <option value="MEDIUM">Normaal</option>
@@ -300,16 +300,16 @@ $categories = [
 
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Streefdatum (Deadline)</label>
-                    <input type="date" id="roadmapDueDate" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-1.5 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <input type="date" id="roadmapDueDate" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-1.5 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                 </div>
             </div>
 
-            <div class="flex space-x-2 pt-2">
-                <button onclick="submitConvertToRoadmap()" class="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2.5 px-4 rounded-xl text-xs transition shadow-xs flex items-center justify-center space-x-2 cursor-pointer">
+            <div class="flex space-x-2 pt-2 border-t border-slate-100 dark:border-slate-800/80">
+                <button onclick="submitConvertToRoadmap()" class="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2.5 px-4 rounded-xl text-xs transition shadow-xs flex items-center justify-center space-x-2 cursor-pointer">
                     <i data-lucide="check-circle" class="w-4 h-4"></i>
                     <span>Definitief Toevoegen aan Roadmap</span>
                 </button>
-                <button onclick="closeConvertModal()" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-xs transition cursor-pointer">
+                <button onclick="closeConvertModal()" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-xs font-semibold transition cursor-pointer">
                     Annuleren
                 </button>
             </div>
diff --git a/includes/header.php b/includes/header.php
index 41a6d02..ccec3a2 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -94,7 +94,7 @@ $currentUserTheme = !empty($currentUser['id']) ? get_user_theme((int)$currentUse
         html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
 
         /* Modern Block & Card Design System */
-        .fociz-card {
+        .fociz-card, .fociz-card-interactive {
             background: rgba(255, 255, 255, 0.95);
             border: 1px solid rgba(226, 232, 240, 0.9);
             box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
@@ -102,7 +102,7 @@ $currentUserTheme = !empty($currentUser['id']) ? get_user_theme((int)$currentUse
             backdrop-filter: blur(12px);
             transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
         }
-        html.dark .fociz-card {
+        html.dark .fociz-card, html.dark .fociz-card-interactive {
             background: rgba(17, 22, 34, 0.88);
             border: 1px solid rgba(30, 41, 59, 0.7);
             box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
diff --git a/profile.php b/profile.php
index 2f3ec5f..8ad60ad 100644
--- a/profile.php
+++ b/profile.php
@@ -223,7 +223,7 @@ require_once __DIR__ . '/includes/header.php';
 
 <div class="space-y-8 max-w-5xl mx-auto pb-12">
     <!-- Profiel Header Card -->
-    <div class="relative overflow-hidden bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-6 sm:p-8 shadow-xs transition">
+    <div class="relative overflow-hidden fociz-card p-6 sm:p-8">
         <div class="absolute -top-20 -right-20 w-72 h-72 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none"></div>
 
         <div class="relative z-10 flex flex-col sm:flex-row sm:items-center justify-between gap-6">
@@ -236,7 +236,7 @@ require_once __DIR__ . '/includes/header.php';
 
                 <div class="space-y-1">
                     <div class="flex flex-wrap items-center gap-2">
-                        <h1 class="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white tracking-tight">
+                        <h1 class="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white tracking-tight">
                             <?= htmlspecialchars($userProfile['name']) ?>
                         </h1>
                         <?php if ($userProfile['role'] === 'ADMIN'): ?>
@@ -285,7 +285,7 @@ require_once __DIR__ . '/includes/header.php';
     <?php endif; ?>
 
     <!-- Sectie 0: Weergave & Thema Instellingen (Dark & Light mode) -->
-    <div class="bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-6 sm:p-7 shadow-xs transition">
+    <div class="fociz-card p-6 sm:p-7">
         <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-6 border-b border-slate-100 dark:border-slate-800/80">
             <div class="flex items-center space-x-3.5">
                 <div class="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 font-bold shadow-xs">
@@ -420,7 +420,7 @@ require_once __DIR__ . '/includes/header.php';
     </div>
 
     <!-- Sectie 1: Mijn Microsoft 365 Outlook Agenda -->
-    <div class="bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-6 sm:p-7 shadow-xs transition">
+    <div class="fociz-card p-6 sm:p-7">
         <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-slate-100 dark:border-slate-800/80">
             <div class="flex items-center space-x-3.5">
                 <div class="w-12 h-12 rounded-2xl bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 flex items-center justify-center text-sky-600 dark:text-sky-400 font-bold shadow-xs">
@@ -553,7 +553,7 @@ require_once __DIR__ . '/includes/header.php';
     </div>
 
     <!-- Sectie 2: Mijn Atlassian Jira Koppeling -->
-    <div class="bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-6 sm:p-7 shadow-xs transition">
+    <div class="fociz-card p-6 sm:p-7">
         <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-slate-100 dark:border-slate-800/80">
             <div class="flex items-center space-x-3.5">
                 <div class="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 font-bold shadow-xs">
@@ -642,7 +642,7 @@ require_once __DIR__ . '/includes/header.php';
     </div>
 
     <!-- Sectie 3: Mijn Meldingen & Agenda Push Notificaties -->
-    <div class="bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-6 sm:p-7 shadow-xs transition">
+    <div class="fociz-card p-6 sm:p-7">
         <div class="flex items-center space-x-3.5 pb-6 border-b border-slate-100 dark:border-slate-800/80">
             <div class="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 font-bold shadow-xs">
                 <i data-lucide="bell" class="w-6 h-6"></i>
@@ -790,7 +790,7 @@ require_once __DIR__ . '/includes/header.php';
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <!-- Profielnaam formulier -->
-            <div class="bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-6 sm:p-7 shadow-xs space-y-4 transition">
+            <div class="fociz-card p-6 sm:p-7 space-y-4">
                 <div class="flex items-center space-x-3 pb-4 border-b border-slate-100 dark:border-slate-800/80">
                     <i data-lucide="user" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
                     <h3 class="text-sm font-bold text-slate-900 dark:text-white">Persoonlijke Gegevens</h3>
@@ -803,14 +803,14 @@ require_once __DIR__ . '/includes/header.php';
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
                         Weergavenaam
                     </label>
-                    <input type="text" name="name" required value="<?= htmlspecialchars($userProfile['name']) ?>" class="w-full bg-white dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <input type="text" name="name" required value="<?= htmlspecialchars($userProfile['name']) ?>" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                 </div>
 
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
                         E-mailadres
                     </label>
-                    <input type="email" readonly disabled value="<?= htmlspecialchars($userProfile['email']) ?>" class="w-full bg-slate-100/70 dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800/60 rounded-xl px-3.5 py-2.5 text-xs text-slate-500 cursor-not-allowed">
+                    <input type="email" readonly disabled value="<?= htmlspecialchars($userProfile['email']) ?>" class="w-full bg-slate-100/70 dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800/60 rounded-xl px-3.5 py-2.5 text-xs text-slate-500 cursor-not-allowed shadow-2xs">
                     <span class="text-[10px] text-slate-500 mt-1 block">E-mailadres is gekoppeld aan uw account en 2FA.</span>
                 </div>
 
@@ -823,7 +823,7 @@ require_once __DIR__ . '/includes/header.php';
         </div>
 
         <!-- Wachtwoord Wijzigen Formulier -->
-        <div class="bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-6 sm:p-7 shadow-xs space-y-4 transition">
+        <div class="fociz-card p-6 sm:p-7 space-y-4">
             <div class="flex items-center space-x-3 pb-4 border-b border-slate-100 dark:border-slate-800/80">
                 <i data-lucide="key" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
                 <h3 class="text-sm font-bold text-slate-900 dark:text-white">Wachtwoord Wijzigen</h3>
diff --git a/roadmap.php b/roadmap.php
index 81ac70f..8412c62 100644
--- a/roadmap.php
+++ b/roadmap.php
@@ -37,35 +37,35 @@ $quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
 
 <div class="space-y-6 max-w-7xl mx-auto">
     <!-- Header -->
-    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-6 sm:p-7 shadow-xs transition">
+    <div class="fociz-card p-6 sm:p-7 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <div>
-            <div class="flex items-center space-x-2 text-indigo-600 dark:text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-1">
+            <div class="flex items-center space-x-2 text-indigo-600 dark:text-indigo-400 text-xs font-bold uppercase tracking-wider mb-1">
                 <i data-lucide="map" class="w-4 h-4"></i>
                 <span>Planning & Strategie</span>
             </div>
-            <h1 class="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white tracking-tight">
+            <h1 class="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white tracking-tight">
                 Roadmap & Tijdlijn
             </h1>
-            <p class="text-slate-500 dark:text-slate-400 text-xs sm:text-sm mt-1">
+            <p class="text-slate-500 dark:text-slate-400 text-xs sm:text-sm mt-1 max-w-2xl">
                 Centraal overzicht van alle mijlpalen, features en doelen, direct voortgekomen uit brainstorms en gesynchroniseerd met Jira.
             </p>
         </div>
 
-        <button onclick="document.getElementById('newItemModal').classList.remove('hidden')" class="flex items-center space-x-2 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold transition shadow-xs flex-shrink-0 cursor-pointer">
+        <button onclick="document.getElementById('newItemModal').classList.remove('hidden')" class="flex items-center space-x-2 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold transition shadow-xs flex-shrink-0 cursor-pointer">
             <i data-lucide="plus" class="w-4 h-4"></i>
             <span>Nieuw Item</span>
         </button>
     </div>
 
     <!-- Filters: Quarters & Status -->
-    <div class="flex flex-wrap items-center justify-between gap-3 bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-4 shadow-xs transition">
+    <div class="fociz-card p-4 flex flex-wrap items-center justify-between gap-3">
         <!-- Quarter Tabs -->
         <div class="flex items-center space-x-1 text-xs">
-            <a href="/roadmap.php?quarter=ALL&status=<?= htmlspecialchars($selectedStatus) ?>" class="px-3 py-1.5 rounded-lg transition font-medium <?= $selectedQuarter === 'ALL' ? 'bg-indigo-600 text-white shadow-xs' : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800' ?>">
+            <a href="/roadmap.php?quarter=ALL&status=<?= htmlspecialchars($selectedStatus) ?>" class="px-3 py-1.5 rounded-lg transition font-semibold <?= $selectedQuarter === 'ALL' ? 'bg-indigo-600 text-white shadow-xs' : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800/80' ?>">
                 Alle Quarters
             </a>
             <?php foreach ($quarters as $q): ?>
-                <a href="/roadmap.php?quarter=<?= $q ?>&status=<?= htmlspecialchars($selectedStatus) ?>" class="px-3 py-1.5 rounded-lg transition font-medium <?= $selectedQuarter === $q ? 'bg-indigo-600 text-white shadow-xs' : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800' ?>">
+                <a href="/roadmap.php?quarter=<?= $q ?>&status=<?= htmlspecialchars($selectedStatus) ?>" class="px-3 py-1.5 rounded-lg transition font-semibold <?= $selectedQuarter === $q ? 'bg-indigo-600 text-white shadow-xs' : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800/80' ?>">
                     <?= $q ?>
                 </a>
             <?php endforeach; ?>
@@ -73,8 +73,8 @@ $quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
 
         <!-- Status Filter -->
         <div class="flex items-center space-x-2 text-xs">
-            <span class="text-slate-500 dark:text-slate-400 font-medium">Status:</span>
-            <select onchange="window.location.href='/roadmap.php?quarter=<?= htmlspecialchars($selectedQuarter) ?>&status='+this.value" class="bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-2.5 py-1 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">
+            <span class="text-slate-500 dark:text-slate-400 font-semibold">Status:</span>
+            <select onchange="window.location.href='/roadmap.php?quarter=<?= htmlspecialchars($selectedQuarter) ?>&status='+this.value" class="bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-1.5 text-slate-900 dark:text-white text-xs font-semibold focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                 <option value="ALL" <?= $selectedStatus === 'ALL' ? 'selected' : '' ?>>Alle Statussen</option>
                 <option value="PLANNED" <?= $selectedStatus === 'PLANNED' ? 'selected' : '' ?>>Gepland</option>
                 <option value="IN_PROGRESS" <?= $selectedStatus === 'IN_PROGRESS' ? 'selected' : '' ?>>In Uitvoering</option>
@@ -87,27 +87,34 @@ $quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
     <!-- Roadmap Items Lijst -->
     <div class="space-y-4">
         <?php if (empty($roadmapItems)): ?>
-            <div class="bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 rounded-2xl p-12 text-center shadow-xs">
+            <div class="fociz-card p-12 text-center">
                 <i data-lucide="map-pin" class="w-12 h-12 text-slate-300 dark:text-slate-700 mx-auto mb-3"></i>
-                <h3 class="text-base font-semibold text-slate-900 dark:text-white">Geen items gevonden op de roadmap</h3>
+                <h3 class="text-base font-bold text-slate-900 dark:text-white">Geen items gevonden op de roadmap</h3>
                 <p class="text-xs text-slate-500 dark:text-slate-400 mt-1 max-w-sm mx-auto">
                     Ga naar een <a href="/brainstorm.php" class="text-indigo-600 dark:text-indigo-400 underline font-medium">Brainstorm sessie</a> en zet ideeën met één klik om naar de roadmap, of voeg handmatig een item toe.
                 </p>
             </div>
         <?php else: ?>
-            <?php foreach ($roadmapItems as $item): ?>
-                <div class="bg-white dark:bg-[#111622] border border-slate-200/80 dark:border-slate-800 hover:border-indigo-300 dark:hover:border-indigo-700/60 rounded-2xl p-5 shadow-xs transition space-y-3" id="roadmap-item-<?= $item['id'] ?>">
+            <?php foreach ($roadmapItems as $item): 
+                $statusBorder = match($item['status']) {
+                    'COMPLETED' => 'border-l-4 border-l-emerald-500',
+                    'IN_PROGRESS' => 'border-l-4 border-l-indigo-500',
+                    'REVIEW' => 'border-l-4 border-l-amber-500',
+                    default => 'border-l-4 border-l-slate-300 dark:border-l-slate-700',
+                };
+            ?>
+                <div class="fociz-card-interactive p-5 space-y-3.5 <?= $statusBorder ?>" id="roadmap-item-<?= $item['id'] ?>">
                     
                     <!-- Top header van item -->
                     <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                         <div class="flex items-center space-x-2.5 flex-wrap">
                             <!-- Quarter badge -->
-                            <span class="px-2.5 py-0.5 rounded-md bg-indigo-50 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-300 font-mono text-xs font-semibold border border-indigo-200 dark:border-indigo-500/20">
+                            <span class="px-2.5 py-0.5 rounded-lg bg-indigo-50 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-300 font-mono text-xs font-bold border border-indigo-200 dark:border-indigo-500/20">
                                 <?= htmlspecialchars($item['quarter']) ?>
                             </span>
 
                             <!-- Type badge -->
-                            <span class="px-2 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-[10px] font-semibold">
+                            <span class="px-2 py-0.5 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-[10px] font-semibold border border-slate-200 dark:border-slate-700">
                                 <?= htmlspecialchars($item['type']) ?>
                             </span>
 
@@ -118,7 +125,7 @@ $quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
 
                             <!-- Jira Issue Key link -->
                             <?php if (!empty($item['jira_issue_key'])): ?>
-                                <a href="/profile.php" class="flex items-center space-x-1 px-2 py-0.5 rounded-md bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 text-sky-700 dark:text-sky-400 text-[10px] font-mono hover:underline">
+                                <a href="/profile.php" class="flex items-center space-x-1 px-2.5 py-0.5 rounded-lg bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 text-sky-700 dark:text-sky-400 text-[10px] font-mono hover:underline">
                                     <i data-lucide="layers" class="w-3 h-3"></i>
                                     <span><?= htmlspecialchars($item['jira_issue_key']) ?></span>
                                 </a>
@@ -127,7 +134,7 @@ $quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
 
                         <!-- Status Selector -->
                         <div class="flex items-center space-x-2">
-                            <select onchange="updateRoadmapStatus(<?= $item['id'] ?>, this.value)" class="bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-2.5 py-1 text-xs text-slate-800 dark:text-slate-200 font-semibold focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                            <select onchange="updateRoadmapStatus(<?= $item['id'] ?>, this.value)" class="bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-200 dark:border-slate-800 rounded-xl px-2.5 py-1 text-xs text-slate-800 dark:text-slate-200 font-bold focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                                 <option value="PLANNED" <?= $item['status'] === 'PLANNED' ? 'selected' : '' ?>>⏳ Gepland</option>
                                 <option value="IN_PROGRESS" <?= $item['status'] === 'IN_PROGRESS' ? 'selected' : '' ?>>⚡ In Uitvoering</option>
                                 <option value="REVIEW" <?= $item['status'] === 'REVIEW' ? 'selected' : '' ?>>🔍 In Review</option>
@@ -154,32 +161,32 @@ $quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
 
                     <!-- Origin Brainstorm snippet -->
                     <?php if (!empty($item['origin_brainstorm_card_id'])): ?>
-                        <div class="bg-slate-50 dark:bg-slate-900/60 rounded-xl p-2.5 text-[11px] text-slate-500 dark:text-slate-400 flex items-center space-x-2 border border-slate-200/80 dark:border-slate-800">
+                        <div class="bg-slate-50/70 dark:bg-[#0c0f17]/60 rounded-xl p-2.5 text-[11px] text-slate-600 dark:text-slate-400 flex items-center space-x-2 border border-slate-200/80 dark:border-slate-800">
                             <i data-lucide="lightbulb" class="w-3.5 h-3.5 text-amber-500 flex-shrink-0"></i>
                             <span class="truncate">Ontstaan uit brainstormsessie</span>
                         </div>
                     <?php endif; ?>
 
                     <!-- Voortgangsbalk & Deadline -->
-                    <div class="pt-2 border-t border-slate-100 dark:border-slate-800/60 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs">
+                    <div class="pt-2.5 border-t border-slate-100 dark:border-slate-800/60 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs">
                         <!-- Progress Slider -->
                         <div class="flex items-center space-x-3 flex-1 max-w-md">
-                            <span class="text-slate-500 dark:text-slate-400 text-[11px] font-medium w-16">Voortgang:</span>
-                            <div class="flex-1 bg-slate-100 dark:bg-slate-900 h-2 rounded-full overflow-hidden border border-slate-200 dark:border-slate-800">
+                            <span class="text-slate-500 dark:text-slate-400 text-[11px] font-semibold w-16">Voortgang:</span>
+                            <div class="flex-1 bg-slate-100 dark:bg-slate-900 h-2.5 rounded-full overflow-hidden border border-slate-200 dark:border-slate-800">
                                 <div class="bg-gradient-to-r from-indigo-600 to-sky-500 h-full transition-all" style="width: <?= $item['progress'] ?>%"></div>
                             </div>
-                            <span class="font-mono text-slate-800 dark:text-slate-200 font-semibold w-10 text-right"><?= $item['progress'] ?>%</span>
+                            <span class="font-mono text-slate-800 dark:text-slate-200 font-bold w-10 text-right"><?= $item['progress'] ?>%</span>
                             <div class="flex space-x-1">
-                                <button onclick="updateRoadmapProgress(<?= $item['id'] ?>, 25)" class="px-1.5 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-[10px] text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white cursor-pointer">25%</button>
-                                <button onclick="updateRoadmapProgress(<?= $item['id'] ?>, 50)" class="px-1.5 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-[10px] text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white cursor-pointer">50%</button>
-                                <button onclick="updateRoadmapProgress(<?= $item['id'] ?>, 100)" class="px-1.5 py-0.5 rounded bg-indigo-50 dark:bg-indigo-500/15 text-[10px] text-indigo-700 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 font-semibold cursor-pointer">100%</button>
+                                <button onclick="updateRoadmapProgress(<?= $item['id'] ?>, 25)" class="px-2 py-0.5 rounded-lg bg-slate-100 dark:bg-slate-800 text-[10px] text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white cursor-pointer font-semibold transition">25%</button>
+                                <button onclick="updateRoadmapProgress(<?= $item['id'] ?>, 50)" class="px-2 py-0.5 rounded-lg bg-slate-100 dark:bg-slate-800 text-[10px] text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white cursor-pointer font-semibold transition">50%</button>
+                                <button onclick="updateRoadmapProgress(<?= $item['id'] ?>, 100)" class="px-2 py-0.5 rounded-lg bg-indigo-50 dark:bg-indigo-500/15 text-[10px] text-indigo-700 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 font-bold cursor-pointer transition">100%</button>
                             </div>
                         </div>
 
                         <!-- Deadline & Creator -->
                         <div class="flex items-center space-x-3 text-slate-500 text-[11px]">
                             <?php if (!empty($item['due_date'])): ?>
-                                <span class="flex items-center space-x-1 text-slate-700 dark:text-slate-300 font-medium">
+                                <span class="flex items-center space-x-1 text-slate-700 dark:text-slate-300 font-semibold">
                                     <i data-lucide="calendar" class="w-3.5 h-3.5 text-indigo-600 dark:text-indigo-400"></i>
                                     <span>Deadline: <?= date('d-m-Y', strtotime($item['due_date'])) ?></span>
                                 </span>
@@ -194,33 +201,33 @@ $quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
 </div>
 
 <!-- Modal: Nieuw Roadmap Item Handmatig Toevoegen -->
-<div id="newItemModal" class="hidden fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-xs flex items-center justify-center p-4">
-    <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-xl max-w-lg w-full transition">
-        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100 dark:border-slate-800">
-            <h3 class="text-sm font-semibold text-slate-900 dark:text-white flex items-center space-x-2">
+<div id="newItemModal" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fociz-card p-6 sm:p-7 shadow-2xl max-w-lg w-full space-y-4">
+        <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
+            <h3 class="text-sm font-bold text-slate-900 dark:text-white flex items-center space-x-2">
                 <i data-lucide="map" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
                 <span>Nieuw Roadmap Item Toevoegen</span>
             </h3>
-            <button onclick="document.getElementById('newItemModal').classList.add('hidden')" class="text-slate-400 hover:text-slate-600 dark:hover:text-white cursor-pointer">
-                <i data-lucide="x" class="w-5 h-5"></i>
+            <button onclick="document.getElementById('newItemModal').classList.add('hidden')" class="p-1.5 text-slate-400 hover:text-slate-600 dark:hover:text-white rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer">
+                <i data-lucide="x" class="w-4 h-4"></i>
             </button>
         </div>
 
         <div class="space-y-4">
             <div>
                 <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Titel / Doel</label>
-                <input type="text" id="manualTitle" placeholder="Bijv. 2FA Authenticatie afronden" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3.5 py-2 text-slate-900 dark:text-white text-xs placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                <input type="text" id="manualTitle" placeholder="Bijv. 2FA Authenticatie afronden" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3.5 py-2 text-slate-900 dark:text-white text-xs placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
             </div>
 
             <div>
                 <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Beschrijving / Specificatie</label>
-                <textarea id="manualDescription" rows="3" placeholder="Wat houdt deze milestone of feature in?" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl p-3 text-slate-900 dark:text-white text-xs placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 resize-none"></textarea>
+                <textarea id="manualDescription" rows="3" placeholder="Wat houdt deze milestone of feature in?" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl p-3 text-slate-900 dark:text-white text-xs placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 resize-none shadow-2xs"></textarea>
             </div>
 
             <div class="grid grid-cols-2 gap-3">
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Kwartaal</label>
-                    <select id="manualQuarter" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <select id="manualQuarter" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                         <option value="Q1">Q1</option>
                         <option value="Q2">Q2</option>
                         <option value="Q3" selected>Q3</option>
@@ -229,7 +236,7 @@ $quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
                 </div>
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Type</label>
-                    <select id="manualType" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <select id="manualType" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                         <option value="FEATURE" selected>Feature</option>
                         <option value="EPIC">Epic</option>
                         <option value="MILESTONE">Mijlpaal</option>
@@ -241,7 +248,7 @@ $quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
             <div class="grid grid-cols-2 gap-3">
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Prioriteit</label>
-                    <select id="manualPriority" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <select id="manualPriority" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-2 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                         <option value="CRITICAL">Kritiek</option>
                         <option value="HIGH" selected>Hoog</option>
                         <option value="MEDIUM">Normaal</option>
@@ -250,23 +257,23 @@ $quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
                 </div>
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Jira Issue Key (optioneel)</label>
-                    <input type="text" id="manualJiraKey" placeholder="Bijv. FOC-101" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-1.5 text-slate-900 dark:text-white text-xs font-mono focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <input type="text" id="manualJiraKey" placeholder="Bijv. FOC-101" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-1.5 text-slate-900 dark:text-white text-xs font-mono focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                 </div>
             </div>
 
             <div>
                 <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Streefdatum</label>
-                <input type="date" id="manualDueDate" class="w-full bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-1.5 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                <input type="date" id="manualDueDate" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-1.5 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
             </div>
 
-            <div class="flex space-x-2 pt-2">
-                <button onclick="submitManualItem()" class="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2.5 px-4 rounded-xl text-xs transition cursor-pointer shadow-xs">
+            <div class="flex space-x-2 pt-2 border-t border-slate-100 dark:border-slate-800/80">
+                <button onclick="submitManualItem()" class="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2.5 px-4 rounded-xl text-xs transition cursor-pointer shadow-xs">
                     Toevoegen aan Roadmap
                 </button>
-                <button onclick="document.getElementById('newItemModal').classList.add('hidden')" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-xs transition cursor-pointer">
+                <button onclick="document.getElementById('newItemModal').classList.add('hidden')" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-xs font-semibold transition cursor-pointer">
                     Annuleren
                 </button>
-            </div>
+        </div>
     </div>
 </div>
 
diff --git a/users.php b/users.php
index f64d725..e601a69 100644
--- a/users.php
+++ b/users.php
@@ -71,7 +71,7 @@ require_once __DIR__ . '/includes/header.php';
 
 <div class="space-y-6 max-w-7xl mx-auto pb-12">
     <!-- Header -->
-    <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-7 shadow-xs transition">
+    <div class="fociz-card p-6 sm:p-7">
         <div class="flex items-center space-x-2 text-indigo-600 dark:text-indigo-400 text-xs font-bold uppercase tracking-wider mb-1">
             <i data-lucide="shield" class="w-4 h-4"></i>
             <span>Beheerderspaneel</span>
@@ -79,7 +79,7 @@ require_once __DIR__ . '/includes/header.php';
         <h1 class="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white tracking-tight">
             Team & Uitnodigingen
         </h1>
-        <p class="text-slate-500 dark:text-slate-400 text-xs sm:text-sm mt-1">
+        <p class="text-slate-500 dark:text-slate-400 text-xs sm:text-sm mt-1 max-w-2xl">
             Fociz is strikt afgesloten: nieuwe collega's kunnen enkel toegang krijgen na het ontvangen van een uitnodigingslink en verplichte 2FA-activatie.
         </p>
     </div>
@@ -111,7 +111,7 @@ require_once __DIR__ . '/includes/header.php';
     <?php endif; ?>
 
     <!-- Uitnodiging Genereren Kaart -->
-    <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-7 shadow-xs transition">
+    <div class="fociz-card p-6 sm:p-7">
         <h3 class="text-base font-bold text-slate-900 dark:text-white mb-4 flex items-center space-x-2">
             <i data-lucide="user-plus" class="w-5 h-5 text-indigo-600 dark:text-indigo-400"></i>
             <span>Nieuwe Collega Uitnodigen</span>
@@ -122,12 +122,12 @@ require_once __DIR__ . '/includes/header.php';
 
             <div class="md:col-span-6">
                 <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">E-mailadres van collega</label>
-                <input type="email" name="email" required placeholder="collega@bedrijf.nl" class="w-full bg-slate-50 dark:bg-[#0c0f17] border border-slate-300 dark:border-slate-800 rounded-xl px-4 py-2.5 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 text-xs">
+                <input type="email" name="email" required placeholder="collega@bedrijf.nl" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-4 py-2.5 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 text-xs shadow-2xs">
             </div>
 
             <div class="md:col-span-3">
                 <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Rol</label>
-                <select name="role" class="w-full bg-slate-50 dark:bg-[#0c0f17] border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-2.5 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                <select name="role" class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3 py-2.5 text-slate-900 dark:text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                     <option value="MEMBER">Collega (Standaard)</option>
                     <option value="ADMIN">Mede-beheerder</option>
                 </select>
@@ -143,7 +143,7 @@ require_once __DIR__ . '/includes/header.php';
     </div>
 
     <!-- Actieve Gebruikers Tabel -->
-    <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-7 shadow-xs space-y-4 transition">
+    <div class="fociz-card p-6 sm:p-7 space-y-4">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
             <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider flex items-center space-x-2">
                 <i data-lucide="users" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
@@ -200,7 +200,7 @@ require_once __DIR__ . '/includes/header.php';
     </div>
 
     <!-- Uitstaande Uitnodigingen Tabel -->
-    <div class="bg-white dark:bg-[#111622] border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 sm:p-7 shadow-xs space-y-4 transition">
+    <div class="fociz-card p-6 sm:p-7 space-y-4">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
             <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider flex items-center space-x-2">
                 <i data-lucide="mail" class="w-4 h-4 text-amber-500"></i>