diff --git a/.changeset/hip-dancers-write.md b/.changeset/hip-dancers-write.md
new file mode 100644
index 00000000000..0ec793cb4b7
--- /dev/null
+++ b/.changeset/hip-dancers-write.md
@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Display a better subscription list / button when empty and the free plan is hidden
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx
index b96f12d74d0..30e8ecb2fcc 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx
@@ -5,11 +5,10 @@ import {
   SubscriberTypeContext,
   useSubscriptions,
 } from '../../contexts';
-import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
+import { Col, descriptors, localizationKeys } from '../../customizables';
 import {
   Card,
   Header,
-  ProfileSection,
   Tab,
   TabPanel,
   TabPanels,
@@ -19,8 +18,6 @@ import {
   withCardStateProvider,
 } from '../../elements';
 import { useTabState } from '../../hooks/useTabState';
-import { ArrowsUpDown } from '../../icons';
-import { useRouter } from '../../router';
 import { PaymentSources } from '../PaymentSources';
 import { StatementsList } from '../Statements';
 import { SubscriptionsList } from '../Subscriptions';
@@ -35,7 +32,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
   const card = useCardState();
   const { data: subscriptions } = useSubscriptions('org');
   const { selectedTab, handleTabChange } = useTabState(orgTabMap);
-  const { navigate } = useRouter();
+
   if (!Array.isArray(subscriptions?.data)) {
     return null;
   }
@@ -71,40 +68,18 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
           </TabsList>
           <TabPanels>
             <TabPanel sx={{ width: '100%', flexDirection: 'column' }}>
-              <Flex
-                sx={{ width: '100%', flexDirection: 'column' }}
-                gap={4}
-              >
-                <ProfileSection.Root
-                  id='subscriptionsList'
-                  title={localizationKeys('organizationProfile.billingPage.subscriptionsListSection.title')}
-                  centered={false}
-                  sx={t => ({
-                    borderTop: 'none',
-                    paddingTop: t.space.$1,
-                  })}
-                >
-                  <SubscriptionsList />
-                  <ProfileSection.ArrowButton
-                    id='subscriptionsList'
-                    textLocalizationKey={localizationKeys(
-                      'organizationProfile.billingPage.subscriptionsListSection.actionLabel__switchPlan',
-                    )}
-                    sx={[
-                      t => ({
-                        justifyContent: 'start',
-                        height: t.sizes.$8,
-                      }),
-                    ]}
-                    leftIcon={ArrowsUpDown}
-                    leftIconSx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}
-                    onClick={() => void navigate('plans')}
-                  />
-                </ProfileSection.Root>
-                <Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>
-                  <PaymentSources />
-                </Protect>
-              </Flex>
+              <SubscriptionsList
+                title={localizationKeys('organizationProfile.billingPage.subscriptionsListSection.title')}
+                arrowButtonText={localizationKeys(
+                  'organizationProfile.billingPage.subscriptionsListSection.actionLabel__switchPlan',
+                )}
+                arrowButtonEmptyText={localizationKeys(
+                  'organizationProfile.billingPage.subscriptionsListSection.actionLabel__newSubscription',
+                )}
+              />
+              <Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>
+                <PaymentSources />
+              </Protect>
             </TabPanel>
             <TabPanel sx={{ width: '100%' }}>
               <StatementsContextProvider>
diff --git a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
index 6b1d5e7bcce..43a7b1c26b8 100644
--- a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
+++ b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
@@ -2,6 +2,7 @@ import type { CommerceSubscriptionResource } from '@clerk/types';
 
 import { useProtect } from '../../common';
 import { usePlansContext, useSubscriberTypeContext } from '../../contexts';
+import type { LocalizationKey } from '../../customizables';
 import {
   Badge,
   Button,
@@ -18,14 +19,25 @@ import {
   Thead,
   Tr,
 } from '../../customizables';
-import { CogFilled, Plans } from '../../icons';
+import { ProfileSection } from '../../elements';
+import { ArrowsUpDown, CogFilled, Plans, Plus } from '../../icons';
+import { useRouter } from '../../router';
 
-export function SubscriptionsList() {
+export function SubscriptionsList({
+  title,
+  arrowButtonText,
+  arrowButtonEmptyText,
+}: {
+  title: LocalizationKey;
+  arrowButtonText: LocalizationKey;
+  arrowButtonEmptyText: LocalizationKey;
+}) {
   const { subscriptions, handleSelectPlan, captionForSubscription, canManageSubscription } = usePlansContext();
   const subscriberType = useSubscriberTypeContext();
   const canManageBilling = useProtect(
     has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',
   );
+  const { navigate } = useRouter();
   const handleSelectSubscription = (
     subscription: CommerceSubscriptionResource,
     event?: React.MouseEvent<HTMLElement>,
@@ -52,117 +64,146 @@ export function SubscriptionsList() {
   });
 
   return (
-    <Table tableHeadVisuallyHidden>
-      <Thead>
-        <Tr>
-          <Th>Plan</Th>
-          <Th>Start date</Th>
-          <Th>Edit</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        {sortedSubscriptions.map(subscription => (
-          <Tr key={subscription.id}>
-            <Td>
-              <Col gap={1}>
-                <Flex
-                  align='center'
-                  gap={1}
+    <ProfileSection.Root
+      id='subscriptionsList'
+      title={title}
+      centered={false}
+      sx={t => ({
+        borderTop: 'none',
+        paddingTop: t.space.$1,
+      })}
+    >
+      {subscriptions.length > 0 && (
+        <Table tableHeadVisuallyHidden>
+          <Thead>
+            <Tr>
+              <Th>Plan</Th>
+              <Th>Start date</Th>
+              <Th>Edit</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {sortedSubscriptions.map(subscription => (
+              <Tr key={subscription.id}>
+                <Td>
+                  <Col gap={1}>
+                    <Flex
+                      align='center'
+                      gap={1}
+                    >
+                      <Icon
+                        icon={Plans}
+                        sx={t => ({
+                          width: t.sizes.$4,
+                          height: t.sizes.$4,
+                          opacity: t.opacity.$inactive,
+                        })}
+                      />
+                      <Text
+                        variant='subtitle'
+                        sx={t => ({ marginRight: t.sizes.$1 })}
+                      >
+                        {subscription.plan.name}
+                      </Text>
+                      {sortedSubscriptions.length > 1 || !!subscription.canceledAt ? (
+                        <Badge
+                          colorScheme={subscription.status === 'active' ? 'secondary' : 'primary'}
+                          localizationKey={
+                            subscription.status === 'active'
+                              ? localizationKeys('badge__activePlan')
+                              : localizationKeys('badge__upcomingPlan')
+                          }
+                        />
+                      ) : null}
+                    </Flex>
+                    {(!subscription.plan.isDefault || subscription.status === 'upcoming') && (
+                      <Text
+                        variant='caption'
+                        colorScheme='secondary'
+                        localizationKey={captionForSubscription(subscription)}
+                      />
+                    )}
+                  </Col>
+                </Td>
+                <Td
+                  sx={_ => ({
+                    textAlign: 'right',
+                  })}
                 >
-                  <Icon
-                    icon={Plans}
-                    sx={t => ({
-                      width: t.sizes.$4,
-                      height: t.sizes.$4,
-                      opacity: t.opacity.$inactive,
-                    })}
-                  />
-                  <Text
-                    variant='subtitle'
-                    sx={t => ({ marginRight: t.sizes.$1 })}
-                  >
-                    {subscription.plan.name}
+                  <Text variant='subtitle'>
+                    {subscription.plan.currencySymbol}
+                    {subscription.planPeriod === 'annual'
+                      ? subscription.plan.annualAmountFormatted
+                      : subscription.plan.amountFormatted}
+                    {(subscription.plan.amount > 0 || subscription.plan.annualAmount > 0) && (
+                      <Span
+                        sx={t => ({
+                          color: t.colors.$colorTextSecondary,
+                          textTransform: 'lowercase',
+                          ':before': {
+                            content: '"/"',
+                            marginInline: t.space.$1,
+                          },
+                        })}
+                        localizationKey={
+                          subscription.planPeriod === 'annual'
+                            ? localizationKeys('commerce.year')
+                            : localizationKeys('commerce.month')
+                        }
+                      />
+                    )}
                   </Text>
-                  {sortedSubscriptions.length > 1 || !!subscription.canceledAt ? (
-                    <Badge
-                      colorScheme={subscription.status === 'active' ? 'secondary' : 'primary'}
-                      localizationKey={
-                        subscription.status === 'active'
-                          ? localizationKeys('badge__activePlan')
-                          : localizationKeys('badge__upcomingPlan')
-                      }
-                    />
-                  ) : null}
-                </Flex>
-                {(!subscription.plan.isDefault || subscription.status === 'upcoming') && (
-                  <Text
-                    variant='caption'
-                    colorScheme='secondary'
-                    localizationKey={captionForSubscription(subscription)}
-                  />
-                )}
-              </Col>
-            </Td>
-            <Td
-              sx={_ => ({
-                textAlign: 'right',
-              })}
-            >
-              <Text variant='subtitle'>
-                {subscription.plan.currencySymbol}
-                {subscription.planPeriod === 'annual'
-                  ? subscription.plan.annualAmountFormatted
-                  : subscription.plan.amountFormatted}
-                {(subscription.plan.amount > 0 || subscription.plan.annualAmount > 0) && (
-                  <Span
-                    sx={t => ({
-                      color: t.colors.$colorTextSecondary,
-                      textTransform: 'lowercase',
-                      ':before': {
-                        content: '"/"',
-                        marginInline: t.space.$1,
-                      },
-                    })}
-                    localizationKey={
-                      subscription.planPeriod === 'annual'
-                        ? localizationKeys('commerce.year')
-                        : localizationKeys('commerce.month')
-                    }
-                  />
-                )}
-              </Text>
-            </Td>
-            <Td
-              sx={_ => ({
-                textAlign: 'right',
-              })}
-            >
-              {canManageSubscription({ subscription }) && subscription.id && !subscription.plan.isDefault && (
-                <Button
-                  aria-label='Manage subscription'
-                  onClick={event => handleSelectSubscription(subscription, event)}
-                  variant='bordered'
-                  colorScheme='secondary'
-                  isDisabled={!canManageBilling}
-                  sx={t => ({
-                    width: t.sizes.$6,
-                    height: t.sizes.$6,
+                </Td>
+                <Td
+                  sx={_ => ({
+                    textAlign: 'right',
                   })}
                 >
-                  <Icon
-                    icon={CogFilled}
-                    sx={t => ({
-                      width: t.sizes.$4,
-                      height: t.sizes.$4,
-                      opacity: t.opacity.$inactive,
-                    })}
-                  />
-                </Button>
-              )}
-            </Td>
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
+                  {canManageSubscription({ subscription }) && subscription.id && !subscription.plan.isDefault && (
+                    <Button
+                      aria-label='Manage subscription'
+                      onClick={event => handleSelectSubscription(subscription, event)}
+                      variant='bordered'
+                      colorScheme='secondary'
+                      isDisabled={!canManageBilling}
+                      sx={t => ({
+                        width: t.sizes.$6,
+                        height: t.sizes.$6,
+                      })}
+                    >
+                      <Icon
+                        icon={CogFilled}
+                        sx={t => ({
+                          width: t.sizes.$4,
+                          height: t.sizes.$4,
+                          opacity: t.opacity.$inactive,
+                        })}
+                      />
+                    </Button>
+                  )}
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      )}
+
+      <ProfileSection.ArrowButton
+        id='subscriptionsList'
+        textLocalizationKey={subscriptions.length > 0 ? arrowButtonText : arrowButtonEmptyText}
+        sx={[
+          t => ({
+            justifyContent: 'start',
+            height: t.sizes.$8,
+          }),
+        ]}
+        leftIcon={subscriptions.length > 0 ? ArrowsUpDown : Plus}
+        leftIconSx={t => ({
+          width: t.sizes.$4,
+          height: t.sizes.$4,
+        })}
+        onClick={() => void navigate('plans')}
+      />
+    </ProfileSection.Root>
   );
 }
diff --git a/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx
index 647c97aa8d3..192cce90242 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx
@@ -8,7 +8,6 @@ import { Col, descriptors, localizationKeys } from '../../customizables';
 import {
   Card,
   Header,
-  ProfileSection,
   Tab,
   TabPanel,
   TabPanels,
@@ -18,8 +17,6 @@ import {
   withCardStateProvider,
 } from '../../elements';
 import { useTabState } from '../../hooks/useTabState';
-import { ArrowsUpDown } from '../../icons';
-import { useRouter } from '../../router';
 import { PaymentSources } from '../PaymentSources';
 import { StatementsList } from '../Statements';
 import { SubscriptionsList } from '../Subscriptions';
@@ -33,7 +30,6 @@ const tabMap = {
 const BillingPageInternal = withCardStateProvider(() => {
   const card = useCardState();
   const { data: subscriptions } = useSubscriptions();
-  const { navigate } = useRouter();
 
   const { selectedTab, handleTabChange } = useTabState(tabMap);
 
@@ -70,38 +66,16 @@ const BillingPageInternal = withCardStateProvider(() => {
           </TabsList>
           <TabPanels>
             <TabPanel sx={_ => ({ width: '100%', flexDirection: 'column' })}>
-              <>
-                <ProfileSection.Root
-                  id='subscriptionsList'
-                  title={localizationKeys('userProfile.billingPage.subscriptionsListSection.title')}
-                  centered={false}
-                  sx={t => ({
-                    borderTop: 'none',
-                    paddingTop: t.space.$1,
-                  })}
-                >
-                  <SubscriptionsList />
-                  <ProfileSection.ArrowButton
-                    id='subscriptionsList'
-                    textLocalizationKey={localizationKeys(
-                      'userProfile.billingPage.subscriptionsListSection.actionLabel__switchPlan',
-                    )}
-                    sx={[
-                      t => ({
-                        justifyContent: 'start',
-                        height: t.sizes.$8,
-                      }),
-                    ]}
-                    leftIcon={ArrowsUpDown}
-                    leftIconSx={t => ({
-                      width: t.sizes.$4,
-                      height: t.sizes.$4,
-                    })}
-                    onClick={() => void navigate('plans')}
-                  />
-                </ProfileSection.Root>
-                <PaymentSources />
-              </>
+              <SubscriptionsList
+                title={localizationKeys('userProfile.billingPage.subscriptionsListSection.title')}
+                arrowButtonText={localizationKeys(
+                  'userProfile.billingPage.subscriptionsListSection.actionLabel__switchPlan',
+                )}
+                arrowButtonEmptyText={localizationKeys(
+                  'userProfile.billingPage.subscriptionsListSection.actionLabel__newSubscription',
+                )}
+              />
+              <PaymentSources />
             </TabPanel>
             <TabPanel sx={{ width: '100%' }}>
               <StatementsContextProvider>
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index a99d356efd5..5589a9c5707 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -176,6 +176,7 @@ export const enUS: LocalizationResource = {
         headerTitle__subscriptions: 'Subscriptions',
       },
       subscriptionsListSection: {
+        actionLabel__newSubscription: 'Subscribe to a plan',
         actionLabel__switchPlan: 'Switch plans',
         title: 'Subscription',
       },
@@ -779,6 +780,7 @@ export const enUS: LocalizationResource = {
         headerTitle__subscriptions: 'Subscription',
       },
       subscriptionsListSection: {
+        actionLabel__newSubscription: 'Subscribe to a plan',
         actionLabel__switchPlan: 'Switch plans',
         title: 'Subscription',
       },
diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
index 445397a19cd..cee845f5784 100644
--- a/packages/types/src/localization.ts
+++ b/packages/types/src/localization.ts
@@ -705,6 +705,7 @@ type _LocalizationResource = {
       };
       subscriptionsListSection: {
         title: LocalizationValue;
+        actionLabel__newSubscription: LocalizationValue;
         actionLabel__switchPlan: LocalizationValue;
       };
       paymentSourcesSection: {
@@ -908,6 +909,7 @@ type _LocalizationResource = {
       };
       subscriptionsListSection: {
         title: LocalizationValue;
+        actionLabel__newSubscription: LocalizationValue;
         actionLabel__switchPlan: LocalizationValue;
       };
       paymentSourcesSection: {