diff --git a/sdks/js/packages/core/react/components/common/upcoming-plan-change-banner/index.tsx b/sdks/js/packages/core/react/components/common/upcoming-plan-change-banner/index.tsx
index c97bf7b32..5f059e41c 100644
--- a/sdks/js/packages/core/react/components/common/upcoming-plan-change-banner/index.tsx
+++ b/sdks/js/packages/core/react/components/common/upcoming-plan-change-banner/index.tsx
@@ -31,7 +31,12 @@ export function UpcomingPlanChangeBanner({
   const [isPlanLoading, setIsPlanLoading] = useState(false);
   const [isPlanChangeLoading, setIsPlanChangeLoading] = useState(false);
 
-  const nextPhase = subscription?.phases?.[0];
+  const phases =
+    subscription?.phases?.filter(phase =>
+      dayjs(phase.effective_at).isAfter(dayjs())
+    ) || [];
+
+  const nextPhase = phases?.[0];
 
   const fetchPlan = useCallback(
     async (planId: string) => {