diff --git a/frontend/src/layout/navigation/TopBar/TopBar.tsx b/frontend/src/layout/navigation/TopBar/TopBar.tsx
index 585cb5554b1c0..9c307caa1c6f7 100644
--- a/frontend/src/layout/navigation/TopBar/TopBar.tsx
+++ b/frontend/src/layout/navigation/TopBar/TopBar.tsx
@@ -16,12 +16,19 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { NotebookButton } from '~/layout/navigation/TopBar/NotebookButton'
 import { ActivationSidebarToggle } from 'lib/components/ActivationSidebar/ActivationSidebarToggle'
+import { organizationLogic } from 'scenes/organizationLogic'
+import { LemonButtonWithDropdown, Lettermark } from '@posthog/lemon-ui'
+import { ProjectSwitcherOverlay } from '../ProjectSwitcher'
+import { topBarLogic } from './topBarLogic'
 
 export function TopBar(): JSX.Element {
     const { isSideBarShown, noSidebar, minimalTopBar, mobileLayout } = useValues(navigationLogic)
     const { toggleSideBarBase, toggleSideBarMobile } = useActions(navigationLogic)
     const { groupNamesTaxonomicTypes } = useValues(groupsModel)
     const { featureFlags } = useValues(featureFlagLogic)
+    const { currentOrganization } = useValues(organizationLogic)
+    const { isProjectSwitcherShown } = useValues(topBarLogic)
+    const { toggleProjectSwitcher, hideProjectSwitcher } = useActions(topBarLogic)
 
     const hasNotebooks = !!featureFlags[FEATURE_FLAGS.NOTEBOOKS]
 
@@ -71,11 +78,32 @@ export function TopBar(): JSX.Element {
                     )}
                 </div>
                 <div className="TopBar__segment TopBar__segment--right">
-                    {!minimalTopBar && (
+                    {!minimalTopBar ? (
                         <>
                             {hasNotebooks && <NotebookButton />}
                             <NotificationBell />
                         </>
+                    ) : (
+                        currentOrganization?.teams &&
+                        currentOrganization.teams.length > 1 && (
+                            <div>
+                                <LemonButtonWithDropdown
+                                    icon={<Lettermark name={currentOrganization?.name} />}
+                                    onClick={() => toggleProjectSwitcher()}
+                                    dropdown={{
+                                        visible: isProjectSwitcherShown,
+                                        onClickOutside: hideProjectSwitcher,
+                                        overlay: <ProjectSwitcherOverlay onClickInside={hideProjectSwitcher} />,
+                                        actionable: true,
+                                        placement: 'top-end',
+                                    }}
+                                    type="secondary"
+                                    fullWidth
+                                >
+                                    <span className="text-muted">Switch project</span>
+                                </LemonButtonWithDropdown>
+                            </div>
+                        )
                     )}
                     <HelpButton />
                     <SitePopover />
diff --git a/frontend/src/layout/navigation/TopBar/topBarLogic.ts b/frontend/src/layout/navigation/TopBar/topBarLogic.ts
new file mode 100644
index 0000000000000..3ef8f08138acd
--- /dev/null
+++ b/frontend/src/layout/navigation/TopBar/topBarLogic.ts
@@ -0,0 +1,20 @@
+import { actions, kea, reducers, path } from 'kea'
+
+import type { topBarLogicType } from './topBarLogicType'
+
+export const topBarLogic = kea<topBarLogicType>([
+    path(['layout', 'navigation', 'TopBar', 'topBarLogic']),
+    actions({
+        toggleProjectSwitcher: true,
+        hideProjectSwitcher: true,
+    }),
+    reducers({
+        isProjectSwitcherShown: [
+            false,
+            {
+                toggleProjectSwitcher: (state) => !state,
+                hideProjectSwitcher: () => false,
+            },
+        ],
+    }),
+])
diff --git a/frontend/src/scenes/billing/BillingHero.scss b/frontend/src/scenes/billing/BillingHero.scss
index 0928d8d935c0c..3c30a1ff02d79 100644
--- a/frontend/src/scenes/billing/BillingHero.scss
+++ b/frontend/src/scenes/billing/BillingHero.scss
@@ -18,5 +18,5 @@
 .BillingHero__hog__img {
     height: 200px;
     width: 200px;
-    margin: -20px -30px;
+    margin: -20px 0;
 }
diff --git a/frontend/src/scenes/billing/BillingHero.tsx b/frontend/src/scenes/billing/BillingHero.tsx
index 0f74dc168071a..3dbe62ca6dc62 100644
--- a/frontend/src/scenes/billing/BillingHero.tsx
+++ b/frontend/src/scenes/billing/BillingHero.tsx
@@ -1,9 +1,12 @@
 import { BlushingHog } from 'lib/components/hedgehogs'
 import './BillingHero.scss'
+import useResizeObserver from 'use-resize-observer'
 
 export const BillingHero = (): JSX.Element => {
+    const { width, ref: billingHeroRef } = useResizeObserver()
+
     return (
-        <div className="BillingHero">
+        <div className="BillingHero" ref={billingHeroRef}>
             <div className="p-4">
                 <p className="text-xs uppercase my-0">How pricing works</p>
                 <h1 className="ingestion-title">Get the whole hog.</h1>
@@ -13,9 +16,11 @@ export const BillingHero = (): JSX.Element => {
                     limits as low as $0 to control spend.
                 </p>
             </div>
-            <div className="BillingHero__hog">
-                <BlushingHog className="BillingHero__hog__img" />
-            </div>
+            {width && width > 500 && (
+                <div className="BillingHero__hog shrink-0">
+                    <BlushingHog className="BillingHero__hog__img" />
+                </div>
+            )}
         </div>
     )
 }
diff --git a/frontend/src/scenes/billing/PlanComparison.scss b/frontend/src/scenes/billing/PlanComparison.scss
index 57c4ed6bd6d63..98d091b0b80d7 100644
--- a/frontend/src/scenes/billing/PlanComparison.scss
+++ b/frontend/src/scenes/billing/PlanComparison.scss
@@ -29,6 +29,10 @@ table.PlanComparison {
         &.PlanTable__th__feature {
             padding: 0.75rem 1.25rem 0.75rem 3.25rem;
             font-weight: 600;
+
+            &.PlanTable__th__feature--reduced_padding {
+                padding: 0.75rem 1.25rem;
+            }
         }
 
         &.PlanTable__th__last-feature {
diff --git a/frontend/src/scenes/billing/PlanComparison.tsx b/frontend/src/scenes/billing/PlanComparison.tsx
index 0fcd7bbf695ca..a2e75da9e5115 100644
--- a/frontend/src/scenes/billing/PlanComparison.tsx
+++ b/frontend/src/scenes/billing/PlanComparison.tsx
@@ -9,6 +9,7 @@ import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { convertLargeNumberToWords, getUpgradeProductLink } from './billing-utils'
 import { billingLogic } from './billingLogic'
 import { getProductIcon } from 'scenes/products/Products'
+import useResizeObserver from 'use-resize-observer'
 
 export function PlanIcon({
     feature,
@@ -27,7 +28,7 @@ export function PlanIcon({
                 </>
             ) : feature.limit ? (
                 <>
-                    <IconWarning className={`text-warning mx-4 ${className}`} />
+                    <IconWarning className={`text-warning mx-4 shrink-0 ${className}`} />
                     {feature.limit &&
                         `${convertLargeNumberToWords(feature.limit, null)} ${feature.unit && feature.unit}${
                             timeDenominator ? `/${timeDenominator}` : ''
@@ -36,7 +37,7 @@ export function PlanIcon({
                 </>
             ) : (
                 <>
-                    <IconCheckmark className={`text-success mx-4 ${className}`} />
+                    <IconCheckmark className={`text-success mx-4 shrink-0 ${className}`} />
                     {feature.note}
                 </>
             )}
@@ -48,6 +49,7 @@ const getProductTiers = (
     plan: BillingV2PlanType,
     product: BillingProductV2Type | BillingProductV2AddonType
 ): JSX.Element => {
+    const { width, ref: tiersRef } = useResizeObserver()
     const tiers = plan?.tiers
 
     const allTierPrices = tiers?.map((tier) => parseFloat(tier.unit_amount_usd))
@@ -59,7 +61,8 @@ const getProductTiers = (
                 tiers?.map((tier, i) => (
                     <div
                         key={`${plan.key}-${product.type}-${tier.up_to}`}
-                        className="flex justify-between items-center"
+                        className={`flex ${width && width < 100 ? 'flex-col mb-2' : ' justify-between items-center'}`}
+                        ref={tiersRef}
                     >
                         <span className="text-xs">
                             {convertLargeNumberToWords(tier.up_to, tiers[i - 1]?.up_to, true, product.unit)}
@@ -72,7 +75,11 @@ const getProductTiers = (
                     </div>
                 ))
             ) : product?.free_allocation ? (
-                <div key={`${plan.key}-${product.type}-tiers`} className="flex justify-between items-center">
+                <div
+                    key={`${plan.key}-${product.type}-tiers`}
+                    className={`flex ${width && width < 100 ? 'flex-col mb-2' : ' justify-between items-center'}`}
+                    ref={tiersRef}
+                >
                     <span className="text-xs">
                         Up to {convertLargeNumberToWords(product?.free_allocation, null)} {product?.unit}s/mo
                     </span>
@@ -97,6 +104,7 @@ export const PlanComparison = ({
     const fullyFeaturedPlan = plans[plans.length - 1]
     const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
     const { redirectPath, billing } = useValues(billingLogic)
+    const { width, ref: planComparisonRef } = useResizeObserver()
 
     const upgradeButtons = plans?.map((plan) => {
         return (
@@ -132,7 +140,7 @@ export const PlanComparison = ({
     })
 
     return (
-        <table className="PlanComparison w-full table-fixed">
+        <table className="PlanComparison w-full table-fixed" ref={planComparisonRef}>
             <thead>
                 <tr>
                     <td />
@@ -231,8 +239,8 @@ export const PlanComparison = ({
                     >
                         <th
                             className={`text-muted PlanTable__th__feature ${
-                                i == fullyFeaturedPlan?.features?.length - 1 ? 'PlanTable__th__last-feature' : ''
-                            }`}
+                                width && width < 600 && 'PlanTable__th__feature--reduced_padding'
+                            } ${i == fullyFeaturedPlan?.features?.length - 1 ? 'PlanTable__th__last-feature' : ''}`}
                         >
                             <Tooltip title={feature.description}>{feature.name}</Tooltip>
                         </th>
@@ -283,6 +291,10 @@ export const PlanComparison = ({
                                             <tr key={`tr-${feature.key}`}>
                                                 <th
                                                     className={`text-muted PlanTable__th__feature ${
+                                                        width &&
+                                                        width < 600 &&
+                                                        'PlanTable__th__feature--reduced_padding'
+                                                    } ${
                                                         // 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 ==
diff --git a/frontend/src/scenes/ingestion/ingestionLogic.ts b/frontend/src/scenes/ingestion/ingestionLogic.ts
index cf64522b8e27e..500821474d69b 100644
--- a/frontend/src/scenes/ingestion/ingestionLogic.ts
+++ b/frontend/src/scenes/ingestion/ingestionLogic.ts
@@ -296,7 +296,7 @@ export const ingestionLogic = kea<ingestionLogicType>([
             },
         ],
         isDemoProject: [
-            teamLogic.values.currentTeam?.is_demo as null | boolean,
+            false as null | boolean,
             {
                 setState: (_, { isDemoProject }) => isDemoProject,
             },
diff --git a/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx b/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx
index c6901e9d7b829..552a490688887 100644
--- a/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx
+++ b/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx
@@ -43,7 +43,7 @@ export const OnboardingBillingStep = ({
                             reportBillingUpgradeClicked(product.type)
                         }}
                     >
-                        Upgrade to paid
+                        Subscribe
                     </LemonButton>
                 )
             }
diff --git a/frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx b/frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx
index 54618e56a0d64..6c3e92e9af68c 100644
--- a/frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx
+++ b/frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx
@@ -1,8 +1,8 @@
-import { LemonButton, LemonCard } from '@posthog/lemon-ui'
+import { useWindowSize } from 'lib/hooks/useWindowSize'
 import { OnboardingStep } from './OnboardingStep'
 import { OnboardingStepKey, onboardingLogic } from './onboardingLogic'
 import { useActions, useValues } from 'kea'
-import { getProductIcon } from 'scenes/products/Products'
+import { ProductCard } from 'scenes/products/Products'
 
 export const OnboardingOtherProductsStep = ({
     stepKey = OnboardingStepKey.OTHER_PRODUCTS,
@@ -11,6 +11,8 @@ export const OnboardingOtherProductsStep = ({
 }): JSX.Element => {
     const { product, suggestedProducts } = useValues(onboardingLogic)
     const { completeOnboarding } = useActions(onboardingLogic)
+    const { width } = useWindowSize()
+    const horizontalCard = width && width >= 640
 
     return (
         <OnboardingStep
@@ -20,26 +22,15 @@ export const OnboardingOtherProductsStep = ({
             continueOverride={<></>}
             stepKey={stepKey}
         >
-            <div className="flex flex-col gap-y-6 my-6">
+            <div className="flex flex-col gap-y-6 my-6 items-center">
                 {suggestedProducts?.map((suggestedProduct) => (
-                    <LemonCard
-                        className="flex items-center justify-between"
-                        hoverEffect={false}
+                    <ProductCard
+                        product={suggestedProduct}
                         key={suggestedProduct.type}
-                    >
-                        <div className="flex items-center">
-                            <div className="mr-4">{getProductIcon(suggestedProduct.icon_key, 'text-2xl')}</div>
-                            <div>
-                                <h3 className="font-bold mb-0">{suggestedProduct.name}</h3>
-                                <p className="m-0">{suggestedProduct.description}</p>
-                            </div>
-                        </div>
-                        <div className="justify-self-end min-w-30 flex justify-end">
-                            <LemonButton type="primary" onClick={() => completeOnboarding(suggestedProduct.type)}>
-                                Get started
-                            </LemonButton>
-                        </div>
-                    </LemonCard>
+                        getStartedActionOverride={() => completeOnboarding(suggestedProduct.type)}
+                        orientation={horizontalCard ? 'horizontal' : 'vertical'}
+                        className="w-full"
+                    />
                 ))}
             </div>
         </OnboardingStep>
diff --git a/frontend/src/scenes/onboarding/OnboardingStep.tsx b/frontend/src/scenes/onboarding/OnboardingStep.tsx
index a4bfdd92cbf42..171c607bf3d43 100644
--- a/frontend/src/scenes/onboarding/OnboardingStep.tsx
+++ b/frontend/src/scenes/onboarding/OnboardingStep.tsx
@@ -14,6 +14,7 @@ export const OnboardingStep = ({
     showSkip = false,
     onSkip,
     continueOverride,
+    backActionOverride,
 }: {
     stepKey: OnboardingStepKey
     title: string
@@ -22,6 +23,7 @@ export const OnboardingStep = ({
     showSkip?: boolean
     onSkip?: () => void
     continueOverride?: JSX.Element
+    backActionOverride?: () => void
 }): JSX.Element => {
     const { hasNextStep, hasPreviousStep } = useValues(onboardingLogic)
     const { completeOnboarding, goToNextStep, goToPreviousStep } = useActions(onboardingLogic)
@@ -39,14 +41,20 @@ export const OnboardingStep = ({
                 <div className="mb-4">
                     <LemonButton
                         icon={<IconArrowLeft />}
-                        onClick={() => (hasPreviousStep ? goToPreviousStep() : router.actions.push(urls.products()))}
+                        onClick={() =>
+                            backActionOverride
+                                ? backActionOverride()
+                                : hasPreviousStep
+                                ? goToPreviousStep()
+                                : router.actions.push(urls.products())
+                        }
                     >
                         Back
                     </LemonButton>
                 </div>
             }
         >
-            <div className="w-md">
+            <div className="max-w-md">
                 <h1 className="font-bold">{title}</h1>
                 <p>{subtitle}</p>
                 {children}
diff --git a/frontend/src/scenes/onboarding/sdks/SDKs.tsx b/frontend/src/scenes/onboarding/sdks/SDKs.tsx
index 9a91ad06268d6..94556254fab58 100644
--- a/frontend/src/scenes/onboarding/sdks/SDKs.tsx
+++ b/frontend/src/scenes/onboarding/sdks/SDKs.tsx
@@ -8,6 +8,8 @@ import { useEffect } from 'react'
 import React from 'react'
 import { SDKInstructionsMap } from '~/types'
 import { InviteMembersButton } from '~/layout/navigation/TopBar/SitePopover'
+import { IconArrowLeft } from '@posthog/icons'
+import { useWindowSize } from 'lib/hooks/useWindowSize'
 
 export function SDKs({
     usersAction,
@@ -20,23 +22,37 @@ export function SDKs({
     subtitle?: string
     stepKey?: OnboardingStepKey
 }): JSX.Element {
-    const { setSourceFilter, setSelectedSDK, setAvailableSDKInstructionsMap } = useActions(sdksLogic)
-    const { sourceFilter, sdks, selectedSDK, sourceOptions, showSourceOptionsSelect } = useValues(sdksLogic)
+    const { setSourceFilter, setSelectedSDK, setAvailableSDKInstructionsMap, setShowSideBySide, setPanel } =
+        useActions(sdksLogic)
+    const { sourceFilter, sdks, selectedSDK, sourceOptions, showSourceOptionsSelect, showSideBySide, panel } =
+        useValues(sdksLogic)
     const { productKey } = useValues(onboardingLogic)
+    const { width } = useWindowSize()
+    const minimumSideBySideSize = 768
 
     useEffect(() => {
         setAvailableSDKInstructionsMap(sdkInstructionMap)
     }, [])
 
+    useEffect(() => {
+        width && setShowSideBySide(width > minimumSideBySideSize)
+    }, [width])
+
     return (
         <OnboardingStep
             title={`Where are you ${usersAction || 'collecting data'} from?`}
             subtitle={subtitle || 'Pick one or two to start and add more sources later.'}
             stepKey={stepKey}
+            continueOverride={!showSideBySide && panel === 'options' ? <></> : undefined}
+            backActionOverride={!showSideBySide && panel === 'instructions' ? () => setPanel('options') : undefined}
         >
             <LemonDivider className="my-8" />
             <div className="flex gap-x-8 mt-8">
-                <div className={`flex flex-col gap-y-2 flex-wrap gap-x-4 min-w-50 w-50`}>
+                <div
+                    className={`flex-col gap-y-2 flex-wrap gap-x-4 ${showSideBySide && 'min-w-50 w-50'} ${
+                        !showSideBySide && panel !== 'options' ? 'hidden' : 'flex'
+                    }`}
+                >
                     {showSourceOptionsSelect && (
                         <LemonSelect
                             allowClear
@@ -69,7 +85,17 @@ export function SDKs({
                     </LemonCard>
                 </div>
                 {selectedSDK && productKey && !!sdkInstructionMap[selectedSDK.key] && (
-                    <div className="shrink min-w-8">
+                    <div className={`shrink min-w-8 ${!showSideBySide && panel !== 'instructions' ? 'hidden' : ''}`}>
+                        {!showSideBySide && (
+                            <LemonButton
+                                icon={<IconArrowLeft />}
+                                onClick={() => setPanel('options')}
+                                className="mb-8"
+                                type="secondary"
+                            >
+                                View all SDKs
+                            </LemonButton>
+                        )}
                         <SDKSnippet sdk={selectedSDK} sdkInstructions={sdkInstructionMap[selectedSDK.key]} />
                     </div>
                 )}
diff --git a/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx b/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
index 83203a1ef7bc4..2cfef0711bf10 100644
--- a/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
+++ b/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
@@ -40,6 +40,8 @@ export const sdksLogic = kea<sdksLogicType>([
         setSourceOptions: (sourceOptions: LemonSelectOptions<string>) => ({ sourceOptions }),
         resetSDKs: true,
         setAvailableSDKInstructionsMap: (sdkInstructionMap: SDKInstructionsMap) => ({ sdkInstructionMap }),
+        setShowSideBySide: (showSideBySide: boolean) => ({ showSideBySide }),
+        setPanel: (panel: 'instructions' | 'options') => ({ panel }),
     }),
     reducers({
         sourceFilter: [
@@ -72,6 +74,18 @@ export const sdksLogic = kea<sdksLogicType>([
                 setAvailableSDKInstructionsMap: (_, { sdkInstructionMap }) => sdkInstructionMap,
             },
         ],
+        showSideBySide: [
+            null as boolean | null,
+            {
+                setShowSideBySide: (_, { showSideBySide }) => showSideBySide,
+            },
+        ],
+        panel: [
+            'options' as 'instructions' | 'options',
+            {
+                setPanel: (_, { panel }) => panel,
+            },
+        ],
     }),
     selectors({
         showSourceOptionsSelect: [
@@ -100,7 +114,7 @@ export const sdksLogic = kea<sdksLogicType>([
             actions.filterSDKs()
         },
         setSDKs: () => {
-            if (!values.selectedSDK) {
+            if (!values.selectedSDK && values.showSideBySide == true) {
                 actions.setSelectedSDK(values.sdks?.[0] || null)
             }
         },
@@ -118,6 +132,16 @@ export const sdksLogic = kea<sdksLogicType>([
             actions.setSourceFilter(null)
             actions.setSourceOptions(getSourceOptions(values.availableSDKInstructionsMap))
         },
+        setSelectedSDK: () => {
+            if (values.selectedSDK) {
+                actions.setPanel('instructions')
+            }
+        },
+        setShowSideBySide: () => {
+            if (values.showSideBySide && !values.selectedSDK) {
+                actions.setSelectedSDK(values.sdks?.[0] || null)
+            }
+        },
     })),
     events(({ actions }) => ({
         afterMount: () => {
diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx
index 11f9d4c0c1132..66994f4ab0f72 100644
--- a/frontend/src/scenes/products/Products.tsx
+++ b/frontend/src/scenes/products/Products.tsx
@@ -49,14 +49,26 @@ function OnboardingCompletedButton({
     )
 }
 
-function OnboardingNotCompletedButton({ url, productKey }: { url: string; productKey: ProductKey }): JSX.Element {
+function OnboardingNotCompletedButton({
+    url,
+    productKey,
+    getStartedActionOverride,
+}: {
+    url: string
+    productKey: ProductKey
+    getStartedActionOverride?: () => void
+}): JSX.Element {
     const { onSelectProduct } = useActions(productsLogic)
     return (
         <LemonButton
             type="primary"
             onClick={() => {
-                onSelectProduct(productKey)
-                router.actions.push(url)
+                if (getStartedActionOverride) {
+                    getStartedActionOverride()
+                } else {
+                    onSelectProduct(productKey)
+                    router.actions.push(url)
+                }
             }}
         >
             Get started
@@ -68,19 +80,36 @@ export function getProductIcon(iconKey?: string | null, className?: string): JSX
     return Icons[iconKey || 'IconLogomark']({ className })
 }
 
-function ProductCard({ product }: { product: BillingProductV2Type }): JSX.Element {
+export function ProductCard({
+    product,
+    getStartedActionOverride,
+    orientation = 'vertical',
+    className,
+}: {
+    product: BillingProductV2Type
+    getStartedActionOverride?: () => void
+    orientation?: 'horizontal' | 'vertical'
+    className?: string
+}): JSX.Element {
     const { currentTeam } = useValues(teamLogic)
     const onboardingCompleted = currentTeam?.has_completed_onboarding_for?.[product.type]
+    const vertical = orientation === 'vertical'
+
     return (
-        <LemonCard className={`max-w-80 flex flex-col`} key={product.type}>
-            <div className="flex mb-2">
-                <div className="bg-mid rounded p-2 flex">{getProductIcon(product.icon_key, 'text-2xl')}</div>
+        <LemonCard
+            className={`flex gap-x-4 gap-y-4 ${vertical ? 'flex-col max-w-80' : 'items-center'} ${className}`}
+            key={product.type}
+        >
+            <div className="flex">
+                <div>
+                    <div className="bg-mid rounded p-2">{getProductIcon(product.icon_key, 'text-2xl')}</div>
+                </div>
             </div>
-            <div className="mb-2">
-                <h3 className="bold mb-0">{product.name}</h3>
+            <div>
+                <h3 className={`bold ${vertical ? 'mb-2' : 'mb-0'}`}>{product.name}</h3>
+                <p className="grow m-0">{product.description}</p>
             </div>
-            <p className="grow">{product.description}</p>
-            <div className="flex gap-x-2">
+            <div className={`flex gap-x-2 grow shrink-0 ${!vertical && 'justify-end'}`}>
                 {onboardingCompleted ? (
                     <OnboardingCompletedButton
                         productUrl={getProductUri(product.type as ProductKey)}
@@ -88,10 +117,13 @@ function ProductCard({ product }: { product: BillingProductV2Type }): JSX.Elemen
                         productKey={product.type as ProductKey}
                     />
                 ) : (
-                    <OnboardingNotCompletedButton
-                        url={urls.onboarding(product.type)}
-                        productKey={product.type as ProductKey}
-                    />
+                    <div>
+                        <OnboardingNotCompletedButton
+                            url={urls.onboarding(product.type)}
+                            productKey={product.type as ProductKey}
+                            getStartedActionOverride={getStartedActionOverride}
+                        />
+                    </div>
                 )}
             </div>
         </LemonCard>