diff --git a/src/app/page.tsx b/src/app/page.tsx
index d3be96c..9343a8d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,36 +1,17 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { getNews, getSkills, getMcpServers, getLlmsTxtEntries, getAgents, getFeaturedAgents, formatAgentHandle, getAcpAgents, getRecentSubmissions, getCreators, type Skill } from "@/lib/data";
-import { getSupabase } from "@/lib/supabase";
 import Link from "next/link";
-import { MobileNav } from "@/components/mobile-nav";
-import { ThemeToggle } from "@/components/theme-toggle";
-import { NewsFeed } from "@/components/news-feed";
-import { RecentSubmissions } from "@/components/recent-submissions";
-import { AnnouncementBanner } from "@/components/announcement-banner";
-import { Footer } from "@/components/footer";
-import { ResumeSection } from "@/components/recently-viewed/ResumeSection";
-import { AgentBootstrapPanel } from "@/components/agent-bootstrap-panel";
-import { NewsletterSignup } from "@/components/newsletter-signup";
-import { InstallCount } from "@/components/InstallCount";
-import { TestimonialCarousel } from "@/components/TestimonialCarousel";
+import { getNews, getMcpServers } from "@/lib/data";
+import { getSupabase } from "@/lib/supabase";
 
 export const revalidate = 300;
 
 export const metadata = {
   title: "forAgents.dev — The MCP Server Registry",
-  description: "The MCP server registry for AI agents. Find and install MCP servers, agent skills, and tools.",
+  description:
+    "The MCP server registry for AI agents. Find and install MCP servers, agent skills, and tools.",
   openGraph: {
     title: "forAgents.dev — The MCP Server Registry",
-    description: "The MCP server registry for AI agents. Find and install MCP servers, agent skills, and tools.",
+    description:
+      "The MCP server registry for AI agents. Find and install MCP servers, agent skills, and tools.",
     url: "https://foragents.dev",
     siteName: "forAgents.dev",
     type: "website",
@@ -38,26 +19,42 @@ export const metadata = {
   twitter: {
     card: "summary_large_image",
     title: "forAgents.dev — The MCP Server Registry",
-    description: "The MCP server registry for AI agents. Find and install MCP servers, agent skills, and tools.",
+    description:
+      "The MCP server registry for AI agents. Find and install MCP servers, agent skills, and tools.",
   },
 };
 
-// Simple trending score algorithm (same as /trending page)
-function calculateTrendingScore(skill: Skill): number {
-  let score = 0;
-  score += skill.tags.length * 10;
-  if (skill.author === "Team Reflectt") {
-    score += 20;
-  }
-  score += Math.max(0, 50 - skill.name.length);
-  score += Math.random() * 15;
-  return score;
+function formatCompact(value?: number): string {
+  if (!value) return "—";
+  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}m`;
+  if (value >= 1000) return `${(value / 1000).toFixed(1)}k`;
+  return `${value}`;
+}
+
+function prettifyCategory(category: string): string {
+  return category
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+function categoryIcon(category: string): string {
+  const icons: Record<string, string> = {
+    "file-system": "📁",
+    web: "🌐",
+    "dev-tools": "🔧",
+    productivity: "⚡",
+    communication: "💬",
+    data: "🗄️",
+  };
+
+  return icons[category] ?? "🧩";
 }
 
 export default async function Home() {
-  // Prefer Supabase-backed news when available; fall back to bundled JSON.
   let news = getNews();
   const supabase = getSupabase();
+
   if (supabase) {
     const { data, error } = await supabase
       .from("news")
@@ -66,894 +63,246 @@ export default async function Home() {
       .limit(100);
 
     if (!error && data && data.length > 0) {
-      // Supabase shape matches NewsItem.
       news = data as typeof news;
     }
   }
-  const skills = getSkills();
+
   const mcpServers = getMcpServers();
-  const llmsTxtEntries = getLlmsTxtEntries();
-  const agents = getAgents();
-  const featuredAgents = getFeaturedAgents();
-  const acpAgents = getAcpAgents();
-  const recentSubmissions = await getRecentSubmissions(5);
-  const creators = getCreators();
-  const topCreators = creators.slice(0, 6);
-  const trendingSkills = skills
-    .map(skill => ({ ...skill, trendingScore: calculateTrendingScore(skill) }))
-    .sort((a, b) => b.trendingScore - a.trendingScore)
-    .slice(0, 6);
+  const categoryCount = new Set(mcpServers.map((server) => server.category)).size;
 
   const jsonLd = {
     "@context": "https://schema.org",
     "@type": "WebSite",
-    "name": "forAgents.dev",
-    "alternateName": "Agent Hub",
-    "url": "https://foragents.dev",
-    "description": "The MCP server registry for AI agents. Find and install MCP servers, agent skills, and tools.",
-    "potentialAction": {
+    name: "forAgents.dev",
+    alternateName: "Agent Hub",
+    url: "https://foragents.dev",
+    description:
+      "The MCP server registry for AI agents. Find and install MCP servers, agent skills, and tools.",
+    potentialAction: {
       "@type": "SearchAction",
-      "target": {
+      target: {
         "@type": "EntryPoint",
-        "urlTemplate": "https://foragents.dev/search?q={search_term_string}"
+        urlTemplate: "https://foragents.dev/search?q={search_term_string}",
       },
-      "query-input": "required name=search_term_string"
+      "query-input": "required name=search_term_string",
     },
-    "publisher": {
+    publisher: {
       "@type": "Organization",
-      "name": "Team Reflectt",
-      "url": "https://reflectt.ai"
-    }
+      name: "Team Reflectt",
+      url: "https://reflectt.ai",
+    },
   };
 
+  const filterTags = ["All", "Official", "Database", "Browser", "Files", "APIs"];
+
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen bg-white text-slate-900">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
-      {/* Header */}
-      <header className="border-b border-white/5 backdrop-blur-sm sticky top-0 z-50 bg-background/80 relative" role="banner">
-        <div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <span className="text-lg font-bold aurora-text">⚡ Agent Hub</span>
-            <span className="text-xs text-muted-foreground font-mono">
-              forAgents.dev
-            </span>
-          </div>
-          <div className="flex items-center gap-3">
-            <ThemeToggle />
-            <MobileNav />
-          </div>
-        </div>
-      </header>
 
-      {/* Announcement Banner */}
-      <AnnouncementBanner />
+      <header className="sticky top-0 z-50 border-b border-slate-200 bg-white/95 backdrop-blur">
+        <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-4">
+          <Link href="/" className="text-lg font-bold tracking-tight text-slate-900">
+            forAgents.dev
+          </Link>
 
-      {/* Resume (recently viewed) */}
-      <ResumeSection />
+          <nav className="hidden items-center gap-8 md:flex">
+            <Link href="/mcp" className="text-sm font-medium text-slate-600 transition hover:text-slate-900">
+              Browse
+            </Link>
+            <Link href="/docs" className="text-sm font-medium text-slate-600 transition hover:text-slate-900">
+              Docs
+            </Link>
+            <Link href="/blog" className="text-sm font-medium text-slate-600 transition hover:text-slate-900">
+              Blog
+            </Link>
+          </nav>
 
-      {/* Hero */}
-      <section id="main-content" className="relative overflow-hidden min-h-[600px] flex items-center">
-        {/* Subtle aurora background */}
-        <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-cyan/5 rounded-full blur-[160px]" />
-          <div className="absolute top-1/3 left-1/3 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple/3 rounded-full blur-[120px]" />
+          <Link
+            href="/mcp"
+            className="inline-flex items-center rounded-lg bg-blue-600 px-5 py-2 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-blue-700"
+          >
+            Explore MCP Servers
+          </Link>
         </div>
+      </header>
 
-        <div className="relative max-w-[640px] mx-auto px-4 py-20 md:py-24 text-center">
-          {/* Logo mark */}
-          <p className="font-mono font-bold text-xl mb-6">
-            <span className="text-[#F8FAFC]">forAgents</span>
-            <span className="text-cyan">.dev</span>
-          </p>
-
-          {/* Headline with blinking cursor */}
-          <h1 className="text-[32px] md:text-[56px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-4 leading-tight">
-            The MCP Server Registry<span className="cursor-blink" />
+      <main>
+        <section className="mx-auto w-full max-w-6xl px-4 py-20 text-center md:py-24">
+          <h1 className="mb-6 text-4xl font-bold tracking-[-0.02em] text-slate-900 md:text-6xl">
+            The MCP Server Registry
           </h1>
-
-          {/* Subheadline */}
-          <p className="text-xl text-foreground mb-2">
-            Skills. Servers. Agents. Signal.
-          </p>
-
-          {/* Description */}
-          <p className="text-base text-muted-foreground max-w-md mx-auto">
-            Find and install MCP servers, agent skills, and tools. Served as markdown, because you&apos;re not here to parse HTML.
+          <p className="mx-auto mb-10 max-w-3xl text-lg text-slate-600 md:text-xl">
+            Discover, search, and integrate MCP servers for your AI agents. A curated directory of tools and data
+            sources for the Model Context Protocol.
           </p>
 
-          {/* CTAs */}
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-8">
+          <div className="mb-12 flex flex-col items-center justify-center gap-3 sm:flex-row">
             <Link
               href="/mcp"
-              className="inline-flex items-center justify-center h-12 px-6 rounded-lg bg-cyan text-[#0A0E17] font-semibold text-sm hover:brightness-110 transition-all hover:-translate-y-0.5 hover:shadow-lg"
+              className="inline-flex items-center rounded-lg bg-blue-600 px-6 py-3 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-blue-700 hover:shadow-lg"
             >
-              Browse Servers
+              Browse Servers →
             </Link>
             <Link
               href="/docs"
-              className="inline-flex items-center justify-center h-12 px-6 rounded-lg border border-cyan text-cyan font-mono text-sm hover:bg-cyan/10 transition-all hover:-translate-y-0.5"
+              className="inline-flex items-center rounded-lg border-2 border-blue-600 px-6 py-3 text-sm font-semibold text-blue-600 transition hover:bg-blue-50"
             >
               Read Docs
             </Link>
           </div>
 
-          {/* Stats bar - Enhanced */}
-          <div className="mt-8 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 max-w-4xl mx-auto">
-            <div className="text-center p-3 rounded-lg bg-card/30 border border-white/5">
-              <div className="text-2xl font-bold text-cyan">{news.length}+</div>
-              <div className="text-xs text-muted-foreground mt-1">Articles</div>
-            </div>
-            <div className="text-center p-3 rounded-lg bg-card/30 border border-white/5">
-              <div className="text-2xl font-bold text-cyan">{agents.length}</div>
-              <div className="text-xs text-muted-foreground mt-1">Agents</div>
-            </div>
-            <div className="text-center p-3 rounded-lg bg-card/30 border border-white/5">
-              <div className="text-2xl font-bold text-cyan">{skills.length}</div>
-              <div className="text-xs text-muted-foreground mt-1">Skills</div>
-            </div>
-            <div className="text-center p-3 rounded-lg bg-card/30 border border-white/5">
-              <div className="text-2xl font-bold text-purple">{mcpServers.length}</div>
-              <div className="text-xs text-muted-foreground mt-1">MCP Servers</div>
+          <div className="mx-auto grid max-w-2xl grid-cols-1 gap-6 border-t border-slate-200 pt-8 sm:grid-cols-3">
+            <div>
+              <p className="text-4xl font-bold text-slate-900">{mcpServers.length}+</p>
+              <p className="mt-1 text-sm text-slate-500">Indexed Servers</p>
             </div>
-            <div className="text-center p-3 rounded-lg bg-card/30 border border-white/5">
-              <div className="text-2xl font-bold text-purple">{acpAgents.length}</div>
-              <div className="text-xs text-muted-foreground mt-1">ACP Agents</div>
+            <div>
+              <p className="text-4xl font-bold text-slate-900">{categoryCount}+</p>
+              <p className="mt-1 text-sm text-slate-500">Categories</p>
             </div>
-            <div className="text-center p-3 rounded-lg bg-card/30 border border-white/5">
-              <div className="text-2xl font-bold text-purple">{llmsTxtEntries.length}</div>
-              <div className="text-xs text-muted-foreground mt-1">llms.txt Sites</div>
+            <div>
+              <p className="text-4xl font-bold text-slate-900">1-Line</p>
+              <p className="mt-1 text-sm text-slate-500">Install Command</p>
             </div>
           </div>
 
-          {/* Add to your agent */}
-          <div className="mt-10 text-left">
-            <AgentBootstrapPanel />
-          </div>
-        </div>
-      </section>
-
-      {/* Quick Access Hub - NEW */}
-      <section className="max-w-5xl mx-auto px-4 py-8">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          {/* Trending */}
-          <Link 
-            href="/trending"
-            className="group relative overflow-hidden rounded-xl border border-white/10 bg-gradient-to-br from-orange-500/10 to-red-500/10 p-6 hover:border-orange-500/30 hover:-translate-y-1 hover:shadow-lg transition-all"
-          >
-            <div className="absolute top-0 right-0 w-24 h-24 bg-orange-500/20 rounded-full blur-[40px]" />
-            <div className="relative">
-              <div className="text-3xl mb-3">🔥</div>
-              <h3 className="text-lg font-bold mb-2 group-hover:text-orange-500 transition-colors">
-                Trending
-              </h3>
-              <p className="text-sm text-muted-foreground">
-                Hot skills & agents right now
-              </p>
-            </div>
-          </Link>
-
-          {/* Search */}
-          <Link 
-            href="/search"
-            className="group relative overflow-hidden rounded-xl border border-white/10 bg-gradient-to-br from-cyan/10 to-blue-500/10 p-6 hover:border-cyan/30 hover:-translate-y-1 hover:shadow-lg transition-all"
-          >
-            <div className="absolute top-0 right-0 w-24 h-24 bg-cyan/20 rounded-full blur-[40px]" />
-            <div className="relative">
-              <div className="text-3xl mb-3">🔍</div>
-              <h3 className="text-lg font-bold mb-2 group-hover:text-cyan transition-colors">
-                Search Skills
-              </h3>
-              <p className="text-sm text-muted-foreground">
-                Find exactly what you need
-              </p>
-            </div>
-          </Link>
-
-          {/* Creators */}
-          <Link 
-            href="/creators"
-            className="group relative overflow-hidden rounded-xl border border-white/10 bg-gradient-to-br from-purple/10 to-pink-500/10 p-6 hover:border-purple/30 hover:-translate-y-1 hover:shadow-lg transition-all"
-          >
-            <div className="absolute top-0 right-0 w-24 h-24 bg-purple/20 rounded-full blur-[40px]" />
-            <div className="relative">
-              <div className="text-3xl mb-3">👥</div>
-              <h3 className="text-lg font-bold mb-2 group-hover:text-purple transition-colors">
-                Top Creators
-              </h3>
-              <p className="text-sm text-muted-foreground">
-                Browse builders & contributors
-              </p>
-            </div>
-          </Link>
+          <p className="mt-6 text-sm text-slate-500">Tracking {news.length} ecosystem updates from the AI agent space.</p>
+        </section>
 
-          {/* Request a Kit */}
-          <Link 
-            href="/requests"
-            className="group relative overflow-hidden rounded-xl border border-white/10 bg-gradient-to-br from-green-500/10 to-emerald-500/10 p-6 hover:border-green-500/30 hover:-translate-y-1 hover:shadow-lg transition-all"
-          >
-            <div className="absolute top-0 right-0 w-24 h-24 bg-green-500/20 rounded-full blur-[40px]" />
-            <div className="relative">
-              <div className="text-3xl mb-3">💡</div>
-              <h3 className="text-lg font-bold mb-2 group-hover:text-green-500 transition-colors">
-                Request a Kit
-              </h3>
-              <p className="text-sm text-muted-foreground">
-                Need something custom? Ask!
-              </p>
-            </div>
-          </Link>
-        </div>
-      </section>
-
-      {/* Search Bar Section */}
-      <section className="max-w-5xl mx-auto px-4 py-8">
-        <Link href="/search" className="block" aria-label="Go to search page">
-          <div className="relative overflow-hidden rounded-xl border border-white/10 bg-card/30 p-6 hover:border-cyan/30 transition-all group">
-            <div className="flex items-center gap-4">
-              <div className="text-2xl" aria-hidden="true">🔍</div>
-              <div className="flex-1">
-                <input 
-                  type="text" 
-                  placeholder="Search skills, agents, MCP servers..."
+        <section className="bg-slate-50 px-4 py-14 md:py-16">
+          <div className="mx-auto w-full max-w-4xl">
+            <Link href="/search" aria-label="Search MCP servers" className="block">
+              <div className="relative">
+                <span className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-xl text-slate-500">🔍</span>
+                <input
+                  type="text"
                   readOnly
                   tabIndex={-1}
                   aria-hidden="true"
-                  className="w-full bg-transparent text-foreground placeholder:text-muted-foreground outline-none cursor-pointer"
+                  placeholder="Search MCP servers by name, category, or functionality..."
+                  className="h-12 w-full cursor-pointer rounded-xl border border-slate-200 bg-white px-12 text-slate-700 placeholder:text-slate-400 focus:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-100"
                 />
               </div>
-              <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                <kbd className="px-2 py-1 rounded bg-white/5 border border-white/10 font-mono">Ctrl</kbd>
-                <span>+</span>
-                <kbd className="px-2 py-1 rounded bg-white/5 border border-white/10 font-mono">K</kbd>
-              </div>
-            </div>
-          </div>
-        </Link>
-      </section>
-
-      {/* Featured Section */}
-      <section className="max-w-5xl mx-auto px-4 py-8">
-        <div className="relative overflow-hidden rounded-xl border border-cyan/20 bg-gradient-to-br from-cyan/5 via-card/80 to-purple/5">
-          {/* Subtle glow effect */}
-          <div className="absolute top-0 right-0 w-64 h-64 bg-cyan/10 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2" />
-          <div className="absolute bottom-0 left-0 w-48 h-48 bg-purple/10 rounded-full blur-[60px] translate-y-1/2 -translate-x-1/2" />
-          
-          <div className="relative p-6 md:p-8">
-            <div className="flex items-center gap-2 mb-4">
-              <span className="text-lg">🌟</span>
-              <span className="text-xs font-semibold uppercase tracking-wider text-cyan">Featured</span>
-              <Badge variant="outline" className="text-xs bg-cyan/10 text-cyan border-cyan/30">
-                1 fork — teams are using this
-              </Badge>
-            </div>
-            
-            <h3 className="text-xl md:text-2xl font-bold mb-2">
-              Multi-agent coordination that actually works
-            </h3>
-            
-            <p className="text-muted-foreground mb-4 max-w-2xl">
-              Teams of AI agents need clear roles, intake loops, and self-service queues. 
-              <strong className="text-foreground"> agent-team-kit</strong> provides them.
-            </p>
-            
-            <div className="flex flex-wrap gap-2 mb-4">
-              <Badge variant="outline" className="text-xs bg-white/5 text-white/80 border-white/10">
-                11 defined roles
-              </Badge>
-              <Badge variant="outline" className="text-xs bg-white/5 text-white/80 border-white/10">
-                5-phase intake loop
-              </Badge>
-              <Badge variant="outline" className="text-xs bg-white/5 text-white/80 border-white/10">
-                BACKLOG.md patterns
-              </Badge>
-            </div>
-            
-            <code className="block text-sm text-green bg-black/40 rounded-lg px-4 py-3 mb-4 font-mono overflow-x-auto">
-              curl -fsSL https://forAgents.dev/api/team-kit.sh | bash
-            </code>
-            
-            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
-              <a
-                href="https://github.com/reflectt/agent-team-kit"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-cyan text-[#0A0E17] font-semibold text-sm hover:brightness-110 transition-all"
-              >
-                View on GitHub ↗
-              </a>
-              <Link
-                href="/skills/agent-team-kit"
-                className="text-sm text-cyan hover:underline"
-              >
-                Read the docs →
-              </Link>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <Separator className="opacity-10" />
-
-      {/* Trending This Week */}
-      <section className="max-w-5xl mx-auto px-4 py-12">
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h2 className="text-2xl font-bold">🔥 Trending This Week</h2>
-            <p className="text-muted-foreground text-sm mt-1">
-              Hot skills agents are using right now
-            </p>
-          </div>
-          <Link href="/trending" className="text-sm text-cyan hover:underline">
-            View all trending →
-          </Link>
-        </div>
-
-        <div className="grid gap-4 md:grid-cols-3">
-          {trendingSkills.map((skill, index) => (
-            <Link key={skill.id} href={`/skills/${skill.slug}`}>
-              <Card className="bg-card/50 border-white/5 hover:border-orange-500/20 transition-all group h-full relative">
-                {/* Trending badge for top 3 */}
-                {index < 3 && (
-                  <div className="absolute top-3 right-3">
-                    <Badge 
-                      variant="outline" 
-                      className={`text-xs font-bold ${
-                        index === 0 
-                          ? 'bg-yellow-500/20 text-yellow-300 border-yellow-400/30' 
-                          : index === 1
-                          ? 'bg-gray-400/20 text-gray-300 border-gray-400/30'
-                          : 'bg-orange-500/20 text-orange-300 border-orange-400/30'
-                      }`}
-                    >
-                      #{index + 1}
-                    </Badge>
-                  </div>
-                )}
-                
-                <CardHeader>
-                  <CardTitle className="text-lg group-hover:text-orange-500 transition-colors flex items-center gap-1.5 pr-12">
-                    {skill.name}
-                    {skill.author === "Team Reflectt" && (
-                      <img 
-                        src="/badges/verified-skill.svg" 
-                        alt="Verified Skill" 
-                        title="Verified: Team Reflectt skill"
-                        className="w-5 h-5 inline-block"
-                      />
-                    )}
-                  </CardTitle>
-                  <CardDescription className="text-xs flex items-center gap-2">
-                    <span>by {skill.author}</span>
-                    <span className="text-white/20">•</span>
-                    <InstallCount 
-                      skillSlug={skill.slug} 
-                      className="text-xs text-cyan"
-                    />
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
-                    {skill.description}
-                  </p>
-                  <div className="flex items-center justify-between">
-                    <div className="flex flex-wrap gap-1">
-                      {skill.tags.slice(0, 2).map((tag) => (
-                        <Badge
-                          key={tag}
-                          variant="outline"
-                          className="text-xs bg-white/5 text-white/60 border-white/10"
-                        >
-                          {tag}
-                        </Badge>
-                      ))}
-                      {skill.tags.length > 2 && (
-                        <Badge
-                          variant="outline"
-                          className="text-xs bg-white/5 text-white/60 border-white/10"
-                        >
-                          +{skill.tags.length - 2}
-                        </Badge>
-                      )}
-                    </div>
-                    <span className="text-xs text-orange-500 group-hover:underline">
-                      View →
-                    </span>
-                  </div>
-                </CardContent>
-              </Card>
             </Link>
-          ))}
-        </div>
-      </section>
 
-      <Separator className="opacity-10" />
+            <div className="mt-4 flex flex-wrap justify-center gap-2">
+              {filterTags.map((tag, index) => (
+                <span
+                  key={tag}
+                  className={`rounded-full border px-4 py-1.5 text-sm font-medium transition ${
+                    index === 0
+                      ? "border-blue-600 bg-blue-600 text-white"
+                      : "border-slate-200 bg-white text-slate-700 hover:border-blue-600 hover:text-blue-600"
+                  }`}
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </div>
+        </section>
 
-      {/* Top Creators */}
-      <section className="max-w-5xl mx-auto px-4 py-12">
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h2 className="text-2xl font-bold">👥 Top Creators</h2>
-            <p className="text-muted-foreground text-sm mt-1">
-              Builders making the ecosystem better
-            </p>
+        <section className="mx-auto w-full max-w-6xl px-4 py-16">
+          <div className="mb-8">
+            <h2 className="text-3xl font-bold tracking-tight text-slate-900">Featured MCP Servers</h2>
+            <p className="mt-2 text-slate-600">Popular and recommended servers from the community.</p>
           </div>
-          <Link href="/creators" className="text-sm text-cyan hover:underline">
-            View all creators →
-          </Link>
-        </div>
 
-        <div className="grid gap-4 md:grid-cols-3">
-          {topCreators.map((creator) => (
-            <Link key={creator.username} href={`/creators/${encodeURIComponent(creator.username)}`}>
-              <Card className="bg-card/50 border-white/5 hover:border-purple/20 transition-all group h-full">
-                <CardHeader>
-                  <div className="flex items-start justify-between">
-                    <div className="flex-1">
-                      <CardTitle className="text-lg group-hover:text-purple transition-colors flex items-center gap-1.5">
-                        {creator.username}
-                        {creator.verified && (
-                          <img 
-                            src="/badges/verified-skill.svg" 
-                            alt="Verified Creator" 
-                            title="Verified Creator"
-                            className="w-5 h-5 inline-block"
-                          />
-                        )}
-                      </CardTitle>
-                      <CardDescription className="text-xs mt-1">
-                        {creator.skillCount} {creator.skillCount === 1 ? 'skill' : 'skills'}
-                      </CardDescription>
-                    </div>
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex flex-wrap gap-1 mb-3">
-                    {creator.topTags.slice(0, 3).map(({ tag }) => (
-                      <Badge
-                        key={tag}
-                        variant="outline"
-                        className="text-xs bg-purple/10 text-purple border-purple/20"
-                      >
-                        {tag}
-                      </Badge>
-                    ))}
+          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+            {mcpServers.slice(0, 6).map((server) => (
+              <article
+                key={server.id}
+                className="rounded-xl border border-slate-200 bg-white p-6 transition hover:-translate-y-0.5 hover:border-blue-600 hover:shadow-lg"
+              >
+                <div className="mb-4 flex items-start gap-3">
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-2xl">
+                    {categoryIcon(server.category)}
                   </div>
-                  <div className="text-xs text-muted-foreground">
-                    Latest: {creator.skills[0]?.name}
+                  <div className="min-w-0 flex-1">
+                    <h3 className="truncate text-lg font-semibold text-slate-900">{server.name}</h3>
+                    <p className="text-xs text-slate-500">by {server.author ?? "Community"}</p>
                   </div>
-                  <span className="text-xs text-purple group-hover:underline mt-2 inline-block">
-                    View profile →
-                  </span>
-                </CardContent>
-              </Card>
-            </Link>
-          ))}
-        </div>
-      </section>
-
-      <Separator className="opacity-10" />
-
-      {/* News Feed */}
-      <section id="news" className="max-w-5xl mx-auto px-4 py-12">
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h2 className="text-2xl font-bold">📰 Agent News Feed</h2>
-            <p className="text-muted-foreground text-sm mt-1">
-              What agents need to know today
-            </p>
-          </div>
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/api/feed.json" className="font-mono text-xs">
-                .json
-              </Link>
-            </Button>
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/api/feed.md" className="font-mono text-xs">
-                .md
-              </Link>
-            </Button>
-          </div>
-        </div>
-
-        <NewsFeed items={news} />
-      </section>
-
-      <Separator className="opacity-10" />
-
-      {/* Skills Directory */}
-      <section id="skills" className="max-w-5xl mx-auto px-4 py-12">
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h2 className="text-2xl font-bold">🧰 Skills Directory</h2>
-            <p className="text-muted-foreground text-sm mt-1">
-              Practical tools for autonomous agents
-            </p>
-          </div>
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/api/skills.json" className="font-mono text-xs">
-                .json
-              </Link>
-            </Button>
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/api/skills.md" className="font-mono text-xs">
-                .md
-              </Link>
-            </Button>
-          </div>
-        </div>
+                </div>
 
-        <div className="grid gap-4 md:grid-cols-3">
-          {skills.slice(0, 6).map((skill) => (
-            <Link key={skill.id} href={`/skills/${skill.slug}`}>
-              <Card className="bg-card/50 border-white/5 hover:border-cyan/20 transition-all group h-full">
-                <CardHeader>
-                  <CardTitle className="text-lg group-hover:text-cyan transition-colors flex items-center gap-1.5">
-                    {skill.name}
-                    {skill.author === "Team Reflectt" && (
-                      <img 
-                        src="/badges/verified-skill.svg" 
-                        alt="Verified Skill" 
-                        title="Verified: Team Reflectt skill"
-                        className="w-5 h-5 inline-block"
-                      />
-                    )}
-                  </CardTitle>
-                  <CardDescription className="text-xs flex items-center gap-2">
-                    <span>by {skill.author}</span>
-                    <span className="text-white/20">•</span>
-                    <InstallCount 
-                      skillSlug={skill.slug} 
-                      className="text-xs text-cyan"
-                    />
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <p className="text-sm text-muted-foreground mb-4">
-                    {skill.description}
-                  </p>
-                  <code className="block text-xs text-green bg-black/30 rounded px-2 py-1.5 mb-3 overflow-x-auto">
-                    {skill.install_cmd}
-                  </code>
-                  <div className="flex items-center justify-between">
-                    <div className="flex flex-wrap gap-1">
-                      {skill.tags.map((tag) => (
-                        <Badge
-                          key={tag}
-                          variant="outline"
-                          className="text-xs bg-white/5 text-white/60 border-white/10"
-                        >
-                          {tag}
-                        </Badge>
-                      ))}
-                    </div>
-                    <span className="text-xs text-cyan group-hover:underline">
-                      View Details →
-                    </span>
-                  </div>
-                </CardContent>
-              </Card>
-            </Link>
-          ))}
-        </div>
+                <p className="mb-4 line-clamp-3 text-sm leading-6 text-slate-600">{server.description}</p>
 
-        {skills.length > 6 && (
-          <div className="text-center mt-6">
-            <Link href="/#skills" className="text-sm text-cyan hover:underline">
-              View all {skills.length} skills →
-            </Link>
-          </div>
-        )}
-      </section>
-
-      <Separator className="opacity-10" />
-
-      {/* MCP Servers */}
-      <section id="mcp" className="max-w-5xl mx-auto px-4 py-12">
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h2 className="text-2xl font-bold">🔌 MCP Servers</h2>
-            <p className="text-muted-foreground text-sm mt-1">
-              Model Context Protocol servers for AI agents
-            </p>
-          </div>
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/api/mcp.json" className="font-mono text-xs">
-                .json
-              </Link>
-            </Button>
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/api/mcp.md" className="font-mono text-xs">
-                .md
-              </Link>
-            </Button>
-          </div>
-        </div>
+                <div className="mb-4 flex items-center gap-4 text-xs text-slate-500">
+                  <span>⭐ {formatCompact(server.stars)}</span>
+                  <span>📦 {formatCompact(server.installs)}</span>
+                  <span>{server.framework ?? "MCP"}</span>
+                </div>
 
-        <div className="grid gap-4 md:grid-cols-3">
-          {mcpServers.slice(0, 6).map((server) => (
-            <Card key={server.id} className="bg-card/50 border-white/5 hover:border-purple/20 transition-all group h-full">
-              <CardHeader>
-                <CardTitle className="text-lg group-hover:text-purple transition-colors flex items-center gap-1.5">
-                  {server.name}
-                  {server.tags?.includes("official") && (
-                    <img 
-                      src="/badges/verified-mcp.svg" 
-                      alt="Official MCP Server" 
-                      title="Official: Maintained by MCP team"
-                      className="w-5 h-5 inline-block"
-                    />
-                  )}
-                </CardTitle>
-                <CardDescription className="text-xs">
-                  by {server.author}
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
-                  {server.description}
-                </p>
-                <code className="block text-xs text-green bg-black/30 rounded px-2 py-1.5 mb-3 overflow-x-auto">
+                <code className="mb-4 block overflow-x-auto rounded-lg bg-slate-900 px-4 py-3 font-mono text-xs text-slate-200">
                   $ {server.install_cmd}
                 </code>
-                <div className="flex items-center justify-between">
-                  <Badge
-                    variant="outline"
-                    className="text-xs bg-purple/10 text-purple border-purple/20"
-                  >
-                    {server.category}
-                  </Badge>
-                  <a
-                    href={server.github}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-xs text-cyan hover:underline"
-                  >
-                    GitHub ↗
-                  </a>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-
-        <div className="text-center mt-6">
-          <Link href="/mcp" className="text-sm text-cyan hover:underline">
-            View all {mcpServers.length} MCP servers →
-          </Link>
-        </div>
-      </section>
 
-      <Separator className="opacity-10" />
+                <div className="flex flex-wrap gap-2">
+                  {(server.tags?.slice(0, 4) ?? [prettifyCategory(server.category)]).map((tag) => {
+                    const official = tag.toLowerCase() === "official";
 
-      {/* Registered Agents */}
-      <section id="agents" className="max-w-5xl mx-auto px-4 py-12">
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h2 className="text-2xl font-bold">🤖 Registered Agents</h2>
-            <p className="text-muted-foreground text-sm mt-1">
-              AI agents with public identities
-            </p>
-          </div>
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/api/agents.json" className="font-mono text-xs">
-                .json
-              </Link>
-            </Button>
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/api/agents.md" className="font-mono text-xs">
-                .md
-              </Link>
-            </Button>
+                    return (
+                      <span
+                        key={`${server.id}-${tag}`}
+                        className={`rounded-full px-3 py-1 text-xs font-medium ${
+                          official ? "bg-blue-100 text-blue-700" : "bg-slate-100 text-slate-700"
+                        }`}
+                      >
+                        {tag}
+                      </span>
+                    );
+                  })}
+                </div>
+              </article>
+            ))}
           </div>
-        </div>
 
-        <div className="grid gap-4 md:grid-cols-3">
-          {featuredAgents.slice(0, 6).map((agent) => (
-            <Link key={agent.id} href={`/agents/${agent.handle}`}>
-              <Card className="bg-card/50 border-white/5 hover:border-cyan/20 transition-all group h-full">
-                <CardHeader>
-                  <div className="flex items-start gap-3">
-                    <span className="text-3xl">{agent.avatar}</span>
-                    <div className="flex-1 min-w-0">
-                      <CardTitle className="text-lg group-hover:text-cyan transition-colors flex items-center gap-1.5">
-                        {agent.name}
-                        {agent.links.agentJson && (
-                          <img 
-                            src="/badges/verified-agent.svg" 
-                            alt="Verified Agent" 
-                            title="Verified: Has public agent.json"
-                            className="w-5 h-5 inline-block"
-                          />
-                        )}
-                      </CardTitle>
-                      <CardDescription className="text-xs font-mono">
-                        {formatAgentHandle(agent)}
-                      </CardDescription>
-                    </div>
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  <p className="text-xs text-muted-foreground mb-2">
-                    {agent.role}
-                  </p>
-                  <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
-                    {agent.description}
-                  </p>
-                  <div className="flex items-center justify-between">
-                    <div className="flex flex-wrap gap-1">
-                      {agent.platforms.slice(0, 2).map((platform) => (
-                        <Badge
-                          key={platform}
-                          variant="outline"
-                          className="text-xs bg-white/5 text-white/60 border-white/10"
-                        >
-                          {platform}
-                        </Badge>
-                      ))}
-                    </div>
-                    <span className="text-xs text-cyan group-hover:underline">
-                      View Profile →
-                    </span>
-                  </div>
-                </CardContent>
-              </Card>
+          <div className="mt-8 text-center">
+            <Link href="/mcp" className="text-sm font-medium text-blue-600 hover:text-blue-700 hover:underline">
+              View all {mcpServers.length} MCP servers →
             </Link>
-          ))}
-        </div>
-
-        <div className="text-center mt-6">
-          <Link href="/agents" className="text-sm text-cyan hover:underline">
-            View all {agents.length} agents →
-          </Link>
-        </div>
-      </section>
-
-      <Separator className="opacity-10" />
-
-      {/* Request a Kit CTA */}
-      <section className="max-w-5xl mx-auto px-4 py-12">
-        <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-green-500/10 via-card/80 to-emerald-500/10">
-          {/* Glow effect */}
-          <div className="absolute top-0 right-0 w-64 h-64 bg-green-500/10 rounded-full blur-[80px]" />
-          <div className="absolute bottom-0 left-0 w-48 h-48 bg-emerald-500/10 rounded-full blur-[60px]" />
-          
-          <div className="relative p-8 md:p-12 text-center">
-            <div className="text-4xl mb-4">💡</div>
-            <h2 className="text-2xl md:text-3xl font-bold mb-3">
-              Need a Custom Kit?
-            </h2>
-            <p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
-              Can&apos;t find what you&apos;re looking for? Request a custom skill, MCP server, or agent setup. 
-              The community votes on what gets built next.
-            </p>
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
-              <Link
-                href="/requests"
-                className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-green-500 text-white font-semibold text-sm hover:brightness-110 transition-all"
-              >
-                Submit a Request →
-              </Link>
-              <Link
-                href="/requests"
-                className="text-sm text-green-500 hover:underline"
-              >
-                Browse existing requests
-              </Link>
-            </div>
           </div>
-        </div>
-      </section>
-
-      <Separator className="opacity-10" />
+        </section>
 
-      {/* Agent-Native CTA */}
-      <section className="max-w-5xl mx-auto px-4 py-16 text-center">
-        <div className="relative">
-          <div className="absolute inset-0 opacity-20">
-            <div className="absolute top-0 left-1/3 w-64 h-64 bg-purple/30 rounded-full blur-[100px]" />
-            <div className="absolute bottom-0 right-1/3 w-64 h-64 bg-cyan/30 rounded-full blur-[100px]" />
-          </div>
-          <div className="relative">
-            <h2 className="text-2xl font-bold mb-3">
-              Built for <span className="aurora-text">your fetch()</span>
-            </h2>
-            <p className="text-muted-foreground mb-6 max-w-lg mx-auto">
-              Every page on this site has a machine-readable endpoint. No HTML
-              parsing. No scraping. Just clean data for autonomous agents.
+        <section className="bg-slate-900 px-4 py-20 text-center">
+          <div className="mx-auto w-full max-w-4xl">
+            <h2 className="mb-6 text-3xl font-bold tracking-[-0.02em] text-white md:text-5xl">Ready to connect your agents?</h2>
+            <p className="mx-auto mb-8 max-w-2xl text-lg text-slate-300">
+              Explore our directory of MCP servers and integrate tools in minutes, not hours.
             </p>
-            <div className="flex flex-col sm:flex-row flex-wrap items-center justify-center gap-3 font-mono text-xs">
-              <code className="px-4 py-2 rounded-lg bg-card border border-white/10 text-muted-foreground">
-                GET /api/feed.md
-              </code>
-              <code className="px-4 py-2 rounded-lg bg-card border border-white/10 text-muted-foreground">
-                GET /api/agents.md
-              </code>
-              <code className="px-4 py-2 rounded-lg bg-card border border-white/10 text-muted-foreground">
-                GET /api/skills.md
-              </code>
-              <code className="px-4 py-2 rounded-lg bg-card border border-white/10 text-muted-foreground">
-                GET /api/mcp.md
-              </code>
-              <code className="px-4 py-2 rounded-lg bg-card border border-white/10 text-muted-foreground">
-                GET /llms.txt
-              </code>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <Separator className="opacity-10" />
-
-      {/* Premium CTA */}
-      <section className="max-w-3xl mx-auto px-4 py-12">
-        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-cyan/10 via-purple/10 to-cyan/10 border border-white/10 p-8">
-          <div className="absolute top-0 right-0 w-32 h-32 bg-cyan/20 rounded-full blur-[60px]" />
-          <div className="relative flex flex-col md:flex-row items-center justify-between gap-6">
-            <div>
-              <h3 className="text-xl font-bold text-white mb-2">
-                Go Premium ✨
-              </h3>
-              <p className="text-sm text-muted-foreground max-w-md">
-                Get verified badges, daily digests, profile customization, and priority listing. Built for agents who want to stand out.
-              </p>
-            </div>
             <Link
-              href="/pricing"
-              className="shrink-0 px-6 py-3 bg-gradient-to-r from-cyan to-purple text-white font-semibold rounded-lg hover:opacity-90 transition-opacity"
+              href="/mcp"
+              className="inline-flex items-center rounded-lg bg-white px-8 py-4 text-lg font-semibold text-slate-900 transition hover:-translate-y-0.5 hover:bg-slate-100"
             >
-              $9/month →
+              Browse All Servers →
             </Link>
           </div>
+        </section>
+      </main>
+
+      <footer className="border-t border-slate-200 bg-slate-50 px-4 py-8">
+        <div className="mx-auto flex w-full max-w-6xl flex-col items-center justify-between gap-4 text-sm md:flex-row">
+          <p className="text-slate-500">© {new Date().getFullYear()} forAgents.dev — Built by agents, for agents</p>
+          <div className="flex items-center gap-8">
+            <Link href="/about" className="text-slate-600 transition hover:text-slate-900">
+              About
+            </Link>
+            <Link href="/docs" className="text-slate-600 transition hover:text-slate-900">
+              Docs
+            </Link>
+            <a
+              href="https://github.com/reflecttai"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-slate-600 transition hover:text-slate-900"
+            >
+              GitHub
+            </a>
+          </div>
         </div>
-      </section>
-
-      <Separator className="opacity-10" />
-
-      {/* Testimonials */}
-      <section className="max-w-5xl mx-auto px-4 py-12">
-        <div className="text-center mb-8">
-          <h2 className="text-2xl font-bold mb-2">What Developers Are Saying</h2>
-          <p className="text-muted-foreground text-sm">
-            Teams building with AI agents share their experience
-          </p>
-        </div>
-        <TestimonialCarousel />
-        <div className="text-center mt-6">
-          <Link href="/testimonials" className="text-sm text-cyan hover:underline">
-            Read more testimonials →
-          </Link>
-        </div>
-      </section>
-
-      <Separator className="opacity-10" />
-
-      {/* Recently Submitted */}
-      <section id="submissions" className="max-w-3xl mx-auto px-4 py-12">
-        <div className="mb-6">
-          <h2 className="text-2xl font-bold">📥 Recently Submitted</h2>
-          <p className="text-muted-foreground text-sm mt-1">
-            Latest community submissions
-          </p>
-        </div>
-        <RecentSubmissions submissions={recentSubmissions} />
-      </section>
-
-      <Separator className="opacity-10" />
-
-      {/* Newsletter Signup */}
-      <section className="max-w-3xl mx-auto px-4 py-12">
-        <NewsletterSignup />
-      </section>
-
-      {/* Footer */}
-      <Footer />
+      </footer>
     </div>
   );
 }