diff --git a/packages/twenty-front/src/modules/settings/billing/components/AddCreditCardModal.tsx b/packages/twenty-front/src/modules/settings/billing/components/AddCreditCardModal.tsx
index d739e5e34e..1fda35ad1c 100644
--- a/packages/twenty-front/src/modules/settings/billing/components/AddCreditCardModal.tsx
+++ b/packages/twenty-front/src/modules/settings/billing/components/AddCreditCardModal.tsx
@@ -34,9 +34,10 @@ export const AddCreditCardModal = ({
   const { t } = useLingui();
   const { closeModal } = useModal();
 
+  // Close only after activation so the form keeps its loading state visible
   const handlePaymentMethodAdded = async () => {
-    closeModal(modalInstanceId);
     await onPaymentMethodAdded();
+    closeModal(modalInstanceId);
   };
 
   return (
diff --git a/packages/twenty-front/src/modules/settings/billing/components/SettingsBillingSubscriptionInfo.tsx b/packages/twenty-front/src/modules/settings/billing/components/SettingsBillingSubscriptionInfo.tsx
index a2a604a781..18d1f7134f 100644
--- a/packages/twenty-front/src/modules/settings/billing/components/SettingsBillingSubscriptionInfo.tsx
+++ b/packages/twenty-front/src/modules/settings/billing/components/SettingsBillingSubscriptionInfo.tsx
@@ -17,6 +17,7 @@ import { useGetResourceCreditUsage } from '@/settings/billing/hooks/useGetResour
 import { useNextBillingPhase } from '@/settings/billing/hooks/useNextBillingPhase';
 import { useNextPlan } from '@/settings/billing/hooks/useNextPlan';
 import { useSplitPhaseItemsInPrices } from '@/settings/billing/hooks/useSplitPhaseItemsInPrices';
+import { billingHasPaymentMethodSelector } from '@/settings/billing/states/billingHasPaymentMethodSelector';
 import { usePermissionFlagMap } from '@/settings/roles/hooks/usePermissionFlagMap';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
@@ -137,6 +138,14 @@ export const SettingsBillingSubscriptionInfo = ({
   const { endTrialPeriod, isLoading: isEndTrialPeriodLoading } =
     useEndSubscriptionTrialPeriod();
 
+  const billingHasPaymentMethod = useAtomStateValue(
+    billingHasPaymentMethodSelector,
+  );
+
+  const startSubscriptionAfterPaymentMethodAdded = async () => {
+    await endTrialPeriod({ skipPaymentMethodRedirect: true });
+  };
+
   const { [PermissionFlagType.WORKSPACE]: hasPermissionToEndTrialPeriod } =
     usePermissionFlagMap();
 
@@ -517,6 +526,7 @@ export const SettingsBillingSubscriptionInfo = ({
         workspaceMembers={currentWorkspaceMembers}
       />
       <SettingsBillingSubscriptionInfoModals
+        billingHasPaymentMethod={billingHasPaymentMethod}
         cancelIntervalSwitchingSubtitle={confirmationModalCancelIntervalSwitchingMessage()}
         cancelPlanSwitchingSubtitle={confirmationModalCancelPlanSwitchingMessage()}
         isCancellingIntervalSwitch={isCancellingIntervalSwitch}
@@ -528,6 +538,7 @@ export const SettingsBillingSubscriptionInfo = ({
         onCancelPlanSwitching={cancelPlanSwitching}
         onCancelResourceCreditSwitching={cancelResourceCreditSwitching}
         onEndTrialPeriod={endTrialPeriod}
+        onPaymentMethodAdded={startSubscriptionAfterPaymentMethodAdded}
         onSwitchInterval={switchInterval}
         startSubscriptionSubtitle={startSubscriptionSubtitle}
         switchToMonthlySubtitle={confirmationModalSwitchToMonthlyMessage()}
diff --git a/packages/twenty-front/src/modules/settings/billing/components/internal/SettingsBillingSubscriptionInfoModals.tsx b/packages/twenty-front/src/modules/settings/billing/components/internal/SettingsBillingSubscriptionInfoModals.tsx
index ccef201e9f..1018a82241 100644
--- a/packages/twenty-front/src/modules/settings/billing/components/internal/SettingsBillingSubscriptionInfoModals.tsx
+++ b/packages/twenty-front/src/modules/settings/billing/components/internal/SettingsBillingSubscriptionInfoModals.tsx
@@ -1,8 +1,10 @@
+import { AddCreditCardModal } from '@/settings/billing/components/AddCreditCardModal';
 import { BILLING_MODAL_IDS } from '@/settings/billing/constants/BillingModalIds';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useLingui } from '@lingui/react/macro';
 
 type SettingsBillingSubscriptionInfoModalsProps = {
+  billingHasPaymentMethod: boolean | null | undefined;
   cancelIntervalSwitchingSubtitle: string;
   cancelPlanSwitchingSubtitle: string;
   isCancellingIntervalSwitch: boolean;
@@ -14,6 +16,7 @@ type SettingsBillingSubscriptionInfoModalsProps = {
   onCancelPlanSwitching: () => void;
   onCancelResourceCreditSwitching: () => void;
   onEndTrialPeriod: () => void;
+  onPaymentMethodAdded: () => Promise<void>;
   onSwitchInterval: () => void;
   startSubscriptionSubtitle: string;
   switchToMonthlySubtitle: string;
@@ -21,6 +24,7 @@ type SettingsBillingSubscriptionInfoModalsProps = {
 };
 
 export const SettingsBillingSubscriptionInfoModals = ({
+  billingHasPaymentMethod,
   cancelIntervalSwitchingSubtitle,
   cancelPlanSwitchingSubtitle,
   isCancellingIntervalSwitch,
@@ -32,6 +36,7 @@ export const SettingsBillingSubscriptionInfoModals = ({
   onCancelPlanSwitching,
   onCancelResourceCreditSwitching,
   onEndTrialPeriod,
+  onPaymentMethodAdded,
   onSwitchInterval,
   startSubscriptionSubtitle,
   switchToMonthlySubtitle,
@@ -77,15 +82,22 @@ export const SettingsBillingSubscriptionInfoModals = ({
         confirmButtonAccent="blue"
         loading={isCancellingPlanSwitch}
       />
-      <ConfirmationModal
-        modalInstanceId={BILLING_MODAL_IDS.endTrialPeriod}
-        title={t`Start Your Subscription`}
-        subtitle={startSubscriptionSubtitle}
-        onConfirmClick={onEndTrialPeriod}
-        confirmButtonText={t`Confirm`}
-        confirmButtonAccent="blue"
-        loading={isEndTrialPeriodLoading}
-      />
+      {billingHasPaymentMethod === false ? (
+        <AddCreditCardModal
+          modalInstanceId={BILLING_MODAL_IDS.endTrialPeriod}
+          onPaymentMethodAdded={onPaymentMethodAdded}
+        />
+      ) : (
+        <ConfirmationModal
+          modalInstanceId={BILLING_MODAL_IDS.endTrialPeriod}
+          title={t`Start Your Subscription`}
+          subtitle={startSubscriptionSubtitle}
+          onConfirmClick={onEndTrialPeriod}
+          confirmButtonText={t`Confirm`}
+          confirmButtonAccent="blue"
+          loading={isEndTrialPeriodLoading}
+        />
+      )}
       <ConfirmationModal
         modalInstanceId={BILLING_MODAL_IDS.cancelSwitchMeteredPrice}
         title={t`Cancel credit pack switching?`}