diff --git a/clients/apps/web/src/app/pitch/page.tsx b/clients/apps/web/src/app/pitch/page.tsx
index 9963ca2343..dd7a6b93b2 100644
--- a/clients/apps/web/src/app/pitch/page.tsx
+++ b/clients/apps/web/src/app/pitch/page.tsx
@@ -45,14 +45,14 @@ export default function PitchPage() {
 
   return (
     <div className="flex h-full flex-col justify-between gap-y-12 text-sm">
-      <div className="flex flex-grow flex-col gap-y-16 md:gap-y-32">
+      <div className="flex flex-grow flex-col gap-y-16">
         <PitchNavigation activeIndex={index} setIndex={setIndex} />
         <AnimatePresence key={index}>
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transition={{ duration: 0.04, repeat: 2 }}
+            transition={{ duration: 0.07, repeat: 2 }}
           >
             {getActiveSection()}
           </motion.div>
diff --git a/clients/apps/web/src/components/Pitch/Chart.tsx b/clients/apps/web/src/components/Pitch/Chart.tsx
index f1636ba76c..991e13acf4 100644
--- a/clients/apps/web/src/components/Pitch/Chart.tsx
+++ b/clients/apps/web/src/components/Pitch/Chart.tsx
@@ -5,72 +5,6 @@ import * as d3 from 'd3'
 import { GeistMono } from 'geist/font/mono'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
-const primaryColor = 'rgb(0 98 255)'
-const primaryColorFaded = 'rgba(0, 98, 255, 0.3)'
-const gradientId = 'chart-gradient'
-const createAreaGradient = (id: string) => {
-  // Create a <defs> element
-  const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')
-
-  // Create a <linearGradient> element
-  const linearGradient = document.createElementNS(
-    'http://www.w3.org/2000/svg',
-    'linearGradient',
-  )
-  linearGradient.setAttribute('id', id)
-  linearGradient.setAttribute('gradientTransform', 'rotate(90)')
-
-  // Create the first <stop> element
-  const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop')
-  stop1.setAttribute('offset', '0%')
-  stop1.setAttribute('stop-color', primaryColorFaded)
-  stop1.setAttribute('stop-opacity', '0.5')
-
-  // Create the second <stop> element
-  const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop')
-  stop2.setAttribute('offset', '100%')
-  stop2.setAttribute('stop-color', primaryColorFaded)
-  stop2.setAttribute('stop-opacity', '0')
-
-  // Append the <stop> elements to the <linearGradient> element
-  linearGradient.appendChild(stop1)
-  linearGradient.appendChild(stop2)
-
-  // Append the <linearGradient> element to the <defs> element
-  defs.appendChild(linearGradient)
-
-  return defs
-}
-
-class Callback extends Plot.Dot {
-  private callbackFunction: (index: number | undefined) => void
-
-  public constructor(
-    data: Plot.Data,
-    options: Plot.DotOptions,
-    callbackFunction: (data: any) => void,
-  ) {
-    // @ts-ignore
-    super(data, options)
-    this.callbackFunction = callbackFunction
-  }
-
-  // @ts-ignore
-  public render(
-    index: number[],
-    _scales: Plot.ScaleFunctions,
-    _values: Plot.ChannelValues,
-    _dimensions: Plot.Dimensions,
-    _context: Plot.Context,
-    _next?: Plot.RenderFunction,
-  ): SVGElement | null {
-    if (index.length) {
-      this.callbackFunction(index[0])
-    }
-    return null
-  }
-}
-
 const getTicks = (timestamps: Date[], maxTicks: number = 10): Date[] => {
   const step = Math.ceil(timestamps.length / maxTicks)
   return timestamps.filter((_, index) => index % step === 0)
@@ -172,7 +106,6 @@ export const Chart: React.FC<ChartProps> = ({
       width,
       height,
       marks: [
-        () => createAreaGradient(gradientId),
         Plot.axisX({
           tickFormat: getTickFormat(interval, ticks),
           ticks,
@@ -191,6 +124,7 @@ export const Chart: React.FC<ChartProps> = ({
           y: metric.slug,
           stroke: 'currentColor',
           strokeWidth: 1,
+          marker: 'circle-fill',
         }),
         Plot.ruleX(data, {
           x: 'timestamp',
diff --git a/clients/apps/web/src/components/Pitch/Console.tsx b/clients/apps/web/src/components/Pitch/Console.tsx
index 7120ccab14..c23b654e29 100644
--- a/clients/apps/web/src/components/Pitch/Console.tsx
+++ b/clients/apps/web/src/components/Pitch/Console.tsx
@@ -2,23 +2,25 @@ import { twMerge } from 'tailwind-merge'
 
 export interface ConsoleProps {
   className?: string
+  title?: string
   input?: string
   output?: string
 }
 
-export const Console = ({ className, input, output }: ConsoleProps) => {
+export const Console = ({ className, title, input, output }: ConsoleProps) => {
   return (
-    <div
-      className={twMerge('border-polar-200 flex flex-col border', className)}
-    >
-      <div className="bg-polar-200 flex flex-row px-3 py-1 text-xs text-black">
-        <span>Polar VM</span>
-      </div>
-      <div className="flex flex-col p-4 font-mono text-sm">
-        <pre className="flex flex-col gap-y-2">
-          <code>{'$ ' + input}</code>
-          <code className="text-polar-500">{output}</code>
-        </pre>
+    <div className={twMerge('relative flex flex-col', className)}>
+      <div className="border-polar-600 absolute right-6 top-6 h-full w-full transform border"></div>
+      <div className="border-polar-200 bg-polar-900 relative h-full w-full border-2">
+        <div className="bg-polar-200 flex flex-row justify-between px-3 py-1 text-xs text-black">
+          <span className="font-bold">{title ?? 'Polar VM'}</span>
+        </div>
+        <div className="flex flex-col p-4 font-mono text-sm">
+          <pre className="flex flex-col gap-y-2">
+            <code>{input}</code>
+            <code className="text-polar-500">{output}</code>
+          </pre>
+        </div>
       </div>
     </div>
   )
diff --git a/clients/apps/web/src/components/Pitch/Footer.tsx b/clients/apps/web/src/components/Pitch/Footer.tsx
index b6f4c677c4..1560ee4e5f 100644
--- a/clients/apps/web/src/components/Pitch/Footer.tsx
+++ b/clients/apps/web/src/components/Pitch/Footer.tsx
@@ -6,7 +6,7 @@ import { sections } from './Navigation'
 export const Footer = ({ className }: { className?: string }) => {
   return (
     <div
-      className={twMerge('hidden flex-row gap-x-8 text-xs md:flex', className)}
+      className={twMerge('hidden flex-row gap-x-12 text-xs md:flex', className)}
     >
       <NavigationLegend />
       <SectionsLegend />
@@ -71,7 +71,7 @@ const OpenSourceLegend = () => {
 const ContactUsLegend = () => {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'm') {
+      if (event.key === 'c') {
         window.open('mailto:birk@polar.sh', '_blank')
       }
     }
@@ -86,7 +86,7 @@ const ContactUsLegend = () => {
   return (
     <div className="flex flex-col gap-y-2">
       <div className="flex flex-row gap-x-2">
-        <Button variant="icon">M</Button>
+        <Button variant="icon">C</Button>
       </div>
       <span>Contact Us</span>
     </div>
diff --git a/clients/apps/web/src/components/Pitch/Section.tsx b/clients/apps/web/src/components/Pitch/Section.tsx
new file mode 100644
index 0000000000..3b72ed0066
--- /dev/null
+++ b/clients/apps/web/src/components/Pitch/Section.tsx
@@ -0,0 +1,27 @@
+export interface SectionProps {
+  header: {
+    index: string
+    name: string
+  }
+  title: string
+  children: React.ReactNode
+  context?: React.ReactNode
+}
+
+export const Section = ({ header, title, children, context }: SectionProps) => {
+  return (
+    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
+      <div className="flex max-w-lg flex-col gap-y-8">
+        <div className="flex flex-row items-center gap-x-4">
+          <span className="bg-polar-200 px-1 py-0.5 text-sm leading-none text-black">
+            {header.index}.
+          </span>
+          <h1 className="text-lg">{header.name}</h1>
+        </div>
+        <h1 className="text-balance text-4xl leading-normal">{title}</h1>
+        {children}
+      </div>
+      {context}
+    </div>
+  )
+}
diff --git a/clients/apps/web/src/components/Pitch/sections/IndexSection.tsx b/clients/apps/web/src/components/Pitch/sections/IndexSection.tsx
index c897554b7e..b2eda36b8e 100644
--- a/clients/apps/web/src/components/Pitch/sections/IndexSection.tsx
+++ b/clients/apps/web/src/components/Pitch/sections/IndexSection.tsx
@@ -1,32 +1,29 @@
 import { Console } from '../Console'
 import { Link } from '../Link'
+import { Section } from '../Section'
 
 export const IndexSection = () => {
   return (
-    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
-      <div className="flex max-w-lg flex-col gap-y-8">
-        <h1 className="text-lg">00. Index</h1>
-        <h1 className="text-4xl">Integrating payments is a mess</h1>
-        <p>
-          What used to be a simple way to pay for things has become a complex
-          mess.
-        </p>
-        <p>
-          Software as a Service (SaaS) has become the norm, but the underlying
-          payment infrastructure has not evolved.
-        </p>
-        <p>
-          This is why we are building Polar 2.0, payment infrastructure for the
-          21st century.
-        </p>
-        <Link href="/pitch/what">What we are building →</Link>
-      </div>
-
-      <Console
-        className="aspect-video w-full max-w-lg"
-        input="polar-init"
-        output="Initializing seed round..."
-      />
-    </div>
+    <Section
+      header={{ index: '00', name: 'Index' }}
+      title="Integrating payments is a mess"
+      context={
+        <Console
+          className="flex aspect-video max-w-lg flex-grow"
+          input="$ polar-init"
+          output="Initializing seed round..."
+        />
+      }
+    >
+      <p>
+        What used to be a simple way to pay for things has become a complex
+        mess.
+      </p>
+      <p>
+        Software as a Service (SaaS) has become the norm, but the underlying
+        payment infrastructure has not evolved.
+      </p>
+      <Link href="/pitch/what">What we are building →</Link>
+    </Section>
   )
 }
diff --git a/clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx b/clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx
index 82a71e8018..48f1d3d139 100644
--- a/clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx
+++ b/clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx
@@ -1,25 +1,22 @@
 import { Link } from '../Link'
+import { Section } from '../Section'
 
 export const InvestorsSection = () => {
   return (
-    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
-      <div className="flex max-w-lg flex-col gap-y-8">
-        <h1 className="text-lg">06. Investors</h1>
-        <h1 className="text-4xl">Our Angels</h1>
-        <p>
-          What used to be a simple way to pay for things has become a complex
-          mess.
-        </p>
-        <p>
-          Software as a Service (SaaS) has become the norm, but the underlying
-          payment infrastructure has not evolved.
-        </p>
-        <p>
-          This is why we are building Polar 2.0, payment infrastructure for the
-          21st century.
-        </p>
-        <Link href="/pitch/what">Why →</Link>
-      </div>
-    </div>
+    <Section header={{ index: '06', name: 'Investors' }} title="Our Angels">
+      <p>
+        What used to be a simple way to pay for things has become a complex
+        mess.
+      </p>
+      <p>
+        Software as a Service (SaaS) has become the norm, but the underlying
+        payment infrastructure has not evolved.
+      </p>
+      <p>
+        This is why we are building Polar 2.0, payment infrastructure for the
+        21st century.
+      </p>
+      <Link href="/pitch/what">Why →</Link>
+    </Section>
   )
 }
diff --git a/clients/apps/web/src/components/Pitch/sections/Polar20.tsx b/clients/apps/web/src/components/Pitch/sections/Polar20.tsx
index 4f282469b5..91038c4004 100644
--- a/clients/apps/web/src/components/Pitch/sections/Polar20.tsx
+++ b/clients/apps/web/src/components/Pitch/sections/Polar20.tsx
@@ -1,25 +1,40 @@
+import { Console } from '../Console'
 import { Link } from '../Link'
+import { Section } from '../Section'
 
 export const Polar20Section = () => {
   return (
-    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
-      <div className="flex max-w-lg flex-col gap-y-8">
-        <h1 className="text-lg">03. Polar 2.0</h1>
-        <h1 className="text-4xl">The future of payments is usage based</h1>
-        <p>
-          What used to be a simple way to pay for things has become a complex
-          mess.
-        </p>
-        <p>
-          Software as a Service (SaaS) has become the norm, but the underlying
-          payment infrastructure has not evolved.
-        </p>
-        <p>
-          This is why we are building Polar 2.0, payment infrastructure for the
-          21st century.
-        </p>
-        <Link href="/pitch/what">Why →</Link>
-      </div>
-    </div>
+    <Section
+      header={{ index: '03', name: 'Polar 2.0' }}
+      title="The future of payments is usage based"
+      context={
+        <Console
+          title="NextJS Adapter"
+          input={`import { Usage } from '@polar-sh/nextjs'
+import { openai } from '@ai-sdk/openai'
+
+export const POST = Usage()
+  .customer(req => req.headers.get('X-Polar-Customer-Id'))
+  .model(openai('gpt-4o'))
+  .increment('gpt-4o-inputs', ctx => ctx.usage.inputTokens)
+  .increment('gpt-4o-outputs', ctx => ctx.usage.completionTokens)
+  .handler((req, res, model) => /** Use model... */)`}
+        />
+      }
+    >
+      <p>
+        What used to be a simple way to pay for things has become a complex
+        mess.
+      </p>
+      <p>
+        Software as a Service (SaaS) has become the norm, but the underlying
+        payment infrastructure has not evolved.
+      </p>
+      <p>
+        This is why we are building Polar 2.0, payment infrastructure for the
+        21st century.
+      </p>
+      <Link href="/pitch/what">Why →</Link>
+    </Section>
   )
 }
diff --git a/clients/apps/web/src/components/Pitch/sections/TeamSection.tsx b/clients/apps/web/src/components/Pitch/sections/TeamSection.tsx
index 06add32b9f..fe8266be2b 100644
--- a/clients/apps/web/src/components/Pitch/sections/TeamSection.tsx
+++ b/clients/apps/web/src/components/Pitch/sections/TeamSection.tsx
@@ -1,5 +1,6 @@
 import Image from 'next/image'
 import { Link } from '../Link'
+import { Section } from '../Section'
 
 const team = [
   {
@@ -21,30 +22,32 @@ const team = [
 
 export const TeamSection = () => {
   return (
-    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
-      <div className="flex max-w-lg flex-col gap-y-8">
-        <h1 className="text-lg">05. Team</h1>
-        <h1 className="text-4xl">We are hiring</h1>
-        <p>
-          What used to be a simple way to pay for things has become a complex
-          mess.
-        </p>
-        <p>
-          Software as a Service (SaaS) has become the norm, but the underlying
-          payment infrastructure has not evolved.
-        </p>
-        <p>
-          This is why we are building Polar 2.0, payment infrastructure for the
-          21st century.
-        </p>
-        <Link href="/pitch/what">Join Us →</Link>
-      </div>
-      <div className="flex flex-row gap-x-4">
+    <Section header={{ index: '05', name: 'Team' }} title="We are hiring">
+      <p>
+        Are you passionate about building the future of payment infrastructure?
+        Get in touch.
+      </p>
+      <ul className="border-polar-200 flex flex-col gap-y-4 border-l pl-4">
+        <li>
+          You are passionate about building great user experiences and products.
+        </li>
+        <li>
+          You&apos;re humble and eager to constantly learn and improve based on
+          feedback from customers and peers or new insights, technical trends
+          and tools.
+        </li>
+        <li>
+          You&apos;re autonomous and don&apos;t hesitate to roll up your sleeves
+          to get stuff done vs. waiting on instructions, guidance or permission.
+        </li>
+      </ul>
+      <Link href="/pitch/what">Join Us →</Link>
+      <div className="flex flex-col gap-y-12 md:flex-row md:gap-x-4">
         {team.map((profile) => (
           <Profile key={profile.name} {...profile} />
         ))}
       </div>
-    </div>
+    </Section>
   )
 }
 
@@ -56,8 +59,14 @@ interface ProfileProps {
 
 const Profile = ({ name, title, image }: ProfileProps) => {
   return (
-    <div className="flex h-fit w-[200px] flex-col gap-y-4">
-      <Image src={image} alt={name} width={200} height={200} />
+    <div className="relative flex h-fit w-full flex-col gap-y-4 md:w-[200px]">
+      <Image
+        className="w-full"
+        src={image}
+        alt={name}
+        width={200}
+        height={200}
+      />
       <div className="flex flex-col gap-y-1">
         <h1 className="text-xs">{name}</h1>
         <h1 className="text-polar-500 text-xs">{title}</h1>
diff --git a/clients/apps/web/src/components/Pitch/sections/UsageBasedSection.tsx b/clients/apps/web/src/components/Pitch/sections/UsageBasedSection.tsx
index 7c2ddc985b..3439800871 100644
--- a/clients/apps/web/src/components/Pitch/sections/UsageBasedSection.tsx
+++ b/clients/apps/web/src/components/Pitch/sections/UsageBasedSection.tsx
@@ -1,53 +1,53 @@
 import { MetricType } from '@polar-sh/sdk'
 import { Chart } from '../Chart'
 import { Link } from '../Link'
+import { Section } from '../Section'
 
 export const UsageBasedSection = () => {
   return (
-    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
-      <div className="flex max-w-lg flex-col gap-y-8">
-        <h1 className="text-lg">01. Usage Based</h1>
-        <h1 className="text-4xl">The future of payments is usage based</h1>
-        <p>
-          What used to be a simple way to pay for things has become a complex
-          mess.
-        </p>
-        <p>
-          Software as a Service (SaaS) has become the norm, but the underlying
-          payment infrastructure has not evolved.
-        </p>
-        <p>
-          This is why we are building Polar 2.0, payment infrastructure for the
-          21st century.
-        </p>
-        <Link href="/pitch/what">Why →</Link>
-      </div>
-      <Chart
-        data={[
-          ...(() => {
-            const getLastMonthValues = () => {
-              const values = []
-              for (let i = 31; i >= 0; i--) {
-                values.push({
-                  timestamp: new Date(
-                    new Date().setDate(new Date().getDate() - i),
-                  ),
-                  value: Math.floor(Math.random() * 500),
-                })
+    <Section
+      header={{ index: '01', name: 'Usage Based Future' }}
+      title="The future of payments is usage based"
+      context={
+        <Chart
+          data={[
+            ...(() => {
+              const getLastMonthValues = () => {
+                const values = []
+                for (let i = 0; i <= 31; i++) {
+                  values.push({
+                    timestamp: new Date(
+                      new Date().setDate(new Date().getDate() + i),
+                    ),
+                    value: Math.floor(Math.exp(i / 5)), // Exponential growth
+                  })
+                }
+                return values
               }
-              return values
-            }
 
-            return getLastMonthValues()
-          })(),
-        ]}
-        interval="day"
-        metric={{
-          slug: 'value',
-          display_name: 'Value',
-          type: MetricType.SCALAR,
-        }}
-      />
-    </div>
+              return getLastMonthValues()
+            })(),
+          ]}
+          interval="day"
+          metric={{
+            slug: 'value',
+            display_name: 'Value',
+            type: MetricType.SCALAR,
+          }}
+        />
+      }
+    >
+      <p>
+        In a world where Artificial Intelligence is becoming more and more
+        prevalent, the intelligence we consume will be charged based on usage.
+        It's time for payment infrastructure, built for the 21st century.
+      </p>
+      <p>
+        We believe that the future of payments is usage based, and we are
+        committed to build the gold standard for adapters that sits in between
+        artificial intelligence and the world.
+      </p>
+      <Link href="/pitch/what">Why →</Link>
+    </Section>
   )
 }
diff --git a/clients/apps/web/src/components/Pitch/sections/WhySection.tsx b/clients/apps/web/src/components/Pitch/sections/WhySection.tsx
index 712ab0a841..d3882bdc8c 100644
--- a/clients/apps/web/src/components/Pitch/sections/WhySection.tsx
+++ b/clients/apps/web/src/components/Pitch/sections/WhySection.tsx
@@ -1,25 +1,22 @@
 import { Link } from '../Link'
+import { Section } from '../Section'
 
 export const WhySection = () => {
   return (
-    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
-      <div className="flex max-w-lg flex-col gap-y-8">
-        <h1 className="text-lg">02. Why Polar</h1>
-        <h1 className="text-4xl">Why</h1>
-        <p>
-          What used to be a simple way to pay for things has become a complex
-          mess.
-        </p>
-        <p>
-          Software as a Service (SaaS) has become the norm, but the underlying
-          payment infrastructure has not evolved.
-        </p>
-        <p>
-          This is why we are building Polar 2.0, payment infrastructure for the
-          21st century.
-        </p>
-        <Link href="/pitch/what">Why →</Link>
-      </div>
-    </div>
+    <Section header={{ index: '02', name: 'Why Polar' }} title="Why">
+      <p>
+        What used to be a simple way to pay for things has become a complex
+        mess.
+      </p>
+      <p>
+        Software as a Service (SaaS) has become the norm, but the underlying
+        payment infrastructure has not evolved.
+      </p>
+      <p>
+        This is why we are building Polar 2.0, payment infrastructure for the
+        21st century.
+      </p>
+      <Link href="/pitch/what">Why →</Link>
+    </Section>
   )
 }