diff --git a/frontend/src/scenes/billing/BillingHero.tsx b/frontend/src/scenes/billing/BillingHero.tsx
index 109ed36f40b41..0f74dc168071a 100644
--- a/frontend/src/scenes/billing/BillingHero.tsx
+++ b/frontend/src/scenes/billing/BillingHero.tsx
@@ -9,8 +9,8 @@ export const BillingHero = (): JSX.Element => {
                 <h1 className="ingestion-title">Get the whole hog.</h1>
                 <h1 className="ingestion-title text-danger">Only pay for what you use.</h1>
                 <p className="mt-2 mb-0">
-                    Upgrade to any paid product plan to get access to features like A/B testing, multivariate feature
-                    flags, and more.
+                    Add your credit card details to get access to premium product and platform features. Set billing
+                    limits as low as $0 to control spend.
                 </p>
             </div>
             <div className="BillingHero__hog">
diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
index d9b3b3bd7596d..a32edcd909f37 100644
--- a/frontend/src/scenes/billing/BillingProduct.tsx
+++ b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -15,7 +15,7 @@ import {
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { BillingProductV2AddonType, BillingProductV2Type, BillingV2TierType } from '~/types'
-import { convertLargeNumberToWords, getUpgradeAllProductsLink, summarizeUsage } from './billing-utils'
+import { convertLargeNumberToWords, getUpgradeProductLink, summarizeUsage } from './billing-utils'
 import { BillingGauge } from './BillingGauge'
 import { billingLogic } from './billingLogic'
 import { BillingLimitInput } from './BillingLimitInput'
@@ -23,7 +23,7 @@ import { billingProductLogic } from './billingProductLogic'
 import { capitalizeFirstLetter, compactNumber } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { ProductPricingModal } from './ProductPricingModal'
-import { PlanComparisonModal } from './PlanComparisonModal'
+import { PlanComparisonModal } from './PlanComparison'
 
 export const getTierDescription = (
     tiers: BillingV2TierType[],
@@ -621,21 +621,12 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                         Compare plans
                                     </LemonButton>
                                     <LemonButton
-                                        to={
-                                            // if we're in onboarding we want to upgrade them to the product and the addons at once
-                                            isOnboarding
-                                                ? getUpgradeAllProductsLink(
-                                                      product,
-                                                      upgradeToPlanKey || '',
-                                                      redirectPath
-                                                  )
-                                                : // otherwise we just want to upgrade them to the product
-                                                  `/api/billing-v2/activation?products=${
-                                                      product.type
-                                                  }:${upgradeToPlanKey}${
-                                                      redirectPath && `&redirect_path=${redirectPath}`
-                                                  }`
-                                        }
+                                        to={getUpgradeProductLink(
+                                            product,
+                                            upgradeToPlanKey || '',
+                                            redirectPath,
+                                            isOnboarding // if in onboarding, we want to include addons, otherwise don't
+                                        )}
                                         type="primary"
                                         icon={<IconPlus />}
                                         disableClientSideRouting
diff --git a/frontend/src/scenes/billing/PlanComparison.scss b/frontend/src/scenes/billing/PlanComparison.scss
new file mode 100644
index 0000000000000..fbda341b032a6
--- /dev/null
+++ b/frontend/src/scenes/billing/PlanComparison.scss
@@ -0,0 +1,42 @@
+.PlanComparisonModal {
+    max-width: 900px;
+}
+table.PlanComparison {
+    table-layout: fixed;
+    td {
+        vertical-align: top;
+        padding: 0.75rem 1.25rem;
+
+        &.PlanTable__td__upgradeButton {
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+        }
+    }
+    th {
+        vertical-align: top;
+        padding: 0.75rem 1.25rem 0.75rem;
+        font-weight: 600;
+        text-align: left;
+
+        &.PlanTable__th__section {
+            padding: 0.25rem 1.25rem 0.25rem;
+            font-weight: 500;
+        }
+
+        &.PlanTable__th__feature {
+            padding: 0.75rem 1.25rem 0.75rem 3.25rem;
+            font-weight: 600;
+        }
+
+        &.PlanTable__th__last-feature {
+            padding-bottom: 2rem;
+        }
+
+        p {
+            font-weight: 400;
+        }
+    }
+}
+.PlanTable__tr__border {
+    border-bottom: 3px rgba(0, 0, 0, 0.07) dotted;
+}
diff --git a/frontend/src/scenes/billing/PlanComparison.tsx b/frontend/src/scenes/billing/PlanComparison.tsx
new file mode 100644
index 0000000000000..1d2c68bb9aa0b
--- /dev/null
+++ b/frontend/src/scenes/billing/PlanComparison.tsx
@@ -0,0 +1,361 @@
+import React from 'react'
+import { LemonButton, LemonModal, LemonTag, Link } from '@posthog/lemon-ui'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { IconCheckmark, IconClose, IconWarning } from 'lib/lemon-ui/icons'
+import { BillingProductV2AddonType, BillingProductV2Type, BillingV2FeatureType, BillingV2PlanType } from '~/types'
+import './PlanComparison.scss'
+import { useActions, useValues } from 'kea'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { convertLargeNumberToWords, getUpgradeProductLink } from './billing-utils'
+import { billingLogic } from './billingLogic'
+
+export function PlanIcon({
+    feature,
+    className,
+    timeDenominator,
+}: {
+    feature?: BillingV2FeatureType
+    className?: string
+    timeDenominator?: string
+}): JSX.Element {
+    return (
+        <div className="flex items-center text-xs text-muted">
+            {!feature ? (
+                <>
+                    <IconClose className={`text-danger mx-4 ${className}`} />
+                </>
+            ) : feature.limit ? (
+                <>
+                    <IconWarning className={`text-warning mx-4 ${className}`} />
+                    {feature.limit &&
+                        `${convertLargeNumberToWords(feature.limit, null)} ${feature.unit && feature.unit}${
+                            timeDenominator ? `/${timeDenominator}` : ''
+                        }`}
+                    {feature.note}
+                </>
+            ) : (
+                <>
+                    <IconCheckmark className={`text-success mx-4 ${className}`} />
+                    {feature.note}
+                </>
+            )}
+        </div>
+    )
+}
+
+const getProductTiers = (
+    plan: BillingV2PlanType,
+    product: BillingProductV2Type | BillingProductV2AddonType
+): JSX.Element => {
+    const tiers = plan?.tiers
+
+    return (
+        <>
+            {tiers ? (
+                tiers?.map((tier, i) => (
+                    <div
+                        key={`${plan.key}-${product.type}-${tier.up_to}`}
+                        className="flex justify-between items-center"
+                    >
+                        <span className="text-xs">
+                            {convertLargeNumberToWords(tier.up_to, tiers[i - 1]?.up_to, true, product.unit)}
+                        </span>
+                        <span className="font-bold">
+                            {i === 0 && parseFloat(tier.unit_amount_usd) === 0
+                                ? 'Free'
+                                : `$${parseFloat(tier.unit_amount_usd).toFixed(6)}`}
+                        </span>
+                    </div>
+                ))
+            ) : product?.free_allocation ? (
+                <div key={`${plan.key}-${product.type}-tiers`} className="flex justify-between items-center">
+                    <span className="text-xs">
+                        Up to {convertLargeNumberToWords(product?.free_allocation, null)} {product?.unit}s/mo
+                    </span>
+                    <span className="font-bold">Free</span>
+                </div>
+            ) : null}
+        </>
+    )
+}
+
+export const PlanComparison = ({
+    product,
+    includeAddons = false,
+}: {
+    product: BillingProductV2Type
+    includeAddons?: boolean
+}): JSX.Element | null => {
+    const plans = product.plans
+    if (plans?.length === 0) {
+        return null
+    }
+    const fullyFeaturedPlan = plans[plans.length - 1]
+    const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
+    const { redirectPath, billing } = useValues(billingLogic)
+
+    const upgradeButtons = plans?.map((plan) => {
+        return (
+            <td key={`${plan.key}-cta`} className="PlanTable__td__upgradeButton">
+                <LemonButton
+                    to={getUpgradeProductLink(product, plan.plan_key || '', redirectPath, includeAddons)}
+                    type={plan.current_plan ? 'secondary' : 'primary'}
+                    fullWidth
+                    center
+                    disableClientSideRouting
+                    disabled={plan.current_plan}
+                    onClick={() => {
+                        if (!plan.current_plan) {
+                            reportBillingUpgradeClicked(product.type)
+                        }
+                    }}
+                >
+                    {plan.current_plan ? 'Current plan' : 'Upgrade'}
+                </LemonButton>
+                {!plan.current_plan && includeAddons && product.addons?.length > 0 && (
+                    <p className="text-center ml-0 mt-2 mb-0">
+                        <Link
+                            to={`/api/billing-v2/activation?products=${product.type}:${plan.plan_key}&redirect_path=${redirectPath}`}
+                            className="text-muted text-xs"
+                            disableClientSideRouting
+                        >
+                            or upgrade without addons
+                        </Link>
+                    </p>
+                )}
+            </td>
+        )
+    })
+
+    return (
+        <table className="PlanComparison w-full table-fixed">
+            <thead>
+                <tr>
+                    <td />
+                    {plans?.map((plan) => (
+                        <td key={`plan-type-${plan.plan_key}`}>
+                            <h3 className="font-bold">{plan.free_allocation && !plan.tiers ? 'Free' : 'Paid'}</h3>
+                        </td>
+                    ))}
+                </tr>
+            </thead>
+            <tbody>
+                {/* Pricing section */}
+                <tr>
+                    <th
+                        colSpan={3}
+                        className="PlanTable__th__section bg-side text-muted justify-left rounded text-left mb-2"
+                    >
+                        <span>Pricing</span>
+                    </th>
+                </tr>
+                <tr className="PlanTable__tr__border">
+                    <td className="font-bold">Monthly base price</td>
+                    {plans?.map((plan) => (
+                        <td key={`${plan.plan_key}-basePrice`} className="text-sm font-bold">
+                            {plan.free_allocation && !plan.tiers ? 'Free forever' : '$0 per month'}
+                        </td>
+                    ))}
+                </tr>
+
+                <tr className={'PlanTable__tr__border'}>
+                    <th scope="row">
+                        {includeAddons && product.addons?.length > 0 && (
+                            <p className="ml-0">
+                                <span className="font-bold">{product.name}</span>
+                            </p>
+                        )}
+                        <p className="ml-0 text-xs text-muted mt-1">Priced per {product.unit}</p>
+                    </th>
+                    {plans?.map((plan) => (
+                        <td key={`${plan.plan_key}-tiers-td`}>{getProductTiers(plan, product)}</td>
+                    ))}
+                </tr>
+
+                {includeAddons &&
+                    product.addons?.map((addon) => {
+                        return addon.tiered ? (
+                            <tr key={addon.name + 'pricing-row'} className={'PlanTable__tr__border'}>
+                                <th scope="row">
+                                    <p className="ml-0">
+                                        <span className="font-bold">{addon.name}</span>
+                                        <LemonTag type="completion" className="ml-2">
+                                            addon
+                                        </LemonTag>
+                                    </p>
+                                    <p className="ml-0 text-xs text-muted mt-1">Priced per {addon.unit}</p>
+                                </th>
+                                {plans?.map((plan) =>
+                                    // If the plan is free, the addon isn't available
+                                    plan.free_allocation && !plan.tiers ? (
+                                        <td key={`${addon.name}-free-tiers-td`}>
+                                            <p className="text-muted text-xs">Not available on this plan.</p>
+                                        </td>
+                                    ) : (
+                                        <td key={`${addon.type}-tiers-td`}>
+                                            {getProductTiers(addon.plans?.[0], addon)}
+                                        </td>
+                                    )
+                                )}
+                            </tr>
+                        ) : null
+                    })}
+
+                <tr>
+                    <td />
+                    {upgradeButtons}
+                </tr>
+                <tr>
+                    <th colSpan={3} className="PlanTable__th__section bg-side justify-left rounded text-left mb-2">
+                        <div className="flex items-center gap-x-2 my-2">
+                            {product.image_url && (
+                                <img
+                                    className="w-6 h-6"
+                                    alt={`Logo for PostHog ${product.name}`}
+                                    src={product.image_url}
+                                />
+                            )}
+                            <Tooltip title={product.description}>
+                                <span className="font-bold">{product.name}</span>
+                            </Tooltip>
+                        </div>
+                    </th>
+                </tr>
+
+                {fullyFeaturedPlan?.features?.map((feature, i) => (
+                    <tr
+                        key={`tr-${feature.key}`}
+                        className={
+                            i == fullyFeaturedPlan?.features?.length - 1 && !billing?.has_active_subscription
+                                ? 'PlanTable__tr__border'
+                                : ''
+                        }
+                    >
+                        <th
+                            className={`text-muted PlanTable__th__feature ${
+                                i == fullyFeaturedPlan?.features?.length - 1 ? 'PlanTable__th__last-feature' : ''
+                            }`}
+                        >
+                            <Tooltip title={feature.description}>{feature.name}</Tooltip>
+                        </th>
+                        {plans?.map((plan) => (
+                            <td key={`${plan.plan_key}-${feature.key}`}>
+                                <PlanIcon
+                                    feature={plan.features?.find(
+                                        (thisPlanFeature) => feature.key === thisPlanFeature.key
+                                    )}
+                                    className={'text-base'}
+                                />
+                            </td>
+                        ))}
+                    </tr>
+                ))}
+
+                {!billing?.has_active_subscription && (
+                    <>
+                        <tr>
+                            <th colSpan={3} className="PlanTable__th__section rounded text-left">
+                                <p className="mt-6 mb-2 italic text-center text-muted">
+                                    <Tooltip title="Organizations with any paid subscription get access to additional features.">
+                                        Included platform features:
+                                    </Tooltip>
+                                </p>
+                            </th>
+                        </tr>
+                        {billing?.products
+                            .filter((product) => product.inclusion_only)
+                            .map((includedProduct) => (
+                                <React.Fragment key={`inclusion-only-product-features-${includedProduct.type}`}>
+                                    <tr>
+                                        <th
+                                            colSpan={3}
+                                            className="PlanTable__th__section bg-side justify-left rounded text-left mb-2"
+                                        >
+                                            <div className="flex items-center gap-x-2 my-2">
+                                                {includedProduct.image_url && (
+                                                    <img
+                                                        className="w-6 h-6"
+                                                        alt={`Logo for PostHog ${includedProduct.name}`}
+                                                        src={includedProduct.image_url}
+                                                    />
+                                                )}
+                                                <Tooltip title={includedProduct.description}>
+                                                    <span className="font-bold">{includedProduct.name}</span>
+                                                </Tooltip>
+                                            </div>
+                                        </th>
+                                    </tr>
+                                    {includedProduct.plans
+                                        .find((plan: BillingV2PlanType) => plan.included_if == 'has_subscription')
+                                        ?.features?.map((feature, i) => (
+                                            <tr key={`tr-${feature.key}`}>
+                                                <th
+                                                    className={`text-muted PlanTable__th__feature ${
+                                                        // If this is the last feature in the list, add a class to add padding to the bottom of
+                                                        // the cell (which makes the whole row have the padding)
+                                                        i ==
+                                                        (includedProduct.plans.find(
+                                                            (plan) => plan.included_if == 'has_subscription'
+                                                        )?.features?.length || 0) -
+                                                            1
+                                                            ? 'PlanTable__th__last-feature'
+                                                            : ''
+                                                    }`}
+                                                >
+                                                    <Tooltip title={feature.description}>{feature.name}</Tooltip>
+                                                </th>
+                                                {includedProduct.plans?.map((plan) => (
+                                                    <React.Fragment key={`${plan.plan_key}-${feature.key}`}>
+                                                        {/* Some products don't have a free plan, so we need to pretend there is one 
+                                                                        so the features line up in the correct columns in the UI. This is kind of 
+                                                                        hacky because it assumes we only have 2 plans total, but it works for now.
+                                                                    */}
+                                                        {includedProduct.plans?.length === 1 && (
+                                                            <td>
+                                                                <PlanIcon feature={undefined} className={'text-base'} />
+                                                            </td>
+                                                        )}
+                                                        <td>
+                                                            <PlanIcon
+                                                                feature={plan.features?.find(
+                                                                    (thisPlanFeature) =>
+                                                                        feature.key === thisPlanFeature.key
+                                                                )}
+                                                                className={'text-base'}
+                                                            />
+                                                        </td>
+                                                    </React.Fragment>
+                                                ))}
+                                            </tr>
+                                        ))}
+                                </React.Fragment>
+                            ))}
+                    </>
+                )}
+            </tbody>
+        </table>
+    )
+}
+
+export const PlanComparisonModal = ({
+    product,
+    includeAddons = false,
+    modalOpen,
+    onClose,
+}: {
+    product: BillingProductV2Type
+    includeAddons?: boolean
+    modalOpen: boolean
+    onClose?: () => void
+}): JSX.Element | null => {
+    return (
+        <LemonModal isOpen={modalOpen} onClose={onClose}>
+            <div className="PlanComparisonModal flex w-full h-full justify-center p-8">
+                <div className="text-left bg-bg-light rounded-md relative w-full">
+                    <h2>{product.name} plans</h2>
+                    <PlanComparison product={product} includeAddons={includeAddons} />
+                </div>
+            </div>
+        </LemonModal>
+    )
+}
diff --git a/frontend/src/scenes/billing/PlanComparisonModal.scss b/frontend/src/scenes/billing/PlanComparisonModal.scss
deleted file mode 100644
index 68d1fdffb61de..0000000000000
--- a/frontend/src/scenes/billing/PlanComparisonModal.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.PlanComparisonModal {
-    max-width: 900px;
-    table {
-        table-layout: fixed;
-        td {
-            vertical-align: top;
-            padding: 0.75rem 1.25rem;
-
-            &.PlanTable__td__upgradeButton {
-                padding-top: 1rem;
-                padding-bottom: 1rem;
-            }
-        }
-        th {
-            vertical-align: top;
-            padding: 0.75rem 1.25rem 0.75rem;
-            font-weight: 600;
-            text-align: left;
-
-            &.PlanTable__th__section {
-                padding: 0.25rem 1.25rem 0.25rem;
-                font-weight: 500;
-            }
-
-            &.PlanTable__th__feature {
-                padding: 0.75rem 1.25rem 0.75rem 3.25rem;
-                font-weight: 600;
-            }
-
-            &.PlanTable__th__last-feature {
-                padding-bottom: 2rem;
-            }
-
-            p {
-                font-weight: 400;
-            }
-        }
-    }
-    .PlanTable__tr__border {
-        border-bottom: 3px rgba(0, 0, 0, 0.07) dotted;
-    }
-}
diff --git a/frontend/src/scenes/billing/PlanComparisonModal.tsx b/frontend/src/scenes/billing/PlanComparisonModal.tsx
deleted file mode 100644
index e5114042c9bec..0000000000000
--- a/frontend/src/scenes/billing/PlanComparisonModal.tsx
+++ /dev/null
@@ -1,375 +0,0 @@
-import React from 'react'
-import { LemonButton, LemonModal, LemonTag, Link } from '@posthog/lemon-ui'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { IconCheckmark, IconClose, IconWarning } from 'lib/lemon-ui/icons'
-import { BillingProductV2AddonType, BillingProductV2Type, BillingV2FeatureType, BillingV2PlanType } from '~/types'
-import './PlanComparisonModal.scss'
-import { useActions, useValues } from 'kea'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { convertLargeNumberToWords, getUpgradeAllProductsLink } from './billing-utils'
-import { billingLogic } from './billingLogic'
-
-export function PlanIcon({
-    feature,
-    className,
-    timeDenominator,
-}: {
-    feature?: BillingV2FeatureType
-    className?: string
-    timeDenominator?: string
-}): JSX.Element {
-    return (
-        <div className="flex items-center text-xs text-muted">
-            {!feature ? (
-                <>
-                    <IconClose className={`text-danger mx-4 ${className}`} />
-                </>
-            ) : feature.limit ? (
-                <>
-                    <IconWarning className={`text-warning mx-4 ${className}`} />
-                    {feature.limit &&
-                        `${convertLargeNumberToWords(feature.limit, null)} ${feature.unit && feature.unit}${
-                            timeDenominator ? `/${timeDenominator}` : ''
-                        }`}
-                    {feature.note}
-                </>
-            ) : (
-                <>
-                    <IconCheckmark className={`text-success mx-4 ${className}`} />
-                    {feature.note}
-                </>
-            )}
-        </div>
-    )
-}
-
-const getProductTiers = (
-    plan: BillingV2PlanType,
-    product: BillingProductV2Type | BillingProductV2AddonType
-): JSX.Element => {
-    const tiers = plan?.tiers
-
-    return (
-        <>
-            {tiers ? (
-                tiers?.map((tier, i) => (
-                    <div
-                        key={`${plan.key}-${product.type}-${tier.up_to}`}
-                        className="flex justify-between items-center"
-                    >
-                        <span className="text-xs">
-                            {convertLargeNumberToWords(tier.up_to, tiers[i - 1]?.up_to, true, product.unit)}
-                        </span>
-                        <span className="font-bold">
-                            {i === 0 && parseFloat(tier.unit_amount_usd) === 0
-                                ? 'Free'
-                                : `$${parseFloat(tier.unit_amount_usd).toFixed(6)}`}
-                        </span>
-                    </div>
-                ))
-            ) : product?.free_allocation ? (
-                <div key={`${plan.key}-${product.type}-tiers`} className="flex justify-between items-center">
-                    <span className="text-xs">
-                        Up to {convertLargeNumberToWords(product?.free_allocation, null)} {product?.unit}s/mo
-                    </span>
-                    <span className="font-bold">Free</span>
-                </div>
-            ) : null}
-        </>
-    )
-}
-
-export const PlanComparisonModal = ({
-    product,
-    includeAddons = false,
-    modalOpen,
-    onClose,
-}: {
-    product: BillingProductV2Type
-    includeAddons?: boolean
-    modalOpen: boolean
-    onClose?: () => void
-}): JSX.Element | null => {
-    const plans = product.plans
-    if (plans?.length === 0) {
-        return null
-    }
-    const fullyFeaturedPlan = plans[plans.length - 1]
-    const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
-    const { redirectPath, billing } = useValues(billingLogic)
-
-    const upgradeButtons = plans?.map((plan) => {
-        return (
-            <td key={`${plan.key}-cta`} className="PlanTable__td__upgradeButton">
-                <LemonButton
-                    to={
-                        includeAddons
-                            ? getUpgradeAllProductsLink(product, plan.plan_key || '', redirectPath)
-                            : `/api/billing-v2/activation?products=${product.type}:${plan.plan_key}&redirect_path=${redirectPath}`
-                    }
-                    type={plan.current_plan ? 'secondary' : 'primary'}
-                    fullWidth
-                    center
-                    disableClientSideRouting
-                    disabled={plan.current_plan}
-                    onClick={() => {
-                        if (!plan.current_plan) {
-                            reportBillingUpgradeClicked(product.type)
-                        }
-                    }}
-                >
-                    {plan.current_plan ? 'Current plan' : 'Upgrade'}
-                </LemonButton>
-                {!plan.current_plan && includeAddons && product.addons?.length > 0 && (
-                    <p className="text-center ml-0 mt-2 mb-0">
-                        <Link
-                            to={`/api/billing-v2/activation?products=${product.type}:${plan.plan_key}&redirect_path=${redirectPath}`}
-                            className="text-muted text-xs"
-                            disableClientSideRouting
-                        >
-                            or upgrade without addons
-                        </Link>
-                    </p>
-                )}
-            </td>
-        )
-    })
-
-    return (
-        <LemonModal isOpen={modalOpen} onClose={onClose}>
-            <div className="PlanComparisonModal flex w-full h-full justify-center p-8">
-                <div className="text-left bg-bg-light rounded-md relative w-full">
-                    <h2>{product.name} plans</h2>
-                    <table className="w-full table-fixed">
-                        <thead>
-                            <tr>
-                                <td />
-                                {plans?.map((plan) => (
-                                    <td key={`plan-type-${plan.plan_key}`}>
-                                        <h3 className="font-bold">
-                                            {plan.free_allocation && !plan.tiers ? 'Free' : 'Paid'}
-                                        </h3>
-                                    </td>
-                                ))}
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {/* Pricing section */}
-                            <tr>
-                                <th
-                                    colSpan={3}
-                                    className="PlanTable__th__section bg-side text-muted justify-left rounded text-left mb-2"
-                                >
-                                    <span>Pricing</span>
-                                </th>
-                            </tr>
-                            <tr className="PlanTable__tr__border">
-                                <td className="font-bold">Monthly base price</td>
-                                {plans?.map((plan) => (
-                                    <td key={`${plan.plan_key}-basePrice`} className="text-sm font-bold">
-                                        {plan.free_allocation && !plan.tiers ? 'Free forever' : '$0 per month'}
-                                    </td>
-                                ))}
-                            </tr>
-
-                            <tr className={'PlanTable__tr__border'}>
-                                <th scope="row">
-                                    {includeAddons && product.addons?.length > 0 && (
-                                        <p className="ml-0">
-                                            <span className="font-bold">{product.name}</span>
-                                        </p>
-                                    )}
-                                    <p className="ml-0 text-xs text-muted mt-1">Priced per {product.unit}</p>
-                                </th>
-                                {plans?.map((plan) => (
-                                    <td key={`${plan.plan_key}-tiers-td`}>{getProductTiers(plan, product)}</td>
-                                ))}
-                            </tr>
-
-                            {includeAddons &&
-                                product.addons?.map((addon) => {
-                                    return addon.tiered ? (
-                                        <tr key={addon.name + 'pricing-row'} className={'PlanTable__tr__border'}>
-                                            <th scope="row">
-                                                <p className="ml-0">
-                                                    <span className="font-bold">{addon.name}</span>
-                                                    <LemonTag type="completion" className="ml-2">
-                                                        addon
-                                                    </LemonTag>
-                                                </p>
-                                                <p className="ml-0 text-xs text-muted mt-1">Priced per {addon.unit}</p>
-                                            </th>
-                                            {plans?.map((plan) =>
-                                                // If the plan is free, the addon isn't available
-                                                plan.free_allocation && !plan.tiers ? (
-                                                    <td key={`${addon.name}-free-tiers-td`}>
-                                                        <p className="text-muted text-xs">
-                                                            Not available on this plan.
-                                                        </p>
-                                                    </td>
-                                                ) : (
-                                                    <td key={`${addon.type}-tiers-td`}>
-                                                        {getProductTiers(addon.plans?.[0], addon)}
-                                                    </td>
-                                                )
-                                            )}
-                                        </tr>
-                                    ) : null
-                                })}
-
-                            <tr>
-                                <td />
-                                {upgradeButtons}
-                            </tr>
-                            <tr>
-                                <th
-                                    colSpan={3}
-                                    className="PlanTable__th__section bg-side justify-left rounded text-left mb-2"
-                                >
-                                    <div className="flex items-center gap-x-2 my-2">
-                                        {product.image_url && (
-                                            <img
-                                                className="w-6 h-6"
-                                                alt={`Logo for PostHog ${product.name}`}
-                                                src={product.image_url}
-                                            />
-                                        )}
-                                        <Tooltip title={product.description}>
-                                            <span className="font-bold">{product.name}</span>
-                                        </Tooltip>
-                                    </div>
-                                </th>
-                            </tr>
-
-                            {fullyFeaturedPlan?.features?.map((feature, i) => (
-                                <tr
-                                    key={`tr-${feature.key}`}
-                                    className={
-                                        i == fullyFeaturedPlan?.features?.length - 1 &&
-                                        !billing?.has_active_subscription
-                                            ? 'PlanTable__tr__border'
-                                            : ''
-                                    }
-                                >
-                                    <th
-                                        className={`text-muted PlanTable__th__feature ${
-                                            i == fullyFeaturedPlan?.features?.length - 1
-                                                ? 'PlanTable__th__last-feature'
-                                                : ''
-                                        }`}
-                                    >
-                                        <Tooltip title={feature.description}>{feature.name}</Tooltip>
-                                    </th>
-                                    {plans?.map((plan) => (
-                                        <td key={`${plan.plan_key}-${feature.key}`}>
-                                            <PlanIcon
-                                                feature={plan.features?.find(
-                                                    (thisPlanFeature) => feature.key === thisPlanFeature.key
-                                                )}
-                                                className={'text-base'}
-                                            />
-                                        </td>
-                                    ))}
-                                </tr>
-                            ))}
-
-                            {!billing?.has_active_subscription && (
-                                <>
-                                    <tr>
-                                        <th colSpan={3} className="PlanTable__th__section rounded text-left">
-                                            <p className="mt-6 mb-2 italic text-center text-muted">
-                                                <Tooltip title="Organizations with any paid subscription get access to additional features.">
-                                                    Included platform features:
-                                                </Tooltip>
-                                            </p>
-                                        </th>
-                                    </tr>
-                                    {billing?.products
-                                        .filter((product) => product.inclusion_only)
-                                        .map((includedProduct) => (
-                                            <React.Fragment
-                                                key={`inclusion-only-product-features-${includedProduct.type}`}
-                                            >
-                                                <tr>
-                                                    <th
-                                                        colSpan={3}
-                                                        className="PlanTable__th__section bg-side justify-left rounded text-left mb-2"
-                                                    >
-                                                        <div className="flex items-center gap-x-2 my-2">
-                                                            {includedProduct.image_url && (
-                                                                <img
-                                                                    className="w-6 h-6"
-                                                                    alt={`Logo for PostHog ${includedProduct.name}`}
-                                                                    src={includedProduct.image_url}
-                                                                />
-                                                            )}
-                                                            <Tooltip title={includedProduct.description}>
-                                                                <span className="font-bold">
-                                                                    {includedProduct.name}
-                                                                </span>
-                                                            </Tooltip>
-                                                        </div>
-                                                    </th>
-                                                </tr>
-                                                {includedProduct.plans
-                                                    .find(
-                                                        (plan: BillingV2PlanType) =>
-                                                            plan.included_if == 'has_subscription'
-                                                    )
-                                                    ?.features?.map((feature, i) => (
-                                                        <tr key={`tr-${feature.key}`}>
-                                                            <th
-                                                                className={`text-muted PlanTable__th__feature ${
-                                                                    // If this is the last feature in the list, add a class to add padding to the bottom of
-                                                                    // the cell (which makes the whole row have the padding)
-                                                                    i ==
-                                                                    (includedProduct.plans.find(
-                                                                        (plan) => plan.included_if == 'has_subscription'
-                                                                    )?.features?.length || 0) -
-                                                                        1
-                                                                        ? 'PlanTable__th__last-feature'
-                                                                        : ''
-                                                                }`}
-                                                            >
-                                                                <Tooltip title={feature.description}>
-                                                                    {feature.name}
-                                                                </Tooltip>
-                                                            </th>
-                                                            {includedProduct.plans?.map((plan) => (
-                                                                <React.Fragment key={`${plan.plan_key}-${feature.key}`}>
-                                                                    {/* Some products don't have a free plan, so we need to pretend there is one 
-                                                                        so the features line up in the correct columns in the UI. This is kind of 
-                                                                        hacky because it assumes we only have 2 plans total, but it works for now.
-                                                                    */}
-                                                                    {includedProduct.plans?.length === 1 && (
-                                                                        <td>
-                                                                            <PlanIcon
-                                                                                feature={undefined}
-                                                                                className={'text-base'}
-                                                                            />
-                                                                        </td>
-                                                                    )}
-                                                                    <td>
-                                                                        <PlanIcon
-                                                                            feature={plan.features?.find(
-                                                                                (thisPlanFeature) =>
-                                                                                    feature.key === thisPlanFeature.key
-                                                                            )}
-                                                                            className={'text-base'}
-                                                                        />
-                                                                    </td>
-                                                                </React.Fragment>
-                                                            ))}
-                                                        </tr>
-                                                    ))}
-                                            </React.Fragment>
-                                        ))}
-                                </>
-                            )}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </LemonModal>
-    )
-}
diff --git a/frontend/src/scenes/billing/billing-utils.ts b/frontend/src/scenes/billing/billing-utils.ts
index 3995cf800487b..d0bfaca0a3cb3 100644
--- a/frontend/src/scenes/billing/billing-utils.ts
+++ b/frontend/src/scenes/billing/billing-utils.ts
@@ -144,14 +144,15 @@ export const convertAmountToUsage = (
     return Math.round(usage)
 }
 
-export const getUpgradeAllProductsLink = (
+export const getUpgradeProductLink = (
     product: BillingProductV2Type,
     upgradeToPlanKey: string,
-    redirectPath?: string
+    redirectPath?: string,
+    includeAddons: boolean = true
 ): string => {
     let url = '/api/billing-v2/activation?products='
     url += `${product.type}:${upgradeToPlanKey},`
-    if (product.addons?.length) {
+    if (includeAddons && product.addons?.length) {
         for (const addon of product.addons) {
             if (addon.plans?.[0]?.plan_key) {
                 url += `${addon.type}:${addon.plans[0].plan_key},`
diff --git a/frontend/src/scenes/billing/billingLogic.ts b/frontend/src/scenes/billing/billingLogic.ts
index 16eb12665904f..2fdc2aa0f56ee 100644
--- a/frontend/src/scenes/billing/billingLogic.ts
+++ b/frontend/src/scenes/billing/billingLogic.ts
@@ -74,7 +74,11 @@ export const billingLogic = kea<billingLogicType>([
             '' as string,
             {
                 setRedirectPath: () => {
-                    return window.location.pathname.includes('/ingestion') ? urls.ingestion() + '/billing' : ''
+                    return window.location.pathname.includes('/ingestion')
+                        ? urls.ingestion() + '/billing'
+                        : window.location.pathname.includes('/onboarding')
+                        ? window.location.pathname
+                        : ''
                 },
             },
         ],
diff --git a/frontend/src/scenes/onboarding/Onboarding.tsx b/frontend/src/scenes/onboarding/Onboarding.tsx
index 5915d1f9a848e..41b299c417f36 100644
--- a/frontend/src/scenes/onboarding/Onboarding.tsx
+++ b/frontend/src/scenes/onboarding/Onboarding.tsx
@@ -7,19 +7,22 @@ import { urls } from 'scenes/urls'
 import { onboardingLogic } from './onboardingLogic'
 import { SDKs } from './sdks/SDKs'
 import { OnboardingProductIntro } from './OnboardingProductIntro'
-import { OnboardingStep } from './OnboardingStep'
 import { ProductKey } from '~/types'
 import { ProductAnalyticsSDKInstructions } from './sdks/product-analytics/ProductAnalyticsSDKInstructions'
 import { SessionReplaySDKInstructions } from './sdks/session-replay/SessionReplaySDKInstructions'
+import { OnboardingBillingStep } from './OnboardingBillingStep'
 
 export const scene: SceneExport = {
     component: Onboarding,
     logic: onboardingLogic,
 }
 
+/**
+ * Wrapper for custom onboarding content. This automatically includes the product intro and billing step.
+ */
 const OnboardingWrapper = ({ children }: { children: React.ReactNode }): JSX.Element => {
-    const { onboardingStep } = useValues(onboardingLogic)
-    const { setTotalOnboardingSteps } = useActions(onboardingLogic)
+    const { currentOnboardingStepNumber, shouldShowBillingStep } = useValues(onboardingLogic)
+    const { setAllOnboardingSteps } = useActions(onboardingLogic)
     const { product } = useValues(onboardingLogic)
     const [allSteps, setAllSteps] = useState<JSX.Element[]>([])
 
@@ -28,7 +31,10 @@ const OnboardingWrapper = ({ children }: { children: React.ReactNode }): JSX.Ele
     }, [children])
 
     useEffect(() => {
-        setTotalOnboardingSteps(allSteps.length)
+        if (!allSteps.length) {
+            return
+        }
+        setAllOnboardingSteps(allSteps)
     }, [allSteps])
 
     if (!product || !children) {
@@ -37,24 +43,26 @@ const OnboardingWrapper = ({ children }: { children: React.ReactNode }): JSX.Ele
 
     const createAllSteps = (): void => {
         const ProductIntro = <OnboardingProductIntro product={product} />
+        let steps = []
         if (Array.isArray(children)) {
-            setAllSteps([ProductIntro, ...children])
+            steps = [ProductIntro, ...children]
         } else {
-            setAllSteps([ProductIntro, children as JSX.Element])
+            steps = [ProductIntro, children as JSX.Element]
+        }
+        if (shouldShowBillingStep) {
+            const BillingStep = <OnboardingBillingStep product={product} />
+            steps = [...steps, BillingStep]
         }
-        setTotalOnboardingSteps(Array.isArray(children) ? children.length : 1)
+        setAllSteps(steps)
     }
 
-    return (allSteps[onboardingStep - 1] as JSX.Element) || <></>
+    return (allSteps[currentOnboardingStepNumber - 1] as JSX.Element) || <></>
 }
 
 const ProductAnalyticsOnboarding = (): JSX.Element => {
     return (
         <OnboardingWrapper>
             <SDKs usersAction="collecting events" sdkInstructionMap={ProductAnalyticsSDKInstructions} />
-            <OnboardingStep title="my onboarding step" subtitle="my onboarding subtitle">
-                <div>my onboarding content</div>
-            </OnboardingStep>
         </OnboardingWrapper>
     )
 }
diff --git a/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx b/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx
new file mode 100644
index 0000000000000..510f91ebcdf8e
--- /dev/null
+++ b/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx
@@ -0,0 +1,73 @@
+import { OnboardingStep } from './OnboardingStep'
+import { PlanComparison } from 'scenes/billing/PlanComparison'
+import { useActions, useValues } from 'kea'
+import { billingLogic } from 'scenes/billing/billingLogic'
+import { onboardingLogic } from './onboardingLogic'
+import { BillingProductV2Type } from '~/types'
+import { Spinner } from 'lib/lemon-ui/Spinner'
+import { BillingHero } from 'scenes/billing/BillingHero'
+import { LemonButton } from '@posthog/lemon-ui'
+import { getUpgradeProductLink } from 'scenes/billing/billing-utils'
+import { billingProductLogic } from 'scenes/billing/billingProductLogic'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { IconCheckCircleOutline } from 'lib/lemon-ui/icons'
+import { StarHog } from 'lib/components/hedgehogs'
+
+export const OnboardingBillingStep = ({ product }: { product: BillingProductV2Type }): JSX.Element => {
+    const { billing, redirectPath } = useValues(billingLogic)
+    const { productKey } = useValues(onboardingLogic)
+    const { currentAndUpgradePlans } = useValues(billingProductLogic({ product }))
+    const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
+    const plan = currentAndUpgradePlans?.upgradePlan
+
+    return (
+        <OnboardingStep
+            title="Add credit card details"
+            showSkip={!product.subscribed}
+            continueOverride={
+                product?.subscribed ? undefined : (
+                    <LemonButton
+                        // TODO: redirect path won't work properly until navigation is properly set up
+                        to={getUpgradeProductLink(product, plan.plan_key || '', redirectPath, true)}
+                        type="primary"
+                        center
+                        disableClientSideRouting
+                        onClick={() => {
+                            reportBillingUpgradeClicked(product.type)
+                        }}
+                    >
+                        Upgrade to paid
+                    </LemonButton>
+                )
+            }
+        >
+            {billing?.products && productKey && product ? (
+                <div className="mt-6">
+                    {product.subscribed ? (
+                        <div className="mb-8">
+                            <div className="bg-success-highlight rounded-lg p-6 flex justify-between items-center mb-8">
+                                <div className="flex gap-x-4">
+                                    <IconCheckCircleOutline className="text-success text-3xl mb-6" />
+                                    <div>
+                                        <h3 className="text-lg font-bold mb-1 text-left">Subscribe successful</h3>
+                                        <p className="mx-0 mb-0">You're all ready to use PostHog.</p>
+                                    </div>
+                                </div>
+                                <div className="h-20">
+                                    <StarHog className="h-full w-full" />
+                                </div>
+                            </div>
+                        </div>
+                    ) : (
+                        <>
+                            <BillingHero />
+                            <PlanComparison product={product} includeAddons />
+                        </>
+                    )}
+                </div>
+            ) : (
+                <Spinner className="text-lg" />
+            )}
+        </OnboardingStep>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/OnboardingProductIntro.tsx b/frontend/src/scenes/onboarding/OnboardingProductIntro.tsx
index 32f3295caaf7e..144f8d2d82128 100644
--- a/frontend/src/scenes/onboarding/OnboardingProductIntro.tsx
+++ b/frontend/src/scenes/onboarding/OnboardingProductIntro.tsx
@@ -12,8 +12,8 @@ import { urls } from 'scenes/urls'
 export const OnboardingProductIntro = ({ product }: { product: BillingProductV2Type }): JSX.Element => {
     const { currentAndUpgradePlans, isPricingModalOpen } = useValues(billingProductLogic({ product }))
     const { toggleIsPricingModalOpen } = useActions(billingProductLogic({ product }))
-    const { incrementOnboardingStep } = useActions(onboardingLogic)
-    const upgradePlan = currentAndUpgradePlans?.upgradePlan
+    const { setCurrentOnboardingStepNumber } = useActions(onboardingLogic)
+    const { currentOnboardingStepNumber } = useValues(onboardingLogic)
 
     const pricingBenefits = [
         'Only pay for what you use',
@@ -27,6 +27,9 @@ export const OnboardingProductIntro = ({ product }: { product: BillingProductV2T
     const productPageUrl = 'https://posthog.com/' + productWebsiteKey
     const productImageUrl = `https://posthog.com/images/product/${productWebsiteKey}-product.png`
 
+    const upgradePlan = currentAndUpgradePlans?.upgradePlan
+    const plan = upgradePlan ? upgradePlan : currentAndUpgradePlans?.currentPlan
+
     return (
         <div className="w-full">
             <div className="flex flex-col w-full p-6 bg-mid items-center justify-center">
@@ -47,7 +50,10 @@ export const OnboardingProductIntro = ({ product }: { product: BillingProductV2T
                         <h1 className="text-5xl font-bold">{product.name}</h1>
                         <h2 className="font-bold mb-6">{product.description}</h2>
                         <div className="flex gap-x-2">
-                            <LemonButton type="primary" onClick={incrementOnboardingStep}>
+                            <LemonButton
+                                type="primary"
+                                onClick={() => setCurrentOnboardingStepNumber(currentOnboardingStepNumber + 1)}
+                            >
                                 Get started
                             </LemonButton>
                             {product.docs_url && (
@@ -66,7 +72,7 @@ export const OnboardingProductIntro = ({ product }: { product: BillingProductV2T
                 <div className="flex flex-col">
                     <h2 className="text-3xl">Features</h2>
                     <div className="flex flex-wrap gap-y-4 my-6 max-w-lg">
-                        {upgradePlan?.features?.map((feature, i) => (
+                        {plan?.features?.map((feature, i) => (
                             <li className="flex mb-2" key={`product-features-${i}`}>
                                 <div>
                                     <IconCheckCircleOutline className="text-success mr-2 mt-1 w-6" />
@@ -82,25 +88,23 @@ export const OnboardingProductIntro = ({ product }: { product: BillingProductV2T
                 <div>
                     <LemonCard hoverEffect={false}>
                         <h2 className="text-3xl">Pricing</h2>
-                        {upgradePlan?.tiers?.[0].unit_amount_usd &&
-                            parseInt(upgradePlan?.tiers?.[0].unit_amount_usd) === 0 && (
-                                <p className="ml-0 mb-0 mt-4">
-                                    <span className="font-bold">
-                                        First {convertLargeNumberToWords(upgradePlan?.tiers?.[0].up_to, null)}{' '}
-                                        {product.unit}s free
-                                    </span>
-                                    , then <span className="font-bold">${upgradePlan?.tiers?.[1].unit_amount_usd}</span>
-                                    <span className="text-muted">/{product.unit}</span>.{' '}
-                                    <Link
-                                        onClick={() => {
-                                            toggleIsPricingModalOpen()
-                                        }}
-                                    >
-                                        <span className="font-bold text-brand-red">Volume discounts</span>
-                                    </Link>{' '}
-                                    after {convertLargeNumberToWords(upgradePlan?.tiers?.[1].up_to, null)}/mo.
-                                </p>
-                            )}
+                        {plan?.tiers?.[0].unit_amount_usd && parseInt(plan?.tiers?.[0].unit_amount_usd) === 0 && (
+                            <p className="ml-0 mb-0 mt-4">
+                                <span className="font-bold">
+                                    First {convertLargeNumberToWords(plan?.tiers?.[0].up_to, null)} {product.unit}s free
+                                </span>
+                                , then <span className="font-bold">${plan?.tiers?.[1].unit_amount_usd}</span>
+                                <span className="text-muted">/{product.unit}</span>.{' '}
+                                <Link
+                                    onClick={() => {
+                                        toggleIsPricingModalOpen()
+                                    }}
+                                >
+                                    <span className="font-bold text-brand-red">Volume discounts</span>
+                                </Link>{' '}
+                                after {convertLargeNumberToWords(plan?.tiers?.[1].up_to, null)}/mo.
+                            </p>
+                        )}
                         <ul>
                             {pricingBenefits.map((benefit, i) => (
                                 <li className="flex mb-2 ml-6" key={`pricing-benefits-${i}`}>
@@ -136,7 +140,7 @@ export const OnboardingProductIntro = ({ product }: { product: BillingProductV2T
                 modalOpen={isPricingModalOpen}
                 onClose={toggleIsPricingModalOpen}
                 product={product}
-                planKey={upgradePlan?.plan_key}
+                planKey={plan?.plan_key}
             />
         </div>
     )
diff --git a/frontend/src/scenes/onboarding/OnboardingStep.tsx b/frontend/src/scenes/onboarding/OnboardingStep.tsx
index 291d712faba00..12d523eb78330 100644
--- a/frontend/src/scenes/onboarding/OnboardingStep.tsx
+++ b/frontend/src/scenes/onboarding/OnboardingStep.tsx
@@ -8,13 +8,17 @@ export const OnboardingStep = ({
     title,
     subtitle,
     children,
+    showSkip = false,
+    continueOverride,
 }: {
     title: string
     subtitle?: string
     children: React.ReactNode
+    showSkip?: boolean
+    continueOverride?: JSX.Element
 }): JSX.Element => {
-    const { onboardingStep, totalOnboardingSteps } = useValues(onboardingLogic)
-    const { incrementOnboardingStep, decrementOnboardingStep, completeOnboarding } = useActions(onboardingLogic)
+    const { currentOnboardingStepNumber, totalOnboardingSteps } = useValues(onboardingLogic)
+    const { setCurrentOnboardingStepNumber, completeOnboarding } = useActions(onboardingLogic)
     return (
         <BridgePage
             view="onboarding-step"
@@ -22,29 +26,51 @@ export const OnboardingStep = ({
             hedgehog={false}
             fixedWidth={false}
             header={
-                onboardingStep > 1 && (
+                currentOnboardingStepNumber > 1 && (
                     <div className="mb-4">
-                        <LemonButton icon={<IconArrowLeft />} onClick={decrementOnboardingStep}>
+                        <LemonButton
+                            icon={<IconArrowLeft />}
+                            onClick={() => setCurrentOnboardingStepNumber(currentOnboardingStepNumber - 1)}
+                        >
                             Back
                         </LemonButton>
                     </div>
                 )
             }
         >
-            <div className="max-w-md">
+            <div className="w-md">
                 <h1 className="font-bold">{title}</h1>
                 <p>{subtitle}</p>
                 {children}
                 <div className="mt-8 flex justify-end gap-x-2">
-                    <LemonButton
-                        type="primary"
-                        onClick={() =>
-                            onboardingStep == totalOnboardingSteps ? completeOnboarding() : incrementOnboardingStep()
-                        }
-                        sideIcon={onboardingStep !== totalOnboardingSteps ? <IconArrowRight /> : null}
-                    >
-                        {onboardingStep == totalOnboardingSteps ? 'Finish' : 'Continue'}
-                    </LemonButton>
+                    {showSkip && (
+                        <LemonButton
+                            type="tertiary"
+                            onClick={() =>
+                                currentOnboardingStepNumber == totalOnboardingSteps
+                                    ? completeOnboarding()
+                                    : setCurrentOnboardingStepNumber(currentOnboardingStepNumber + 1)
+                            }
+                            status="muted"
+                        >
+                            Skip for now
+                        </LemonButton>
+                    )}
+                    {continueOverride ? (
+                        continueOverride
+                    ) : (
+                        <LemonButton
+                            type="primary"
+                            onClick={() =>
+                                currentOnboardingStepNumber == totalOnboardingSteps
+                                    ? completeOnboarding()
+                                    : setCurrentOnboardingStepNumber(currentOnboardingStepNumber + 1)
+                            }
+                            sideIcon={currentOnboardingStepNumber !== totalOnboardingSteps ? <IconArrowRight /> : null}
+                        >
+                            {currentOnboardingStepNumber == totalOnboardingSteps ? 'Finish' : 'Continue'}
+                        </LemonButton>
+                    )}
                 </div>
             </div>
         </BridgePage>
diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx
index 584ebee9cf076..104779a1f4da4 100644
--- a/frontend/src/scenes/onboarding/onboardingLogic.tsx
+++ b/frontend/src/scenes/onboarding/onboardingLogic.tsx
@@ -8,6 +8,7 @@ import { billingLogic } from 'scenes/billing/billingLogic'
 export interface OnboardingLogicProps {
     productKey: ProductKey | null
 }
+export type AllOnboardingSteps = JSX.Element[]
 
 export const onboardingLogic = kea<onboardingLogicType>({
     props: {} as OnboardingLogicProps,
@@ -19,11 +20,11 @@ export const onboardingLogic = kea<onboardingLogicType>({
     actions: {
         setProduct: (product: BillingProductV2Type | null) => ({ product }),
         setProductKey: (productKey: string | null) => ({ productKey }),
-        setOnboardingStep: (onboardingStep: number) => ({ onboardingStep }),
-        incrementOnboardingStep: true,
-        decrementOnboardingStep: true,
-        setTotalOnboardingSteps: (totalOnboardingSteps: number) => ({ totalOnboardingSteps }),
+        setCurrentOnboardingStepNumber: (currentOnboardingStepNumber: number) => ({ currentOnboardingStepNumber }),
         completeOnboarding: true,
+        setAllOnboardingSteps: (allOnboardingSteps: AllOnboardingSteps) => ({ allOnboardingSteps }),
+        setStepKey: (stepKey: string) => ({ stepKey }),
+        setSubscribedDuringOnboarding: (subscribedDuringOnboarding) => ({ subscribedDuringOnboarding }),
     },
     reducers: () => ({
         productKey: [
@@ -38,18 +39,16 @@ export const onboardingLogic = kea<onboardingLogicType>({
                 setProduct: (_, { product }) => product,
             },
         ],
-        onboardingStep: [
+        currentOnboardingStepNumber: [
             1,
             {
-                setOnboardingStep: (_, { onboardingStep }) => onboardingStep,
-                incrementOnboardingStep: (state) => state + 1,
-                decrementOnboardingStep: (state) => state - 1,
+                setCurrentOnboardingStepNumber: (_, { currentOnboardingStepNumber }) => currentOnboardingStepNumber,
             },
         ],
-        totalOnboardingSteps: [
-            1,
+        allOnboardingSteps: [
+            [] as AllOnboardingSteps,
             {
-                setTotalOnboardingSteps: (_, { totalOnboardingSteps }) => totalOnboardingSteps,
+                setAllOnboardingSteps: (_, { allOnboardingSteps }) => allOnboardingSteps as AllOnboardingSteps,
             },
         ],
         onCompleteOnbardingRedirectUrl: [
@@ -69,7 +68,26 @@ export const onboardingLogic = kea<onboardingLogicType>({
                 },
             },
         ],
+        subscribedDuringOnboarding: [
+            false,
+            {
+                setSubscribedDuringOnboarding: (_, { subscribedDuringOnboarding }) => subscribedDuringOnboarding,
+            },
+        ],
     }),
+    selectors: {
+        totalOnboardingSteps: [
+            (s) => [s.allOnboardingSteps],
+            (allOnboardingSteps: AllOnboardingSteps) => allOnboardingSteps.length,
+        ],
+        shouldShowBillingStep: [
+            (s) => [s.product, s.subscribedDuringOnboarding],
+            (product: BillingProductV2Type | null, subscribedDuringOnboarding: boolean) => {
+                const hasAllAddons = product?.addons?.every((addon) => addon.subscribed)
+                return !product?.subscribed || !hasAllAddons || subscribedDuringOnboarding
+            },
+        ],
+    },
     listeners: ({ actions, values }) => ({
         loadBillingSuccess: () => {
             actions.setProduct(values.billing?.products.find((p) => p.type === values.productKey) || null)
@@ -94,13 +112,16 @@ export const onboardingLogic = kea<onboardingLogicType>({
         },
     }),
     urlToAction: ({ actions }) => ({
-        '/onboarding/:productKey': ({ productKey }) => {
+        '/onboarding/:productKey': ({ productKey }, { success, upgraded }) => {
             if (!productKey) {
                 window.location.href = urls.default()
                 return
             }
+            if (success || upgraded) {
+                actions.setSubscribedDuringOnboarding(true)
+            }
             actions.setProductKey(productKey)
-            actions.setOnboardingStep(1)
+            actions.setCurrentOnboardingStepNumber(1)
         },
     }),
 })
diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx
index e56ead940ff64..1b155f0974394 100644
--- a/frontend/src/scenes/products/Products.tsx
+++ b/frontend/src/scenes/products/Products.tsx
@@ -87,7 +87,7 @@ export function Products(): JSX.Element {
     return (
         <div className="flex flex-col w-full h-full p-6 items-center justify-center bg-mid">
             <div className="mb-8">
-                <h1 className="text-center text-4xl">Let's get started.</h1>
+                <h1 className="text-center text-4xl">Pick your first product.</h1>
                 <p className="text-center">
                     Pick your first product to get started with. You can set up any others you'd like later.
                 </p>
@@ -95,7 +95,7 @@ export function Products(): JSX.Element {
             {products.length > 0 ? (
                 <div className="flex w-full max-w-xl justify-center gap-6 flex-wrap">
                     {products
-                        .filter((product) => !product.contact_support)
+                        .filter((product) => !product.contact_support && !product.inclusion_only)
                         .map((product) => (
                             <ProductCard product={product} key={product.type} />
                         ))}