diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index d67438da176..e48ac39362d 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -15,6 +15,8 @@ import {
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
+  __experimental_PlanDetailsProps,
+  __experimental_SubscriptionDetailsProps,
   __internal_CheckoutProps,
   __internal_ComponentNavigationContext,
   __internal_OAuthConsentProps,
@@ -609,6 +611,40 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('planDetails'));
   };
 
+  public __experimental_openPlanDetails = (props?: __experimental_PlanDetailsProps): void => {
+    this.assertComponentsReady(this.#componentControls);
+    if (disabledBillingFeature(this, this.environment)) {
+      if (this.#instanceType === 'development') {
+        throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('PlanDetails'), {
+          code: CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE,
+        });
+      }
+      return;
+    }
+    void this.#componentControls
+      .ensureMounted({ preloadHint: 'PlanDetails' })
+      .then(controls => controls.openDrawer('planDetails', props || {}));
+
+    this.telemetry?.record(eventPrebuiltComponentOpened(`PlanDetails`, props));
+  };
+
+  public __experimental_closePlanDetails = (): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('planDetails'));
+  };
+
+  public __experimental_openSubscriptionDetails = (props?: __experimental_SubscriptionDetailsProps): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls
+      .ensureMounted({ preloadHint: 'SubscriptionDetails' })
+      .then(controls => controls.openDrawer('subscriptionDetails', props || {}));
+  };
+
+  public __experimental_closeSubscriptionDetails = (): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('subscriptionDetails'));
+  };
+
   public __internal_openReverification = (props?: __internal_UserVerificationModalProps): void => {
     this.assertComponentsReady(this.#componentControls);
     if (noUserExists(this)) {
diff --git a/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts b/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts
index b28e6454137..cfa90076df7 100644
--- a/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts
+++ b/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts
@@ -4,6 +4,7 @@ import type {
   CommerceCheckoutJSON,
   CommercePaymentJSON,
   CommercePaymentResource,
+  CommercePlanJSON,
   CommercePlanResource,
   CommerceProductJSON,
   CommerceStatementJSON,
@@ -39,6 +40,14 @@ export class CommerceBilling implements CommerceBillingNamespace {
     return defaultProduct?.plans.map(plan => new CommercePlan(plan)) || [];
   };
 
+  getPlan = async (params: { id: string }): Promise<CommercePlanResource> => {
+    const plan = (await BaseResource._fetch({
+      path: `/commerce/plans/${params.id}`,
+      method: 'GET',
+    })) as unknown as CommercePlanJSON;
+    return new CommercePlan(plan);
+  };
+
   getSubscriptions = async (
     params: GetSubscriptionsParams,
   ): Promise<ClerkPaginatedResponse<CommerceSubscriptionResource>> => {
diff --git a/packages/clerk-js/src/core/resources/CommerceSubscription.ts b/packages/clerk-js/src/core/resources/CommerceSubscription.ts
index aa45426968a..26ad8a2f74d 100644
--- a/packages/clerk-js/src/core/resources/CommerceSubscription.ts
+++ b/packages/clerk-js/src/core/resources/CommerceSubscription.ts
@@ -9,6 +9,7 @@ import type {
 } from '@clerk/types';
 
 import { commerceMoneyFromJSON } from '../../utils';
+import { unixEpochToDate } from '../../utils/date';
 import { BaseResource, CommercePlan, DeletedObject } from './internal';
 
 export class CommerceSubscription extends BaseResource implements CommerceSubscriptionResource {
@@ -17,9 +18,10 @@ export class CommerceSubscription extends BaseResource implements CommerceSubscr
   plan!: CommercePlan;
   planPeriod!: CommerceSubscriptionPlanPeriod;
   status!: CommerceSubscriptionStatus;
-  periodStart!: number;
-  periodEnd!: number;
-  canceledAt!: number | null;
+  createdAt!: Date;
+  periodStart!: Date;
+  periodEnd!: Date;
+  canceledAt!: Date | null;
   amount?: CommerceMoney;
   credit?: {
     amount: CommerceMoney;
@@ -39,9 +41,10 @@ export class CommerceSubscription extends BaseResource implements CommerceSubscr
     this.plan = new CommercePlan(data.plan);
     this.planPeriod = data.plan_period;
     this.status = data.status;
-    this.periodStart = data.period_start;
-    this.periodEnd = data.period_end;
-    this.canceledAt = data.canceled_at;
+    this.createdAt = unixEpochToDate(data.created_at);
+    this.periodStart = unixEpochToDate(data.period_start);
+    this.periodEnd = unixEpochToDate(data.period_end);
+    this.canceledAt = data.canceled_at ? unixEpochToDate(data.canceled_at) : null;
     this.amount = data.amount ? commerceMoneyFromJSON(data.amount) : undefined;
     this.credit = data.credit && data.credit.amount ? { amount: commerceMoneyFromJSON(data.credit.amount) } : undefined;
     return this;
diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx
index 5d3cca0b7dd..59b124f1fb9 100644
--- a/packages/clerk-js/src/ui/Components.tsx
+++ b/packages/clerk-js/src/ui/Components.tsx
@@ -1,5 +1,7 @@
 import { createDeferredPromise } from '@clerk/shared/utils';
 import type {
+  __experimental_PlanDetailsProps,
+  __experimental_SubscriptionDetailsProps,
   __internal_CheckoutProps,
   __internal_PlanDetailsProps,
   __internal_UserVerificationProps,
@@ -36,7 +38,7 @@ import {
   UserVerificationModal,
   WaitlistModal,
 } from './lazyModules/components';
-import { MountedCheckoutDrawer, MountedPlanDetailDrawer } from './lazyModules/drawers';
+import { MountedCheckoutDrawer, MountedPlanDetailDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers';
 import {
   LazyComponentRenderer,
   LazyImpersonationFabProvider,
@@ -106,16 +108,18 @@ export type ComponentControls = {
       notify?: boolean;
     },
   ) => void;
-  openDrawer: <T extends 'checkout' | 'planDetails'>(
+  openDrawer: <T extends 'checkout' | 'planDetails' | 'subscriptionDetails'>(
     drawer: T,
     props: T extends 'checkout'
       ? __internal_CheckoutProps
       : T extends 'planDetails'
         ? __internal_PlanDetailsProps
-        : never,
+        : T extends 'subscriptionDetails'
+          ? __internal_PlanDetailsProps
+          : never,
   ) => void;
   closeDrawer: (
-    drawer: 'checkout' | 'planDetails',
+    drawer: 'checkout' | 'planDetails' | 'subscriptionDetails',
     options?: {
       notify?: boolean;
     },
@@ -158,7 +162,11 @@ interface ComponentsState {
   };
   planDetailsDrawer: {
     open: false;
-    props: null | __internal_PlanDetailsProps;
+    props: null | __experimental_PlanDetailsProps;
+  };
+  subscriptionDetailsDrawer: {
+    open: false;
+    props: null | __experimental_SubscriptionDetailsProps;
   };
   nodes: Map<HTMLDivElement, HtmlNodeOptions>;
   impersonationFab: boolean;
@@ -249,6 +257,10 @@ const Components = (props: ComponentsProps) => {
       open: false,
       props: null,
     },
+    subscriptionDetailsDrawer: {
+      open: false,
+      props: null,
+    },
     nodes: new Map(),
     impersonationFab: false,
   });
@@ -265,6 +277,7 @@ const Components = (props: ComponentsProps) => {
     blankCaptchaModal,
     checkoutDrawer,
     planDetailsDrawer,
+    subscriptionDetailsDrawer,
     nodes,
   } = state;
 
@@ -588,6 +601,12 @@ const Components = (props: ComponentsProps) => {
           onOpenChange={() => componentsControls.closeDrawer('planDetails')}
         />
 
+        <MountedSubscriptionDetailDrawer
+          appearance={state.appearance}
+          subscriptionDetailsDrawer={subscriptionDetailsDrawer}
+          onOpenChange={() => componentsControls.closeDrawer('subscriptionDetails')}
+        />
+
         {state.impersonationFab && (
           <LazyImpersonationFabProvider globalAppearance={state.appearance}>
             <ImpersonationFab />
diff --git a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
index 4bfb535d1df..7c30cd7f980 100644
--- a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
+++ b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
@@ -1,121 +1,69 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk } from '@clerk/shared/react';
 import type {
-  __internal_PlanDetailsProps,
-  ClerkAPIError,
-  ClerkRuntimeError,
+  __experimental_PlanDetailsProps,
   CommercePlanResource,
   CommerceSubscriptionPlanPeriod,
-  CommerceSubscriptionResource,
 } from '@clerk/types';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
+import useSWR from 'swr';
 
-import { Alert } from '@/ui/elements/Alert';
 import { Avatar } from '@/ui/elements/Avatar';
-import { Drawer, useDrawerContext } from '@/ui/elements/Drawer';
+import { Drawer } from '@/ui/elements/Drawer';
 import { Switch } from '@/ui/elements/Switch';
 
-import { useProtect } from '../../common';
-import { SubscriberTypeContext, usePlansContext, useSubscriberTypeContext, useSubscriptions } from '../../contexts';
-import { Badge, Box, Button, Col, descriptors, Flex, Heading, localizationKeys, Span, Text } from '../../customizables';
-import { handleError } from '../../utils';
+import { SubscriberTypeContext } from '../../contexts';
+import { Box, Col, descriptors, Flex, Heading, localizationKeys, Span, Spinner, Text } from '../../customizables';
 
-export const PlanDetails = (props: __internal_PlanDetailsProps) => {
+export const PlanDetails = (props: __experimental_PlanDetailsProps) => {
   return (
-    <SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
-      <Drawer.Content>
-        <PlanDetailsInternal {...props} />
-      </Drawer.Content>
-    </SubscriberTypeContext.Provider>
+    <Drawer.Content>
+      <PlanDetailsInternal {...props} />
+    </Drawer.Content>
   );
 };
 
 const PlanDetailsInternal = ({
-  plan,
-  onSubscriptionCancel,
-  portalRoot,
+  planId,
+  plan: initialPlan,
   initialPlanPeriod = 'month',
-}: __internal_PlanDetailsProps) => {
+}: __experimental_PlanDetailsProps) => {
   const clerk = useClerk();
-  const { organization } = useOrganization();
-  const [showConfirmation, setShowConfirmation] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [cancelError, setCancelError] = useState<ClerkRuntimeError | ClerkAPIError | string | undefined>();
   const [planPeriod, setPlanPeriod] = useState<CommerceSubscriptionPlanPeriod>(initialPlanPeriod);
 
-  const { setIsOpen } = useDrawerContext();
-  const {
-    activeOrUpcomingSubscriptionBasedOnPlanPeriod,
-    revalidateAll,
-    buttonPropsForPlan,
-    isDefaultPlanImplicitlyActiveOrUpcoming,
-  } = usePlansContext();
-  const subscriberType = useSubscriberTypeContext();
-  const canManageBilling = useProtect(
-    has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',
+  const { data: plan, isLoading } = useSWR(
+    planId || initialPlan ? { type: 'plan', id: planId || initialPlan?.id } : null,
+    // @ts-expect-error
+    () => clerk.billing.getPlan({ id: planId || initialPlan?.id }),
+    {
+      fallbackData: initialPlan,
+    },
   );
 
+  if (isLoading && !initialPlan) {
+    return (
+      <Flex
+        justify='center'
+        align='center'
+        sx={{
+          height: '100%',
+        }}
+      >
+        <Spinner />
+      </Flex>
+    );
+  }
+
   if (!plan) {
     return null;
   }
 
-  const subscription = activeOrUpcomingSubscriptionBasedOnPlanPeriod(plan, planPeriod);
-
-  const handleClose = () => {
-    if (setIsOpen) {
-      setIsOpen(false);
-    }
-  };
-
   const features = plan.features;
   const hasFeatures = features.length > 0;
-  const cancelSubscription = async () => {
-    if (!subscription) {
-      return;
-    }
-
-    setCancelError(undefined);
-    setIsSubmitting(true);
-
-    await subscription
-      .cancel({ orgId: subscriberType === 'org' ? organization?.id : undefined })
-      .then(() => {
-        setIsSubmitting(false);
-        onSubscriptionCancel?.();
-        handleClose();
-      })
-      .catch(error => {
-        handleError(error, [], setCancelError);
-        setIsSubmitting(false);
-      });
-  };
-
-  type Open__internal_CheckoutProps = {
-    planPeriod?: CommerceSubscriptionPlanPeriod;
-  };
-
-  const openCheckout = (props?: Open__internal_CheckoutProps) => {
-    handleClose();
-
-    // if the plan doesn't support annual, use monthly
-    let _planPeriod = props?.planPeriod || planPeriod;
-    if (_planPeriod === 'annual' && plan.annualMonthlyAmount === 0) {
-      _planPeriod = 'month';
-    }
-
-    clerk.__internal_openCheckout({
-      planId: plan.id,
-      planPeriod: _planPeriod,
-      subscriberType: subscriberType,
-      onSubscriptionComplete: () => {
-        void revalidateAll();
-      },
-      portalRoot,
-    });
-  };
 
   return (
-    <>
+    <SubscriberTypeContext.Provider value={plan.payerType[0] as 'user' | 'org'}>
+      {/* TODO: type assertion is a hack, make FAPI stricter */}
       <Drawer.Header
         sx={t =>
           !hasFeatures
@@ -129,7 +77,6 @@ const PlanDetailsInternal = ({
       >
         <Header
           plan={plan}
-          subscription={subscription}
           planPeriod={planPeriod}
           setPlanPeriod={setPlanPeriod}
           closeSlot={<Drawer.Close />}
@@ -207,127 +154,17 @@ const PlanDetailsInternal = ({
         </Drawer.Body>
       ) : null}
 
-      {(!plan.isDefault && !isDefaultPlanImplicitlyActiveOrUpcoming) || !subscription ? (
+      {/* {!plan.isDefault && !isDefaultPlanImplicitlyActiveOrUpcoming ? (
         <Drawer.Footer>
-          {subscription ? (
-            subscription.canceledAt ? (
-              <Button
-                block
-                textVariant='buttonLarge'
-                {...buttonPropsForPlan({ plan })}
-                onClick={() => openCheckout()}
-              />
-            ) : (
-              <Col gap={4}>
-                {!!subscription &&
-                subscription.planPeriod === 'month' &&
-                plan.annualMonthlyAmount > 0 &&
-                planPeriod === 'annual' ? (
-                  <Button
-                    block
-                    variant='bordered'
-                    colorScheme='secondary'
-                    textVariant='buttonLarge'
-                    isDisabled={!canManageBilling}
-                    onClick={() => openCheckout({ planPeriod: 'annual' })}
-                    localizationKey={localizationKeys('commerce.switchToAnnual')}
-                  />
-                ) : null}
-                {!!subscription && subscription.planPeriod === 'annual' && planPeriod === 'month' ? (
-                  <Button
-                    block
-                    variant='bordered'
-                    colorScheme='secondary'
-                    textVariant='buttonLarge'
-                    isDisabled={!canManageBilling}
-                    onClick={() => openCheckout({ planPeriod: 'month' })}
-                    localizationKey={localizationKeys('commerce.switchToMonthly')}
-                  />
-                ) : null}
-                <Button
-                  block
-                  variant='bordered'
-                  colorScheme='danger'
-                  textVariant='buttonLarge'
-                  isDisabled={!canManageBilling}
-                  onClick={() => setShowConfirmation(true)}
-                  localizationKey={localizationKeys('commerce.cancelSubscription')}
-                />
-              </Col>
-            )
-          ) : (
-            <Button
-              block
-              textVariant='buttonLarge'
-              {...buttonPropsForPlan({ plan })}
-              onClick={() => openCheckout()}
-            />
-          )}
-        </Drawer.Footer>
-      ) : null}
-
-      {subscription ? (
-        <Drawer.Confirmation
-          open={showConfirmation}
-          onOpenChange={setShowConfirmation}
-          actionsSlot={
-            <>
-              {!isSubmitting && (
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  textVariant='buttonLarge'
-                  isDisabled={!canManageBilling}
-                  onClick={() => {
-                    setCancelError(undefined);
-                    setShowConfirmation(false);
-                  }}
-                  localizationKey={localizationKeys('commerce.keepSubscription')}
-                />
-              )}
-              <Button
-                variant='solid'
-                colorScheme='danger'
-                size='sm'
-                textVariant='buttonLarge'
-                isLoading={isSubmitting}
-                isDisabled={!canManageBilling}
-                onClick={() => {
-                  setCancelError(undefined);
-                  setShowConfirmation(false);
-                  void cancelSubscription();
-                }}
-                localizationKey={localizationKeys('commerce.cancelSubscription')}
-              />
-            </>
-          }
-        >
-          <Heading
-            elementDescriptor={descriptors.drawerConfirmationTitle}
-            as='h2'
-            textVariant='h3'
-            localizationKey={localizationKeys('commerce.cancelSubscriptionTitle', {
-              plan: `${subscription.status === 'upcoming' ? 'upcoming ' : ''}${subscription.plan.name}`,
-            })}
-          />
-          <Text
-            elementDescriptor={descriptors.drawerConfirmationDescription}
-            colorScheme='secondary'
-            localizationKey={
-              subscription.status === 'upcoming'
-                ? localizationKeys('commerce.cancelSubscriptionNoCharge')
-                : localizationKeys('commerce.cancelSubscriptionAccessUntil', {
-                    plan: subscription.plan.name,
-                    date: subscription.periodEnd,
-                  })
-            }
+          <Button
+            block
+            textVariant='buttonLarge'
+            {...buttonPropsForPlan({ plan })}
+            onClick={() => openCheckout()}
           />
-          {cancelError && (
-            <Alert colorScheme='danger'>{typeof cancelError === 'string' ? cancelError : cancelError.message}</Alert>
-          )}
-        </Drawer.Confirmation>
-      ) : null}
-    </>
+        </Drawer.Footer>
+      ) : null} */}
+    </SubscriberTypeContext.Provider>
   );
 };
 
@@ -337,21 +174,13 @@ const PlanDetailsInternal = ({
 
 interface HeaderProps {
   plan: CommercePlanResource;
-  subscription?: CommerceSubscriptionResource;
   planPeriod: CommerceSubscriptionPlanPeriod;
   setPlanPeriod: (val: CommerceSubscriptionPlanPeriod) => void;
   closeSlot?: React.ReactNode;
 }
 
 const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
-  const { plan, subscription, closeSlot, planPeriod, setPlanPeriod } = props;
-
-  const { captionForSubscription, isDefaultPlanImplicitlyActiveOrUpcoming } = usePlansContext();
-  const { data: subscriptions } = useSubscriptions();
-
-  const isImplicitlyActiveOrUpcoming = isDefaultPlanImplicitlyActiveOrUpcoming && plan.isDefault;
-
-  const showBadge = !!subscription;
+  const { plan, closeSlot, planPeriod, setPlanPeriod } = props;
 
   const getPlanFee = useMemo(() => {
     if (plan.annualMonthlyAmount <= 0) {
@@ -386,38 +215,6 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
         gap={3}
         elementDescriptor={descriptors.planDetailBadgeAvatarTitleDescriptionContainer}
       >
-        {showBadge ? (
-          <Flex
-            align='center'
-            gap={3}
-            elementDescriptor={descriptors.planDetailBadgeContainer}
-            sx={t => ({
-              paddingInlineEnd: t.space.$10,
-            })}
-          >
-            {subscription?.status === 'active' || (isImplicitlyActiveOrUpcoming && subscriptions.length === 0) ? (
-              <Badge
-                elementDescriptor={descriptors.planDetailBadge}
-                localizationKey={localizationKeys('badge__activePlan')}
-                colorScheme={'secondary'}
-              />
-            ) : (
-              <Badge
-                elementDescriptor={descriptors.planDetailBadge}
-                localizationKey={localizationKeys('badge__upcomingPlan')}
-                colorScheme={'primary'}
-              />
-            )}
-            {!!subscription && (
-              <Text
-                elementDescriptor={descriptors.planDetailCaption}
-                variant={'caption'}
-                localizationKey={captionForSubscription(subscription)}
-                colorScheme='secondary'
-              />
-            )}
-          </Flex>
-        ) : null}
         {plan.avatarUrl ? (
           <Avatar
             boxElementDescriptor={descriptors.planDetailAvatar}
diff --git a/packages/clerk-js/src/ui/components/Plans/index.tsx b/packages/clerk-js/src/ui/components/Plans/index.tsx
deleted file mode 100644
index 612088fd9aa..00000000000
--- a/packages/clerk-js/src/ui/components/Plans/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './PlanDetails';
diff --git a/packages/clerk-js/src/ui/components/Plans/old_PlanDetails.tsx b/packages/clerk-js/src/ui/components/Plans/old_PlanDetails.tsx
new file mode 100644
index 00000000000..4bfb535d1df
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/Plans/old_PlanDetails.tsx
@@ -0,0 +1,522 @@
+import { useClerk, useOrganization } from '@clerk/shared/react';
+import type {
+  __internal_PlanDetailsProps,
+  ClerkAPIError,
+  ClerkRuntimeError,
+  CommercePlanResource,
+  CommerceSubscriptionPlanPeriod,
+  CommerceSubscriptionResource,
+} from '@clerk/types';
+import * as React from 'react';
+import { useMemo, useState } from 'react';
+
+import { Alert } from '@/ui/elements/Alert';
+import { Avatar } from '@/ui/elements/Avatar';
+import { Drawer, useDrawerContext } from '@/ui/elements/Drawer';
+import { Switch } from '@/ui/elements/Switch';
+
+import { useProtect } from '../../common';
+import { SubscriberTypeContext, usePlansContext, useSubscriberTypeContext, useSubscriptions } from '../../contexts';
+import { Badge, Box, Button, Col, descriptors, Flex, Heading, localizationKeys, Span, Text } from '../../customizables';
+import { handleError } from '../../utils';
+
+export const PlanDetails = (props: __internal_PlanDetailsProps) => {
+  return (
+    <SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
+      <Drawer.Content>
+        <PlanDetailsInternal {...props} />
+      </Drawer.Content>
+    </SubscriberTypeContext.Provider>
+  );
+};
+
+const PlanDetailsInternal = ({
+  plan,
+  onSubscriptionCancel,
+  portalRoot,
+  initialPlanPeriod = 'month',
+}: __internal_PlanDetailsProps) => {
+  const clerk = useClerk();
+  const { organization } = useOrganization();
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [cancelError, setCancelError] = useState<ClerkRuntimeError | ClerkAPIError | string | undefined>();
+  const [planPeriod, setPlanPeriod] = useState<CommerceSubscriptionPlanPeriod>(initialPlanPeriod);
+
+  const { setIsOpen } = useDrawerContext();
+  const {
+    activeOrUpcomingSubscriptionBasedOnPlanPeriod,
+    revalidateAll,
+    buttonPropsForPlan,
+    isDefaultPlanImplicitlyActiveOrUpcoming,
+  } = usePlansContext();
+  const subscriberType = useSubscriberTypeContext();
+  const canManageBilling = useProtect(
+    has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',
+  );
+
+  if (!plan) {
+    return null;
+  }
+
+  const subscription = activeOrUpcomingSubscriptionBasedOnPlanPeriod(plan, planPeriod);
+
+  const handleClose = () => {
+    if (setIsOpen) {
+      setIsOpen(false);
+    }
+  };
+
+  const features = plan.features;
+  const hasFeatures = features.length > 0;
+  const cancelSubscription = async () => {
+    if (!subscription) {
+      return;
+    }
+
+    setCancelError(undefined);
+    setIsSubmitting(true);
+
+    await subscription
+      .cancel({ orgId: subscriberType === 'org' ? organization?.id : undefined })
+      .then(() => {
+        setIsSubmitting(false);
+        onSubscriptionCancel?.();
+        handleClose();
+      })
+      .catch(error => {
+        handleError(error, [], setCancelError);
+        setIsSubmitting(false);
+      });
+  };
+
+  type Open__internal_CheckoutProps = {
+    planPeriod?: CommerceSubscriptionPlanPeriod;
+  };
+
+  const openCheckout = (props?: Open__internal_CheckoutProps) => {
+    handleClose();
+
+    // if the plan doesn't support annual, use monthly
+    let _planPeriod = props?.planPeriod || planPeriod;
+    if (_planPeriod === 'annual' && plan.annualMonthlyAmount === 0) {
+      _planPeriod = 'month';
+    }
+
+    clerk.__internal_openCheckout({
+      planId: plan.id,
+      planPeriod: _planPeriod,
+      subscriberType: subscriberType,
+      onSubscriptionComplete: () => {
+        void revalidateAll();
+      },
+      portalRoot,
+    });
+  };
+
+  return (
+    <>
+      <Drawer.Header
+        sx={t =>
+          !hasFeatures
+            ? {
+                flex: 1,
+                borderBottomWidth: 0,
+                background: t.colors.$colorBackground,
+              }
+            : null
+        }
+      >
+        <Header
+          plan={plan}
+          subscription={subscription}
+          planPeriod={planPeriod}
+          setPlanPeriod={setPlanPeriod}
+          closeSlot={<Drawer.Close />}
+        />
+      </Drawer.Header>
+
+      {hasFeatures ? (
+        <Drawer.Body>
+          <Text
+            elementDescriptor={descriptors.planDetailCaption}
+            variant={'caption'}
+            localizationKey={localizationKeys('commerce.availableFeatures')}
+            colorScheme='secondary'
+            sx={t => ({
+              padding: t.space.$4,
+              paddingBottom: 0,
+            })}
+          />
+          <Box
+            elementDescriptor={descriptors.planDetailFeaturesList}
+            as='ul'
+            role='list'
+            sx={t => ({
+              display: 'grid',
+              rowGap: t.space.$6,
+              padding: t.space.$4,
+              margin: 0,
+            })}
+          >
+            {features.map(feature => (
+              <Box
+                key={feature.id}
+                elementDescriptor={descriptors.planDetailFeaturesListItem}
+                as='li'
+                sx={t => ({
+                  display: 'flex',
+                  alignItems: 'baseline',
+                  gap: t.space.$3,
+                })}
+              >
+                {feature.avatarUrl ? (
+                  <Avatar
+                    size={_ => 24}
+                    title={feature.name}
+                    initials={feature.name[0]}
+                    rounded={false}
+                    imageUrl={feature.avatarUrl}
+                  />
+                ) : null}
+                <Span elementDescriptor={descriptors.planDetailFeaturesListItemContent}>
+                  <Text
+                    elementDescriptor={descriptors.planDetailFeaturesListItemTitle}
+                    colorScheme='body'
+                    sx={t => ({
+                      fontWeight: t.fontWeights.$medium,
+                    })}
+                  >
+                    {feature.name}
+                  </Text>
+                  {feature.description ? (
+                    <Text
+                      elementDescriptor={descriptors.planDetailFeaturesListItemDescription}
+                      colorScheme='secondary'
+                      sx={t => ({
+                        marginBlockStart: t.space.$0x25,
+                      })}
+                    >
+                      {feature.description}
+                    </Text>
+                  ) : null}
+                </Span>
+              </Box>
+            ))}
+          </Box>
+        </Drawer.Body>
+      ) : null}
+
+      {(!plan.isDefault && !isDefaultPlanImplicitlyActiveOrUpcoming) || !subscription ? (
+        <Drawer.Footer>
+          {subscription ? (
+            subscription.canceledAt ? (
+              <Button
+                block
+                textVariant='buttonLarge'
+                {...buttonPropsForPlan({ plan })}
+                onClick={() => openCheckout()}
+              />
+            ) : (
+              <Col gap={4}>
+                {!!subscription &&
+                subscription.planPeriod === 'month' &&
+                plan.annualMonthlyAmount > 0 &&
+                planPeriod === 'annual' ? (
+                  <Button
+                    block
+                    variant='bordered'
+                    colorScheme='secondary'
+                    textVariant='buttonLarge'
+                    isDisabled={!canManageBilling}
+                    onClick={() => openCheckout({ planPeriod: 'annual' })}
+                    localizationKey={localizationKeys('commerce.switchToAnnual')}
+                  />
+                ) : null}
+                {!!subscription && subscription.planPeriod === 'annual' && planPeriod === 'month' ? (
+                  <Button
+                    block
+                    variant='bordered'
+                    colorScheme='secondary'
+                    textVariant='buttonLarge'
+                    isDisabled={!canManageBilling}
+                    onClick={() => openCheckout({ planPeriod: 'month' })}
+                    localizationKey={localizationKeys('commerce.switchToMonthly')}
+                  />
+                ) : null}
+                <Button
+                  block
+                  variant='bordered'
+                  colorScheme='danger'
+                  textVariant='buttonLarge'
+                  isDisabled={!canManageBilling}
+                  onClick={() => setShowConfirmation(true)}
+                  localizationKey={localizationKeys('commerce.cancelSubscription')}
+                />
+              </Col>
+            )
+          ) : (
+            <Button
+              block
+              textVariant='buttonLarge'
+              {...buttonPropsForPlan({ plan })}
+              onClick={() => openCheckout()}
+            />
+          )}
+        </Drawer.Footer>
+      ) : null}
+
+      {subscription ? (
+        <Drawer.Confirmation
+          open={showConfirmation}
+          onOpenChange={setShowConfirmation}
+          actionsSlot={
+            <>
+              {!isSubmitting && (
+                <Button
+                  variant='ghost'
+                  size='sm'
+                  textVariant='buttonLarge'
+                  isDisabled={!canManageBilling}
+                  onClick={() => {
+                    setCancelError(undefined);
+                    setShowConfirmation(false);
+                  }}
+                  localizationKey={localizationKeys('commerce.keepSubscription')}
+                />
+              )}
+              <Button
+                variant='solid'
+                colorScheme='danger'
+                size='sm'
+                textVariant='buttonLarge'
+                isLoading={isSubmitting}
+                isDisabled={!canManageBilling}
+                onClick={() => {
+                  setCancelError(undefined);
+                  setShowConfirmation(false);
+                  void cancelSubscription();
+                }}
+                localizationKey={localizationKeys('commerce.cancelSubscription')}
+              />
+            </>
+          }
+        >
+          <Heading
+            elementDescriptor={descriptors.drawerConfirmationTitle}
+            as='h2'
+            textVariant='h3'
+            localizationKey={localizationKeys('commerce.cancelSubscriptionTitle', {
+              plan: `${subscription.status === 'upcoming' ? 'upcoming ' : ''}${subscription.plan.name}`,
+            })}
+          />
+          <Text
+            elementDescriptor={descriptors.drawerConfirmationDescription}
+            colorScheme='secondary'
+            localizationKey={
+              subscription.status === 'upcoming'
+                ? localizationKeys('commerce.cancelSubscriptionNoCharge')
+                : localizationKeys('commerce.cancelSubscriptionAccessUntil', {
+                    plan: subscription.plan.name,
+                    date: subscription.periodEnd,
+                  })
+            }
+          />
+          {cancelError && (
+            <Alert colorScheme='danger'>{typeof cancelError === 'string' ? cancelError : cancelError.message}</Alert>
+          )}
+        </Drawer.Confirmation>
+      ) : null}
+    </>
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Header
+ * -----------------------------------------------------------------------------------------------*/
+
+interface HeaderProps {
+  plan: CommercePlanResource;
+  subscription?: CommerceSubscriptionResource;
+  planPeriod: CommerceSubscriptionPlanPeriod;
+  setPlanPeriod: (val: CommerceSubscriptionPlanPeriod) => void;
+  closeSlot?: React.ReactNode;
+}
+
+const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
+  const { plan, subscription, closeSlot, planPeriod, setPlanPeriod } = props;
+
+  const { captionForSubscription, isDefaultPlanImplicitlyActiveOrUpcoming } = usePlansContext();
+  const { data: subscriptions } = useSubscriptions();
+
+  const isImplicitlyActiveOrUpcoming = isDefaultPlanImplicitlyActiveOrUpcoming && plan.isDefault;
+
+  const showBadge = !!subscription;
+
+  const getPlanFee = useMemo(() => {
+    if (plan.annualMonthlyAmount <= 0) {
+      return plan.amountFormatted;
+    }
+    return planPeriod === 'annual' ? plan.annualMonthlyAmountFormatted : plan.amountFormatted;
+  }, [plan, planPeriod]);
+
+  return (
+    <Box
+      ref={ref}
+      elementDescriptor={descriptors.planDetailHeader}
+      sx={t => ({
+        width: '100%',
+        padding: t.space.$4,
+        position: 'relative',
+      })}
+    >
+      {closeSlot ? (
+        <Box
+          sx={t => ({
+            position: 'absolute',
+            top: t.space.$2,
+            insetInlineEnd: t.space.$2,
+          })}
+        >
+          {closeSlot}
+        </Box>
+      ) : null}
+
+      <Col
+        gap={3}
+        elementDescriptor={descriptors.planDetailBadgeAvatarTitleDescriptionContainer}
+      >
+        {showBadge ? (
+          <Flex
+            align='center'
+            gap={3}
+            elementDescriptor={descriptors.planDetailBadgeContainer}
+            sx={t => ({
+              paddingInlineEnd: t.space.$10,
+            })}
+          >
+            {subscription?.status === 'active' || (isImplicitlyActiveOrUpcoming && subscriptions.length === 0) ? (
+              <Badge
+                elementDescriptor={descriptors.planDetailBadge}
+                localizationKey={localizationKeys('badge__activePlan')}
+                colorScheme={'secondary'}
+              />
+            ) : (
+              <Badge
+                elementDescriptor={descriptors.planDetailBadge}
+                localizationKey={localizationKeys('badge__upcomingPlan')}
+                colorScheme={'primary'}
+              />
+            )}
+            {!!subscription && (
+              <Text
+                elementDescriptor={descriptors.planDetailCaption}
+                variant={'caption'}
+                localizationKey={captionForSubscription(subscription)}
+                colorScheme='secondary'
+              />
+            )}
+          </Flex>
+        ) : null}
+        {plan.avatarUrl ? (
+          <Avatar
+            boxElementDescriptor={descriptors.planDetailAvatar}
+            size={_ => 40}
+            title={plan.name}
+            initials={plan.name[0]}
+            rounded={false}
+            imageUrl={plan.avatarUrl}
+            sx={t => ({
+              marginBlockEnd: t.space.$3,
+            })}
+          />
+        ) : null}
+        <Col
+          gap={1}
+          elementDescriptor={descriptors.planDetailTitleDescriptionContainer}
+        >
+          <Heading
+            elementDescriptor={descriptors.planDetailTitle}
+            as='h2'
+            textVariant='h2'
+          >
+            {plan.name}
+          </Heading>
+          {plan.description ? (
+            <Text
+              elementDescriptor={descriptors.planDetailDescription}
+              variant='subtitle'
+              colorScheme='secondary'
+            >
+              {plan.description}
+            </Text>
+          ) : null}
+        </Col>
+      </Col>
+
+      <Flex
+        elementDescriptor={descriptors.planDetailFeeContainer}
+        align='center'
+        wrap='wrap'
+        sx={t => ({
+          marginTop: t.space.$3,
+          columnGap: t.space.$1x5,
+        })}
+      >
+        <>
+          <Text
+            elementDescriptor={descriptors.planDetailFee}
+            variant='h1'
+            colorScheme='body'
+          >
+            {plan.currencySymbol}
+            {getPlanFee}
+          </Text>
+          <Text
+            elementDescriptor={descriptors.planDetailFeePeriod}
+            variant='caption'
+            colorScheme='secondary'
+            sx={t => ({
+              textTransform: 'lowercase',
+              ':before': {
+                content: '"/"',
+                marginInlineEnd: t.space.$1,
+              },
+            })}
+            localizationKey={localizationKeys('commerce.month')}
+          />
+        </>
+      </Flex>
+
+      {plan.annualMonthlyAmount > 0 ? (
+        <Box
+          elementDescriptor={descriptors.planDetailPeriodToggle}
+          sx={t => ({
+            display: 'flex',
+            marginTop: t.space.$3,
+          })}
+        >
+          <Switch
+            isChecked={planPeriod === 'annual'}
+            onChange={(checked: boolean) => setPlanPeriod(checked ? 'annual' : 'month')}
+            label={localizationKeys('commerce.billedAnnually')}
+          />
+        </Box>
+      ) : (
+        <Text
+          elementDescriptor={descriptors.pricingTableCardFeePeriodNotice}
+          variant='caption'
+          colorScheme='secondary'
+          localizationKey={
+            plan.isDefault ? localizationKeys('commerce.alwaysFree') : localizationKeys('commerce.billedMonthlyOnly')
+          }
+          sx={t => ({
+            justifySelf: 'flex-start',
+            alignSelf: 'center',
+            marginTop: t.space.$3,
+          })}
+        />
+      )}
+    </Box>
+  );
+});
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index fc47b2de578..792c3eb0cdf 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -116,9 +116,10 @@ function Card(props: CardProps) {
   const showPlanDetails = (event?: React.MouseEvent<HTMLElement>) => {
     const portalRoot = getClosestProfileScrollBox(mode, event);
 
-    clerk.__internal_openPlanDetails({
+    clerk.__experimental_openPlanDetails({
       plan,
-      subscriberType,
+      // planId: plan.id,
+      // subscriberType,
       initialPlanPeriod: planPeriod,
       portalRoot,
     });
diff --git a/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx b/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
new file mode 100644
index 00000000000..9aaf8188b94
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
@@ -0,0 +1,566 @@
+import { useClerk, useOrganization } from '@clerk/shared/react';
+import type {
+  __experimental_SubscriptionDetailsProps,
+  __internal_CheckoutProps,
+  ClerkAPIError,
+  ClerkRuntimeError,
+  CommerceSubscriptionResource,
+} from '@clerk/types';
+import * as React from 'react';
+import { useState } from 'react';
+
+import { Drawer, useDrawerContext } from '@/ui/elements/Drawer';
+import { Check } from '@/ui/icons';
+import { common } from '@/ui/styledSystem/common';
+import { colors } from '@/ui/utils/colors';
+import { handleError } from '@/ui/utils/errorHandler';
+import { formatDate } from '@/ui/utils/formatDate';
+import { truncateWithEndVisible } from '@/ui/utils/truncateTextWithEndVisible';
+
+import { useProtect } from '../../common';
+import { usePlansContext, useSubscriberTypeContext, useSubscriptions } from '../../contexts';
+import type { LocalizationKey } from '../../customizables';
+import {
+  Alert,
+  Badge,
+  Box,
+  Button,
+  Col,
+  descriptors,
+  Flex,
+  Heading,
+  Icon,
+  localizationKeys,
+  Span,
+  Spinner,
+  Text,
+} from '../../customizables';
+
+export const SubscriptionDetails = (props: __experimental_SubscriptionDetailsProps) => {
+  return (
+    <Drawer.Content>
+      <SubscriptionDetailsInternal {...props} />
+    </Drawer.Content>
+  );
+};
+
+const SubscriptionDetailsInternal = ({ onSubscriptionCancel, portalRoot }: __experimental_SubscriptionDetailsProps) => {
+  const clerk = useClerk();
+  const { organization: _organization } = useOrganization();
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [cancelError, setCancelError] = useState<ClerkRuntimeError | ClerkAPIError | string | undefined>();
+
+  const { setIsOpen } = useDrawerContext();
+  const {
+    revalidateAll,
+    buttonPropsForPlan: _buttonPropsForPlan,
+    isDefaultPlanImplicitlyActiveOrUpcoming: _isDefaultPlanImplicitlyActiveOrUpcoming,
+  } = usePlansContext();
+  const subscriberType = useSubscriberTypeContext();
+  const canManageBilling = useProtect(
+    has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',
+  );
+
+  const { data: subscriptions, isLoading } = useSubscriptions();
+
+  if (isLoading) {
+    return (
+      <Spinner
+        sx={{
+          margin: 'auto',
+        }}
+      />
+    );
+  }
+
+  const handleClose = () => {
+    if (setIsOpen) {
+      setIsOpen(false);
+    }
+  };
+
+  const cancelSubscription = async (subscription: CommerceSubscriptionResource) => {
+    setCancelError(undefined);
+    setIsSubmitting(true);
+
+    await subscription
+      .cancel(
+        // { orgId: subscriberType === 'org' ? organization?.id : undefined }
+        {},
+      )
+      .then(() => {
+        setIsSubmitting(false);
+        onSubscriptionCancel?.();
+        handleClose();
+      })
+      .catch(error => {
+        handleError(error, [], setCancelError);
+        setIsSubmitting(false);
+      });
+  };
+
+  const openCheckout = (params?: __internal_CheckoutProps) => {
+    handleClose();
+
+    clerk.__internal_openCheckout({
+      ...params,
+      onSubscriptionComplete: () => {
+        void revalidateAll();
+      },
+      portalRoot,
+    });
+  };
+
+  // Mock data for demonstration - in real implementation this would come from the subscriptions data
+  const activeSubscription = subscriptions?.find(sub => sub.status === 'active');
+  const upcomingSubscription = subscriptions?.find(sub => sub.status === 'upcoming');
+
+  if (!activeSubscription) {
+    // Should never happen, but just in case
+    return null;
+  }
+
+  const subscription = upcomingSubscription || activeSubscription;
+
+  return (
+    <>
+      <Drawer.Header title='Subscription' />
+
+      <Drawer.Body>
+        <Col
+          gap={4}
+          sx={t => ({
+            padding: t.space.$4,
+            overflowY: 'auto',
+          })}
+        >
+          {/* Subscription Cards */}
+          {subscriptions?.map(subscriptionItem => (
+            <SubscriptionCard
+              key={subscriptionItem.id}
+              subscription={subscriptionItem}
+            />
+          ))}
+        </Col>
+
+        {/* Billing Information */}
+
+        <Col
+          gap={3}
+          as='ul'
+          sx={t => ({
+            marginTop: 'auto',
+            paddingBlock: t.space.$4,
+            borderTopWidth: t.borderWidths.$normal,
+            borderTopStyle: t.borderStyles.$solid,
+            borderTopColor: t.colors.$neutralAlpha100,
+          })}
+        >
+          <SummaryItem>
+            <SummmaryItemLabel>
+              <Text colorScheme='secondary'>Current billing cycle</Text>
+            </SummmaryItemLabel>
+            <SummmaryItemValue>
+              <Text colorScheme='secondary'>{activeSubscription.planPeriod === 'month' ? 'Monthly' : 'Annually'}</Text>
+            </SummmaryItemValue>
+          </SummaryItem>
+          <SummaryItem>
+            <SummmaryItemLabel>
+              <Text colorScheme='secondary'>Next payment on</Text>
+            </SummmaryItemLabel>
+            <SummmaryItemValue>
+              <Text colorScheme='secondary'>
+                {upcomingSubscription
+                  ? formatDate(upcomingSubscription.periodStart)
+                  : formatDate(subscription.periodEnd)}
+              </Text>
+            </SummmaryItemValue>
+          </SummaryItem>
+          <SummaryItem>
+            <SummmaryItemLabel>
+              <Text>Next payment amount</Text>
+            </SummmaryItemLabel>
+            <SummmaryItemValue>
+              <Text>
+                {`${subscription.plan.currencySymbol}${subscription.planPeriod === 'month' ? subscription.plan.amountFormatted : subscription.plan.annualAmountFormatted}`}
+              </Text>
+            </SummmaryItemValue>
+          </SummaryItem>
+        </Col>
+      </Drawer.Body>
+
+      {/* If either the active or upcoming subscription is the free plan, then a C1 cannot switch to a different period or cancel the plan */}
+      {!subscription?.plan.isDefault ? (
+        <Drawer.Footer>
+          <Col gap={4}>
+            {((subscription.planPeriod === 'month' && subscription.plan.annualMonthlyAmount > 0) ||
+              subscription.planPeriod === 'annual') && (
+              <Button
+                block
+                variant='bordered'
+                colorScheme='secondary'
+                textVariant='buttonLarge'
+                isDisabled={!canManageBilling}
+                // onClick={() => openCheckout({ planPeriod: 'annual' })}
+                onClick={() => {
+                  openCheckout({
+                    planId: subscription.plan.id,
+                    planPeriod: subscription.planPeriod === 'month' ? 'annual' : 'month',
+                    subscriberType: subscriberType,
+                  });
+                }}
+                localizationKey={
+                  subscription.planPeriod === 'month'
+                    ? localizationKeys('commerce.switchToAnnual')
+                    : localizationKeys('commerce.switchToMonthly')
+                }
+              />
+            )}
+
+            <Button
+              block
+              variant='bordered'
+              colorScheme='danger'
+              textVariant='buttonLarge'
+              isDisabled={!canManageBilling}
+              onClick={() => setShowConfirmation(true)}
+              localizationKey={localizationKeys('commerce.cancelSubscription')}
+            />
+          </Col>
+
+          <Drawer.Confirmation
+            open={showConfirmation}
+            onOpenChange={setShowConfirmation}
+            actionsSlot={
+              <>
+                {!isSubmitting && (
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    textVariant='buttonLarge'
+                    isDisabled={!canManageBilling}
+                    onClick={() => {
+                      setCancelError(undefined);
+                      setShowConfirmation(false);
+                    }}
+                    localizationKey={localizationKeys('commerce.keepSubscription')}
+                  />
+                )}
+                <Button
+                  variant='solid'
+                  colorScheme='danger'
+                  size='sm'
+                  textVariant='buttonLarge'
+                  isLoading={isSubmitting}
+                  isDisabled={!canManageBilling}
+                  onClick={() => {
+                    setCancelError(undefined);
+                    setShowConfirmation(false);
+                    void cancelSubscription(subscription);
+                  }}
+                  localizationKey={localizationKeys('commerce.cancelSubscription')}
+                />
+              </>
+            }
+          >
+            <Heading
+              elementDescriptor={descriptors.drawerConfirmationTitle}
+              as='h2'
+              textVariant='h3'
+              localizationKey={localizationKeys('commerce.cancelSubscriptionTitle', {
+                plan: `${subscription.status === 'upcoming' ? 'upcoming ' : ''}${subscription.plan.name}`,
+              })}
+            />
+            <Text
+              elementDescriptor={descriptors.drawerConfirmationDescription}
+              colorScheme='secondary'
+              localizationKey={
+                subscription.status === 'upcoming'
+                  ? localizationKeys('commerce.cancelSubscriptionNoCharge')
+                  : localizationKeys('commerce.cancelSubscriptionAccessUntil', {
+                      plan: subscription.plan.name,
+                      date: subscription.periodEnd,
+                    })
+              }
+            />
+            {cancelError && (
+              <Alert colorScheme='danger'>{typeof cancelError === 'string' ? cancelError : cancelError.message}</Alert>
+            )}
+          </Drawer.Confirmation>
+        </Drawer.Footer>
+      ) : null}
+    </>
+  );
+};
+
+// New component for individual subscription cards
+const SubscriptionCard = ({ subscription }: { subscription: CommerceSubscriptionResource }) => {
+  const isActive = subscription.status === 'active';
+
+  return (
+    <Col
+      sx={t => ({
+        borderWidth: t.borderWidths.$normal,
+        borderStyle: t.borderStyles.$solid,
+        borderColor: t.colors.$neutralAlpha100,
+        borderRadius: t.radii.$md,
+      })}
+    >
+      <Col
+        gap={3}
+        sx={t => ({
+          padding: t.space.$3,
+        })}
+      >
+        {/* Header with name and badge */}
+        <Flex
+          justify='between'
+          align='center'
+        >
+          <Text
+            sx={{
+              fontSize: '16px',
+              fontWeight: '600',
+              color: '#333',
+            }}
+          >
+            {subscription.plan.name}
+          </Text>
+          <Badge
+            colorScheme={isActive ? 'secondary' : 'primary'}
+            localizationKey={isActive ? localizationKeys('badge__activePlan') : localizationKeys('badge__upcomingPlan')}
+          />
+        </Flex>
+
+        {/* Pricing details */}
+        <Box
+          elementDescriptor={descriptors.statementSectionContentDetailsList}
+          as='ul'
+          sx={t => ({
+            margin: 0,
+            padding: 0,
+            borderWidth: t.borderWidths.$normal,
+            borderStyle: t.borderStyles.$solid,
+            borderColor: t.colors.$neutralAlpha100,
+            borderRadius: t.radii.$md,
+            overflow: 'hidden',
+          })}
+        >
+          <PriceItem
+            labelIcon={subscription.planPeriod === 'month' ? Check : undefined}
+            label='Monthly price'
+            value={`${subscription.plan.currencySymbol}${subscription.plan.amountFormatted} / mo`}
+          />
+          <PriceItem
+            labelIcon={subscription.planPeriod === 'annual' ? Check : undefined}
+            label='Annual discount'
+            value={`${subscription.plan.currencySymbol}${subscription.plan.annualMonthlyAmountFormatted} / mo`}
+          />
+        </Box>
+      </Col>
+
+      {isActive ? (
+        <>
+          <DetailRow
+            label='Subscribed on'
+            // TODO: Use localization for dates
+            value={formatDate(subscription.createdAt)}
+          />
+          <DetailRow
+            label={subscription.canceledAt ? 'Ends on' : 'Renews at'}
+            value={formatDate(subscription.periodEnd)}
+          />
+        </>
+      ) : (
+        <DetailRow
+          label='Begins on'
+          value={formatDate(subscription.periodStart)}
+        />
+      )}
+    </Col>
+  );
+};
+
+// Helper component for detail rows
+const DetailRow = ({ label, value }: { label: string; value: string }) => (
+  <Flex
+    justify='between'
+    align='center'
+    sx={t => ({
+      paddingInline: t.space.$3,
+      paddingBlock: t.space.$3,
+      borderBlockStartWidth: t.borderWidths.$normal,
+      borderBlockStartStyle: t.borderStyles.$solid,
+      borderBlockStartColor: t.colors.$neutralAlpha100,
+    })}
+  >
+    <Text>{label}</Text>
+    <Text colorScheme='secondary'>{value}</Text>
+  </Flex>
+);
+
+function PriceItem({
+  labelIcon,
+  label,
+  valueCopyable: _valueCopyable = false,
+  value,
+  valueTruncated = false,
+}: {
+  icon?: React.ReactNode;
+  label: string | LocalizationKey;
+  labelIcon?: React.ComponentType;
+  value: string | LocalizationKey;
+  valueTruncated?: boolean;
+  valueCopyable?: boolean;
+}) {
+  return (
+    <Box
+      elementDescriptor={descriptors.statementSectionContentDetailsListItem}
+      as='li'
+      sx={t => ({
+        margin: 0,
+        background: common.mergedColorsBackground(
+          colors.setAlpha(t.colors.$colorBackground, 1),
+          t.colors.$neutralAlpha50,
+        ),
+        display: 'flex',
+        '&:not(:first-of-type)': {
+          borderBlockStartWidth: t.borderWidths.$normal,
+          borderBlockStartStyle: t.borderStyles.$solid,
+          borderBlockStartColor: t.colors.$neutralAlpha100,
+        },
+        '&:first-of-type #test': {
+          borderTopLeftRadius: t.radii.$md,
+          borderTopRightRadius: t.radii.$md,
+        },
+        '&:last-of-type #test': {
+          borderBottomLeftRadius: t.radii.$md,
+          borderBottomRightRadius: t.radii.$md,
+        },
+      })}
+    >
+      <Flex
+        justify='center'
+        align='center'
+        sx={t => ({
+          width: t.space.$8,
+          paddingInline: t.space.$2,
+          paddingBlock: t.space.$1x5,
+        })}
+      >
+        {labelIcon ? (
+          <Icon
+            icon={labelIcon}
+            size='xs'
+            colorScheme='neutral'
+          />
+        ) : null}
+      </Flex>
+
+      <Box
+        id='test'
+        sx={t => ({
+          flex: 1,
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          background: t.colors.$colorBackground,
+          paddingInline: t.space.$2,
+          paddingBlock: t.space.$1x5,
+          marginBlock: -1,
+          marginInline: -1,
+          boxShadow: `inset 0px 0px 0px ${t.borderWidths.$normal} ${t.colors.$neutralAlpha100}`,
+        })}
+      >
+        <Span
+          elementDescriptor={descriptors.statementSectionContentDetailsListItemLabelContainer}
+          sx={t => ({
+            display: 'flex',
+            alignItems: 'center',
+            gap: t.space.$1x5,
+          })}
+        >
+          <Text
+            variant='caption'
+            colorScheme='secondary'
+            elementDescriptor={descriptors.statementSectionContentDetailsListItemLabel}
+            localizationKey={label}
+          />
+        </Span>
+        <Span
+          sx={t => ({
+            display: 'flex',
+            alignItems: 'center',
+            gap: t.space.$0x25,
+            color: t.colors.$colorTextSecondary,
+          })}
+        >
+          {typeof value === 'string' ? (
+            <Text
+              colorScheme='secondary'
+              variant='caption'
+              elementDescriptor={descriptors.statementSectionContentDetailsListItemValue}
+            >
+              {valueTruncated ? truncateWithEndVisible(value) : value}
+            </Text>
+          ) : (
+            <Text
+              elementDescriptor={descriptors.statementSectionContentDetailsListItemValue}
+              colorScheme='secondary'
+              variant='caption'
+              localizationKey={value}
+            />
+          )}
+        </Span>
+      </Box>
+    </Box>
+  );
+}
+
+function SummaryItem(props: React.PropsWithChildren) {
+  return (
+    <Box
+      elementDescriptor={descriptors.statementSectionContentDetailsListItem}
+      as='li'
+      sx={t => ({
+        paddingInline: t.space.$4,
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      })}
+    >
+      {props.children}
+    </Box>
+  );
+}
+
+function SummmaryItemLabel(props: React.PropsWithChildren) {
+  return (
+    <Span
+      elementDescriptor={descriptors.statementSectionContentDetailsListItemLabelContainer}
+      sx={t => ({
+        display: 'flex',
+        alignItems: 'center',
+        gap: t.space.$1x5,
+      })}
+    >
+      {props.children}
+    </Span>
+  );
+}
+
+function SummmaryItemValue(props: React.PropsWithChildren) {
+  return (
+    <Span
+      elementDescriptor={descriptors.statementSectionContentDetailsListItemLabelContainer}
+      sx={t => ({
+        display: 'flex',
+        alignItems: 'center',
+        gap: t.space.$0x25,
+      })}
+    >
+      {props.children}
+    </Span>
+  );
+}
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index 0ec0005d9b5..6743234858a 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -117,8 +117,9 @@ export const useSubscriptions = () => {
           plan_period: 'month',
           canceled_at: null,
           status: _subscriptions.data.length === 0 ? 'active' : 'upcoming',
-          period_start: canceledSubscription?.periodEnd || 0,
+          period_start: canceledSubscription?.periodEnd?.getTime() || 0,
           period_end: 0,
+          created_at: canceledSubscription?.periodEnd?.getTime() || 0,
         }),
       ];
     }
@@ -363,10 +364,7 @@ export const usePlansContext = () => {
       const portalRoot = getClosestProfileScrollBox(mode, event);
 
       if (subscription && subscription.planPeriod === planPeriod && !subscription.canceledAt) {
-        clerk.__internal_openPlanDetails({
-          plan,
-          initialPlanPeriod: planPeriod,
-          subscriberType,
+        clerk.__experimental_openSubscriptionDetails({
           onSubscriptionCancel: () => {
             revalidateAll();
             onSubscriptionChange?.();
diff --git a/packages/clerk-js/src/ui/elements/contexts/index.tsx b/packages/clerk-js/src/ui/elements/contexts/index.tsx
index efa927e5593..c91fb670ff1 100644
--- a/packages/clerk-js/src/ui/elements/contexts/index.tsx
+++ b/packages/clerk-js/src/ui/elements/contexts/index.tsx
@@ -88,7 +88,8 @@ export type FlowMetadata = {
     | 'planDetails'
     | 'pricingTable'
     | 'apiKeys'
-    | 'oauthConsent';
+    | 'oauthConsent'
+    | 'subscriptionDetails';
   part?:
     | 'start'
     | 'emailCode'
diff --git a/packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx b/packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx
index 2d16fd8e4d9..3b703f1c4f2 100644
--- a/packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx
+++ b/packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx
@@ -36,12 +36,7 @@ export function MountedPlanDetailDrawer({
       portalId={planDetailsDrawer.props.portalId}
       portalRoot={planDetailsDrawer.props.portalRoot as HTMLElement | null | undefined}
     >
-      <PlanDetails
-        {...planDetailsDrawer.props}
-        subscriberType={planDetailsDrawer.props.subscriberType || 'user'}
-        onSubscriptionCancel={planDetailsDrawer.props.onSubscriptionCancel || (() => {})}
-        appearance={planDetailsDrawer.props.appearance}
-      />
+      <PlanDetails {...planDetailsDrawer.props} />
     </LazyDrawerRenderer>
   );
 }
diff --git a/packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx b/packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx
new file mode 100644
index 00000000000..4a6186c4701
--- /dev/null
+++ b/packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx
@@ -0,0 +1,42 @@
+import { useUser } from '@clerk/shared/react';
+import type { __experimental_SubscriptionDetailsProps, Appearance } from '@clerk/types';
+
+import { SubscriptionDetails } from '../components/SubscriptionDetails';
+import { LazyDrawerRenderer } from './providers';
+
+export function MountedSubscriptionDetailDrawer({
+  appearance,
+  subscriptionDetailsDrawer,
+  onOpenChange,
+}: {
+  appearance?: Appearance;
+  onOpenChange: (open: boolean) => void;
+  subscriptionDetailsDrawer: {
+    open: false;
+    props: null | __experimental_SubscriptionDetailsProps;
+  };
+}) {
+  const { user } = useUser();
+  if (!subscriptionDetailsDrawer.props) {
+    return null;
+  }
+
+  return (
+    <LazyDrawerRenderer
+      // We set `key` to be the user id to "reset" floating ui portals on session switch.
+      // Without this, the drawer would not be rendered after a session switch.
+      key={user?.id}
+      globalAppearance={appearance}
+      appearanceKey={'planDetails' as any}
+      componentAppearance={subscriptionDetailsDrawer.props.appearance || {}}
+      flowName={'subscriptionDetails'}
+      open={subscriptionDetailsDrawer.open}
+      onOpenChange={onOpenChange}
+      componentName={'SubscriptionDetails'}
+      portalId={subscriptionDetailsDrawer.props.portalId}
+      portalRoot={subscriptionDetailsDrawer.props.portalRoot as HTMLElement | null | undefined}
+    >
+      <SubscriptionDetails {...subscriptionDetailsDrawer.props} />
+    </LazyDrawerRenderer>
+  );
+}
diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts
index d0c38843dc2..daa94dc0368 100644
--- a/packages/clerk-js/src/ui/lazyModules/components.ts
+++ b/packages/clerk-js/src/ui/lazyModules/components.ts
@@ -20,7 +20,8 @@ const componentImportPaths = {
   PricingTable: () => import(/* webpackChunkName: "pricingTable" */ '../components/PricingTable'),
   Checkout: () => import(/* webpackChunkName: "checkout" */ '../components/Checkout'),
   SessionTasks: () => import(/* webpackChunkName: "sessionTasks" */ '../components/SessionTasks'),
-  PlanDetails: () => import(/* webpackChunkName: "planDetails" */ '../components/Plans'),
+  PlanDetails: () => import(/* webpackChunkName: "planDetails" */ '../components/Plans/PlanDetails'),
+  SubscriptionDetails: () => import(/* webpackChunkName: "subscriptionDetails" */ '../components/SubscriptionDetails'),
   APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/ApiKeys/ApiKeys'),
   OAuthConsent: () => import(/* webpackChunkName: "oauthConsent" */ '../components/OAuthConsent/OAuthConsent'),
 } as const;
@@ -106,6 +107,10 @@ export const PlanDetails = lazy(() =>
   componentImportPaths.PlanDetails().then(module => ({ default: module.PlanDetails })),
 );
 
+export const SubscriptionDetails = lazy(() =>
+  componentImportPaths.SubscriptionDetails().then(module => ({ default: module.SubscriptionDetails })),
+);
+
 export const OAuthConsent = lazy(() =>
   componentImportPaths.OAuthConsent().then(module => ({ default: module.OAuthConsent })),
 );
@@ -143,6 +148,7 @@ export const ClerkComponents = {
   PlanDetails,
   APIKeys,
   OAuthConsent,
+  SubscriptionDetails,
 };
 
 export type ClerkComponentName = keyof typeof ClerkComponents;
diff --git a/packages/clerk-js/src/ui/lazyModules/drawers.tsx b/packages/clerk-js/src/ui/lazyModules/drawers.tsx
index 3e05ccdddef..7022e169c1d 100644
--- a/packages/clerk-js/src/ui/lazyModules/drawers.tsx
+++ b/packages/clerk-js/src/ui/lazyModules/drawers.tsx
@@ -6,3 +6,9 @@ export const MountedCheckoutDrawer = lazy(() =>
 export const MountedPlanDetailDrawer = lazy(() =>
   import('./MountedPlanDetailDrawer').then(module => ({ default: module.MountedPlanDetailDrawer })),
 );
+
+export const MountedSubscriptionDetailDrawer = lazy(() =>
+  import('./MountedSubscriptionDetailDrawer').then(module => ({
+    default: module.MountedSubscriptionDetailDrawer,
+  })),
+);
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
index c92f3d57692..d2f0894733c 100644
--- a/packages/react/src/isomorphicClerk.ts
+++ b/packages/react/src/isomorphicClerk.ts
@@ -3,6 +3,8 @@ import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
 import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';
 import { handleValueOrFn } from '@clerk/shared/utils';
 import type {
+  __experimental_PlanDetailsProps,
+  __experimental_SubscriptionDetailsProps,
   __internal_CheckoutProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
@@ -119,7 +121,8 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private preopenUserVerification?: null | __internal_UserVerificationProps = null;
   private preopenSignIn?: null | SignInProps = null;
   private preopenCheckout?: null | __internal_CheckoutProps = null;
-  private preopenPlanDetails?: null | __internal_PlanDetailsProps = null;
+  private preopenPlanDetails?: null | __experimental_PlanDetailsProps = null;
+  private preopenSubscriptionDetails?: null | __experimental_SubscriptionDetailsProps = null;
   private preopenSignUp?: null | SignUpProps = null;
   private preopenUserProfile?: null | UserProfileProps = null;
   private preopenOrganizationProfile?: null | OrganizationProfileProps = null;
@@ -557,7 +560,11 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
 
     if (this.preopenPlanDetails !== null) {
-      clerkjs.__internal_openPlanDetails(this.preopenPlanDetails);
+      clerkjs.__experimental_openPlanDetails(this.preopenPlanDetails);
+    }
+
+    if (this.preopenSubscriptionDetails !== null) {
+      clerkjs.__experimental_openSubscriptionDetails(this.preopenSubscriptionDetails);
     }
 
     if (this.preopenSignUp !== null) {
@@ -788,6 +795,38 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
+  __experimental_openPlanDetails = (props?: __experimental_PlanDetailsProps) => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.__experimental_openPlanDetails(props);
+    } else {
+      this.preopenPlanDetails = props;
+    }
+  };
+
+  __experimental_closePlanDetails = () => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.__experimental_closePlanDetails();
+    } else {
+      this.preopenPlanDetails = null;
+    }
+  };
+
+  __experimental_openSubscriptionDetails = (props?: __experimental_SubscriptionDetailsProps) => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.__experimental_openSubscriptionDetails(props);
+    } else {
+      this.preopenSubscriptionDetails = props;
+    }
+  };
+
+  __experimental_closeSubscriptionDetails = () => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.__experimental_closeSubscriptionDetails();
+    } else {
+      this.preopenSubscriptionDetails = null;
+    }
+  };
+
   __internal_openReverification = (props?: __internal_UserVerificationModalProps) => {
     if (this.clerkjs && this.loaded) {
       this.clerkjs.__internal_openReverification(props);
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index e25115150a9..a5a9f89fbda 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -232,6 +232,29 @@ export interface Clerk {
    */
   __internal_closePlanDetails: () => void;
 
+  /**
+   * Opens the Clerk PlanDetails drawer component in a drawer.
+   * @param props Optional subscription details drawer configuration parameters.
+   */
+  __experimental_openPlanDetails: (props?: __experimental_PlanDetailsProps) => void;
+
+  /**
+   * Closes the Clerk PlanDetails drawer.
+   */
+  __experimental_closePlanDetails: () => void;
+
+  /**
+   * Opens the Clerk PlanDetails drawer component in a drawer.
+   * @param props Optional subscription details drawer configuration parameters.
+   */
+  __experimental_openSubscriptionDetails: (props?: __experimental_SubscriptionDetailsProps) => void;
+
+  /**
+   * Closes the Clerk PlanDetails drawer.
+   */
+  __experimental_closeSubscriptionDetails: () => void;
+
+  /**
   /** Opens the Clerk UserVerification component in a modal.
    * @param props Optional user verification configuration parameters.
    */
@@ -1728,6 +1751,22 @@ export type __internal_PlanDetailsProps = {
   portalRoot?: PortalRoot;
 };
 
+export type __experimental_PlanDetailsProps = {
+  appearance?: PlanDetailTheme;
+  plan?: CommercePlanResource;
+  planId?: string;
+  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
+  portalId?: string;
+  portalRoot?: PortalRoot;
+};
+
+export type __experimental_SubscriptionDetailsProps = {
+  appearance?: PlanDetailTheme;
+  onSubscriptionCancel?: () => void;
+  portalId?: string;
+  portalRoot?: PortalRoot;
+};
+
 export type __internal_OAuthConsentProps = {
   appearance?: OAuthConsentTheme;
   /**
diff --git a/packages/types/src/commerce.ts b/packages/types/src/commerce.ts
index 8b27f61d081..685a0305abc 100644
--- a/packages/types/src/commerce.ts
+++ b/packages/types/src/commerce.ts
@@ -10,6 +10,7 @@ type WithOptionalOrgType<T> = T & {
 export interface CommerceBillingNamespace {
   getPaymentAttempts: (params: GetPaymentAttemptsParams) => Promise<ClerkPaginatedResponse<CommercePaymentResource>>;
   getPlans: (params?: GetPlansParams) => Promise<CommercePlanResource[]>;
+  getPlan: (params: { id: string }) => Promise<CommercePlanResource>;
   getSubscriptions: (params: GetSubscriptionsParams) => Promise<ClerkPaginatedResponse<CommerceSubscriptionResource>>;
   getStatements: (params: GetStatementsParams) => Promise<ClerkPaginatedResponse<CommerceStatementResource>>;
   startCheckout: (params: CreateCheckoutParams) => Promise<CommerceCheckoutResource>;
@@ -154,9 +155,10 @@ export interface CommerceSubscriptionResource extends ClerkResource {
   plan: CommercePlanResource;
   planPeriod: CommerceSubscriptionPlanPeriod;
   status: CommerceSubscriptionStatus;
-  periodStart: number;
-  periodEnd: number;
-  canceledAt: number | null;
+  createdAt: Date;
+  periodStart: Date;
+  periodEnd: Date;
+  canceledAt: Date | null;
   amount?: CommerceMoney;
   credit?: {
     amount: CommerceMoney;
diff --git a/packages/types/src/json.ts b/packages/types/src/json.ts
index dbf38dcb0c7..202d5d0a2bb 100644
--- a/packages/types/src/json.ts
+++ b/packages/types/src/json.ts
@@ -697,6 +697,7 @@ export interface CommerceSubscriptionJSON extends ClerkResourceJSON {
   credit?: {
     amount: CommerceMoneyJSON;
   };
+  created_at: number;
   payment_source_id: string;
   plan: CommercePlanJSON;
   plan_period: CommerceSubscriptionPlanPeriod;