diff --git a/board.php b/board.php
index 5413c3e..33787fa 100644
--- a/board.php
+++ b/board.php
@@ -22,54 +22,61 @@ $isAdmin = ($userRole === 'ADMIN');
     width: 100% !important;
 }
 
-/* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */
+/* --- Strakke, Moderne & Professionele Post-it Sticky Note Styling --- */
 .postit-note {
     position: relative;
-    border-radius: 2px 2px 0 2px;
+    border-radius: 6px;
     box-shadow: 
-        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 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);
+        0 1px 2px rgba(0, 0, 0, 0.04),
+        0 4px 10px -2px rgba(0, 0, 0, 0.08),
+        0 12px 20px -4px rgba(0, 0, 0, 0.06);
+    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
-/* De echte opkrullende flap rechtsonder rechtstreeks uit de referentieafbeelding */
-.postit-note::after {
+.postit-note:hover {
+    transform: translateY(-3px);
+    box-shadow: 
+        0 3px 6px rgba(0, 0, 0, 0.06),
+        0 8px 18px -2px rgba(0, 0, 0, 0.12),
+        0 16px 28px -4px rgba(0, 0, 0, 0.10);
+}
+
+/* Strakke, semi-transparante plakstrip (tape) bovenaan het briefje */
+.postit-note::before {
     content: '';
     position: absolute;
-    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;
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 54px;
+    height: 13px;
+    background: rgba(255, 255, 255, 0.65);
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    backdrop-filter: blur(2px);
+    border-radius: 2px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     pointer-events: none;
     z-index: 10;
 }
 
-/* 3D Rode Punaise (Pushpin) linksboven rechtstreeks uit de referentieafbeelding */
-.postit-pin {
+.dark .postit-note::before {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+/* Subtiele plakrand glans bovenaan de post-it zelf */
+.postit-note::after {
+    content: '';
     position: absolute;
-    top: -15px;
-    left: 18px;
-    width: 36px;
-    height: 31px;
-    background-image: url('/assets/images/postit_pin.png');
-    background-size: contain;
-    background-repeat: no-repeat;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
     pointer-events: none;
-    z-index: 25;
 }
 </style>
 
@@ -842,9 +849,6 @@ 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 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">
                             ${escapeHtml(card.title)}
diff --git a/brainstorm_canvas.php b/brainstorm_canvas.php
index fe62d26..8003163 100644
--- a/brainstorm_canvas.php
+++ b/brainstorm_canvas.php
@@ -87,54 +87,62 @@ $categories = [
 ?>
 
 <style>
-/* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */
+/* --- Strakke, Moderne & Professionele Post-it Sticky Note Styling --- */
 .postit-note {
     position: relative;
-    border-radius: 2px 2px 0 2px;
+    border-radius: 6px;
+    /* Natuurlijke, strakke papieren diepteschaduw */
     box-shadow: 
-        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 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);
+        0 1px 2px rgba(0, 0, 0, 0.04),
+        0 4px 10px -2px rgba(0, 0, 0, 0.08),
+        0 12px 20px -4px rgba(0, 0, 0, 0.06);
+    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
-/* De echte opkrullende flap rechtsonder rechtstreeks uit de referentieafbeelding */
-.postit-note::after {
+.postit-note:hover {
+    transform: translateY(-3px);
+    box-shadow: 
+        0 3px 6px rgba(0, 0, 0, 0.06),
+        0 8px 18px -2px rgba(0, 0, 0, 0.12),
+        0 16px 28px -4px rgba(0, 0, 0, 0.10);
+}
+
+/* Strakke, semi-transparante plakstrip (tape) bovenaan het briefje */
+.postit-note::before {
     content: '';
     position: absolute;
-    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;
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 14px;
+    background: rgba(255, 255, 255, 0.65);
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    backdrop-filter: blur(2px);
+    border-radius: 2px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     pointer-events: none;
     z-index: 10;
 }
 
-/* 3D Rode Punaise (Pushpin) linksboven rechtstreeks uit de referentieafbeelding */
-.postit-pin {
+.dark .postit-note::before {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+/* Subtiele plakrand glans bovenaan de post-it zelf */
+.postit-note::after {
+    content: '';
     position: absolute;
-    top: -16px;
-    left: 22px;
-    width: 38px;
-    height: 33px;
-    background-image: url('/assets/images/postit_pin.png');
-    background-size: contain;
-    background-repeat: no-repeat;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
     pointer-events: none;
-    z-index: 25;
 }
 </style>
 
@@ -237,9 +245,6 @@ $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"
                             >
-                                <!-- 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">
                                     <label class="inline-flex items-center space-x-2 cursor-pointer select-none">