diff --git a/CivilSociety&Activist.png b/CivilSociety&Activist.png
new file mode 100644
index 0000000..d09d550
Binary files /dev/null and b/CivilSociety&Activist.png differ
diff --git a/Criticalnfraestructure.png b/Criticalnfraestructure.png
new file mode 100644
index 0000000..9f1b281
Binary files /dev/null and b/Criticalnfraestructure.png differ
diff --git a/OpenSource&CommunityContributions.png b/OpenSource&CommunityContributions.png
new file mode 100644
index 0000000..e16effc
Binary files /dev/null and b/OpenSource&CommunityContributions.png differ
diff --git a/Research&Innovation.png b/Research&Innovation.png
new file mode 100644
index 0000000..6ced715
Binary files /dev/null and b/Research&Innovation.png differ
diff --git a/SMESecurity.png b/SMESecurity.png
new file mode 100644
index 0000000..6094208
Binary files /dev/null and b/SMESecurity.png differ
diff --git a/index.html b/index.html
index b405bc2..f09922a 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <title>Security Hub Initiatives – CypSec</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="https://cdn.tailwindcss.com "></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css ">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
             --cyp-dark: #0a0a0a;
@@ -56,25 +56,21 @@
 </head>
 <body class="bg-black text-white">
 
-<!-- ---------------  NAV (borrowed from your home-page) --------------- -->
-<body class="bg-black text-white">
-    <div class="min-h-screen">
-        <!-- Navigation Bar - CypSec Centered with Logo -->
-        <nav class="border-b border-gray-800 bg-black">
-            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="flex justify-center items-center h-16">
-                    <img src="cypsec-logo-white-transparent.webp" alt="CypSec" class="h-7 w-auto mr-2">
-                    <span class="text-2xl font-mono text-white">CypSec</span>
-                </div>
-            </div>
-        </nav>      
-</header>
+<!-- ---------------  NAV --------------- -->
+<nav class="border-b border-gray-800 bg-black">
+    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-center items-center h-16">
+            <img src="cypsec-logo-white-transparent.webp" alt="CypSec" class="h-7 w-auto mr-2">
+            <span class="text-2xl font-mono text-white">CypSec</span>
+        </div>
+    </div>
+</nav>
 
 <!-- ---------------  HERO --------------- -->
 <section class="relative py-24 overflow-hidden">
     <div class="container mx-auto px-6 text-center">
         <h1 class="text-4xl lg:text-6xl font-semibold leading-tight">
-            Security <span class="text-blue-500">Hub</span> Iniciative
+            Security <span class="text-blue-500">Hub</span> Initiative
         </h1>
         <p class="text-lg mt-6 max-w-2xl mx-auto text-gray-300">
             Building Cyber Resilience Together.
@@ -86,14 +82,13 @@
         </div>
     </div>
 
-    <!-- subtle background glow -->
     <div class="absolute inset-0 -z-10 opacity-20 pointer-events-none">
         <div class="bg-gradient-to-r from-purple-500 to-blue-600 rounded-full w-96 h-96 blur-3xl mx-auto"></div>
     </div>
 </section>
 
-<!-- ---------------  ARTICLE --------------- -->
-<main class="container mx-auto px-6 pb-20 max-w-5xl">
+<!-- ---------------  MAIN CONTENT --------------- -->
+<main class="max-w-5xl mx-auto px-6 pb-20">
 
     <div class="text-lg text-gray-300 leading-relaxed space-y-6">
         <p>
@@ -108,61 +103,86 @@
 
     <!-- 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">
-        <!-- 1 -->
-        <div class="neo-card rounded-xl p-6 glow-border">
-            <div class="flex items-center mb-4">
-                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500/20 to-blue-600/20 flex items-center justify-center">
-                    <i class="fas fa-rocket text-white"></i>
-                </div>
-                <span class="ml-3 text-sm font-semibold text-gray-400">01</span>
+    <div class="grid md:grid-cols-3 gap-6 auto-rows-fr">
+
+        <!-- 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>
             </div>
-            <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>
         </div>
-        <!-- 2 -->
-        <div class="neo-card rounded-xl p-6 glow-border">
-            <div class="flex items-center mb-4">
-                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500/20 to-purple-600/20 flex items-center justify-center">
-                    <i class="fas fa-shield-alt text-white"></i>
-                </div>
-                <span class="ml-3 text-sm font-semibold text-gray-400">02</span>
+
+<!-- 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>
+
+    <!-- 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">
+
+    <!-- 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">
+            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">
+            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">
+            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>
-            <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>
-        <!-- 3 -->
-        <div class="neo-card rounded-xl p-6 glow-border">
-            <div class="flex items-center mb-4">
-                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-green-500/20 to-green-600/20 flex items-center justify-center">
-                    <i class="fas fa-industry text-white"></i>
-                </div>
-                <span class="ml-3 text-sm font-semibold text-gray-400">03</span>
+
+        <!-- 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>
-            <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>
-        <!-- 4 -->
-        <div class="neo-card rounded-xl p-6 glow-border">
-            <div class="flex items-center mb-4">
-                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-orange-500/20 to-orange-600/20 flex items-center justify-center">
-                    <i class="fas fa-microscope text-white"></i>
-                </div>
-                <span class="ml-3 text-sm font-semibold text-gray-400">04</span>
+
+        <!-- 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>
-            <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>
-        <!-- 5 -->
-        <div class="neo-card rounded-xl p-6 glow-border">
-            <div class="flex items-center mb-4">
-                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-gray-500/20 to-slate-500/20 flex items-center justify-center">
-                    <i class="fas fa-code-branch text-white"></i>
-                </div>
-                <span class="ml-3 text-sm font-semibold text-gray-400">05</span>
+
+        <!-- 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>
-            <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>
 
@@ -180,16 +200,50 @@
         </ul>
     </div>
 
-    <!-- Who Can Join -->
-    <h2 id="join" class="text-3xl font-bold mt-16 mb-6 text-white">Who Can Join</h2>
-    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 text-gray-300">
-        <div class="neo-card rounded-lg p-4"><i class="fas fa-building text-blue-400 mr-2"></i>SMEs and startups</div>
-        <div class="neo-card rounded-lg p-4"><i class="fas fa-hands-helping text-blue-400 mr-2"></i>NGOs, journalists, human-rights groups</div>
-        <div class="neo-card rounded-lg p-4"><i class="fas fa-landmark text-blue-400 mr-2"></i>Public institutions and municipalities</div>
-        <div class="neo-card rounded-lg p-4"><i class="fas fa-server text-blue-400 mr-2"></i>Critical infrastructure providers</div>
-        <div class="neo-card rounded-lg p-4"><i class="fas fa-university text-blue-400 mr-2"></i>Universities, researchers, academic labs</div>
-        <div class="neo-card rounded-lg p-4"><i class="fas fa-rocket text-blue-400 mr-2"></i>Innovation and impact accelerators</div>
-    </div>
+    <!-- Who Benefits -->
+    <section class="mt-16">
+        <h2 class="text-2xl font-bold mb-6 text-white flex items-center">
+            <span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
+            Who Benefits
+        </h2>
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div class="neo-card rounded-xl p-4 glow-border group">
+                <div class="flex items-center space-x-3 mb-3">
+                    <div class="w-10 h-10 bg-gradient-to-br from-blue-500/20 to-blue-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform"><span class="text-blue-400 font-bold text-lg">🏢</span></div>
+                    <h4 class="text-sm font-semibold text-white">SMEs</h4>
+                </div>
+                <p class="text-sm text-gray-300">Preparing for their first cyber insurance policy with structured guidance</p>
+            </div>
+            <div class="neo-card rounded-xl p-4 glow-border group">
+                <div class="flex items-center space-x-3 mb-3">
+                    <div class="w-10 h-10 bg-gradient-to-br from-purple-500/20 to-purple-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform"><span class="text-purple-400 font-bold text-lg">🏭</span></div>
+                    <h4 class="text-sm font-semibold text-white">Enterprises</h4>
+                </div>
+                <p class="text-sm text-gray-300">Complex infrastructures and high liability exposure requiring comprehensive coverage</p>
+            </div>
+            <div class="neo-card rounded-xl p-4 glow-border group">
+                <div class="flex items-center space-x-3 mb-3">
+                    <div class="w-10 h-10 bg-gradient-to-br from-green-500/20 to-green-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform"><span class="text-green-400 font-bold text-lg">🏛</span></div>
+                    <h4 class="text-sm font-semibold text-white">Critical Infrastructure</h4>
+                </div>
+                <p class="text-sm text-gray-300">Public institutions requiring specialized insurance strategies</p>
+            </div>
+            <div class="neo-card rounded-xl p-4 glow-border group">
+                <div class="flex items-center space-x-3 mb-3">
+                    <div class="w-10 h-10 bg-gradient-to-br from-orange-500/20 to-orange-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform"><span class="text-orange-400 font-bold text-lg">🤝</span></div>
+                    <h4 class="text-sm font-semibold text-white">Service Providers</h4>
+                </div>
+                <p class="text-sm text-gray-300">Contractual security obligations and client requirements</p>
+            </div>
+            <div class="neo-card rounded-xl p-4 glow-border group md:col-span-2 lg:col-span-1">
+                <div class="flex items-center space-x-3 mb-3">
+                    <div class="w-10 h-10 bg-gradient-to-br from-teal-500/20 to-teal-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform"><span class="text-teal-400 font-bold text-lg">💰</span></div>
+                    <h4 class="text-sm font-semibold text-white">Cost Optimizers</h4>
+                </div>
+                <p class="text-sm text-gray-300">Any organization seeking premium optimization and better coverage terms</p>
+            </div>
+        </div>
+    </section>
 
     <!-- Participation Benefits -->
     <h2 class="text-3xl font-bold mt-16 mb-6 text-white">Participation Benefits</h2>
@@ -218,17 +272,18 @@
             </a>
         </div>
     </section>
-
 </main>
 
-<!-- ---------------  FOOTER (borrowed from your home-page) --------------- -->
-<footer class="container mx-auto px-6 py-8 mt-16 border-t border-gray-800 text-gray-400 text-sm">
-    <div class="flex flex-col md:flex-row justify-between items-center">
-        <p>© 2025 CypSec Group</p>
-        <div class="flex space-x-4 mt-4 md:mt-0">
-            <a href="/company/data-privacy" class="hover:text-white">Data Privacy</a>
-            <a href="/company/terms-of-service" class="hover:text-white">Terms</a>
-            <a href="/company/imprint" class="hover:text-white">Imprint</a>
+<!-- ---------------  FOOTER --------------- -->
+<footer class="border-t border-gray-800 bg-black">
+    <div class="max-w-6xl mx-auto px-6 py-8 text-gray-400 text-sm">
+        <div class="flex flex-col md:flex-row justify-between items-center">
+            <p>© 2025 CypSec Group</p>
+            <div class="flex space-x-4 mt-4 md:mt-0">
+                <a href="/company/data-privacy" class="hover:text-white">Data Privacy</a>
+                <a href="/company/terms-of-service" class="hover:text-white">Terms</a>
+                <a href="/company/imprint" class="hover:text-white">Imprint</a>
+            </div>
         </div>
     </div>
 </footer>
diff --git a/jointhehub.png b/jointhehub.png
new file mode 100644
index 0000000..d7bcc6a
Binary files /dev/null and b/jointhehub.png differ
