diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7a58cfa3..3bf82676 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [[2.3.18]](https://github.com/nubenetes/awesome-kubernetes/releases/tag/v2.3.18) - 2026-05-27
+
+### Added
+- **4-Card Hero Dashboard**: Expanded the V2 homepage header from two to four interactive dashboard cards, adding entry points for "AI & MCP Agents" (with custom purple glow) and "Agentic Video Hub" (with custom pink glow). Improved visual layout structure and updated all card links to point directly to `.html` destinations to prevent 404 compilation target errors.
+
 ## [[2.3.17]](https://github.com/nubenetes/awesome-kubernetes/releases/tag/v2.3.17) - 2026-05-27
 
 ### Changed
diff --git a/docs/images/ai_agents_logo.png b/docs/images/ai_agents_logo.png
new file mode 100644
index 00000000..1968d8c7
Binary files /dev/null and b/docs/images/ai_agents_logo.png differ
diff --git a/docs/images/video_hub_logo.png b/docs/images/video_hub_logo.png
new file mode 100644
index 00000000..9922a509
Binary files /dev/null and b/docs/images/video_hub_logo.png differ
diff --git a/docs/static/v2_elite.css b/docs/static/v2_elite.css
index 350ada94..a77a1d6f 100644
--- a/docs/static/v2_elite.css
+++ b/docs/static/v2_elite.css
@@ -220,9 +220,6 @@ a {
 
 .hero-badge-card:hover {
   transform: translateY(-4px);
-  background: rgba(34, 211, 238, 0.04) !important;
-  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.15);
-  border-color: #22d3ee !important;
 }
 
 .hero-badge-card:hover img {
@@ -230,6 +227,47 @@ a {
   filter: brightness(1.25);
 }
 
+/* Modifiers for custom theme accents */
+.hero-badge-card--cyan {
+  border-color: rgba(34, 211, 238, 0.15);
+  background: rgba(34, 211, 238, 0.015);
+}
+.hero-badge-card--cyan:hover {
+  background: rgba(34, 211, 238, 0.04) !important;
+  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.15);
+  border-color: #22d3ee !important;
+}
+
+.hero-badge-card--purple {
+  border-color: rgba(139, 92, 246, 0.15);
+  background: rgba(139, 92, 246, 0.015);
+}
+.hero-badge-card--purple:hover {
+  background: rgba(139, 92, 246, 0.04) !important;
+  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
+  border-color: #a78bfa !important;
+}
+
+.hero-badge-card--pink {
+  border-color: rgba(236, 72, 153, 0.15);
+  background: rgba(236, 72, 153, 0.015);
+}
+.hero-badge-card--pink:hover {
+  background: rgba(236, 72, 153, 0.04) !important;
+  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.15);
+  border-color: #f472b6 !important;
+}
+
+.hero-badge-card--teal {
+  border-color: rgba(20, 184, 166, 0.15);
+  background: rgba(20, 184, 166, 0.015);
+}
+.hero-badge-card--teal:hover {
+  background: rgba(20, 184, 166, 0.04) !important;
+  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.15);
+  border-color: #2dd4bf !important;
+}
+
 .hero-badge-title {
   font-weight: bold;
   font-size: 0.95rem;
diff --git a/v2-docs/index.md b/v2-docs/index.md
index 9d5e692a..5f2bfea4 100644
--- a/v2-docs/index.md
+++ b/v2-docs/index.md
@@ -1,8 +1,35 @@
 # Nubenetes Elite Portal (V2) | Awesome Kubernetes & Cloud [![Awesome](https://cdn.jsdelivr.net/gh/sindresorhus/awesome@d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
 
-<center markdown="1">
-[![Kubernetes Logo](images/kubernetes_logo.png)](https://kubernetes.io) &nbsp; [![Nubenetes Introduction](images/hero-car.png)](./introduction.md)
-</center>
+<div style="display: flex; justify-content: center; gap: 24px; margin: 16px 0; flex-wrap: wrap;">
+  <a href="./kubernetes.html" style="text-decoration: none; color: inherit; display: block;">
+    <div class="hero-badge-card hero-badge-card--cyan">
+      <img src="images/kubernetes_logo.png" alt="Kubernetes"/>
+      <div class="hero-badge-title">Ecosystem Core</div>
+      <div class="hero-badge-subtitle">Explore Kubernetes</div>
+    </div>
+  </a>
+  <a href="./ai-agents-mcp.html" style="text-decoration: none; color: inherit; display: block;">
+    <div class="hero-badge-card hero-badge-card--purple">
+      <img src="images/ai_agents_logo.png" alt="AI & MCP Agents"/>
+      <div class="hero-badge-title">AI & MCP Agents</div>
+      <div class="hero-badge-subtitle">Agentic Ecosystem</div>
+    </div>
+  </a>
+  <a href="./videos.html" style="text-decoration: none; color: inherit; display: block;">
+    <div class="hero-badge-card hero-badge-card--pink">
+      <img src="images/video_hub_logo.png" alt="Agentic Video Hub"/>
+      <div class="hero-badge-title">Agentic Video Hub</div>
+      <div class="hero-badge-subtitle">Architect Video Library</div>
+    </div>
+  </a>
+  <a href="./introduction.html" style="text-decoration: none; color: inherit; display: block;">
+    <div class="hero-badge-card hero-badge-card--teal">
+      <img src="images/hero-car.png" alt="Nubenetes Car"/>
+      <div class="hero-badge-title">Get Started</div>
+      <div class="hero-badge-subtitle">Introduction Guide</div>
+    </div>
+  </a>
+</div>
 
 "I do not believe you can do today's job with yesterday's methods and be in business tomorrow" ([Horatio Nelson Jackson](https://en.wikipedia.org/wiki/Horatio_Nelson_Jackson))
 <center markdown="1">