diff --git a/apps/web/package.json b/apps/web/package.json
index 7c699cee..8b9c8f1a 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -57,6 +57,7 @@
     "react-dom": "catalog:",
     "react-infinite-scroll-hook": "catalog:",
     "react-lottie-player": "catalog:",
+    "react-medium-image-zoom": "^5.2.14",
     "react-use": "catalog:",
     "server-only": "catalog:",
     "shiki": "catalog:",
diff --git a/apps/web/public/agentic-mcp-gateway-mvp-diagram-light.png b/apps/web/public/agentic-mcp-gateway-mvp-diagram-light.png
new file mode 100644
index 00000000..4fb6c2f3
Binary files /dev/null and b/apps/web/public/agentic-mcp-gateway-mvp-diagram-light.png differ
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index c5050399..113f6775 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import './globals.css'
+import 'react-medium-image-zoom/dist/styles.css'
 
 import type { Metadata } from 'next'
 import { Geist } from 'next/font/google'
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 01eb95cc..42f7c6a0 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -8,6 +8,7 @@ import { GitHubStarCounter } from '@/components/github-star-counter'
 import { HeroSimulation2 } from '@/components/hero-simulation-2'
 import { MCPMarketplaceFeatures } from '@/components/mcp-marketplace-features'
 import { PageContainer } from '@/components/page-container'
+import { SupplySideCTA } from '@/components/supply-side-cta'
 import {
   docsPublishingQuickStartUrl,
   githubUrl,
@@ -58,7 +59,7 @@ export default async function TheBestDamnLandingPageEver() {
       {/* How it works section */}
       <section className='flex flex-col gap-8 mb-16'>
         <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
-          Agentic tools work <span className='font-semibold'>everywhere</span>
+          Agentic tools <span className='font-semibold'>work everywhere</span>
         </h2>
 
         <ExampleUsage
@@ -94,7 +95,7 @@ export default async function TheBestDamnLandingPageEver() {
       <section className='flex flex-col items-center gap-8 text-center mb-16'>
         <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
           Agentic tools are{' '}
-          <span className='font-semibold'>production-ready</span>
+          <span className='font-semibold'>optimized for LLMs</span>
         </h2>
 
         <MCPMarketplaceFeatures />
@@ -126,6 +127,23 @@ export default async function TheBestDamnLandingPageEver() {
         </p>
       </section>
 
+      {/* CTA section */}
+      <DotsSection className='mb-16'>
+        <div className='flex flex-col gap-12 relative z-10'>
+          <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
+            Publish your own MCP products with Agentic
+          </h2>
+
+          <h5 className='text-center max-w-2xl'>
+            Run one command to turn any MCP server or OpenAPI service into a
+            paid MCP product. With built-in support every major LLM SDK and MCP
+            client.
+          </h5>
+
+          <SupplySideCTA variant='book-call' heroVariant='orange' />
+        </div>
+      </DotsSection>
+
       {/* Open source section */}
       <section className='flex flex-col items-center gap-8 max-w-2xl text-center mb-16'>
         <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
@@ -168,7 +186,7 @@ export default async function TheBestDamnLandingPageEver() {
         <p className='text-center text-lg max-w-2xl'>TODO</p>
       </section> */}
 
-      {/* CTA section */}
+      {/* Demand-side CTA section */}
       <DotsSection className='mb-16'>
         <div className='flex flex-col gap-12 relative z-10'>
           <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
diff --git a/apps/web/src/app/publishing/page.tsx b/apps/web/src/app/publishing/page.tsx
index f905c0f4..1461e30a 100644
--- a/apps/web/src/app/publishing/page.tsx
+++ b/apps/web/src/app/publishing/page.tsx
@@ -1,4 +1,6 @@
+import Image from 'next/image'
 import Link from 'next/link'
+import Zoom from 'react-medium-image-zoom'
 
 import { DotsSection } from '@/components/dots-section'
 import { ExampleAgenticConfigs } from '@/components/example-agentic-configs'
@@ -6,7 +8,8 @@ import { GitHubStarCounter } from '@/components/github-star-counter'
 import { MCPGatewayFeatures } from '@/components/mcp-gateway-features'
 import { PageContainer } from '@/components/page-container'
 import { SupplySideCTA } from '@/components/supply-side-cta'
-import { githubUrl, twitterUrl } from '@/lib/config'
+import { docsPublishingUrl, githubUrl, twitterUrl } from '@/lib/config'
+import mcpGatewayDiagramLight from '@/public/agentic-mcp-gateway-mvp-diagram-light.png'
 
 export default function PublishingMCPsPage() {
   return (
@@ -19,8 +22,7 @@ export default function PublishingMCPsPage() {
 
         <h5 className='text-center text-lg max-w-2xl'>
           Run one command to turn any MCP server or OpenAPI service into a paid
-          MCP product,{' '}
-          <em>with built-in distribution to over 20k AI engineers</em>.
+          MCP product. With built-in support every major LLM SDK and MCP client.
         </h5>
 
         <SupplySideCTA />
@@ -32,7 +34,28 @@ export default function PublishingMCPsPage() {
           How It Works
         </h2>
 
-        <div>TODO</div>
+        <div className='w-full max-w-3xl flex flex-col items-center border rounded-lg shadow-sm overflow-hidden p-4 bg-white'>
+          <Zoom>
+            <Image
+              src={mcpGatewayDiagramLight.src}
+              alt='MCP Gateway Demo'
+              width={mcpGatewayDiagramLight.width}
+              height={mcpGatewayDiagramLight.height}
+              className='w-full rounded-lg overflow-hidden'
+            />
+          </Zoom>
+        </div>
+
+        <p className='text-sm max-w-2xl text-center'>
+          Deploy any MCP server or OpenAPI service to Agentic's MCP Gateway,
+          which handles auth, billing, rate-limiting, caching, etc. And
+          instantly turn your API into a paid MCP product that supports every
+          major LLM SDK and MCP client.{' '}
+          <Link href={docsPublishingUrl} className='link'>
+            Learn more
+          </Link>
+          .
+        </p>
       </section>
 
       {/* Config section */}
@@ -43,17 +66,21 @@ export default function PublishingMCPsPage() {
 
         <ExampleAgenticConfigs />
 
-        <div className='flex flex-col gap-4 text-sm max-w-2xl text-center'>
-          <p>
-            Configuring your Agentic project is straightforward, regardless of
-            whether your origin is an MCP server or an OpenAPI service. For TS
-            projects, you can use a fully-typed{' '}
-            <span className='font-semibold'>agentic.config.ts</span> file, or
-            fall back to using an{' '}
-            <span className='font-semibold'>agentic.config.json</span> file to
-            configure your project.
-          </p>
-        </div>
+        <p className='text-sm max-w-2xl text-center'>
+          <Link href={`${docsPublishingUrl}/config`} className='link'>
+            Configuring your Agentic project
+          </Link>{' '}
+          is straightforward , regardless of whether your origin is an MCP
+          server or an OpenAPI service. For TS projects, you can use a
+          fully-typed <span className='font-semibold'>agentic.config.ts</span>{' '}
+          file, or fall back to using an{' '}
+          <span className='font-semibold'>agentic.config.json</span> file to
+          configure your project.{' '}
+          <Link href={docsPublishingUrl} className='link'>
+            Learn more
+          </Link>
+          .
+        </p>
       </section>
 
       {/* Features section */}
diff --git a/apps/web/src/components/demand-side-cta.tsx b/apps/web/src/components/demand-side-cta.tsx
index 81e00b15..d4bc544f 100644
--- a/apps/web/src/components/demand-side-cta.tsx
+++ b/apps/web/src/components/demand-side-cta.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 import { HeroButton } from '@/components/hero-button'
 import { Button } from '@/components/ui/button'
-import { docsMarketplaceUrl } from '@/lib/config'
+import { docsUrl } from '@/lib/config'
 
 export function DemandSideCTA() {
   return (
@@ -14,7 +14,7 @@ export function DemandSideCTA() {
       </HeroButton>
 
       <Button variant='outline' asChild className='h-full'>
-        <Link href={docsMarketplaceUrl} className='font-mono'>
+        <Link href={docsUrl} className='font-mono'>
           readTheDocs();
         </Link>
       </Button>
diff --git a/apps/web/src/components/example-agentic-configs.tsx b/apps/web/src/components/example-agentic-configs.tsx
index 1380d43f..6ba9c48c 100644
--- a/apps/web/src/components/example-agentic-configs.tsx
+++ b/apps/web/src/components/example-agentic-configs.tsx
@@ -50,7 +50,7 @@ export function ExampleAgenticConfigs() {
   }
 
   return (
-    <div className='w-full max-w-3xl flex flex-col items-center border rounded-lg shadow-sm p-2 md:p-4'>
+    <div className='w-full max-w-3xl flex flex-col items-center border rounded-lg shadow-sm p-2 md:p-4 bg-background'>
       <ExampleAgenticConfigsContent config={config} setConfig={setConfig} />
     </div>
   )
diff --git a/apps/web/src/components/example-usage.tsx b/apps/web/src/components/example-usage.tsx
index 5764a7ce..ff6e4f44 100644
--- a/apps/web/src/components/example-usage.tsx
+++ b/apps/web/src/components/example-usage.tsx
@@ -91,7 +91,7 @@ export function ExampleUsage({
   // })
 
   return (
-    <div className='w-full max-w-3xl flex flex-col items-center border rounded-lg shadow-sm p-2 md:p-4'>
+    <div className='w-full max-w-3xl flex flex-col items-center border rounded-lg shadow-sm p-2 md:p-4 bg-background'>
       <ExampleUsageContent
         projectIdentifier={projectIdentifier}
         prompt={prompt}
diff --git a/apps/web/src/components/mcp-gateway-features.tsx b/apps/web/src/components/mcp-gateway-features.tsx
index 200bf86f..61150d04 100644
--- a/apps/web/src/components/mcp-gateway-features.tsx
+++ b/apps/web/src/components/mcp-gateway-features.tsx
@@ -13,7 +13,7 @@ import {
 } from 'lucide-react'
 import Link from 'next/link'
 
-import { calendarBookingUrl, docsUrl } from '@/lib/config'
+import { calendarBookingUrl, docsPublishingUrl } from '@/lib/config'
 
 import { Feature, type FeatureData } from './feature'
 
@@ -183,7 +183,7 @@ const mcpGatewayFeatures: FeatureData[] = [
     description: (
       <>Check out our docs for more details on Agentic's MCP gateway.</>
     ),
-    href: docsUrl,
+    href: docsPublishingUrl,
     icon: TextSelectIcon,
     pattern: {
       y: 13,
diff --git a/apps/web/src/components/mcp-marketplace-features.tsx b/apps/web/src/components/mcp-marketplace-features.tsx
index 781c7dd1..9fe1c7b8 100644
--- a/apps/web/src/components/mcp-marketplace-features.tsx
+++ b/apps/web/src/components/mcp-marketplace-features.tsx
@@ -19,7 +19,7 @@ const mcpMarketplaceFeatures: FeatureData[] = [
         <span className='font-semibold'>
           All Agentic tools have been hand-crafted specifically for LLM tool
           use.
-        </span>
+        </span>{' '}
         We call this Agentic UX, and it's at the heart of why Agentic tools work
         better for LLM &amp; MCP use cases than legacy APIs.
       </>
@@ -34,11 +34,12 @@ const mcpMarketplaceFeatures: FeatureData[] = [
     }
   },
   {
-    name: 'Battle-Tested',
+    name: 'Production-Ready MCP Support',
     description: (
       <>
-        Forget random GitHub repos and piping MCP servers together. Agentic
-        tools are all battle-tested in production and come with real SLAs.
+        Forget random GitHub repos and gluing local MCP servers together.
+        Agentic tools are all battle-tested in production and come with real
+        SLAs.
       </>
     ),
     icon: ShieldCheckIcon,
diff --git a/apps/web/src/components/supply-side-cta.tsx b/apps/web/src/components/supply-side-cta.tsx
index 500755fe..e6484f13 100644
--- a/apps/web/src/components/supply-side-cta.tsx
+++ b/apps/web/src/components/supply-side-cta.tsx
@@ -3,7 +3,7 @@
 import { sanitizeSearchParams } from '@agentic/platform-core'
 import Link from 'next/link'
 
-import { HeroButton } from '@/components/hero-button'
+import { HeroButton, type HeroButtonVariant } from '@/components/hero-button'
 import { Button } from '@/components/ui/button'
 import { GitHubIcon } from '@/icons/github'
 import {
@@ -16,15 +16,17 @@ import { useAgentic } from './agentic-provider'
 import { GitHubStarCounter } from './github-star-counter'
 
 export function SupplySideCTA({
-  variant = 'github'
+  variant = 'github',
+  heroVariant = 'purple'
 }: {
   variant?: 'book-call' | 'github' | 'github-2'
+  heroVariant?: HeroButtonVariant
 }) {
   const ctx = useAgentic()
 
   return (
     <div className='flex justify-center items-center gap-12'>
-      <HeroButton asChild className=''>
+      <HeroButton asChild heroVariant={heroVariant}>
         <Link
           href={
             ctx?.isAuthenticated
@@ -32,7 +34,7 @@ export function SupplySideCTA({
               : `/signup?${sanitizeSearchParams({ next: docsPublishingQuickStartUrl })}`
           }
         >
-          Get Started
+          Quick Start
         </Link>
       </HeroButton>
 
diff --git a/apps/web/src/lib/config.ts b/apps/web/src/lib/config.ts
index 8c31a55e..b53c1f6e 100644
--- a/apps/web/src/lib/config.ts
+++ b/apps/web/src/lib/config.ts
@@ -19,6 +19,7 @@ export const githubUrl = 'https://github.com/transitive-bullshit/agentic'
 export const calendarBookingUrl = 'https://cal.com/travis-fischer/15min'
 export const docsUrl = 'https://docs.agentic.so'
 export const docsPublishingQuickStartUrl = `${docsUrl}/publishing/quickstart`
+export const docsPublishingUrl = `${docsUrl}/publishing`
 export const docsMarketplaceUrl = `${docsUrl}/marketplace`
 export const discordUrl = 'https://discord.agentic.so'
 
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 6110867b..370ce250 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -9,6 +9,7 @@
     "rootDir": ".",
     "baseUrl": ".",
     "paths": {
+      "@/public/*": ["public/*"],
       "@/*": ["src/*"]
     }
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f0b85411..39e3c96f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -806,6 +806,9 @@ importers:
       react-lottie-player:
         specifier: 'catalog:'
         version: 2.1.0(react@19.1.0)
+      react-medium-image-zoom:
+        specifier: ^5.2.14
+        version: 5.2.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react-use:
         specifier: 'catalog:'
         version: 17.6.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -8171,6 +8174,12 @@ packages:
     peerDependencies:
       react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  react-medium-image-zoom@5.2.14:
+    resolution: {integrity: sha512-nfTVYcAUnBzXQpPDcZL+cG/e6UceYUIG+zDcnemL7jtAqbJjVVkA85RgneGtJeni12dTyiRPZVM6Szkmwd/o8w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   react-promise-suspense@0.3.4:
     resolution: {integrity: sha512-I42jl7L3Ze6kZaq+7zXWSunBa3b1on5yfvUW6Eo/3fFOj6dZ5Bqmcd264nJbTK/gn1HjjILAjSwnZbV4RpSaNQ==}
 
@@ -17303,6 +17312,11 @@ snapshots:
       react: 19.1.0
       rfdc: 1.4.1
 
+  react-medium-image-zoom@5.2.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   react-promise-suspense@0.3.4:
     dependencies:
       fast-deep-equal: 2.0.1