diff --git a/index.html b/index.html
index f09922a..3729a12 100644
--- a/index.html
+++ b/index.html
@@ -101,90 +101,101 @@
         </p>
     </div>
 
-    <!-- Initiatives -->
-    <h2 id="initiatives" class="text-3xl font-bold mt-16 mb-8 text-white">Current Initiatives</h2>
-    <div class="grid md:grid-cols-3 gap-6 auto-rows-fr">
+<!-- Initiatives – larger bullet icons + Join Hub card on the side -->
+<section id="initiatives" class="py-10 sm:py-12">
+  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
 
-        <!-- 1 SME -->
-        <div class="neo-card rounded-xl overflow-hidden glow-border">
-            <img src="SMESecurity.png" alt="SME Security" class="w-full h-auto object-contain rounded-t-xl">
-            <div class="p-6">
-                <h3 class="text-lg font-semibold mb-2 text-white">SME Security Acceleration Program</h3>
-                <p class="text-gray-400 text-sm">Supporting small and medium organizations in adopting secure communication, governance, and operational protection with minimal complexity and sustainable cost.</p>
+    <h2 class="text-3xl font-bold mb-8 text-white text-center">Current Initiatives</h2>
+
+    <!-- 2-column grid: left = bullet list, right = Join Hub card -->
+    <div class="grid md:grid-cols-3 gap-6">
+
+      <!-- LEFT: single rounded box with larger bullet initiatives -->
+      <div class="md:col-span-2 neo-card rounded-xl p-6 glow-border">
+        <ul class="space-y-3 text-sm text-gray-300">
+          <!-- 1 SME -->
+          <li class="flex items-start space-x-3">
+            <img src="SMESecurity.png" alt="SME" class="w-10 h-10 rounded object-contain mt-0.5">
+            <div>
+              <span class="font-semibold text-white">SME Security Acceleration Program</span>
+              <p>Supporting small and medium organizations in adopting secure communication, governance, and operational protection with minimal complexity and sustainable cost.</p>
             </div>
-        </div>
+          </li>
 
-<!-- 2  CTA: Join the Hub (first row, second box) -->
-<div class="neo-card rounded-xl overflow-hidden glow-border relative group
-            bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-blue-600/10
-            border border-blue-400/30 hover:border-blue-300
-            shadow-lg shadow-blue-500/20 hover:shadow-blue-400/40
-            transition-all duration-300">
-    <!-- radiant top bar -->
-    <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-blue-400 via-purple-400 to-blue-400
-              group-hover:from-blue-300 group-hover:via-white group-hover:to-blue-300
-              blur-sm group-hover:blur-md transition-all duration-300"></div>
+          <!-- 2 Critical Infrastructure -->
+          <li class="flex items-start space-x-3">
+            <img src="Criticalnfraestructure.png" alt="Critical" class="w-10 h-10 rounded object-contain mt-0.5">
+            <div>
+              <span class="font-semibold text-white">Critical Infrastructure Readiness Track</span>
+              <p>Assisting operators in improving compliance, incident-response capability, and resilience to targeted threats.</p>
+            </div>
+          </li>
 
-    <!-- image stays exactly as the other cards -->
-    <img src="jointhehub.png" alt="Join the Hub" class="w-full h-auto object-contain rounded-t-xl">
+          <!-- 3 Research & Innovation -->
+          <li class="flex items-start space-x-3">
+            <img src="Research&Innovation.png" alt="R&I" class="w-10 h-10 rounded object-contain mt-0.5">
+            <div>
+              <span class="font-semibold text-white">Research & Innovation Collaboration</span>
+              <p>Partnerships with universities, R&D hubs, and innovators to develop new methodologies, prototypes, and sovereign technologies.</p>
+            </div>
+          </li>
 
-    <!-- text block moved up with less padding -->
-    <div class="p-3 text-center -mt-11">   <!-- -mt-2 lifts the whole text block closer to the image -->
-        <h3 class="text-base font-bold mb-1 bg-gradient-to-r from-blue-300 via-white to-purple-300
-                   bg-clip-text text-transparent drop-shadow-[0_0_5px_rgba(123,211,255,.6)]
-                   group-hover:drop-shadow-[0_0_8px_rgba(255,255,255,.9)] transition-all duration-300">
+          <!-- 4 Civil Society -->
+          <li class="flex items-start space-x-3">
+            <img src="CivilSociety&Activist.png" alt="Civil" class="w-10 h-10 rounded object-contain mt-0.5">
+            <div>
+              <span class="font-semibold text-white">Civil Society & Activist Protection Initiative</span>
+              <p>Providing secure communication platforms, privacy-preserving infrastructure, and threat-awareness programs for journalists, NGOs, and advocacy groups.</p>
+            </div>
+          </li>
+
+          <!-- 5 Open Source -->
+          <li class="flex items-start space-x-3">
+            <img src="OpenSource&CommunityContributions.png" alt="OS" class="w-10 h-10 rounded object-contain mt-0.5">
+            <div>
+              <span class="font-semibold text-white">Open Source & Community Contributions</span>
+              <p>Maintaining tooling, documentation, and threat-intelligence artifacts available to the wider community as part of the cooperative security model.</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <!-- RIGHT: Join the Hub card (kept exactly as you have it) -->
+      <div class="neo-card rounded-xl overflow-hidden glow-border relative group
+                  bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-blue-600/10
+                  border border-blue-400/30 hover:border-blue-300
+                  shadow-lg shadow-blue-500/20 hover:shadow-blue-400/50
+                  transition-all duration-300">
+        <!-- radiant top bar (unchanged) -->
+        <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-blue-400 via-purple-400 to-blue-400
+                    group-hover:from-blue-300 group-hover:via-white group-hover:to-blue-300
+                    blur-sm group-hover:blur-md transition-all duration-300"></div>
+
+        <img src="jointhehub.png" alt="Join the Hub" class="w-full h-auto object-contain rounded-t-xl">
+
+        <div class="p-3 text-center -mt-11">
+          <h3 class="text-base font-bold mb-1 bg-gradient-to-r from-blue-300 via-white to-purple-300
+                     bg-clip-text text-transparent drop-shadow-[0_0_5px_rgba(123,211,255,.6)]
+                     group-hover:drop-shadow-[0_0_8px_rgba(255,255,255,.9)] transition-all duration-300">
             Join the Hub
-        </h3>
-        <p class="text-xs text-gray-300 mb-2">CyPSec Hub Initiative</p>
-        <p class="text-xs text-gray-400 leading-snug mb-2">
+          </h3>
+          <p class="text-xs text-gray-300 mb-2">CyPSec Hub Initiative</p>
+          <p class="text-xs text-gray-400 leading-snug mb-2">
             Join our collaborative space for professionals, students & researchers strengthening cyber resilience.
-        </p>
-        <a href="#join" class="inline-flex items-center justify-center px-3 py-1 text-xs rounded-md
-                               bg-gradient-to-r from-blue-500 to-purple-600
-                               hover:from-blue-400 hover:to-purple-500
-                               text-white font-semibold tracking-wide
-                               shadow shadow-blue-500/30 hover:shadow-purple-400/50
-                               transition-all duration-300">
+          </p>
+          <a href="#join" class="inline-flex items-center justify-center px-3 py-1 text-xs rounded-md
+                                 bg-gradient-to-r from-blue-500 to-purple-600
+                                 hover:from-blue-400 hover:to-purple-500
+                                 text-white font-semibold tracking-wide
+                                 shadow shadow-blue-500/30 hover:shadow-purple-400/50
+                                 transition-all duration-300">
             Get Started
-        </a>
-    </div>
-</div>
-        <!-- 3 Critical Infrastructure -->
-        <div class="neo-card rounded-xl overflow-hidden glow-border">
-            <img src="Criticalnfraestructure.png" alt="Critical Infrastructure" class="w-full h-auto object-contain rounded-t-xl">
-            <div class="p-6">
-                <h3 class="text-lg font-semibold mb-2 text-white">Critical Infrastructure Readiness Track</h3>
-                <p class="text-gray-400 text-sm">Assisting operators in improving compliance, incident-response capability, and resilience to targeted threats.</p>
-            </div>
-        </div>
-
-        <!-- 4 Research & Innovation -->
-        <div class="neo-card rounded-xl overflow-hidden glow-border">
-            <img src="Research&Innovation.png" alt="Research & Innovation" class="w-full h-auto object-contain rounded-t-xl">
-            <div class="p-6">
-                <h3 class="text-lg font-semibold mb-2 text-white">Research & Innovation Collaboration</h3>
-                <p class="text-gray-400 text-sm">Partnerships with universities, R&D hubs, and innovators to develop new methodologies, prototypes, and sovereign technologies.</p>
-            </div>
-        </div>
-
-        <!-- 5 Civil Society -->
-        <div class="neo-card rounded-xl overflow-hidden glow-border">
-            <img src="CivilSociety&Activist.png" alt="Civil Society & Activist" class="w-full h-auto object-contain rounded-t-xl">
-            <div class="p-6">
-                <h3 class="text-lg font-semibold mb-2 text-white">Civil Society & Activist Protection Initiative</h3>
-                <p class="text-gray-400 text-sm">Providing secure communication platforms, privacy-preserving infrastructure, and threat-awareness programs for journalists, NGOs, and advocacy groups.</p>
-            </div>
-        </div>
-
-        <!-- 6 Open Source -->
-        <div class="neo-card rounded-xl overflow-hidden glow-border">
-            <img src="OpenSource&CommunityContributions.png" alt="Open Source & Community" class="w-full h-auto object-contain rounded-t-xl">
-            <div class="p-6">
-                <h3 class="text-lg font-semibold mb-2 text-white">Open Source & Community Contributions</h3>
-                <p class="text-gray-400 text-sm">Maintaining tooling, documentation, and threat-intelligence artifacts available to the wider community as part of the cooperative security model.</p>
-            </div>
-        </div>
+          </a>
+        </div>
+      </div>
     </div>
+  </div>
+</section>
 
     <!-- Goals -->
     <h2 id="goals" class="text-3xl font-bold mt-16 mb-8 text-white">Goals of the Security Hub</h2>
@@ -244,18 +255,206 @@
             </div>
         </div>
     </section>
+<!-- Participation Benefits – fade-in explanation (no flip) -->
+<section class="py-10 sm:py-12">
+  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
 
-    <!-- Participation Benefits -->
-    <h2 class="text-3xl font-bold mt-16 mb-6 text-white">Participation Benefits</h2>
-    <ul class="list-disc list-inside space-y-2 text-gray-300">
-        <li>Access to secure communication infrastructure</li>
-        <li>Mentorship and guidance from cybersecurity experts</li>
-        <li>Threat intelligence and situational awareness updates</li>
-        <li>Workshops, training sessions, and community events</li>
-        <li>Support for funding and innovation projects</li>
-        <li>Collaborative prototypes and joint initiatives</li>
+    <div class="text-center mb-8">
+      <h2 class="text-3xl md:text-4xl font-bold text-white">Participation Benefits</h2>
+      <div class="flex justify-center items-center mt-6">
+        <span class="w-32 h-1 bg-gradient-to-r from-transparent via-slate-600 to-transparent rounded-full"></span>
+        <span class="w-4 h-1 mx-2 bg-slate-500 rounded-full"></span>
+        <span class="w-2 h-1 bg-slate-400 rounded-full"></span>
+        <span class="w-6 h-1 mx-2 bg-gradient-to-r from-slate-400 to-slate-500 rounded-full"></span>
+        <span class="w-2 h-1 bg-slate-500 rounded-full"></span>
+        <span class="w-4 h-1 mx-2 bg-slate-600 rounded-full"></span>
+        <span class="w-32 h-1 bg-gradient-to-r from-transparent via-slate-600 to-transparent rounded-full"></span>
+      </div>
+    </div>
+         <p class="text-lg text-blue-300 leading-relaxed justify-center">
+    Click to find your participation of interest!
+    </p>
+    <!-- hidden store -->
+    <ul id="benefits-store" class="hidden">
+      <li>Access to secure communication infrastructure</li>
+      <li>Mentorship and guidance from cybersecurity experts</li>
+      <li>Threat intelligence and situational awareness updates</li>
+      <li>Workshops, training sessions, and community events</li>
+      <li>Support for funding and innovation projects</li>
+      <li>Collaborative prototypes and joint initiatives</li>
     </ul>
 
+    <!-- rounded outer frame -->
+    <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#0B1220] via-[#111827] to-[#1E293B] p-6 md:p-8">
+      <!-- circuit pattern -->
+      <div class="absolute inset-0 opacity-10 pointer-events-none">
+        <svg class="w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
+          <defs>
+            <pattern id="circuit-dark" width="20" height="20" patternUnits="userSpaceOnUse">
+              <path d="M0 10h20M10 0v20" stroke="#334155" stroke-width=".5" fill="none"/>
+              <circle cx="10" cy="10" r="1" fill="#334155"/>
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" fill="url(#circuit-dark)"/>
+        </svg>
+      </div>
+
+      <!-- binary rain -->
+      <div class="absolute inset-0 opacity-5 text-[#0ea5e9] text-xs md:text-sm font-mono overflow-hidden pointer-events-none">
+        <div class="binary-rain">01001001 01101110 01110100 01100101 01101100 01101100 01101001 01100111 01100101 01101110 01100011 01100101</div>
+      </div>
+
+      <!-- fade-cards grid -->
+      <div class="relative grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        <!-- Card 1 -->
+        <div class="fade-card group" data-index="0">
+          <div class="fade-card-inner rounded-2xl overflow-hidden relative">
+            <!-- FRONT (icon + title) -->
+            <div class="fade-card-front p-5 bg-slate-900/60 backdrop-blur-sm border border-slate-700/40 hover:border-sky-700/60 transition-all duration-300 flex flex-col items-center justify-center text-center h-48">
+              <svg class="w-10 h-10 text-sky-600 group-hover:text-sky-400 transition-colors mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
+              <h3 class="text-base font-semibold text-white">Secure Comms</h3>
+            </div>
+            <!-- EXPLANATION (fades in) -->
+            <div class="fade-card-explanation absolute inset-0 p-5 bg-slate-800/70 backdrop-blur-sm border border-sky-700/60 flex items-center justify-center text-center opacity-0 transition-opacity duration-500">
+              <p class="text-slate-200 text-sm">Access to secure communication infrastructure</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Card 2 -->
+        <div class="fade-card group" data-index="1">
+          <div class="fade-card-inner rounded-2xl overflow-hidden relative">
+            <div class="fade-card-front p-5 bg-slate-900/60 backdrop-blur-sm border border-slate-700/40 hover:border-sky-700/60 transition-all duration-300 flex flex-col items-center justify-center text-center h-48">
+              <svg class="w-10 h-10 text-sky-600 group-hover:text-sky-400 transition-colors mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
+              <h3 class="text-base font-semibold text-white">Expert Mentorship</h3>
+            </div>
+            <div class="fade-card-explanation absolute inset-0 p-5 bg-slate-800/70 backdrop-blur-sm border border-sky-700/60 flex items-center justify-center text-center opacity-0 transition-opacity duration-500">
+              <p class="text-slate-200 text-sm">Mentorship and guidance from cybersecurity experts</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Card 3 -->
+        <div class="fade-card group" data-index="2">
+          <div class="fade-card-inner rounded-2xl overflow-hidden relative">
+            <div class="fade-card-front p-5 bg-slate-900/60 backdrop-blur-sm border border-slate-700/40 hover:border-sky-700/60 transition-all duration-300 flex flex-col items-center justify-center text-center h-48">
+              <svg class="w-10 h-10 text-sky-600 group-hover:text-sky-400 transition-colors mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
+              <h3 class="text-base font-semibold text-white">Threat Intel</h3>
+            </div>
+            <div class="fade-card-explanation absolute inset-0 p-5 bg-slate-800/70 backdrop-blur-sm border border-sky-700/60 flex items-center justify-center text-center opacity-0 transition-opacity duration-500">
+              <p class="text-slate-200 text-sm">Threat intelligence and situational awareness updates</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Card 4 -->
+        <div class="fade-card group" data-index="3">
+          <div class="fade-card-inner rounded-2xl overflow-hidden relative">
+            <div class="fade-card-front p-5 bg-slate-900/60 backdrop-blur-sm border border-slate-700/40 hover:border-sky-700/60 transition-all duration-300 flex flex-col items-center justify-center text-center h-48">
+              <svg class="w-10 h-10 text-sky-600 group-hover:text-sky-400 transition-colors mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
+              <h3 class="text-base font-semibold text-white">Workshops</h3>
+            </div>
+            <div class="fade-card-explanation absolute inset-0 p-5 bg-slate-800/70 backdrop-blur-sm border border-sky-700/60 flex items-center justify-center text-center opacity-0 transition-opacity duration-500">
+              <p class="text-slate-200 text-sm">Workshops, training sessions, and community events</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Card 5 -->
+        <div class="fade-card group" data-index="4">
+          <div class="fade-card-inner rounded-2xl overflow-hidden relative">
+            <div class="fade-card-front p-5 bg-slate-900/60 backdrop-blur-sm border border-slate-700/40 hover:border-sky-700/60 transition-all duration-300 flex flex-col items-center justify-center text-center h-48">
+              <svg class="w-10 h-10 text-sky-600 group-hover:text-sky-400 transition-colors mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+              <h3 class="text-base font-semibold text-white">Funding</h3>
+            </div>
+            <div class="fade-card-explanation absolute inset-0 p-5 bg-slate-800/70 backdrop-blur-sm border border-sky-700/60 flex items-center justify-center text-center opacity-0 transition-opacity duration-500">
+              <p class="text-slate-200 text-sm">Support for funding and innovation projects</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Card 6 -->
+        <div class="fade-card group" data-index="5">
+          <div class="fade-card-inner rounded-2xl overflow-hidden relative">
+            <div class="fade-card-front p-5 bg-slate-900/60 backdrop-blur-sm border border-slate-700/40 hover:border-sky-700/60 transition-all duration-300 flex flex-col items-center justify-center text-center h-48">
+              <svg class="w-10 h-10 text-sky-600 group-hover:text-sky-400 transition-colors mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
+              <h3 class="text-base font-semibold text-white">Innovation</h3>
+            </div>
+            <div class="fade-card-explanation absolute inset-0 p-5 bg-slate-800/70 backdrop-blur-sm border border-sky-700/60 flex items-center justify-center text-center opacity-0 transition-opacity duration-500">
+              <p class="text-slate-200 text-sm">Collaborative prototypes and joint initiatives</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+/* ======  FADE-IN mechanics  ====== */
+.fade-card {
+  cursor: pointer;
+}
+.fade-card-inner {
+  position: relative;
+}
+.fade-card-explanation {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  pointer-events: none;   /* lets clicks pass through */
+}
+.fade-card.active .fade-card-explanation {
+  opacity: 1;
+}
+
+/* hover glow (same as your cards) */
+.group:hover .fade-card-front {
+  border-color: #0ea5e9;
+  box-shadow: 0 0 24px -4px rgba(14, 165, 233, 0.5);
+  transform: translateY(-4px);
+}
+
+/* binary rain (your existing animation) */
+.binary-rain {
+  white-space: nowrap;
+  animation: binaryScroll 25s linear infinite;
+}
+@keyframes binaryScroll {
+  0%   { transform: translateY(-100%); }
+  100% { transform: translateY(100%); }
+}
+</style>
+
+<script>
+const store   = document.querySelectorAll('#benefits-store li');
+const cards   = document.querySelectorAll('.fade-card');
+
+let returnTimers = new Map();          // one timer per card
+
+cards.forEach(card => {
+  const idx   = card.dataset.index;
+  const expl  = card.querySelector('.fade-card-explanation');
+
+  // click → fade in explanation
+  card.addEventListener('click', () => {
+    clearTimeout(returnTimers.get(card));
+    card.classList.add('active');
+    expl.style.opacity = '1';
+
+    // auto-return after 10 s
+    const t = setTimeout(() => {
+      card.classList.remove('active');
+      expl.style.opacity = '0';
+      returnTimers.delete(card);
+    }, 10000);
+
+    returnTimers.set(card, t);
+  });
+});
+</script>
+ 
     <!-- Vision -->
     <h2 class="text-3xl font-bold mt-16 mb-6 text-white">Vision</h2>
     <p class="text-lg text-gray-300 leading-relaxed">