diff --git a/assets/images/postit_curl_corner.png b/assets/images/postit_curl_corner.png
new file mode 100644
index 0000000..4fe3825
Binary files /dev/null and b/assets/images/postit_curl_corner.png differ
diff --git a/assets/images/postit_pin.png b/assets/images/postit_pin.png
new file mode 100644
index 0000000..0d390fe
Binary files /dev/null and b/assets/images/postit_pin.png differ
diff --git a/assets/images/postit_real.png b/assets/images/postit_real.png
new file mode 100644
index 0000000..ab25c24
Binary files /dev/null and b/assets/images/postit_real.png differ
diff --git a/assets/postit_raw.png b/assets/postit_raw.png
new file mode 100644
index 0000000..0fa922f
Binary files /dev/null and b/assets/postit_raw.png differ
diff --git a/assets/postit_real.png b/assets/postit_real.png
new file mode 100644
index 0000000..e53e0c2
Binary files /dev/null and b/assets/postit_real.png differ
diff --git a/board.php b/board.php
index efda77f..5413c3e 100644
--- a/board.php
+++ b/board.php
@@ -25,59 +25,51 @@ $isAdmin = ($userRole === 'ADMIN');
 /* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */
 .postit-note {
     position: relative;
-    border-radius: 2px;
-    /* Uitgesproken, zachte schaduw zoals in referentie */
+    border-radius: 2px 2px 0 2px;
     box-shadow: 
-        0 2px 4px rgba(0, 0, 0, 0.06),
-        0 8px 16px -2px rgba(0, 0, 0, 0.12),
-        0 18px 28px -6px rgba(0, 0, 0, 0.14),
-        8px 16px 20px -4px rgba(0, 0, 0, 0.18);
+        0 1px 3px rgba(0, 0, 0, 0.05),
+        0 6px 14px -2px rgba(0, 0, 0, 0.10),
+        0 16px 26px -6px rgba(0, 0, 0, 0.12),
+        6px 14px 18px -4px rgba(0, 0, 0, 0.15);
     transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
 }
 .postit-note:hover {
     transform: translateY(-3px) rotate(-0.5deg);
     box-shadow: 
-        0 4px 8px rgba(0, 0, 0, 0.08),
-        0 12px 22px -3px rgba(0, 0, 0, 0.16),
-        0 24px 34px -6px rgba(0, 0, 0, 0.18),
-        10px 20px 24px -4px rgba(0, 0, 0, 0.22);
+        0 3px 6px rgba(0, 0, 0, 0.08),
+        0 10px 20px -3px rgba(0, 0, 0, 0.14),
+        0 22px 32px -6px rgba(0, 0, 0, 0.16),
+        8px 18px 22px -4px rgba(0, 0, 0, 0.20);
 }
 
-/* De opkrullende flap rechtsonder met realistische 3D vouw en diepe slagschaduw */
+/* De echte opkrullende flap rechtsonder rechtstreeks uit de referentieafbeelding */
 .postit-note::after {
     content: '';
     position: absolute;
-    bottom: -1px;
-    right: -1px;
-    width: 34px;
-    height: 34px;
-    background: 
-        linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.28) 60%, transparent 68%),
-        linear-gradient(225deg, #fef08a 0%, #facc15 48%, transparent 52%);
-    border-bottom-right-radius: 2px;
+    bottom: -18px;
+    right: -16px;
+    width: 60px;
+    height: 52px;
+    background-image: url('/assets/images/postit_curl_corner.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom right;
     pointer-events: none;
     z-index: 10;
-    box-shadow: 5px 5px 10px -2px rgba(0, 0, 0, 0.3);
-    clip-path: polygon(100% 0, 0 100%, 100% 100%);
 }
 
-.dark .postit-note::after {
-    background: 
-        linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.45) 60%, transparent 68%),
-        linear-gradient(225deg, #eab308 0%, #ca8a04 48%, transparent 52%);
-    box-shadow: 5px 5px 12px -2px rgba(0, 0, 0, 0.6);
-}
-
-/* 3D Rode Punaise (Pushpin) linksboven met naald en schaduw conform de afbeelding */
+/* 3D Rode Punaise (Pushpin) linksboven rechtstreeks uit de referentieafbeelding */
 .postit-pin {
     position: absolute;
-    top: -10px;
-    left: 20px;
-    width: 22px;
-    height: 22px;
+    top: -15px;
+    left: 18px;
+    width: 36px;
+    height: 31px;
+    background-image: url('/assets/images/postit_pin.png');
+    background-size: contain;
+    background-repeat: no-repeat;
     pointer-events: none;
     z-index: 25;
-    filter: drop-shadow(3px 5px 3px rgba(0, 0, 0, 0.35));
 }
 </style>
 
@@ -850,36 +842,8 @@ function renderCards() {
                     oncontextmenu="openBoardCardContextMenu(event, ${card.id}); return false;"
                     class="group/card relative p-3 rounded-xl border ${colorClass} shadow-2xs hover:shadow-md hover:-translate-y-0.5 transition cursor-grab active:cursor-grabbing mb-2.5 postit-note"
                 >
-                    <!-- Realistische 3D Rode Punaise conform referentie linksboven -->
-                    <div class="postit-pin" aria-hidden="true">
-                        <svg viewBox="0 0 28 32" class="w-full h-full overflow-visible">
-                            <defs>
-                                <radialGradient id="boardPinHeadGrad" cx="35%" cy="30%" r="65%">
-                                    <stop offset="0%" stop-color="#ff8585"/>
-                                    <stop offset="35%" stop-color="#dc2626"/>
-                                    <stop offset="85%" stop-color="#991b1b"/>
-                                    <stop offset="100%" stop-color="#5a0b0b"/>
-                                </radialGradient>
-                                <linearGradient id="boardPinBodyGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-                                    <stop offset="0%" stop-color="#b91c1c"/>
-                                    <stop offset="40%" stop-color="#ef4444"/>
-                                    <stop offset="80%" stop-color="#991b1b"/>
-                                    <stop offset="100%" stop-color="#7f1d1d"/>
-                                </linearGradient>
-                                <linearGradient id="boardPinHighlight" x1="0%" y1="0%" x2="100%" y2="100%">
-                                    <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
-                                    <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
-                                </linearGradient>
-                            </defs>
-                            <path d="M14 20 L21 30" stroke="#71717a" stroke-width="2.5" stroke-linecap="round"/>
-                            <path d="M14 20 L20.5 29.5" stroke="#e4e4e7" stroke-width="1.2" stroke-linecap="round"/>
-                            <ellipse cx="14" cy="19" rx="7" ry="2.8" fill="#7f1d1d"/>
-                            <ellipse cx="14" cy="18" rx="6.5" ry="2.5" fill="url(#boardPinBodyGrad)"/>
-                            <path d="M9 14 C9 17, 10 18.5, 14 18.5 C18 18.5, 19 17, 19 14 Z" fill="url(#boardPinBodyGrad)"/>
-                            <circle cx="14" cy="11" r="7.5" fill="url(#boardPinHeadGrad)"/>
-                            <ellipse cx="11.5" cy="8.5" rx="3" ry="1.8" fill="url(#boardPinHighlight)" transform="rotate(-30 11.5 8.5)"/>
-                        </svg>
-                    </div>
+                    <!-- Realistische Rode Punaise rechtstreeks uit referentieafbeelding -->
+                    <div class="postit-pin" aria-hidden="true"></div>
 
                     <div class="flex items-start justify-between gap-1.5 mb-1.5">
                         <h4 class="text-xs font-bold leading-snug line-clamp-2 break-words">
diff --git a/brainstorm_canvas.php b/brainstorm_canvas.php
index d90c570..fe62d26 100644
--- a/brainstorm_canvas.php
+++ b/brainstorm_canvas.php
@@ -90,61 +90,51 @@ $categories = [
 /* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */
 .postit-note {
     position: relative;
-    border-radius: 2px 2px 2px 2px;
-    /* Uitgesproken, zachte schaduw zoals in referentie */
+    border-radius: 2px 2px 0 2px;
     box-shadow: 
-        0 2px 4px rgba(0, 0, 0, 0.06),
-        0 8px 16px -2px rgba(0, 0, 0, 0.12),
-        0 18px 28px -6px rgba(0, 0, 0, 0.14),
-        8px 16px 20px -4px rgba(0, 0, 0, 0.18);
+        0 1px 3px rgba(0, 0, 0, 0.05),
+        0 6px 14px -2px rgba(0, 0, 0, 0.10),
+        0 16px 26px -6px rgba(0, 0, 0, 0.12),
+        6px 14px 18px -4px rgba(0, 0, 0, 0.15);
     transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
 }
 .postit-note:hover {
     transform: translateY(-3px) rotate(-0.5deg);
     box-shadow: 
-        0 4px 8px rgba(0, 0, 0, 0.08),
-        0 12px 22px -3px rgba(0, 0, 0, 0.16),
-        0 24px 34px -6px rgba(0, 0, 0, 0.18),
-        10px 20px 24px -4px rgba(0, 0, 0, 0.22);
+        0 3px 6px rgba(0, 0, 0, 0.08),
+        0 10px 20px -3px rgba(0, 0, 0, 0.14),
+        0 22px 32px -6px rgba(0, 0, 0, 0.16),
+        8px 18px 22px -4px rgba(0, 0, 0, 0.20);
 }
 
-/* De opkrullende flap rechtsonder met realistische 3D vouw en diepe slagschaduw */
+/* De echte opkrullende flap rechtsonder rechtstreeks uit de referentieafbeelding */
 .postit-note::after {
     content: '';
     position: absolute;
-    bottom: -1px;
-    right: -1px;
-    width: 38px;
-    height: 38px;
-    /* Subtiel opkrullend effect met highlight en slagschaduw */
-    background: 
-        linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.28) 60%, transparent 68%),
-        linear-gradient(225deg, #fef08a 0%, #facc15 48%, transparent 52%);
-    border-bottom-right-radius: 2px;
+    bottom: -18px;
+    right: -16px;
+    width: 64px;
+    height: 56px;
+    background-image: url('/assets/images/postit_curl_corner.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom right;
     pointer-events: none;
     z-index: 10;
-    box-shadow: 6px 6px 12px -2px rgba(0, 0, 0, 0.3);
-    clip-path: polygon(100% 0, 0 100%, 100% 100%);
 }
 
-/* Donkere modus aanpassing voor de opkrulflap */
-.dark .postit-note::after {
-    background: 
-        linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.45) 60%, transparent 68%),
-        linear-gradient(225deg, #eab308 0%, #ca8a04 48%, transparent 52%);
-    box-shadow: 6px 6px 14px -2px rgba(0, 0, 0, 0.6);
-}
-
-/* 3D Rode Punaise (Pushpin) linksboven met naald en schaduw conform de afbeelding */
+/* 3D Rode Punaise (Pushpin) linksboven rechtstreeks uit de referentieafbeelding */
 .postit-pin {
     position: absolute;
-    top: -12px;
-    left: 28px;
-    width: 24px;
-    height: 24px;
+    top: -16px;
+    left: 22px;
+    width: 38px;
+    height: 33px;
+    background-image: url('/assets/images/postit_pin.png');
+    background-size: contain;
+    background-repeat: no-repeat;
     pointer-events: none;
     z-index: 25;
-    filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.35));
 }
 </style>
 
@@ -247,51 +237,8 @@ $categories = [
                                 oncontextmenu="openCardContextMenu(event, <?= $cardJson ?>); return false;"
                                 class="brainstorm-card postit-note group relative p-4 border <?= $catConfig['border'] ?> <?= $catConfig['bg'] ?> transition-all duration-150 cursor-grab active:cursor-grabbing hover:-translate-y-1 flex flex-col justify-between"
                             >
-                                <!-- Realistische 3D Rode Punaise (Pushpin) met metalen pin & schaduw conform referentie linksboven -->
-                                <div class="postit-pin" aria-hidden="true">
-                                    <svg viewBox="0 0 28 32" class="w-full h-full overflow-visible">
-                                        <defs>
-                                            <!-- Schaduw van de naald op het papier -->
-                                            <filter id="pinNeedleShadow" x="-20%" y="-20%" width="160%" height="160%">
-                                                <feDropShadow dx="3" dy="4" stdDeviation="1.5" flood-opacity="0.35"/>
-                                            </filter>
-                                            <!-- Radiaal verloop voor de bolle kop van de punaise -->
-                                            <radialGradient id="pinHeadGrad" cx="35%" cy="30%" r="65%">
-                                                <stop offset="0%" stop-color="#ff8585"/>
-                                                <stop offset="35%" stop-color="#dc2626"/>
-                                                <stop offset="85%" stop-color="#991b1b"/>
-                                                <stop offset="100%" stop-color="#5a0b0b"/>
-                                            </radialGradient>
-                                            <!-- Verloop voor de hals en basis ring van de punaise -->
-                                            <linearGradient id="pinBodyGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-                                                <stop offset="0%" stop-color="#b91c1c"/>
-                                                <stop offset="40%" stop-color="#ef4444"/>
-                                                <stop offset="80%" stop-color="#991b1b"/>
-                                                <stop offset="100%" stop-color="#7f1d1d"/>
-                                            </linearGradient>
-                                            <!-- Glans highlight op de kop -->
-                                            <linearGradient id="pinHighlight" x1="0%" y1="0%" x2="100%" y2="100%">
-                                                <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
-                                                <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
-                                            </linearGradient>
-                                        </defs>
-                                        <!-- Metalen naald die schuin in het papier prikt -->
-                                        <path d="M14 20 L21 30" stroke="#71717a" stroke-width="2.5" stroke-linecap="round" filter="url(#pinNeedleShadow)"/>
-                                        <path d="M14 20 L20.5 29.5" stroke="#e4e4e7" stroke-width="1.2" stroke-linecap="round"/>
-                                        
-                                        <!-- Onderste rand / ring van de punaisekop -->
-                                        <ellipse cx="14" cy="19" rx="7" ry="2.8" fill="#7f1d1d"/>
-                                        <ellipse cx="14" cy="18" rx="6.5" ry="2.5" fill="url(#pinBodyGrad)"/>
-                                        
-                                        <!-- Getailleerde taille / hals van de punaise -->
-                                        <path d="M9 14 C9 17, 10 18.5, 14 18.5 C18 18.5, 19 17, 19 14 Z" fill="url(#pinBodyGrad)"/>
-                                        
-                                        <!-- Bolle kop van de punaise (rood met 3D glans) -->
-                                        <circle cx="14" cy="11" r="7.5" fill="url(#pinHeadGrad)"/>
-                                        <!-- Reflectie highlight linksboven op de ronde kop -->
-                                        <ellipse cx="11.5" cy="8.5" rx="3" ry="1.8" fill="url(#pinHighlight)" transform="rotate(-30 11.5 8.5)"/>
-                                    </svg>
-                                </div>
+                                <!-- Echte Rode Punaise rechtstreeks uit referentieafbeelding -->
+                                <div class="postit-pin" aria-hidden="true"></div>
                                 
                                 <!-- Top: Checkbox voor selectie + Roadmap badge -->
                                 <div class="flex items-center justify-between gap-2 mb-2">