diff --git a/apps/app/src/app/api/og/server/[id]/route.tsx b/apps/app/src/app/api/og/server/[id]/route.tsx
index 2037f3c..ac08570 100644
--- a/apps/app/src/app/api/og/server/[id]/route.tsx
+++ b/apps/app/src/app/api/og/server/[id]/route.tsx
@@ -116,7 +116,7 @@ export async function GET(
                     display: "block",
                   }}
                 />
-                <div style={{ fontWeight: 500, display: "block" }}>MCPay — Payments for MCPs</div>
+                <div style={{ fontWeight: 500, display: "block" }}>MCPay: make your AIs more capable</div>
               </div>
               <div style={{ fontSize: 15, opacity: 0.55, paddingLeft: 22, display: "block" }}>mcpay.tech</div>
             </div>
diff --git a/apps/app/src/app/layout.tsx b/apps/app/src/app/layout.tsx
index 378b96b..864cb0b 100644
--- a/apps/app/src/app/layout.tsx
+++ b/apps/app/src/app/layout.tsx
@@ -28,7 +28,7 @@ const hostGrotesk = Host_Grotesk({
 });
 
 export const metadata: Metadata = {
-  title: "MCPay — Payments for MCPs",
+  title: "MCPay: make your AIs more capable",
   description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
   icons: {
     icon: [
@@ -45,7 +45,7 @@ export const metadata: Metadata = {
     ],
   },
   openGraph: {
-    title: "MCPay — Payments for MCPs",
+    title: "MCPay: make your AIs more capable",
     description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
     type: "website",
     url: "https://mcpay.tech",
@@ -55,13 +55,13 @@ export const metadata: Metadata = {
         url: '/mcpay-agentic-payments-og-image-14112025.png',
         width: 1200,
         height: 630,
-        alt: 'MCPay — Payments for MCPs',
+        alt: 'MCPay: make your AIs more capable',
       }
     ],
   },
   twitter: {
     card: 'summary_large_image',
-    title: "MCPay — Payments for MCPs",
+    title: "MCPay: make your AIs more capable",
     description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
     images: ['/mcpay-agentic-payments-og-image-14112025.png'],
     creator: '@mcpaytech',
diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 5c02c56..8d3fd2f 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -5,17 +5,18 @@ import DeveloperInfo from "@/components/custom-ui/developer-info"
 import FAQSection from "@/components/custom-ui/faq-section"
 import Footer from "@/components/custom-ui/footer"
 import GithubInfo from "@/components/custom-ui/github-info"
-import Hero3D from "@/components/custom-ui/hero-3d"
+import Hero3D, { SupportedBySection } from "@/components/custom-ui/hero-3d"
 import ServersGrid from "@/components/custom-ui/servers-grid"
 import Stats from "@/components/custom-ui/stats"
-import TypingAnimation from "@/components/custom-ui/typing-animation"
 import { useTheme } from "@/components/providers/theme-context"
 import { Button } from "@/components/ui/button"
-import { useWindowScroll } from "@/hooks/use-chat-scroll"
 import { mcpDataApi, McpServer } from "@/lib/client/utils"
 import { ArrowRight, Rocket } from "lucide-react"
 import Link from "next/link"
 import { useEffect, useState } from "react"
+import { useAccountModal } from "@/components/hooks/use-account-modal"
+import { AccountModal } from "@/components/custom-ui/account-modal"
+import { useSession } from "@/lib/client/auth"
 
 
 export default function MCPBrowser() {
@@ -37,7 +38,8 @@ export default function MCPBrowser() {
 
 
   const { isDark } = useTheme()
-  const { isAtBottom: hasReachedBottom } = useWindowScroll(200)
+  const { isOpen, defaultTab, openModal, closeModal } = useAccountModal()
+  const { data: session } = useSession()
 
   const getFriendlyErrorMessage = (error: string) => {
     if (error.includes('404')) {
@@ -125,6 +127,10 @@ export default function MCPBrowser() {
           <Hero3D />
         </section>
 
+        <section className="mb-8 md:mb-12">
+          <SupportedBySection />
+        </section>
+
         <section>
           <ConsumerInfo />
         </section>
@@ -159,17 +165,26 @@ export default function MCPBrowser() {
           <GithubInfo />
         </section>
 
-        <section className="mb-2">
-          <div className="max-w-6xl px-4 md:px-6 mx-auto text-center">
-            <TypingAnimation
-              text="Join the future of agentic payments."
-              trigger={hasReachedBottom}
-              speed={20}
-            />
+        <section className="mb-20">
+          <div className="max-w-6xl px-4 md:px-6 mx-auto text-center space-y-6">
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-medium font-host text-foreground leading-tight">
+              Make your AIs more capable.
+            </h2>
+            {!session?.user && (
+              <Button
+                variant="customTallAccent"
+                size="tall"
+                onClick={() => openModal("wallets")}
+                className="min-w-[220px]"
+              >
+                SIGN IN
+              </Button>
+            )}
           </div>
         </section>
       </div>
       <Footer />
+      <AccountModal isOpen={isOpen} onClose={closeModal} defaultTab={defaultTab} />
     </div>
   )
 }
diff --git a/apps/app/src/components/custom-ui/hero-3d.tsx b/apps/app/src/components/custom-ui/hero-3d.tsx
index 0e24384..6925319 100644
--- a/apps/app/src/components/custom-ui/hero-3d.tsx
+++ b/apps/app/src/components/custom-ui/hero-3d.tsx
@@ -64,6 +64,79 @@ const getMaskStyle = (src: string): React.CSSProperties => ({
   WebkitMaskPosition: "center",
 })
 
+export function SupportedBySection() {
+  const prefersReduced = useReducedMotion()
+  const [isMounted, setIsMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  const fadeUp: Variants = React.useMemo(
+    () => ({
+      hidden: { opacity: 0, y: prefersReduced ? 0 : 8 },
+      visible: {
+        opacity: 1,
+        y: 0,
+        transition: { duration: prefersReduced ? 0 : 0.4, ease: easeOut },
+      },
+    }),
+    [prefersReduced]
+  )
+
+  return (
+    <motion.section
+      className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-16"
+      initial="hidden"
+      animate={isMounted ? "visible" : "hidden"}
+      variants={fadeUp}
+    >
+      <div className="flex flex-col items-start space-y-4">
+        <HighlighterText>SUPPORTED BY</HighlighterText>
+        <div className="flex flex-wrap gap-3">
+          {SUPPORTED_BY_LOGOS.map((logo) => {
+            const logoSize = getLogoSize(logo.name)
+            return (
+              <Link
+                key={logo.name}
+                href={logo.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group"
+              >
+                <div
+                  className={cn(
+                    "h-8 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300",
+                    "bg-muted/50",
+                    "group-hover:bg-muted"
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "transition-all duration-300",
+                      logoSize.className,
+                      "opacity-70 group-hover:opacity-100",
+                      "[background-color:var(--foreground)]"
+                    )}
+                    style={getMaskStyle(logo.src)}
+                  />
+                  <Image
+                    src={logo.src}
+                    alt={`${logo.name} logo`}
+                    width={logoSize.width}
+                    height={logoSize.height}
+                    className="sr-only"
+                  />
+                </div>
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </motion.section>
+  )
+}
+
 export default function Hero3D({
   className,
 }: {
@@ -97,137 +170,68 @@ export default function Hero3D({
     >
       <div className="flex flex-col lg:grid lg:grid-cols-2 gap-8 lg:gap-12 lg:items-stretch lg:min-h-[600px]">
         {/* Mobile Layout */}
-        {/* Stats */}
-        <motion.div
-          className="flex flex-wrap gap-3 order-1 lg:hidden"
-          initial="hidden"
-          animate={isMounted ? "visible" : "hidden"}
-          variants={fadeUp}
-        >
-          <HighlighterText>
-            TRANSACTIONS: <span className="!text-foreground">+ 100,000</span>
-          </HighlighterText>
-          <HighlighterText>
-            VOLUME: <span className="!text-foreground">+ $30,000</span>
-          </HighlighterText>
-        </motion.div>
-
         {/* Heading and Subheading - Mobile */}
         <motion.div
-          className="flex flex-col gap-1 order-2 lg:hidden"
+          className="flex flex-col gap-1 order-1 lg:hidden"
           initial="hidden"
           animate={isMounted ? "visible" : "hidden"}
           variants={fadeUp}
         >
-          <h1 className="text-3xl sm:text-3xl lg:text-4xl font-bold font-host text-foreground leading-tight">
-            Payments infrastructure for the agent economy
+          <h1 className="text-3xl sm:text-3xl lg:text-4xl font-semibold font-host text-foreground leading-tight">
+            The best way for AI to access and pay for online services
           </h1>
           <p className="text-sm sm:text-lg text-foreground/80 leading-relaxed max-w-lg">
-            Single connection to use paid MCP tools across any client.<br />
-            Pay-per-use instead of expensive subscriptions.
+            Single connection to use paid MCP tools across any client. Pay-per-use instead of expensive subscriptions.
           </p>
         </motion.div>
 
         {/* 3D Container - Mobile */}
-        <div className="order-4 lg:hidden">
+        <div className="order-2 lg:hidden">
           <Logo3D className="h-[300px] min-h-0" delay={prefersReduced ? 0 : 0.4} duration={prefersReduced ? 0 : 1.2} />
         </div>
 
         {/* CTAs - Mobile */}
         <motion.div
-          className="flex gap-4 pt-2 order-5 lg:hidden -mx-4 px-4"
+          className="flex flex-col gap-4 pt-2 order-3 lg:hidden -mx-4 px-4"
           initial="hidden"
           animate={isMounted ? "visible" : "hidden"}
           variants={fadeUp}
         >
-          <Link href="/servers" className="flex-1 min-w-0">
-            <Button variant="customTallPrimary" size="tall" className="w-full px-3 lg:px-6">
+          <Link href="/servers" className="w-full">
+            <Button variant="customTallPrimary" size="tall" animated className="w-full px-3 lg:px-6">
               BROWSE SERVERS
             </Button>
           </Link>
-          <Link href="/register" className="flex-1 min-w-0">
-            <Button variant="customTallSecondary" size="tall" className="w-full px-3 lg:px-6">
+          <Link href="/register" className="w-full">
+            <Button variant="customTallSecondary" size="tall" animated className="w-full px-3 lg:px-6">
               MONETIZE SERVERS
             </Button>
           </Link>
         </motion.div>
 
-        {/* Supported By Section - Mobile */}
+        {/* Stats - Mobile (moved to bottom) */}
         <motion.div
-          className="space-y-4 order-6 lg:hidden"
+          className="flex flex-wrap gap-3 order-4 lg:hidden text-muted-foreground font-mono text-sm tracking-wider uppercase"
           initial="hidden"
           animate={isMounted ? "visible" : "hidden"}
           variants={fadeUp}
         >
-          <HighlighterText>SUPPORTED BY</HighlighterText>
-          <div className="flex flex-wrap gap-3">
-            {SUPPORTED_BY_LOGOS.map((logo) => {
-              const logoSize = getLogoSize(logo.name)
-              return (
-                <Link
-                  key={logo.name}
-                  href={logo.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group"
-                >
-                  <div
-                    className={cn(
-                      "h-8 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300",
-                      "bg-muted/50",
-                      "group-hover:bg-muted"
-                    )}
-                  >
-                    <div
-                      className={cn(
-                        "transition-all duration-300",
-                        logoSize.className,
-                        "opacity-70 group-hover:opacity-100",
-                        "[background-color:var(--foreground)]"
-                      )}
-                      style={getMaskStyle(logo.src)}
-                    />
-                    <Image
-                      src={logo.src}
-                      alt={`${logo.name} logo`}
-                      width={logoSize.width}
-                      height={logoSize.height}
-                      className="sr-only"
-                    />
-                  </div>
-                </Link>
-              )
-            })}
-          </div>
+          <span>TRANSACTIONS: <span className="!text-foreground font-medium">+100,000</span></span>
+          <span>VOLUME: <span className="!text-foreground font-medium">+$30,000</span></span>
         </motion.div>
 
         {/* Desktop Layout - Left Column */}
         <div className="hidden lg:flex lg:flex-col lg:justify-between lg:gap-24 lg:order-1 lg:col-span-1 lg:h-full">
-          {/* Stats */}
+          {/* Main Content - Top Aligned */}
           <motion.div
-            className="flex flex-wrap gap-3"
-            initial="hidden"
-            animate={isMounted ? "visible" : "hidden"}
-            variants={fadeUp}
-          >
-            <HighlighterText>
-              TRANSACTIONS: <span className="text-foreground">+ 100,000</span>
-            </HighlighterText>
-            <HighlighterText>
-              VOLUME: <span className="text-foreground">+ $30,000</span>
-            </HighlighterText>
-          </motion.div>
-
-          {/* Main Content */}
-          <motion.div
-            className="flex-1 flex flex-col justify-center space-y-3 max-w-lg"
+            className="flex flex-col space-y-3 max-w-lg"
             initial="hidden"
             animate={isMounted ? "visible" : "hidden"}
             variants={fadeUp}
           >
             {/* Heading */}
-            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold font-host text-foreground leading-tight">
-              Payments infrastructure for the agent economy
+            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-semibold font-host text-foreground leading-tight">
+              The best way for AI to access and pay for online services
             </h1>
 
             {/* Subheading */}
@@ -237,73 +241,29 @@ export default function Hero3D({
             </p>
 
             {/* CTAs */}
-            <div className="flex flex-wrap gap-4 pt-2">
+            <div className="flex flex-wrap gap-4 pt-6">
               <Link href="/servers" className="flex-1 lg:flex-none">
-                <Button variant="customTallPrimary" size="tall" className="w-full min-w-[220px]">
+                <Button variant="customTallPrimary" size="tall" animated className="w-full min-w-[220px]">
                   BROWSE SERVERS
                 </Button>
               </Link>
               <Link href="/register" className="flex-1 lg:flex-none">
-                <Button variant="customTallSecondary" size="tall" className="w-full min-w-[220px]">
+                <Button variant="customTallSecondary" size="tall" animated className="w-full min-w-[220px]">
                   MONETIZE SERVERS
                 </Button>
               </Link>
             </div>
           </motion.div>
 
-          {/* Supported By Section */}
+          {/* Stats - Bottom Aligned */}
           <motion.div
-            className="space-y-4"
+            className="flex flex-wrap gap-3 text-muted-foreground font-mono text-sm tracking-wider uppercase"
             initial="hidden"
             animate={isMounted ? "visible" : "hidden"}
             variants={fadeUp}
           >
-            <HighlighterText>SUPPORTED BY</HighlighterText>
-            <div className="flex flex-wrap gap-3">
-              {SUPPORTED_BY_LOGOS.map((logo) => (
-                <Link
-                  key={logo.name}
-                  href={logo.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group"
-                >
-                  <div
-                    className={cn(
-                      "h-8 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300",
-                      "bg-muted/50",
-                      "group-hover:bg-muted"
-                    )}
-                  >
-                    <div
-                      className={cn(
-                        "transition-all duration-300",
-                        logo.name === "coinbase" ? "h-7 w-[70px]" : logo.name === "polygon" ? "h-8 w-[80px]" : logo.name === "vlayer" ? "h-6 w-[60px]" : logo.name === "ethglobal" ? "h-5 w-[80px]" : "h-12 w-[160px]",
-                        "opacity-70 group-hover:opacity-100",
-                        "[background-color:var(--foreground)]"
-                      )}
-                      style={{
-                        maskImage: `url(${logo.src})`,
-                        maskSize: "contain",
-                        maskRepeat: "no-repeat",
-                        maskPosition: "center",
-                        WebkitMaskImage: `url(${logo.src})`,
-                        WebkitMaskSize: "contain",
-                        WebkitMaskRepeat: "no-repeat",
-                        WebkitMaskPosition: "center"
-                      }}
-                    />
-                    <Image
-                      src={logo.src}
-                      alt={`${logo.name} logo`}
-                      width={logo.name === "coinbase" ? 35 : logo.name === "polygon" ? 45 : logo.name === "vlayer" ? 40 : logo.name === "ethglobal" ? 40 : 80}
-                      height={logo.name === "coinbase" ? 14 : logo.name === "polygon" ? 18 : logo.name === "vlayer" ? 16 : logo.name === "ethglobal" ? 10 : 32}
-                      className="sr-only"
-                    />
-                  </div>
-                </Link>
-              ))}
-            </div>
+            <span>TRANSACTIONS: <span className="text-foreground font-medium">+100,000</span></span>
+            <span>VOLUME: <span className="text-foreground font-medium">+$30,000</span></span>
           </motion.div>
         </div>
 
diff --git a/apps/app/src/components/custom-ui/mcp-example-card.tsx b/apps/app/src/components/custom-ui/mcp-example-card.tsx
index 7396bd3..394fdc7 100644
--- a/apps/app/src/components/custom-ui/mcp-example-card.tsx
+++ b/apps/app/src/components/custom-ui/mcp-example-card.tsx
@@ -6,12 +6,13 @@ 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 { PlugZap, Info } 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"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 
 interface McpExampleCardProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string
@@ -157,9 +158,9 @@ export default function McpExampleCard({
               {/* 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>{" "}
+                <HighlighterText variant="red">$200 /month</HighlighterText>{" "}
                 <span className="text-foreground">via MCPay</span>{" "}
-                <HighlighterText variant="green" className="!text-sm">$0.05 /tool</HighlighterText>
+                <HighlighterText variant="green">$0.05 /tool</HighlighterText>
               </p>
             </div>
           </div>
@@ -178,43 +179,54 @@ export default function McpExampleCard({
         </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>
+        <TooltipProvider>
+          <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 + Info Icon */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <h4 className="font-mono text-sm font-medium text-foreground">{tool.name}</h4>
+                    {tool.description && (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Info className="h-4 w-4 text-muted-foreground opacity-60" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p className="max-w-xs">{tool.description}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    )}
+                  </div>
+                </div>
+                
+                {/* Right: Price + RUN Button */}
+                <div className="flex items-center gap-2 shrink-0">
+                  {tool.paymentHint && tool.paymentPriceUSD && (
+                    <HighlighterText variant="blue" className="h-8 py-0 flex items-center text-sm">${tool.paymentPriceUSD}</HighlighterText>
+                  )}
+                  <Button
+                    variant="customTallAccent"
+                    size="sm"
+                    className="h-8 rounded-[2px]"
+                    onClick={() => openToolModal(tool)}
+                  >
+                    RUN
+                  </Button>
+                </div>
               </div>
-            </div>
-            ))
-          )}
-        </div>
+              ))
+            )}
+          </div>
+        </TooltipProvider>
 
         {/* Text + Buttons Section */}
         <div className="flex flex-col lg:flex-row lg:items-center gap-6 lg:gap-12">
@@ -222,34 +234,36 @@ export default function McpExampleCard({
             <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">
+          <div className="flex flex-col lg:flex-row gap-4 lg:flex-1">
             {data?.serverId && (
               <Link 
                 href={`/servers/${data.serverId}`}
-                className="w-full lg:flex-1 block"
+                className="w-full lg:flex-1 lg:min-w-0"
               >
-                <Button variant="customTallSecondary" size="tall" className="w-full rounded-[2px]">
+                <Button variant="customTallPrimary" 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 className="w-full lg:flex-1 lg:min-w-0">
+              <Button
+                variant="customTallSecondary"
+                size="tall"
+                className="w-full 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>
       </div>
diff --git a/apps/app/src/components/custom-ui/navbar.tsx b/apps/app/src/components/custom-ui/navbar.tsx
index 67c2d18..6f6bbcc 100644
--- a/apps/app/src/components/custom-ui/navbar.tsx
+++ b/apps/app/src/components/custom-ui/navbar.tsx
@@ -103,7 +103,7 @@ export default function Navbar() {
               onClick={() => openModal("wallets")}
               disabled={sessionLoading}
               className="flex items-center gap-2 px-3 py-2 text-sm font-medium transition-colors duration-200 cursor-pointer"
-              aria-label={session?.user ? "Open account" : "Connect"}
+              aria-label={session?.user ? "Open account" : "Sign in"}
             >
               {session?.user ? (
                 <>
@@ -127,8 +127,8 @@ export default function Navbar() {
                   </span>
                 </>
               ) : (
-                // No icon; always show "Connect" label (mobile + desktop)
-                <span>Connect</span>
+                // No icon; always show "SIGN IN" label (mobile + desktop)
+                <span>SIGN IN</span>
               )}
             </Button>
 
diff --git a/apps/app/src/components/ui/button.tsx b/apps/app/src/components/ui/button.tsx
index 3f4008c..d227cd7 100644
--- a/apps/app/src/components/ui/button.tsx
+++ b/apps/app/src/components/ui/button.tsx
@@ -1,6 +1,7 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import { ChevronRight } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -56,19 +57,59 @@ function Button({
   variant,
   size,
   asChild = false,
+  animated = false,
+  children,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
+    animated?: boolean
   }) {
   const Comp = asChild ? Slot : "button"
 
+  const buttonClasses = cn(
+    buttonVariants({ variant, size }),
+    animated && "relative overflow-hidden group",
+    className
+  )
+
+  if (animated && !asChild) {
+    return (
+      <Comp
+        data-slot="button"
+        className={buttonClasses}
+        {...props}
+      >
+        <span className="relative inline-flex items-center transition-transform duration-300 ease-out group-hover:-translate-x-1">
+          {children}
+          <ChevronRight className="absolute left-full ml-2 h-4 w-4 shrink-0 opacity-0 -translate-x-2 transition-all duration-300 ease-out group-hover:opacity-100 group-hover:translate-x-0" />
+        </span>
+      </Comp>
+    )
+  }
+  
+  if (animated && asChild) {
+    // When asChild is true, we can't add the icon, so just add the group class
+    // The parent component should handle the animation
+    return (
+      <Comp
+        data-slot="button"
+        className={buttonClasses}
+        {...props}
+      >
+        {children}
+      </Comp>
+    )
+  }
+
   return (
     <Comp
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={buttonClasses}
       {...props}
-    />
+    >
+      {children}
+    </Comp>
   )
 }
 
diff --git a/context/mcpay-v1.md b/context/mcpay-v1.md
index 60484e7..53e01d6 100644
--- a/context/mcpay-v1.md
+++ b/context/mcpay-v1.md
@@ -1360,7 +1360,7 @@ const hostGrotesk = Host_Grotesk({
 });
 
 export const metadata: Metadata = {
-  title: "MCPay — Payments for MCPs",
+  title: "MCPay — Make AI more capable",
   description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
   icons: {
     icon: [
@@ -1377,7 +1377,7 @@ export const metadata: Metadata = {
     ],
   },
   openGraph: {
-    title: "MCPay — Payments for MCPs",
+    title: "MCPay — Make AI more capable",
     description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
     type: "website",
     url: "https://mcpay.tech",
@@ -1387,13 +1387,13 @@ export const metadata: Metadata = {
         url: '/mcpay-agentic-payments-og-image-14112025.png',
         width: 1200,
         height: 630,
-        alt: 'MCPay — Payments for MCPs',
+        alt: 'MCPay — Make AI more capable',
       }
     ],
   },
   twitter: {
     card: 'summary_large_image',
-    title: "MCPay — Payments for MCPs",
+    title: "MCPay — Make AI more capable",
     description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
     images: ['/mcpay-agentic-payments-og-image-14112025.png'],
     creator: '@mcpaytech',