diff --git a/website/src/components/feature-showcase/index.tsx b/website/src/components/feature-showcase/index.tsx
index ff36e9ee0..df73fdd51 100644
--- a/website/src/components/feature-showcase/index.tsx
+++ b/website/src/components/feature-showcase/index.tsx
@@ -25,12 +25,14 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
   bell: BellIcon,
   message: ChatBubbleLeftIcon,
   shield: ShieldCheckIcon,
+  book: BookOpenIcon,
 };
 
 export function FeatureShowcase() {
   const [activeTab, setActiveTab] = useState("framework");
   const [hoveredTab, setHoveredTab] = useState<string | null>(null);
   const [lightboxImage, setLightboxImage] = useState<string | null>(null);
+  const [activeCodeTab, setActiveCodeTab] = useState<"trigger" | "action">("trigger");
   const tabsContainerRef = useRef<HTMLDivElement>(null);
 
   const activeTabData = tabsData.find((tab) => tab.id === activeTab);
@@ -97,7 +99,7 @@ export function FeatureShowcase() {
                     className={`
                       relative flex items-center justify-center gap-1 md:gap-2 p-2 md:px-4 md:py-3 font-medium
                       transition-all duration-700 ease-in-out cursor-pointer
-                      min-w-[33.333%] md:min-w-0 md:flex-1
+                      md:flex-1
                       ${
                         isActive && !hoveredTab
                           ? "bg-zinc-800/60 text-emerald-400 border-b-2 border-emerald-400"
@@ -109,7 +111,7 @@ export function FeatureShowcase() {
                   >
                     {Icon && (
                       <Icon
-                        className={`w-4 h-4 transition-colors duration-700 ease-in-out ${
+                        className={`w-5 h-5 transition-colors duration-700 ease-in-out ${
                           isHighlighted ? "text-emerald-400" : ""
                         }`}
                       />
@@ -198,7 +200,43 @@ export function FeatureShowcase() {
 
                 {/* Code Panel - Bottom on mobile, Left on desktop */}
                 <div className="h-[250px] sm:h-[350px] md:h-[600px] overflow-auto showcase-code-block lg:border-r border-solid border-t-0 border-b-0 border-l-0 border-zinc-700 order-2 lg:order-1">
-                  <CodeBlock language="typescript">{displayTabData?.code}</CodeBlock>
+                  {displayTabData?.triggerCode && displayTabData?.actionCode ? (
+                    <div className="flex flex-col h-full">
+                      {/* Code Tabs */}
+                      <div className="flex border-b border-solid border-t-0 border-l-0 border-r-0 border-zinc-800 bg-black">
+                        <button
+                          onClick={() => setActiveCodeTab("trigger")}
+                          className={`px-4 py-2 text-xs font-medium transition-colors cursor-pointer border-0 outline-none ${
+                            activeCodeTab === "trigger"
+                              ? "text-zinc-100 bg-zinc-900 border-b-2 border-zinc-500"
+                              : "text-zinc-500 hover:text-zinc-300 bg-transparent"
+                          }`}
+                        >
+                          Trigger
+                        </button>
+                        <button
+                          onClick={() => setActiveCodeTab("action")}
+                          className={`px-4 py-2 text-xs font-medium transition-colors cursor-pointer border-0 outline-none ${
+                            activeCodeTab === "action"
+                              ? "text-zinc-100 bg-zinc-900 border-b-2 border-zinc-500"
+                              : "text-zinc-500 hover:text-zinc-300 bg-transparent"
+                          }`}
+                        >
+                          Action
+                        </button>
+                      </div>
+                      {/* Code Content */}
+                      <div className="flex-1 overflow-auto">
+                        <CodeBlock language="typescript">
+                          {activeCodeTab === "trigger"
+                            ? displayTabData.triggerCode
+                            : displayTabData.actionCode}
+                        </CodeBlock>
+                      </div>
+                    </div>
+                  ) : (
+                    <CodeBlock language="typescript">{displayTabData?.code}</CodeBlock>
+                  )}
                 </div>
 
                 {/* Preview Image - Desktop only */}
diff --git a/website/src/components/feature-showcase/mock-data.ts b/website/src/components/feature-showcase/mock-data.ts
index 266918711..ae51b745e 100644
--- a/website/src/components/feature-showcase/mock-data.ts
+++ b/website/src/components/feature-showcase/mock-data.ts
@@ -4,6 +4,8 @@ export interface TabData {
   icon: string;
   image?: string;
   code?: string;
+  triggerCode?: string;
+  actionCode?: string;
   description?: string;
   features?: string[];
   fullImage?: boolean;
@@ -59,7 +61,7 @@ new VoltAgent({
     });
   }),
 });`,
-    footerText: "Build AI agents with a type-safe, modular TypeScript framework",
+    footerText: "Create production-ready AI agents in minutes with type-safe TypeScript APIs",
     docLink: "/docs",
   },
   {
@@ -68,7 +70,8 @@ new VoltAgent({
     icon: "chart",
     image: "https://cdn.voltagent.dev/website/feature-showcase/dashboard.png",
     fullImage: true,
-    footerText: "Monitor and debug your AI agents with real-time observability",
+    footerText:
+      "See exactly what your agents are doing with full execution traces and debugging tools",
     docLink: "/observability-docs",
   },
   {
@@ -100,15 +103,15 @@ const agent = new Agent({
     },
   },
 });`,
-    footerText: "Evaluate agent responses with customizable scorers in production",
+    footerText: "Test agent outputs automatically and catch issues before they hit production",
     docLink: "/evaluation-docs/",
   },
   {
-    id: "triggers",
-    label: "Triggers",
-    icon: "zap",
+    id: "triggers-actions",
+    label: "Triggers & Actions",
+    icon: "play",
     image: "https://cdn.voltagent.dev/website/feature-showcase/trigger.png",
-    code: `import { VoltAgent, createTriggers } from "@voltagent/core";
+    triggerCode: `import { VoltAgent, createTriggers } from "@voltagent/core";
 
 new VoltAgent({
   triggers: createTriggers((on) => {
@@ -133,15 +136,7 @@ new VoltAgent({
     });
   }),
 });`,
-    footerText: "React to events from Slack, GitHub, Airtable, and webhooks automatically",
-    docLink: "/actions-triggers-docs/triggers/overview",
-  },
-  {
-    id: "actions",
-    label: "Actions",
-    icon: "play",
-    image: "https://cdn.voltagent.dev/website/feature-showcase/actions.png",
-    code: `import { Agent, createTool } from "@voltagent/core";
+    actionCode: `import { Agent, createTool } from "@voltagent/core";
 import { voltOps } from "@voltagent/voltops";
 
 // Create Airtable action as a tool
@@ -165,8 +160,38 @@ const agent = new Agent({
   name: "data-agent",
   tools: [createAirtableRecord],
 });`,
-    footerText: "Execute actions on external services like Airtable, Slack, and more",
-    docLink: "/actions-triggers-docs/actions/overview",
+    footerText: "Connect agents to Slack, GitHub, and webhooks to automate workflows end-to-end",
+    docLink: "/actions-triggers-docs/triggers/overview",
+  },
+  {
+    id: "rag",
+    label: "RAG",
+    icon: "book",
+    image: "https://cdn.voltagent.dev/website/feature-showcase/rag-features.png",
+    code: `import { openai } from "@ai-sdk/openai";
+import { Agent, VoltAgent } from "@voltagent/core";
+import { VoltAgentRagRetriever } from "@voltagent/core";
+
+const retriever = new VoltAgentRagRetriever({
+  knowledgeBaseName: "My Document",
+  topK: 8,
+  includeSources: true,
+});
+
+const agent = new Agent({
+  name: "RAG Assistant",
+  instructions:
+    "A helpful assistant that searches your knowledge base and uses relevant context to answer.",
+  model: openai("gpt-4o-mini"),
+  retriever,
+});
+
+const result = await agent.generateText("Ask a question about your docs…");
+console.log(result.text);
+// Optional: inspect which chunks were used
+// console.log(result.context.get("rag.references"));`,
+    footerText: "Ground agent responses in your own data with built-in vector search",
+    docLink: "/docs/rag/overview/",
   },
   {
     id: "monitoring",
@@ -200,7 +225,7 @@ await voltOps.alerts.create({
   channels: ["pagerduty"],
   severity: "critical",
 });`,
-    footerText: "Set up alerts for latency, errors, and custom metrics",
+    footerText: "Set up alerts for latency spikes, errors, and anomalies in agent behavior",
     docLink: "/docs/quick-start",
   },
   {
@@ -230,7 +255,7 @@ new VoltAgent({
   agents: { agent },
   voltOpsClient: voltOpsClient,
 });`,
-    footerText: "Manage and version prompts centrally with VoltOps",
+    footerText: "Version and update prompts without code changes using a central registry",
     docLink: "/docs/agents/prompts#voltops-prompt-management",
   },
   {
@@ -271,8 +296,7 @@ const agent = new Agent({
     ],
   },
 });`,
-    footerText:
-      "Protect your agents with content moderation, PII detection, and topic restrictions",
+    footerText: "Block harmful content, mask PII, and enforce topic boundaries automatically",
     docLink: "/docs/guardrails/overview",
   },
   {
@@ -281,7 +305,7 @@ const agent = new Agent({
     icon: "zap",
     image: "https://cdn.voltagent.dev/website/feature-showcase/deployment-4.png",
     fullImage: true,
-    footerText: "Deploy your agents to production with one command",
+    footerText: "Deploy agents to production with one click — no infrastructure to manage",
     docLink: "/deployment-docs/",
   },
 ];
diff --git a/website/src/components/navbar/index.tsx b/website/src/components/navbar/index.tsx
index f9f720530..8d60b6a7f 100644
--- a/website/src/components/navbar/index.tsx
+++ b/website/src/components/navbar/index.tsx
@@ -25,7 +25,6 @@ import {
   PuzzlePieceIcon,
   RocketLaunchIcon,
   ScaleIcon,
-  ServerIcon,
   ShieldCheckIcon,
   ShoppingCartIcon,
   UserGroupIcon,
@@ -406,10 +405,7 @@ export default function Navbar() {
               </div>
             </div>
             <Link to="/docs/" className={`${styles.navLink}  `}>
-              VoltAgent Docs
-            </Link>
-            <Link to="/observability-docs/" className={`${styles.navLink}  `}>
-              Observability Docs
+              Docs
             </Link>
 
             <div className={`${styles.navLink} group relative`}>
@@ -480,19 +476,6 @@ export default function Navbar() {
                         </div>
                       </div>
                     </Link>
-                    <Link to="/mcp/" className="no-underline">
-                      <div className="group/item p-1 cursor-pointer flex items-start transition-all duration-200 rounded-lg mb-2">
-                        <ServerIcon className="w-4 h-4 !text-white group-hover/item:!text-emerald-500 transition-all duration-200 mr-3 mt-0.5 flex-shrink-0" />
-                        <div>
-                          <span className="text-sm font-['Inter'] font-normal !text-white group-hover/item:!text-emerald-500 transition-all duration-200 block">
-                            MCP Directory
-                          </span>
-                          <span className="text-xs font-normal text-gray-500 font-['Inter'] leading-[1.2]">
-                            Browse MCP services
-                          </span>
-                        </div>
-                      </div>
-                    </Link>
                   </div>
 
                   {/* Right Column - Connect */}
@@ -734,10 +717,7 @@ export default function Navbar() {
             </div>
           </div>
           <Link to="/docs/" className={`${styles.mobileNavLink}`}>
-            VoltAgent Docs
-          </Link>
-          <Link to="/observability-docs/" className={`${styles.mobileNavLink}`}>
-            Observability Docs
+            Docs
           </Link>
           <Link to="/recipes-and-guides/" className={`${styles.mobileNavLink}`}>
             Recipes & Guides
@@ -809,14 +789,6 @@ export default function Navbar() {
                   </span>
                 </div>
               </Link>
-              <Link to="/mcp/" className="no-underline">
-                <div className="group p-3 cursor-pointer flex items-center transition-all duration-200">
-                  <ServerIcon className="w-5 h-5 mr-2 text-white group-hover:text-emerald-500 transition-all duration-200" />
-                  <span className="text-base font-['Inter'] font-normal text-white group-hover:text-emerald-500 transition-colors duration-200">
-                    MCP Directory
-                  </span>
-                </div>
-              </Link>
               <h4 className="text-sm font-normal text-gray-400 uppercase tracking-wider pb-2 mt-4 mb-2 border-b border-solid border-t-0 border-l-0 border-r-0 border-gray-700/50">
                 Connect
               </h4>