diff --git a/www/src/components/account/billing/BillingManagePlan.tsx b/www/src/components/account/billing/BillingManagePlan.tsx
index 0acc1a613..430e6cffa 100644
--- a/www/src/components/account/billing/BillingManagePlan.tsx
+++ b/www/src/components/account/billing/BillingManagePlan.tsx
@@ -1,31 +1,134 @@
-import { Div } from 'honorable'
-import { useContext } from 'react'
+import { Button, Flex } from '@pluralsh/design-system'
 
-import SubscriptionContext from '../../../contexts/SubscriptionContext'
+import { useCallback, useContext, useState } from 'react'
 
-import BillingPreview from './BillingPreview'
-import BillingPricingCards from './BillingPricingCards'
+import { useSearchParams } from 'react-router-dom'
+
+import styled, { useTheme } from 'styled-components'
+
+import SubscriptionContext from 'contexts/SubscriptionContext'
+
+import BillingPricingCards, { ContactUs } from './BillingPricingCards'
 import BillingPricingTable from './BillingPricingTable'
 import ConfirmPayment from './ConfirmPayment'
 
-function BillingManagePlan() {
-  const { isEnterprisePlan } = useContext(SubscriptionContext)
+import BillingDowngradeModal from './BillingDowngradeModal'
+import BillingStartTrialModal from './BillingStartTrialModal'
+import BillingUpgradeToProfessionalModal from './BillingUpgradeToProfessionalModal'
+
+export default function BillingManagePlan() {
+  const theme = useTheme()
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const [downgradeModalOpen, setDowngradeModalOpen] = useState(false)
+
+  const upgradeToProfessionalModalOpen =
+    typeof searchParams.get('upgrade') === 'string'
+  const setUpgradeToProfessionalModalOpen = useCallback(
+    (isOpen) => {
+      setSearchParams((sp) => {
+        if (isOpen) {
+          sp.set('upgrade', '1')
+        } else {
+          sp.delete('upgrade')
+        }
+
+        return sp
+      })
+    },
+    [setSearchParams]
+  )
+
+  const trialModalOpen = typeof searchParams.get('trial') === 'string'
+  const setOpenTrialModal = useCallback(
+    (isOpen) => {
+      setSearchParams((params) => {
+        if (isOpen) {
+          params.set('trial', '1')
+        } else {
+          params.delete('trial')
+        }
+
+        return params
+      })
+    },
+    [setSearchParams]
+  )
 
   return (
-    <>
+    <Flex
+      direction="column"
+      gap="large"
+      paddingBottom={theme.spacing.xxlarge}
+    >
       <ConfirmPayment />
-      {!isEnterprisePlan && <BillingPreview />}
-      <Div marginTop="xxlarge">
-        <BillingPricingCards />
-      </Div>
-      <Div
-        marginTop="xxlarge"
-        marginBottom="large"
-      >
-        <BillingPricingTable />
-      </Div>
-    </>
+      <BillingPricingCards
+        onUpgrade={() => setUpgradeToProfessionalModalOpen(true)}
+        onCancel={() => setDowngradeModalOpen(true)}
+      />
+      <BillingPricingTable
+        onUpgrade={() => setUpgradeToProfessionalModalOpen(true)}
+        onCancel={() => setDowngradeModalOpen(true)}
+      />
+      {/* Modals */}
+      <BillingUpgradeToProfessionalModal
+        open={upgradeToProfessionalModalOpen}
+        onClose={() => setUpgradeToProfessionalModalOpen(false)}
+      />
+      <BillingDowngradeModal
+        open={downgradeModalOpen}
+        onClose={() => setDowngradeModalOpen(false)}
+      />
+      <BillingStartTrialModal
+        open={trialModalOpen}
+        onClose={() => setOpenTrialModal(false)}
+      />
+    </Flex>
   )
 }
 
-export default BillingManagePlan
+export function ProPlanCTA({
+  onUpgrade,
+  onCancel,
+}: {
+  onUpgrade: () => void
+  onCancel: () => void
+}) {
+  const { isProPlan, isEnterprisePlan } = useContext(SubscriptionContext)
+
+  return isProPlan ? (
+    <ActionBtnSC
+      secondary
+      width="100%"
+      onClick={onCancel}
+    >
+      Cancel plan
+    </ActionBtnSC>
+  ) : isEnterprisePlan ? (
+    <ActionBtnSC
+      primary
+      disabled
+      width="100%"
+    >
+      You have an Enterprise plan
+    </ActionBtnSC>
+  ) : (
+    <ActionBtnSC
+      primary
+      width="100%"
+      onClick={onUpgrade}
+    >
+      Upgrade
+    </ActionBtnSC>
+  )
+}
+
+export function EnterprisePlanCTA() {
+  const { isProPlan } = useContext(SubscriptionContext)
+
+  return isProPlan ? <ContactUs /> : <ContactUs floating />
+}
+
+const ActionBtnSC = styled(Button)({
+  width: '100%',
+})
diff --git a/www/src/components/account/billing/BillingPricingCard.tsx b/www/src/components/account/billing/BillingPricingCard.tsx
index 56951efd5..cc4190399 100644
--- a/www/src/components/account/billing/BillingPricingCard.tsx
+++ b/www/src/components/account/billing/BillingPricingCard.tsx
@@ -67,7 +67,7 @@ function BillingPricingCard({
       </Flex>
       <Div flexGrow={1} />
       <Flex
-        marginTop="large"
+        marginTop="xxlarge"
         align="center"
         justify="center"
       >
diff --git a/www/src/components/account/billing/BillingPricingCards.tsx b/www/src/components/account/billing/BillingPricingCards.tsx
index 0d01ebdea..230b5dc15 100644
--- a/www/src/components/account/billing/BillingPricingCards.tsx
+++ b/www/src/components/account/billing/BillingPricingCards.tsx
@@ -1,119 +1,65 @@
-import { Button } from '@pluralsh/design-system'
+import { Button, Card } from '@pluralsh/design-system'
 import { Flex } from 'honorable'
-import { useCallback, useContext, useState } from 'react'
-import { useSearchParams } from 'react-router-dom'
+import { useContext } from 'react'
 
-import SubscriptionContext from '../../../contexts/SubscriptionContext'
+import styled from 'styled-components'
+
+import { ButtonProps } from '@pluralsh/design-system/dist/components/Button'
 
-import BillingDowngradeModal from './BillingDowngradeModal'
+import SubscriptionContext from '../../../contexts/SubscriptionContext'
 
 import BillingPricingCard from './BillingPricingCard'
-import BillingStartTrialModal from './BillingStartTrialModal'
-import BillingUpgradeToProfessionalModal from './BillingUpgradeToProfessionalModal'
+import { EnterprisePlanCTA } from './BillingManagePlan'
 
-function ContactUs({ primary }: { primary?: boolean }) {
+export function ContactUs({ ...props }: ButtonProps) {
   return (
     <Button
       as="a"
       href="https://plural.sh/contact-sales"
       target="_blank"
       rel="noopener noreferer"
-      primary={primary}
-      secondary={!primary}
       width="100%"
+      {...props}
     >
       Contact sales
     </Button>
   )
 }
 
-function CurrentPlanButton() {
-  return (
-    <Button
-      primary
-      disabled
-      width="100%"
-    >
-      Current plan
-    </Button>
-  )
-}
-
-function BillingPricingCards() {
-  const [searchParams, setSearchParams] = useSearchParams()
+function BillingPricingCards({
+  onCancel,
+  onUpgrade,
+}: {
+  onCancel: () => void
+  onUpgrade: () => void
+}) {
   const { isProPlan, isEnterprisePlan } = useContext(SubscriptionContext)
 
-  const [downgradeModalOpen, setDowngradeModalOpen] = useState(false)
-
-  const upgradeToProfessionalModalOpen =
-    typeof searchParams.get('upgrade') === 'string'
-  const setUpgradeToProfessionalModalOpen = useCallback(
-    (isOpen) => {
-      setSearchParams((sp) => {
-        if (isOpen) {
-          sp.set('upgrade', '1')
-        } else {
-          sp.delete('upgrade')
-        }
-
-        return sp
-      })
-    },
-    [setSearchParams]
-  )
-
-  const trialModalOpen = typeof searchParams.get('trial') === 'string'
-  const setOpenTrialModal = useCallback(
-    (isOpen) => {
-      setSearchParams((params) => {
-        if (isOpen) {
-          params.set('trial', '1')
-        } else {
-          params.delete('trial')
-        }
-
-        return params
-      })
-    },
-    [setSearchParams]
-  )
-
   return (
-    <>
-      <Flex gap="medium">
+    <Flex
+      direction="column"
+      gap="large"
+    >
+      <CurrentPlanCard onCancel={onCancel} />
+      <Flex gap="xlarge">
         <BillingPricingCard
-          selected
-          title="Open-source"
-          subtitle={
-            <>
-              Free
-              <br />
-              <br />
-            </>
-          }
+          title="Pro Plan"
+          subtitle="Cost based on # of clusters"
           items={[
             {
-              label: 'Free forever',
-              checked: true,
-            },
-            {
-              label: 'Unlimited open-source apps',
-              checked: true,
-            },
-            {
-              label: 'Up to 2 users',
+              label: '30 day free trial',
               checked: true,
             },
             {
-              label: '1 cluster',
+              label: 'Up to 10 clusters',
               checked: true,
             },
             {
-              label: 'OAuth integration',
+              label: 'Plural cloud hosting',
               checked: true,
             },
             {
-              label: 'Community support',
+              label: '24 hour, 99.9% SLA uptime',
               checked: true,
             },
           ]}
@@ -122,79 +68,95 @@ function BillingPricingCards() {
               <Button
                 secondary
                 width="100%"
-                onClick={
-                  isEnterprisePlan ? null : () => setDowngradeModalOpen(true)
-                }
+                onClick={onCancel}
               >
-                Downgrade
+                Cancel plan
               </Button>
             ) : isEnterprisePlan ? (
-              <ContactUs />
+              <Button
+                primary
+                disabled
+                width="100%"
+              >
+                You have an Enterprise plan
+              </Button>
             ) : (
-              <CurrentPlanButton />
+              <Button
+                primary
+                width="100%"
+                onClick={onUpgrade}
+              >
+                Upgrade
+              </Button>
             )
           }
         />
         <BillingPricingCard
-          title="Custom"
-          subtitle={
-            <>
-              Tailored
-              <br />
-              <br />
-            </>
-          }
+          title="Enterprise"
+          subtitle="Custom"
           items={[
             {
-              label: 'Everything in Pro plan',
+              label: 'Pro plan perks',
               checked: false,
             },
             {
-              label: '4 hour SLA',
+              label: 'Unlimited clusters',
               checked: true,
             },
             {
-              label: 'Dedicated SRE',
+              label: 'Flexible hosting options',
               checked: true,
             },
             {
-              label: 'SSO',
+              label: '1 hour SLA',
               checked: true,
             },
             {
-              label: 'Commercial license',
+              label: 'Customized training',
               checked: true,
             },
             {
-              label: 'Cost optimization',
+              label: 'Dedicated success team',
               checked: true,
             },
           ]}
-          callToAction={
-            isEnterprisePlan ? (
-              <CurrentPlanButton />
-            ) : isProPlan ? (
-              <ContactUs primary />
-            ) : (
-              <ContactUs />
-            )
-          }
+          callToAction={<EnterprisePlanCTA />}
         />
       </Flex>
-      <BillingUpgradeToProfessionalModal
-        open={upgradeToProfessionalModalOpen}
-        onClose={() => setUpgradeToProfessionalModalOpen(false)}
-      />
-      <BillingDowngradeModal
-        open={downgradeModalOpen}
-        onClose={() => setDowngradeModalOpen(false)}
-      />
-      <BillingStartTrialModal
-        open={trialModalOpen}
-        onClose={() => setOpenTrialModal(false)}
-      />
-    </>
+    </Flex>
+  )
+}
+
+function CurrentPlanCard({ onCancel }: { onCancel: () => void }) {
+  const { subscription, isProPlan } = useContext(SubscriptionContext)
+
+  return (
+    <CurrentPlanCardSC>
+      <span>
+        You are currently on the{' '}
+        <em>{subscription?.plan?.name ?? 'Free'} Plan</em>
+      </span>
+      {isProPlan && (
+        <Button
+          secondary
+          onClick={onCancel}
+        >
+          Cancel plan
+        </Button>
+      )}
+    </CurrentPlanCardSC>
   )
 }
+const CurrentPlanCardSC = styled(Card)(({ theme }) => ({
+  ...theme.partials.text.body1Bold,
+  padding: theme.spacing.medium,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  '& em': {
+    fontStyle: 'normal',
+    color: theme.colors['text-primary-accent'],
+  },
+}))
 
 export default BillingPricingCards
diff --git a/www/src/components/account/billing/BillingPricingTable.tsx b/www/src/components/account/billing/BillingPricingTable.tsx
index 70a6a9a79..7a6f33934 100644
--- a/www/src/components/account/billing/BillingPricingTable.tsx
+++ b/www/src/components/account/billing/BillingPricingTable.tsx
@@ -1,285 +1,171 @@
 import { CheckIcon, CloseIcon } from '@pluralsh/design-system'
-import { Div } from 'honorable'
+import styled from 'styled-components'
 
-const columnStyles = {
-  position: 'relative',
-  boxShadow: '-12px 0 12px 0px rgb(14 16 21 / 20%)',
-  '&:first-child': {
-    boxShadow: 'none',
-    '> div': {
-      display: 'flex',
-      justifyContent: 'flex-end',
-      textAlign: 'right',
+import { ReactNode } from 'react'
+
+import { EnterprisePlanCTA, ProPlanCTA } from './BillingManagePlan'
+
+export default function BillingPricingTable({
+  onUpgrade,
+  onCancel,
+}: {
+  onUpgrade: () => void
+  onCancel: () => void
+}) {
+  const plans = getPlans({
+    proPlanCTA: (
+      <ProPlanCTA
+        onUpgrade={onUpgrade}
+        onCancel={onCancel}
+      />
+    ),
+    enterprisePlanCTA: <EnterprisePlanCTA />,
+  })
+
+  return (
+    <TableSC>
+      <colgroup>
+        <col style={{ width: 'fit-content' }} />
+        {plans.map((plan) => (
+          <col
+            // makes the label column a little smaller than the others
+            style={{ width: `${100 / (plans.length + 0.75)}%` }}
+            key={plan.name}
+          />
+        ))}
+      </colgroup>
+      <thead>
+        <tr>
+          <TableHeaderCellSC />
+          {plans.map((plan) => (
+            <TableHeaderCellSC key={plan.name}>{plan.name}</TableHeaderCellSC>
+          ))}
+        </tr>
+      </thead>
+      <TableBodySC>
+        {rows.map((rowLabel) => (
+          <tr key={rowLabel}>
+            <TableCellSC>{rowLabel !== 'action' && rowLabel}</TableCellSC>
+            {plans.map((plan) => (
+              <TableCellSC key={plan.name}>{plan.values[rowLabel]}</TableCellSC>
+            ))}
+          </tr>
+        ))}
+      </TableBodySC>
+    </TableSC>
+  )
+}
+
+const CheckIconSC = styled(CheckIcon).attrs(() => ({
+  color: 'icon-success',
+}))``
+
+const TableSC = styled.table(({ theme }) => ({
+  tableLayout: 'fixed',
+  width: '100%',
+  background: theme.colors['fill-one'],
+  borderSpacing: 0,
+  borderRadius: theme.borderRadiuses.medium,
+  border: theme.borders.default,
+  '& th, & td': {
+    borderBottom: theme.borders.default,
+    borderRight: theme.borders.default,
+    // targets last cell in each row
+    '&:last-child': {
+      borderRight: 'none',
     },
   },
-  '> div': {
-    display: 'flex',
-    alignItems: 'center',
-    padding: '8px 16px',
-    height: 52,
-    borderTop: '1px solid border-fill-two',
-  },
-  '> div:nth-child(even)': {
-    backgroundColor: 'fill-two',
+  // targets each cell in last row
+  '& tr:last-child td': {
+    borderBottom: 'none',
   },
-  '> div:nth-child(odd)': {
-    backgroundColor: 'fill-one',
-  },
-  '> div:first-child': {
-    height: 96,
+}))
+
+const TableBodySC = styled.tbody(({ theme }) => ({
+  '& tr:nth-child(odd)': {
+    backgroundColor: theme.colors['fill-one-selected'],
   },
-}
+}))
 
-const firstColumnCellProps = {
-  body2: true,
-  borderLeft: '1px solid border-fill-two',
-}
+const TableHeaderCellSC = styled.th(({ theme }) => ({
+  ...theme.partials.text.subtitle2,
+  padding: `${theme.spacing.xlarge}px ${theme.spacing.large}px`,
+  textAlign: 'left',
+}))
 
-const lastColumnCellProps = {
-  borderRight: '1px solid border-fill-two',
-}
+const TableCellSC = styled.td(({ theme }) => ({
+  ...theme.partials.text.body2,
+  padding: `${theme.spacing.medium}px ${theme.spacing.large}px`,
+  color: theme.colors['text-xlight'],
+  whiteSpace: 'pre-wrap',
+}))
 
-function BillingPricingTable() {
-  return (
-    <Div
-      display="grid"
-      gridTemplateColumns="repeat(3, 1fr)"
-    >
-      <Div {...columnStyles}>
-        <Div
-          backgroundColor="transparent !important"
-          borderTop="none !important"
-        />
-        <Div
-          {...firstColumnCellProps}
-          borderTopLeftRadius={6}
-        >
-          Open-Source Apps
-        </Div>
-        <Div {...firstColumnCellProps}>Clusters</Div>
-        <Div {...firstColumnCellProps}>Users</Div>
-        <Div {...firstColumnCellProps}>Services</Div>
-        <Div {...firstColumnCellProps}>Roles</Div>
-        <Div {...firstColumnCellProps}>Groups</Div>
-        <Div {...firstColumnCellProps}>Service accounts</Div>
-        <Div {...firstColumnCellProps}>Continuous deployment</Div>
-        <Div {...firstColumnCellProps}>Discord Forum</Div>
-        <Div {...firstColumnCellProps}>Community support</Div>
-        <Div {...firstColumnCellProps}>
-          Private Slack Connect to Plural engineers
-        </Div>
-        <Div {...firstColumnCellProps}>Dedicated support engineer</Div>
-        <Div {...firstColumnCellProps}>Onboarding</Div>
-        <Div {...firstColumnCellProps}>Emergency Hotfixes</Div>
-        <Div {...firstColumnCellProps}>SLAs</Div>
-        <Div {...firstColumnCellProps}>Coverage</Div>
-        <Div {...firstColumnCellProps}>Authentication</Div>
-        <Div {...firstColumnCellProps}>VPN</Div>
-        <Div {...firstColumnCellProps}>Audit logs</Div>
-        <Div {...firstColumnCellProps}>SOC 2</Div>
-        <Div {...firstColumnCellProps}>GDPR</Div>
-        <Div {...firstColumnCellProps}>Compliance reports</Div>
-        <Div {...firstColumnCellProps}>Training</Div>
-        <Div {...firstColumnCellProps}>Developer support</Div>
-        <Div {...firstColumnCellProps}>Commercial license</Div>
-        <Div {...firstColumnCellProps}>Cost optimization</Div>
-        <Div
-          {...firstColumnCellProps}
-          borderBottomLeftRadius={6}
-          borderBottom="1px solid border-fill-two"
-        >
-          Invoices
-        </Div>
-      </Div>
-      <Div {...columnStyles}>
-        <Div
-          subtitle2
-          borderTopLeftRadius={6}
-          borderLeft="1px solid border-fill-two"
-        >
-          Open-source
-        </Div>
-        <Div body2>Unlimited</Div>
-        <Div body2>Free</Div>
-        <Div body2>Up to 2</Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div body2>Best effort</Div>
-        <Div body2>Google OAuth + OIDC</Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div>
-          <CloseIcon color="icon-default" />
-        </Div>
-        <Div borderBottom="1px solid border-fill-two">
-          <CloseIcon color="icon-default" />
-        </Div>
-      </Div>
-      <Div {...columnStyles}>
-        <Div
-          {...lastColumnCellProps}
-          subtitle2
-          borderTopRightRadius={6}
-        >
-          Custom
-        </Div>
-        <Div
-          {...lastColumnCellProps}
-          body2
-        >
-          Unlimited
-        </Div>
-        <Div
-          {...lastColumnCellProps}
-          body2
-        >
-          Custom
-        </Div>
-        <Div
-          {...lastColumnCellProps}
-          body2
-        >
-          Unlimited
-        </Div>
-        <Div
-          {...lastColumnCellProps}
-          body2
-        >
-          Unlimited
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>4 hours</Div>
-        <Div
-          {...lastColumnCellProps}
-          body2
-        >
-          Extended
-        </Div>
-        <Div
-          {...lastColumnCellProps}
-          body2
-        >
-          SSO + Google OAuth + OIDC
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>Available</Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div {...lastColumnCellProps}>
-          <CheckIcon color="icon-success" />
-        </Div>
-        <Div
-          borderBottom="1px solid border-fill-two"
-          borderBottomRightRadius={6}
-        >
-          <CheckIcon color="icon-success" />
-        </Div>
-      </Div>
-    </Div>
-  )
-}
+const rows = [
+  'Clusters',
+  'Hosting',
+  'SLA',
+  'SLA Response',
+  'Communication',
+  'Success Team',
+  'Customized Training',
+  'Multi-cluster Deployment',
+  'CD Pipelines',
+  'IaC Management',
+  'PR Automations',
+  'Git Integrations',
+  'Policy Management',
+  'GDPR Compliant',
+  'SOC 2 Compliant',
+  'action', // not shown but used for bottom button
+]
 
-export default BillingPricingTable
+const getPlans = ({
+  proPlanCTA,
+  enterprisePlanCTA,
+}: {
+  proPlanCTA: ReactNode
+  enterprisePlanCTA: ReactNode
+}) => [
+  {
+    name: 'Pro Plan',
+    values: {
+      Clusters: 'Up to 10',
+      Hosting: 'Plural shared infrastructure',
+      SLA: '99.9% uptime',
+      'SLA Response': '1 business day response',
+      Communication: 'Email support',
+      'Success Team': <CloseIcon />,
+      'Customized Training': <CloseIcon />,
+      'Multi-cluster Deployment': <CheckIconSC />,
+      'CD Pipelines': <CheckIconSC />,
+      'IaC Management': <CheckIconSC />,
+      'PR Automations': <CheckIconSC />,
+      'Git Integrations': <CheckIconSC />,
+      'Policy Management': <CheckIconSC />,
+      'GDPR Compliant': <CheckIconSC />,
+      'SOC 2 Compliant': <CheckIconSC />,
+      action: proPlanCTA,
+    },
+  },
+  {
+    name: 'Enterprise',
+    values: {
+      Clusters: 'Unlimited',
+      Hosting: 'Shared, dedicated, or on-prem infrastructure',
+      SLA: '99.9% uptime',
+      'SLA Response': '1 hour guaranteed response',
+      Communication: 'Dedicated Slack or Teams\nOn-demand Calls',
+      'Success Team': <CheckIconSC />,
+      'Customized Training': <CheckIconSC />,
+      'Multi-cluster Deployment': <CheckIconSC />,
+      'CD Pipelines': <CheckIconSC />,
+      'IaC Management': <CheckIconSC />,
+      'PR Automations': <CheckIconSC />,
+      'Git Integrations': <CheckIconSC />,
+      'Policy Management': <CheckIconSC />,
+      'GDPR Compliant': <CheckIconSC />,
+      'SOC 2 Compliant': <CheckIconSC />,
+      action: enterprisePlanCTA,
+    },
+  },
+]
diff --git a/www/src/components/account/billing/PaymentForm.tsx b/www/src/components/account/billing/PaymentForm.tsx
index 8b2c5f29e..9f4040afb 100644
--- a/www/src/components/account/billing/PaymentForm.tsx
+++ b/www/src/components/account/billing/PaymentForm.tsx
@@ -182,6 +182,7 @@ function PaymentFormInner() {
     <Flex
       flexDirection="column"
       gap="large"
+      overflow="hidden"
     >
       {formVariant === PaymentFormVariant.Upgrade && (
         <BillingPreview
diff --git a/www/src/components/layout/Sidebar.tsx b/www/src/components/layout/Sidebar.tsx
index 3200c28a6..0dbe29ea7 100644
--- a/www/src/components/layout/Sidebar.tsx
+++ b/www/src/components/layout/Sidebar.tsx
@@ -321,12 +321,6 @@ function Sidebar(props: Omit<ComponentProps<typeof DSSidebar>, '$variant'>) {
           minWidth="175px"
           left={sidebarWidth + 8}
           border="1px solid border"
-          // Fix incorrect borders due to mixed element types
-          {...{
-            '&, &>*:first-of-type:not(:first-child) > div': {
-              borderTop: theme.borders['fill-two'],
-            },
-          }}
           onClick={() => setIsMenuOpened(false)}
         >
           <MenuItem