diff --git a/apps/app/public/x-logo.svg b/apps/app/public/x-logo.svg
new file mode 100644
index 0000000..437e2bf
--- /dev/null
+++ b/apps/app/public/x-logo.svg
@@ -0,0 +1,3 @@
+<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+</svg>
diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index eb236e0..5c02c56 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -125,14 +125,6 @@ export default function MCPBrowser() {
           <Hero3D />
         </section>
 
-        <section>
-          <DeveloperInfo />
-        </section>
-
-        <section className="mb-40">
-          <Stats />
-        </section>
-
         <section>
           <ConsumerInfo />
         </section>
@@ -151,6 +143,14 @@ export default function MCPBrowser() {
           </div>
         </section>
 
+        <section>
+          <DeveloperInfo />
+        </section>
+
+        <section className="mb-40">
+          <Stats />
+        </section>
+
         <section className="mb-20">
           <FAQSection />
         </section>
diff --git a/apps/app/src/components/custom-ui/consumer-info.tsx b/apps/app/src/components/custom-ui/consumer-info.tsx
index e0e2808..265dd15 100644
--- a/apps/app/src/components/custom-ui/consumer-info.tsx
+++ b/apps/app/src/components/custom-ui/consumer-info.tsx
@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils"
 import HighlighterText from "./highlighter-text"
 import InfoCard from "./info-card"
 import { ChartLine, DoorOpen, PiggyBank } from "lucide-react"
+import McpExampleCard from "./mcp-example-card"
 
 interface ConsumerInfoProps extends React.HTMLAttributes<HTMLElement> {
   className?: string
@@ -26,14 +27,17 @@ export default function ConsumerInfo({
         {/* Header */}
         <div className="flex flex-col gap-4">
           <div className="inline-flex">
-            <HighlighterText>FOR ANY HUMAN</HighlighterText>
+            <HighlighterText>CONSUME MCP SERVERS</HighlighterText>
           </div>
-          <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold font-host text-foreground leading-tight max-w-3xl">
-            Let your agents transact.{" "}
-            <span className="font-normal text-muted-foreground">Fund your account with FIAT and use any paid MCP.</span>
+          <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold font-host text-foreground leading-tight max-w-4xl">
+            Pay cents per tool call.{" "}
+            <span className="font-normal text-muted-foreground">Instead of expensive subscriptions. Consume any paid MCP with a single account.</span>
           </h2>
         </div>
 
+        {/* MCP Example Card */}
+        <McpExampleCard serverId="d534ddca-b113-4807-9f9f-e28f74f2cc49" />
+
         {/* Info Cards Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           <InfoCard
diff --git a/apps/app/src/components/custom-ui/developer-info.tsx b/apps/app/src/components/custom-ui/developer-info.tsx
index 628f012..4f0935e 100644
--- a/apps/app/src/components/custom-ui/developer-info.tsx
+++ b/apps/app/src/components/custom-ui/developer-info.tsx
@@ -27,7 +27,7 @@ export default function DeveloperInfo({
         {/* Header */}
         <div className="flex flex-col gap-4">
           <div className="inline-flex">
-            <HighlighterText>FOR BUSINESSES & DEVELOPERS</HighlighterText>
+            <HighlighterText>PROVIDE PAID ENDPOINTS</HighlighterText>
           </div>
           <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold font-host text-foreground leading-tight max-w-3xl">
             The AI Gateway for your app.{" "}
diff --git a/apps/app/src/components/custom-ui/hero-3d.tsx b/apps/app/src/components/custom-ui/hero-3d.tsx
index ceebaaa..0e24384 100644
--- a/apps/app/src/components/custom-ui/hero-3d.tsx
+++ b/apps/app/src/components/custom-ui/hero-3d.tsx
@@ -123,7 +123,8 @@ export default function Hero3D({
             Payments infrastructure for the agent economy
           </h1>
           <p className="text-sm sm:text-lg text-foreground/80 leading-relaxed max-w-lg">
-            In one minute, add our open-source proxy to your APIs or MCPs and get discovered and paid by autonomous agents.
+            Single connection to use paid MCP tools across any client.<br />
+            Pay-per-use instead of expensive subscriptions.
           </p>
         </motion.div>
 
@@ -139,14 +140,14 @@ export default function Hero3D({
           animate={isMounted ? "visible" : "hidden"}
           variants={fadeUp}
         >
-          <Link href="/register" className="flex-1 min-w-0">
+          <Link href="/servers" className="flex-1 min-w-0">
             <Button variant="customTallPrimary" size="tall" className="w-full px-3 lg:px-6">
-              MONETIZE SERVERS
+              BROWSE SERVERS
             </Button>
           </Link>
-          <Link href="https://docs.mcpay.tech" target="_blank" rel="noopener noreferrer" className="flex-1 min-w-0">
+          <Link href="/register" className="flex-1 min-w-0">
             <Button variant="customTallSecondary" size="tall" className="w-full px-3 lg:px-6">
-              DOCUMENTATION
+              MONETIZE SERVERS
             </Button>
           </Link>
         </motion.div>
@@ -231,19 +232,20 @@ export default function Hero3D({
 
             {/* Subheading */}
             <p className="text-base sm:text-lg text-foreground/80 leading-relaxed">
-              In one minute, add our open-source proxy to your APIs or MCPs and get discovered and paid by autonomous agents.
+              Single connection to use paid MCP tools across any client.<br />
+              Pay-per-use instead of expensive subscriptions.
             </p>
 
             {/* CTAs */}
             <div className="flex flex-wrap gap-4 pt-2">
-              <Link href="/register" className="flex-1 lg:flex-none">
+              <Link href="/servers" className="flex-1 lg:flex-none">
                 <Button variant="customTallPrimary" size="tall" className="w-full min-w-[220px]">
-                  MONETIZE SERVERS
+                  BROWSE SERVERS
                 </Button>
               </Link>
-              <Link href="https://docs.mcpay.tech" target="_blank" rel="noopener noreferrer" className="flex-1 lg:flex-none">
+              <Link href="/register" className="flex-1 lg:flex-none">
                 <Button variant="customTallSecondary" size="tall" className="w-full min-w-[220px]">
-                  DOCUMENTATION
+                  MONETIZE SERVERS
                 </Button>
               </Link>
             </div>
diff --git a/apps/app/src/components/custom-ui/highlighter-text.tsx b/apps/app/src/components/custom-ui/highlighter-text.tsx
index 4c763a0..d811a7c 100644
--- a/apps/app/src/components/custom-ui/highlighter-text.tsx
+++ b/apps/app/src/components/custom-ui/highlighter-text.tsx
@@ -11,6 +11,8 @@ const highlighterTextVariants = cva(
         default: "bg-muted text-muted-foreground",
         blue: "text-blue-700 bg-blue-500/10 dark:text-blue-200 dark:bg-blue-800/50",
         amber: "text-amber-700 bg-amber-500/10 dark:text-amber-200 dark:bg-amber-800/50",
+        red: "text-red-700 bg-red-500/10 dark:text-red-200 dark:bg-red-800/50",
+        green: "text-teal-700 bg-teal-500/10 dark:text-teal-200 dark:bg-teal-800/50",
       },
     },
     defaultVariants: {
@@ -27,6 +29,8 @@ const highlighterIconVariants = cva(
         default: "bg-muted text-muted-foreground",
         blue: "text-blue-700 bg-blue-500/10 dark:text-blue-200 dark:bg-blue-800/50",
         amber: "text-amber-700 bg-amber-500/10 dark:text-amber-200 dark:bg-amber-800/50",
+        red: "text-red-700 bg-red-500/10 dark:text-red-200 dark:bg-red-800/50",
+        green: "text-teal-700 bg-teal-500/10 dark:text-teal-200 dark:bg-teal-800/50",
       },
     },
     defaultVariants: {
diff --git a/apps/app/src/components/custom-ui/info-card.tsx b/apps/app/src/components/custom-ui/info-card.tsx
index 28805aa..16a93f3 100644
--- a/apps/app/src/components/custom-ui/info-card.tsx
+++ b/apps/app/src/components/custom-ui/info-card.tsx
@@ -25,7 +25,7 @@ export default function InfoCard({
   return (
     <div
       className={cn(
-        "flex flex-col gap-8 p-6 rounded-lg bg-card",
+        "flex flex-col gap-8 p-6 rounded-[2px] bg-card",
         className
       )}
       {...props}
diff --git a/apps/app/src/components/custom-ui/mcp-example-card.tsx b/apps/app/src/components/custom-ui/mcp-example-card.tsx
new file mode 100644
index 0000000..7396bd3
--- /dev/null
+++ b/apps/app/src/components/custom-ui/mcp-example-card.tsx
@@ -0,0 +1,273 @@
+"use client"
+
+import * as React from "react"
+import { useState, useEffect, useMemo } from "react"
+import { cn } from "@/lib/utils"
+import HighlighterText from "./highlighter-text"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+import { PlugZap } from "lucide-react"
+import { ToolExecutionModal, type ToolFromMcpServerWithStats } from "./tool-execution-modal"
+import { mcpDataApi, urlUtils } from "@/lib/client/utils"
+import { Spinner } from "@/components/ui/spinner"
+import Image from "next/image"
+import { toast } from "sonner"
+
+interface McpExampleCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string
+  serverId?: string
+}
+
+export default function McpExampleCard({
+  className,
+  serverId,
+  ...props
+}: McpExampleCardProps) {
+  const [selectedTool, setSelectedTool] = useState<ToolFromMcpServerWithStats | null>(null)
+  const [showToolModal, setShowToolModal] = useState(false)
+  const [data, setData] = useState<{
+    serverId: string
+    origin?: string
+    tools: Array<Record<string, unknown>>
+    summary?: { totalTools: number; totalRequests: number }
+    info?: { name?: string; description?: string }
+  } | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [totalRequests, setTotalRequests] = useState<number | null>(null)
+  const [loadingRequests, setLoadingRequests] = useState(true)
+
+  useEffect(() => {
+    if (!serverId) {
+      setLoading(false)
+      setLoadingRequests(false)
+      return
+    }
+
+    // Fetch server data directly using serverId
+    const fetchData = async () => {
+      setLoading(true)
+      setLoadingRequests(true)
+      
+      try {
+        const serverData = await mcpDataApi.getServerById(serverId)
+        setData({
+          serverId: serverData.serverId,
+          origin: serverData.origin,
+          tools: (serverData.tools || []) as Array<Record<string, unknown>>,
+          summary: serverData.summary,
+          info: serverData.info,
+        })
+        setTotalRequests(serverData.summary?.totalRequests || 0)
+        setLoadingRequests(false)
+      } catch (e) {
+        console.error('Failed to fetch server data:', e)
+        setData(null)
+        setTotalRequests(0)
+        setLoadingRequests(false)
+      } finally {
+        setLoading(false)
+      }
+    }
+    
+    fetchData()
+  }, [serverId])
+
+  // Normalize tools data exactly like server-page-client does
+  const normalizedTools = useMemo(() => {
+    if (!data?.tools) return []
+    return (data.tools || []).map((t, idx) => {
+      const annotations = (t as { annotations?: Record<string, unknown> })?.annotations || {};
+      const paymentHint = Boolean(annotations.paymentHint);
+      const paymentPriceUSD = annotations.paymentPriceUSD as number | undefined;
+      const paymentNetworks = annotations.paymentNetworks as Array<{
+        network: string;
+        recipient: string;
+        maxAmountRequired: string;
+        asset: { address: string; symbol?: string; decimals?: number };
+        type: 'evm' | 'svm';
+      }> | undefined;
+      const paymentVersion = annotations.paymentVersion as number | undefined;
+
+      return {
+        id: (t?.id as string) || (t?.name as string) || `tool-${idx}`,
+        name: (t?.name as string) || `tool-${idx}`,
+        description: (t?.description as string) || '',
+        inputSchema: ((t as { inputSchema?: unknown; parameters?: { jsonSchema?: unknown } })?.inputSchema || (t as { parameters?: { jsonSchema?: unknown } })?.parameters?.jsonSchema || {}) as Record<string, unknown>,
+        pricing: Array.isArray((t as { pricing?: unknown[] })?.pricing) ? (t as { pricing?: unknown[] }).pricing as Array<{ label?: string; amount?: number; currency?: string; active?: boolean }> : [],
+        isMonetized: Array.isArray((t as { pricing?: Array<{ active?: boolean }> })?.pricing) && ((t as { pricing?: Array<{ active?: boolean }> }).pricing || []).some((p) => p?.active === true),
+        paymentHint,
+        paymentPriceUSD,
+        paymentNetworks,
+        paymentVersion,
+      };
+    })
+  }, [data?.tools])
+
+  // Get first 5 tools
+  const displayTools = useMemo(() => {
+    return normalizedTools.slice(0, 5)
+  }, [normalizedTools])
+
+  const openToolModal = (tool: typeof normalizedTools[0]) => {
+    // Convert normalized tool to format expected by ToolExecutionModal
+    // Include payment info in the tool object as the modal expects it
+    const toolForModal = {
+      id: tool.id,
+      name: tool.name,
+      description: tool.description,
+      inputSchema: tool.inputSchema || {},
+      pricing: tool.pricing || [],
+      isMonetized: tool.isMonetized || false,
+      paymentHint: tool.paymentHint,
+      paymentPriceUSD: tool.paymentPriceUSD,
+      paymentNetworks: tool.paymentNetworks,
+    } as unknown as ToolFromMcpServerWithStats
+    
+    setSelectedTool(toolForModal)
+    setShowToolModal(true)
+  }
+
+  return (
+    <>
+      <div className={cn("flex flex-col gap-6 rounded-[2px] bg-card p-6", className)} {...props}>
+        <div className="inline-flex">
+          <HighlighterText className="!text-foreground">SERVER EXAMPLE</HighlighterText>
+        </div>
+
+        {/* Image + Title Section */}
+        <div className="flex flex-col gap-0.5">
+          <div className="flex items-center gap-4">
+            {/* Square black image - bigger with same rounded corners as tools, smaller on mobile */}
+            <div className="w-16 h-16 sm:w-40 sm:h-40 bg-black rounded-[2px] flex-shrink-0 flex items-center justify-center p-4 sm:p-12">
+              <Image 
+                src="/x-logo.svg" 
+                alt="X Logo" 
+                width={80} 
+                height={80} 
+                className="w-full h-full object-contain"
+              />
+            </div>
+            
+            {/* Title */}
+            <div className="flex flex-col gap-2 sm:gap-4 flex-1">
+              <h3 className="text-2xl sm:text-3xl font-bold font-host text-foreground">
+                {data?.info?.name || "Loading..."}
+              </h3>
+              
+              {/* Description - hidden on mobile, shown next to title on desktop */}
+              <p className="hidden sm:block text-sm sm:text-base text-muted-foreground">
+                <span className="text-foreground">Regular subscription</span>{" "}
+                <HighlighterText variant="red" className="!text-sm">$200 /month</HighlighterText>{" "}
+                <span className="text-foreground">via MCPay</span>{" "}
+                <HighlighterText variant="green" className="!text-sm">$0.05 /tool</HighlighterText>
+              </p>
+            </div>
+          </div>
+          
+          {/* Description - shown below image on mobile */}
+          <div className="block sm:hidden text-sm text-muted-foreground mt-4">
+            <div>
+              <span className="text-foreground">Regular subscription</span>{" "}
+              <HighlighterText variant="red">$200 /month</HighlighterText>
+            </div>
+            <div className="mt-3">
+              <span className="text-foreground">via MCPay</span>{" "}
+              <HighlighterText variant="green">$0.05 /tool</HighlighterText>
+            </div>
+          </div>
+        </div>
+
+        {/* Tools List - First 5 tools */}
+        <div className="space-y-3">
+          {loading ? (
+            <div className="text-center py-8 text-muted-foreground">Loading tools...</div>
+          ) : displayTools.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">No tools available</div>
+          ) : (
+            displayTools.map((tool) => (
+            <div
+              key={tool.id}
+              className="flex items-center justify-between gap-4 p-4 pr-6 md:pr-4 rounded-[2px] bg-muted-2"
+            >
+              {/* Left: Name + Description */}
+              <div className="flex-1 min-w-0">
+                <h4 className="font-mono text-sm font-medium text-foreground mb-1">{tool.name}</h4>
+                {tool.description && (
+                  <p className="text-sm text-muted-foreground">{tool.description}</p>
+                )}
+              </div>
+              
+              {/* Right: Price + RUN Button */}
+              <div className="flex items-center gap-2 shrink-0">
+                {tool.paymentHint && tool.paymentPriceUSD && (
+                  <HighlighterText variant="blue">${tool.paymentPriceUSD}</HighlighterText>
+                )}
+                <Button
+                  variant="customTallAccent"
+                  size="sm"
+                  className="h-8 rounded-[2px]"
+                  onClick={() => openToolModal(tool)}
+                >
+                  RUN
+                </Button>
+              </div>
+            </div>
+            ))
+          )}
+        </div>
+
+        {/* Text + Buttons Section */}
+        <div className="flex flex-col lg:flex-row lg:items-center gap-6 lg:gap-12">
+          <p className="font-inter font-medium leading-relaxed text-lg text-left lg:max-w-[50%]">
+            <span className="text-foreground">Consume any paid MCP server with a single account.</span>{" "}
+            <span className="text-muted-foreground">Pay per tool call, no subscriptions required.</span>
+          </p>
+          <div className="flex flex-col lg:flex-row gap-4 lg:max-w-[50%] lg:flex-1">
+            {data?.serverId && (
+              <Link 
+                href={`/servers/${data.serverId}`}
+                className="w-full lg:flex-1 block"
+              >
+                <Button variant="customTallSecondary" size="tall" className="w-full rounded-[2px]">
+                  SERVER DETAILS
+                </Button>
+              </Link>
+            )}
+            <Button
+              variant="customTallAccentAmber"
+              size="tall"
+              className="w-full lg:flex-1 rounded-[2px]"
+              onClick={() => {
+                if (data?.origin) {
+                  const url = urlUtils.getMcpUrl(data.origin)
+                  navigator.clipboard.writeText(url)
+                  toast.success("Copied MCP endpoint to clipboard")
+                } else {
+                  toast.error("Server URL not available")
+                }
+              }}
+            >
+              <PlugZap className="size-4 mr-2" />
+              CONNECT
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Tool Execution Modal */}
+      {selectedTool && (
+        <ToolExecutionModal
+          isOpen={showToolModal}
+          onClose={() => {
+            setShowToolModal(false)
+            setSelectedTool(null)
+          }}
+          tool={selectedTool}
+          serverId={data?.serverId || ""}
+          url={data?.origin}
+        />
+      )}
+    </>
+  )
+}
+
diff --git a/apps/app/src/components/custom-ui/minimal-explorer.tsx b/apps/app/src/components/custom-ui/minimal-explorer.tsx
index 1cb0c45..78ba1c4 100644
--- a/apps/app/src/components/custom-ui/minimal-explorer.tsx
+++ b/apps/app/src/components/custom-ui/minimal-explorer.tsx
@@ -187,7 +187,7 @@ export default function MinimalExplorer() {
     loading?: boolean
   }) => (
     <motion.div variants={fadeUp} layout>
-      <Card className="border bg-background rounded-md p-0 gap-0">
+      <Card className="border bg-background rounded-[2px] p-0 gap-0">
         <CardContent className="px-6 py-6">
           <div className="text-sm font-medium text-muted-foreground mb-2">
             {label}
diff --git a/apps/app/src/components/custom-ui/navbar.tsx b/apps/app/src/components/custom-ui/navbar.tsx
index 3a6a33c..67c2d18 100644
--- a/apps/app/src/components/custom-ui/navbar.tsx
+++ b/apps/app/src/components/custom-ui/navbar.tsx
@@ -71,7 +71,7 @@ export default function Navbar() {
             </Link>
           </div>
 
-          {/* Center (desktop only): BROWSE / EXPLORER / REGISTER */}
+          {/* Center (desktop only): BROWSE / MONETIZE / EXPLORER */}
           <div className="hidden sm:flex justify-center items-center gap-8">
             <Button
               asChild
@@ -83,16 +83,16 @@ export default function Navbar() {
             <Button
               asChild
               variant="link"
-              className={`${linkClasses} ${pathname === "/explorer" ? activeLinkClasses : ""}`}
+              className={`${linkClasses} ${pathname === "/register" ? activeLinkClasses : ""}`}
             >
-              <Link href="/explorer">EXPLORER</Link>
+              <Link href="/register">MONETIZE</Link>
             </Button>
             <Button
               asChild
               variant="link"
-              className={`${linkClasses} ${pathname === "/register" ? activeLinkClasses : ""}`}
+              className={`${linkClasses} ${pathname === "/explorer" ? activeLinkClasses : ""}`}
             >
-              <Link href="/register">REGISTER</Link>
+              <Link href="/explorer">EXPLORER</Link>
             </Button>
           </div>
 
@@ -172,18 +172,18 @@ export default function Navbar() {
                   </SheetClose>
                   <SheetClose asChild>
                     <Link
-                      href="/explorer"
+                      href="/register"
                       className="block font-mono tracking-wide text-lg text-muted-foreground hover:text-foreground"
                     >
-                      EXPLORER
+                      MONETIZE
                     </Link>
                   </SheetClose>
                   <SheetClose asChild>
                     <Link
-                      href="/register"
+                      href="/explorer"
                       className="block font-mono tracking-wide text-lg text-muted-foreground hover:text-foreground"
                     >
-                      REGISTER
+                      EXPLORER
                     </Link>
                   </SheetClose>
                 </div>
diff --git a/apps/app/src/components/custom-ui/stats-card.tsx b/apps/app/src/components/custom-ui/stats-card.tsx
index d1da619..e350780 100644
--- a/apps/app/src/components/custom-ui/stats-card.tsx
+++ b/apps/app/src/components/custom-ui/stats-card.tsx
@@ -34,7 +34,7 @@ export default function StatsCard({
   return (
     <div
       className={cn(
-        "flex flex-col gap-4 p-6 rounded-lg bg-card",
+        "flex flex-col gap-4 p-6 rounded-[2px] bg-card",
         className
       )}
       {...props}
diff --git a/apps/app/src/components/custom-ui/stats.tsx b/apps/app/src/components/custom-ui/stats.tsx
index b15e0ce..6d2821a 100644
--- a/apps/app/src/components/custom-ui/stats.tsx
+++ b/apps/app/src/components/custom-ui/stats.tsx
@@ -40,7 +40,7 @@ export default function Stats({
           </div>
 
           {/* Minimal Explorer Card */}
-          <div className="rounded-lg bg-card py-2">
+          <div className="rounded-[2px] bg-card py-2">
             <MinimalExplorer />
           </div>
         </div>
diff --git a/apps/app/src/components/custom-ui/visual-proxy.tsx b/apps/app/src/components/custom-ui/visual-proxy.tsx
index 9d95274..7c88d74 100644
--- a/apps/app/src/components/custom-ui/visual-proxy.tsx
+++ b/apps/app/src/components/custom-ui/visual-proxy.tsx
@@ -112,7 +112,7 @@ export default function VisualProxy({
   return (
     <div
       className={cn(
-        "flex flex-col gap-12 rounded-lg bg-card p-6",
+        "flex flex-col gap-12 rounded-[2px] bg-card p-6",
         className
       )}
       {...props}