@@ -14,8 +14,11 @@ import { declineToken } from '#/shared/lib/helpers/get-token'
 import { IProps } from '#/shared/lib/types/entities'
 import { NavigationSearch } from '#/widgets/navigation-search'
 import { getDaysLeft } from '#/shared/lib/helpers/date-helper'
+import { useFeatureFlag } from '#/shared/lib/hooks/use-feature-flag'
 import { SubscriptionDaysBadge } from '#/shared/ui/subscription-days-badge/subscription-days-badge'
 
+const RECURRENT_PAYMENTS_FLAG = 'recurrent-payments-enabled'
+
 interface InfoBarProps extends IProps {}
 
 type LangFull = 'Русский' | 'English'
@@ -40,6 +43,7 @@ const convertLang = <T extends boolean>(toShort: T, lang: LangParam<T>): LangRet
 }
 
 const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
+	const recurrentPaymentsEnabled = useFeatureFlag(RECURRENT_PAYMENTS_FLAG)
 	const nextPaymentAt = useAppSelector((state) => state.user.payment_plan.next_payment_at)
 	const daysLeft = getDaysLeft(nextPaymentAt)
 	const balance = useAppSelector((state) => state.balance.balance)
@@ -83,7 +87,9 @@ const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
 						marginRight: '80px',
 					}}
 				>
-					{daysLeft != null && daysLeft <= 3 ? <SubscriptionDaysBadge days={daysLeft} /> : null}
+					{recurrentPaymentsEnabled && daysLeft != null && daysLeft <= 3 ? (
+						<SubscriptionDaysBadge days={daysLeft} />
+					) : null}
 					<Popover
 						sx={{ marginTop: '6px' }}
 						PaperProps={{
@@ -0,0 +1,72 @@
+import { Box, LinearProgress, linearProgressClasses, Stack, styled, Typography } from '@mui/material'
+
+import { commaSeparated } from '#/shared'
+import { formatPlanPrice } from '#/shared/lib/helpers/format-plan-price'
+import { declineToken } from '#/shared/lib/helpers/get-token'
+
+import styles from '../subscription.module.scss'
+
+const BorderLinearProgress = styled(LinearProgress)(() => ({
+	height: 18,
+	borderRadius: 6,
+	[`&.${linearProgressClasses.colorPrimary}`]: {
+		backgroundColor: '#EFF0F2',
+	},
+	[`& .${linearProgressClasses.bar}`]: {
+		borderRadius: 6,
+		backgroundColor: '#8280FF',
+	},
+}))
+
+interface CurrentPlanAndBalanceLegacyProps {
+	balance: number
+	planTokenLimit: string
+	planPrice: string
+	isIndividual: boolean
+}
+
+export const CurrentPlanAndBalanceLegacy = ({
+	balance,
+	planTokenLimit,
+	planPrice,
+	isIndividual,
+}: CurrentPlanAndBalanceLegacyProps) => {
+	const formatterdPlanPrice = formatPlanPrice(planPrice, isIndividual)
+	const planTokenLimitNumber = Number(planTokenLimit)
+	const percentage = planTokenLimitNumber > 0 ? Math.min(100, Math.max(0, (balance / planTokenLimitNumber) * 100)) : 0
+
+	return (
+		<Stack className={styles.balanceContainer} gap={'20px'}>
+			<Box className={styles.balanceBox}>
+				<Typography
+					className={styles.subTitle}
+					sx={{ marginBottom: '15px', visibility: !formatterdPlanPrice.includes('₽') ? 'hidden' : 'visible' }}
+				>
+					Последняя оплата
+				</Typography>
+				<Stack>
+					<Typography className={styles.title} sx={{ marginBottom: '10px' }}>
+						{commaSeparated(Math.round(Number(planTokenLimit)))} токенов
+					</Typography>
+					<Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} className={styles.planInfoRow}>
+						<Typography className={styles.subTitle}>{formatterdPlanPrice}</Typography>
+					</Stack>
+				</Stack>
+			</Box>
+			<Box className={styles.balanceBox}>
+				<Typography className={styles.subTitle}>Мой баланс</Typography>
+				<Box
+					sx={{ marginTop: '15px', marginBottom: '10px' }}
+					width='100%'
+					display='flex'
+					alignItems='center'
+					justifyContent='space-between'
+				>
+					<Typography sx={{ fontWeight: 600 }}>{declineToken(balance.toString())}</Typography>
+					<Typography className='color-gray'>{Math.round(percentage)} %</Typography>
+				</Box>
+				<BorderLinearProgress variant='determinate' value={percentage} />
+			</Box>
+		</Stack>
+	)
+}
@@ -0,0 +1,93 @@
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import { Box, MenuItem, Select, SelectChangeEvent, Stack, Typography } from '@mui/material'
+
+import { IFeatures } from '../../api'
+import { categoryIconMap } from '../../lib/category-icon-map'
+import { formatFeatureValue } from '../../lib/format-feature-value'
+
+import styles from '../subscription.module.scss'
+
+interface FeaturesSectionLegacyProps {
+	currentTokenLimitUID: string
+	onCurrentTokenLimitUIDChange: (limit: string) => void
+	features: IFeatures[] | null
+	tokenLimits: Array<{ value: string; label: string }>
+}
+
+export const FeaturesSectionLegacy = ({
+	currentTokenLimitUID,
+	onCurrentTokenLimitUIDChange,
+	features,
+	tokenLimits,
+}: FeaturesSectionLegacyProps) => {
+	return (
+		<Box width='100%' textAlign='start' marginTop={'50px'}>
+			<Stack direction={'row'} justifyContent={'start'} alignItems={'center'} className={styles.selectContainer}>
+				<Typography className={styles.title}></Typography>
+				<Select
+					value={currentTokenLimitUID}
+					onChange={(e: SelectChangeEvent<string>) => onCurrentTokenLimitUIDChange(e.target.value)}
+					IconComponent={KeyboardArrowDownIcon}
+					MenuProps={{
+						PaperProps: {
+							className: styles.selectMenuPaper,
+						},
+						MenuListProps: {
+							className: styles.selectMenuList,
+						},
+					}}
+					className={styles.tokenSelect}
+				>
+					{tokenLimits.map((limit) => (
+						<MenuItem key={limit.value} value={limit.value} className={styles.selectMenuItem}>
+							{limit.label}
+						</MenuItem>
+					))}
+				</Select>
+			</Stack>
+			<Box className={styles.blocksMapper}>
+				{features?.map((featureGroup, idx) => (
+					<Box key={idx} className={styles.featureBlock}>
+						<Stack direction='row' alignItems='center' spacing={2} className={styles.featureHeader}>
+							{categoryIconMap[featureGroup.name] && (
+								<Box className={styles.featureIcon}>{categoryIconMap[featureGroup.name]}</Box>
+							)}
+							<Typography className={styles.featureTitle}>{featureGroup.name}</Typography>
+						</Stack>
+						<Box component='hr' className={styles.featureDivider} />
+						<Stack spacing={2}>
+							{featureGroup.features.map((feature, featureIdx) => {
+								let { number, unit, more } = formatFeatureValue(feature.quantity, feature.measurement_unit)
+
+								return (
+									<Box key={featureIdx} className={styles.featureItem}>
+										<Typography className={styles.featureText}>{feature.name}</Typography>
+										<Box sx={{ display: 'flex', alignItems: 'baseline' }}>
+											<Typography className={styles.featureText}>
+												{number == '-' ? (
+													<Box sx={{ border: '1px solid white', width: '30px' }}></Box>
+												) : (
+													<>
+														{' '}
+														<span className={styles.featureUnit}>{more}</span> {number}
+														<span className={styles.featureUnit}> {unit}</span>
+													</>
+												)}
+											</Typography>
+										</Box>
+									</Box>
+								)
+							})}
+						</Stack>
+					</Box>
+				))}
+			</Box>
+			<Typography className={styles.infoText}>
+				<Box className={styles.infoIcon} />
+				Для каждой отдельной модели указано примерное количество генераций, как если бы вы пользовались{' '}
+				<span className={styles.infoUnderText}>только</span> ей. <br />
+				Количество генераций может варьироваться в зависимости от используемых параметров каждой конкретной модели.
+			</Typography>
+		</Box>
+	)
+}
@@ -0,0 +1,101 @@
+import React from 'react'
+import { Box } from '@mui/material'
+import Router from 'next/router'
+import { useSession } from 'next-auth/react'
+
+import LightningSvg from '#/assets/svg/lightning.svg?react'
+import { accountApi } from '#/shared/api/account-endpoints'
+import { commaSeparated } from '#/shared/lib/helpers'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { IFeatures, IOffer, formatFeatureValue } from '#/views/subscription'
+
+import styles from '../offer.module.scss'
+
+interface IOfferLegacyProps extends IOffer {
+	device: 'desktop' | 'mobile'
+	isCurrentSubscription?: boolean
+	index?: number
+}
+
+const OfferLegacy: React.FC<IOfferLegacyProps> = ({ uid, tokens_per_plan, price, grouped_features, isCurrentSubscription, index }) => {
+	const { data } = useSession()
+	const { showMessage } = useShowDataStore()
+
+	const unitMap: Record<string, string> = {
+		Изображения: 'изображений',
+		'Чат-боты': 'страниц текста',
+		Видео: 'видео',
+		Аудио: 'аудиозаписей',
+	}
+
+	const formatFeatures = (groupedFeatures: IFeatures[] | undefined): string[] => {
+		if (!groupedFeatures || !Array.isArray(groupedFeatures)) {
+			return []
+		}
+
+		return groupedFeatures.flatMap((group) => {
+			if (!group?.features || !Array.isArray(group.features)) {
+				return []
+			}
+
+			const limit = group.name === 'Изображения' ? 2 : 1
+			const featuresToShow = group.features.slice(0, limit)
+
+			return featuresToShow
+				.filter((feature) => feature.quantity !== 0)
+				.map((feature) => {
+					const groupName = unitMap[group.name] || group.name
+					const { number, more } = formatFeatureValue(feature.quantity, feature.measurement_unit)
+					return `${more ? more + ' ' : ''}${number} ${groupName} в ${feature.name}`
+				})
+		})
+	}
+
+	const formattedFeatures = formatFeatures(grouped_features)
+
+	const pay = async (planUid: string) => {
+		try {
+			const urlForPay = await accountApi.payProduct(data!.access, planUid)
+			if (urlForPay) await Router.push(urlForPay)
+		} catch (err) {
+			const message = err instanceof Error ? err.message : 'Ошибка оплаты'
+			showMessage(message)
+		}
+	}
+
+	return (
+		<Box className={`${styles.tarif} ${index === 1 ? styles.tarif_bg_1 : ''} ${index === 2 ? styles.tarif_bg_2 : ''}`}>
+			<Box>
+				<Box className={styles.tarif_header}>
+					<Box className={styles.tarif_badge}>
+						<LightningSvg color='#8280FF' width={16} height={24} />
+						<span>{commaSeparated(Math.round(Number(tokens_per_plan)))} токенов</span>
+					</Box>
+					<Box className={styles.tarif_blur_area}></Box>
+				</Box>
+
+				<ul className={styles.tarif_list}>
+					{formattedFeatures.map((feature, idx) => (
+						<li key={idx} className={styles.point}>
+							{feature}
+						</li>
+					))}
+				</ul>
+			</Box>
+			<Box>
+				<p className={styles.tarif_price}>{commaSeparated(parseInt(price) ?? 0)} ₽</p>
+				<Box
+					className={`${styles.tarif_btn} ${isCurrentSubscription ? styles.tarif_btn_current : ''}`}
+					onClick={(e) => {
+						e.stopPropagation()
+						pay(uid)
+					}}
+				>
+					Оплатить
+				</Box>
+			</Box>
+		</Box>
+	)
+}
+
+export default OfferLegacy
@@ -0,0 +1,32 @@
+import { Box } from '@mui/material'
+
+import { IOffer } from '../../api'
+
+import OfferLegacy from './offer-legacy'
+
+import styles from '../subscription.module.scss'
+
+interface PlansSectionLegacyProps {
+	offers: IOffer[] | null
+	currentOfferUID: string
+}
+
+export const PlansSectionLegacy = ({ offers, currentOfferUID: _currentOfferUID }: PlansSectionLegacyProps) => {
+	return (
+		<Box width='100%' textAlign='start' marginTop={'50px'}>
+			<Box className={styles.blocksMapper}>
+				{offers?.map((offer, idx) => {
+					return (
+						<OfferLegacy
+							{...offer}
+							device={'desktop'}
+							isCurrentSubscription={false}
+							index={idx}
+							key={offer.uid}
+						/>
+					)
+				})}
+			</Box>
+		</Box>
+	)
+}
@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react'
+import { Box, Typography } from '@mui/material'
+import { useSession } from 'next-auth/react'
+
+import { useAppSelector } from '#/app/store/store'
+import { commaSeparated } from '#/shared'
+import { accountApi } from '#/shared/api/account-endpoints'
+import { balanceSelector } from '#/shared/lib/selectors'
+
+import { IFeatures, IOffer } from '../../api'
+
+import { FaqSection } from '../faq-section'
+import { CurrentPlanAndBalanceLegacy } from './current-plan-and-balance-legacy'
+import { FeaturesSectionLegacy } from './features-section-legacy'
+import { PlansSectionLegacy } from './plans-section-legacy'
+
+import styles from '../subscription.module.scss'
+
+export const SubscriptionLegacyPage = () => {
+	const [offers, setOffers] = useState<IOffer[] | null>(null)
+	const [currentTokenLimitUID, setCurrentTokenLimitUID] = useState<string>('')
+	const [tokenLimits, setTokenLimits] = useState<Array<{ value: string; label: string }>>([])
+	const [currentFeatures, setCurrentFeatures] = useState<IFeatures[]>([])
+	const {
+		uid: paymentPlanUid,
+		tokens_per_plan: planTokenLimit,
+		price: planPrice,
+		individual: isIndividual,
+	} = useAppSelector((state) => state.user.payment_plan.plan)
+	const balance = useAppSelector(balanceSelector)
+	const { data } = useSession()
+
+	useEffect(() => {
+		if (data?.access) {
+			accountApi.getPaymentsPlans(data?.access).then((res) => {
+				if (res) {
+					setOffers(res)
+					setCurrentTokenLimitUID(res[0].uid)
+					setTokenLimits(
+						res.map((offer) => ({
+							value: offer.uid,
+							label: `${commaSeparated(Math.round(Number(offer.tokens_per_plan)))} токенов`,
+						}))
+					)
+				}
+			})
+		}
+	}, [data?.access])
+
+	useEffect(() => {
+		if (offers && currentTokenLimitUID) {
+			const foundOffer = offers.find((offer) => offer.uid === currentTokenLimitUID)
+			if (foundOffer) {
+				setCurrentFeatures(foundOffer.grouped_features)
+			}
+		}
+	}, [currentTokenLimitUID, offers])
+
+	return (
+		<Box className={styles.container}>
+			<Box sx={{ marginTop: '20px', marginBottom: '20px' }}>
+				<Typography sx={{ fontSize: 35, fontWeight: '600' }}>Оплата</Typography>
+			</Box>
+
+			<CurrentPlanAndBalanceLegacy
+				balance={balance}
+				planPrice={planPrice}
+				planTokenLimit={planTokenLimit}
+				isIndividual={isIndividual}
+			/>
+
+			<PlansSectionLegacy offers={offers} currentOfferUID={paymentPlanUid} />
+
+			<FeaturesSectionLegacy
+				tokenLimits={tokenLimits}
+				currentTokenLimitUID={currentTokenLimitUID}
+				onCurrentTokenLimitUIDChange={setCurrentTokenLimitUID}
+				features={currentFeatures}
+			/>
+
+			<FaqSection />
+		</Box>
+	)
+}
@@ -0,0 +1,176 @@
+import { useEffect, useState } from 'react'
+import { Box, Button, Typography } from '@mui/material'
+import { useSession } from 'next-auth/react'
+
+import { useAppDispatch, useAppSelector } from '#/app/store/store'
+import { getAllInfo } from '#/entities/user-account/model/user-type-slice'
+import { commaSeparated, Modal, TooltipCustom } from '#/shared'
+import { accountApi } from '#/shared/api/account-endpoints'
+import { balanceSelector } from '#/shared/lib/selectors'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+
+import { IFeatures, IOffer } from '../api'
+
+import { CurrentPlanAndBalance } from './current-plan-and-balance'
+import { FaqSection } from './faq-section'
+import { FeaturesSection } from './features-section'
+import { PlansSection } from './plans-section'
+
+import styles from './subscription.module.scss'
+
+export const SubscriptionRecurrentPage = () => {
+	const [offers, setOffers] = useState<IOffer[] | null>(null)
+	const [currentTokenLimitUID, setCurrentTokenLimitUID] = useState<string>('')
+	const [tokenLimits, setTokenLimits] = useState<Array<{ value: string; label: string }>>([])
+	const [currentFeatures, setCurrentFeatures] = useState<IFeatures[]>([])
+	const {
+		uid: paymentPlanUid,
+		tokens_per_plan: planTokenLimit,
+		price: planPrice,
+		individual: isIndividual,
+	} = useAppSelector((state) => state.user.payment_plan.plan)
+	const nextPaymentAt = useAppSelector((state) => state.user.payment_plan.next_payment_at)
+	const isRecurring = useAppSelector((state) => state.user.payment_plan?.is_recurring) ?? false
+	const balance = useAppSelector(balanceSelector)
+	const dispatch = useAppDispatch()
+	const { data } = useSession()
+	const { showMessage } = useShowDataStore()
+	const [isCancelSubscriptionModalOpen, setIsCancelSubscriptionModalOpen] = useState(false)
+
+	const handleOpenCancelSubscriptionModal = () => setIsCancelSubscriptionModalOpen(true)
+	const handleCloseCancelSubscriptionModal = () => setIsCancelSubscriptionModalOpen(false)
+
+	const handleCancelSubscription = async () => {
+		if (!data?.access) {
+			showMessage(`Не удалось отменить подписку: не удалось определить сессию`)
+			return
+		}
+		try {
+			await accountApi.revokeRecurringPayment(data.access)
+			await dispatch(getAllInfo(data.access)).unwrap()
+			showMessage('Автопродление подписки отменено', 'success')
+			handleCloseCancelSubscriptionModal()
+		} catch (e: unknown) {
+			const detail = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail
+			const errMsg =
+				detail ?? (e instanceof Error ? e.message : typeof e === 'string' ? e : 'Неизвестная ошибка')
+			showMessage(`Не удалось отменить подписку: ${errMsg}`)
+		}
+	}
+
+	useEffect(() => {
+		if (data?.access) {
+			accountApi.getPaymentsPlans(data?.access).then((res) => {
+				if (res) {
+					setOffers(res)
+					setCurrentTokenLimitUID(res[0].uid)
+					setTokenLimits(
+						res.map((offer) => ({
+							value: offer.uid,
+							label: `${commaSeparated(Math.round(Number(offer.tokens_per_plan)))} токенов`,
+						}))
+					)
+				}
+			})
+		}
+	}, [data?.access])
+
+	useEffect(() => {
+		if (offers && currentTokenLimitUID) {
+			const foundOffer = offers.find((offer) => offer.uid === currentTokenLimitUID)
+			if (foundOffer) {
+				setCurrentFeatures(foundOffer.grouped_features)
+			}
+		}
+	}, [currentTokenLimitUID, offers])
+
+	const planTokensFormatted = commaSeparated(Math.round(Number(planTokenLimit) || 0))
+
+	return (
+		<Box className={styles.container}>
+			<Box sx={{ marginTop: '20px', marginBottom: '20px' }}>
+				<Typography sx={{ fontSize: 35, fontWeight: '600' }}>Подписка</Typography>
+			</Box>
+
+			<CurrentPlanAndBalance
+				balance={balance}
+				planPrice={planPrice}
+				planTokenLimit={planTokenLimit}
+				isIndividual={isIndividual}
+				isRecurring={isRecurring}
+				nextPaymentAt={nextPaymentAt}
+			/>
+
+			<PlansSection offers={offers} currentOfferUID={paymentPlanUid} currentPlanTokens={Number(planTokenLimit)} />
+
+			<FeaturesSection
+				tokenLimits={tokenLimits}
+				currentTokenLimitUID={currentTokenLimitUID}
+				onCurrentTokenLimitUIDChange={setCurrentTokenLimitUID}
+				features={currentFeatures}
+			/>
+
+			<FaqSection />
+
+			<Box className={styles.cancelSubscriptionButtonWrapper}>
+				{isIndividual || !isRecurring ? (
+					<TooltipCustom title={!isRecurring ? 'Подписка уже была отменена' : isIndividual ? 'Нельзя отменить индивидуальный план': ''} placement="top">
+						<span className={styles.cancelSubscriptionButtonTooltipTarget}>
+							<Button
+								variant="outlined"
+								className={styles.cancelSubscriptionButton}
+								fullWidth
+								disabled
+								onClick={handleOpenCancelSubscriptionModal}
+							>
+								Отмена подписки
+							</Button>
+						</span>
+					</TooltipCustom>
+				) : (
+					<Button
+						variant="outlined"
+						className={styles.cancelSubscriptionButton}
+						fullWidth
+						onClick={handleOpenCancelSubscriptionModal}
+					>
+						Отмена подписки
+					</Button>
+				)}
+			</Box>
+
+			<Modal
+				open={isCancelSubscriptionModalOpen}
+				onClose={handleCloseCancelSubscriptionModal}
+				paperSx={{ backgroundColor: '#151518' }}
+			>
+				<Box className={styles.cancelSubscriptionModalContainer}>
+					<Typography className={styles.cancelSubscriptionModalTitle}>Отмена подписки</Typography>
+
+					<Typography className={styles.cancelSubscriptionModalText} component="p">
+						Внимание! Вы отменяете подписку на тариф{' '}
+						<Typography component="span" className={styles.cancelSubscriptionModalTextEmphasis}>
+							{planTokensFormatted} токенов
+						</Typography>
+						. Следующее списание будет отменено, вы можете продолжать пользоваться возможностями тарифа до истечения
+						его срока.
+					</Typography>
+
+					<Box className={styles.cancelSubscriptionModalButtons}>
+						<Button onClick={handleCloseCancelSubscriptionModal} fullWidth className={styles.cancelSubscriptionButtonKeep}>
+							Не отменять
+						</Button>
+						<Button
+							onClick={() => void handleCancelSubscription()}
+							fullWidth
+							variant="outlined"
+							className={styles.cancelSubscriptionButtonCancel}
+						>
+							Да, отменить
+						</Button>
+					</Box>
+				</Box>
+			</Modal>
+		</Box>
+	)
+}
@@ -1,179 +1,19 @@
-import { useEffect, useState } from 'react'
-import { Box, Button, Typography } from '@mui/material'
-import { useSession } from 'next-auth/react'
-
-import { useAppDispatch, useAppSelector } from '#/app/store/store'
-import { getAllInfo } from '#/entities/user-account/model/user-type-slice'
 import { NextPageWithLayout } from '#/pages/_app'
-import { commaSeparated, Modal, TooltipCustom } from '#/shared'
-import { accountApi } from '#/shared/api/account-endpoints'
-import { balanceSelector } from '#/shared/lib/selectors'
-import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
-
-import { IFeatures, IOffer } from '../api'
+import { useFeatureFlag } from '#/shared/lib/hooks/use-feature-flag'
 
-import { CurrentPlanAndBalance } from './current-plan-and-balance'
-import { FaqSection } from './faq-section'
-import { FeaturesSection } from './features-section'
-import { PlansSection } from './plans-section'
+import { SubscriptionLegacyPage } from './legacy/subscription-legacy'
+import { SubscriptionRecurrentPage } from './subscription-recurrent'
 
-import styles from './subscription.module.scss'
+const RECURRENT_PAYMENTS_FLAG = 'recurrent-payments-enabled'
 
 const SubscriptionPage: NextPageWithLayout = () => {
-	const [offers, setOffers] = useState<IOffer[] | null>(null)
-	const [currentTokenLimitUID, setCurrentTokenLimitUID] = useState<string>('')
-	const [tokenLimits, setTokenLimits] = useState<Array<{ value: string; label: string }>>([])
-	const [currentFeatures, setCurrentFeatures] = useState<IFeatures[]>([])
-	const {
-		uid: paymentPlanUid,
-		tokens_per_plan: planTokenLimit,
-		price: planPrice,
-		individual: isIndividual,
-	} = useAppSelector((state) => state.user.payment_plan.plan)
-	const nextPaymentAt = useAppSelector((state) => state.user.payment_plan.next_payment_at)
-	const isRecurring = useAppSelector((state) => state.user.payment_plan?.is_recurring) ?? false
-	const balance = useAppSelector(balanceSelector)
-	const dispatch = useAppDispatch()
-	const { data } = useSession()
-	const { showMessage } = useShowDataStore()
-	const [isCancelSubscriptionModalOpen, setIsCancelSubscriptionModalOpen] = useState(false)
+	const recurrentPaymentsEnabled = useFeatureFlag(RECURRENT_PAYMENTS_FLAG)
 
-	const handleOpenCancelSubscriptionModal = () => setIsCancelSubscriptionModalOpen(true)
-	const handleCloseCancelSubscriptionModal = () => setIsCancelSubscriptionModalOpen(false)
-
-	const handleCancelSubscription = async () => {
-		if (!data?.access) {
-			showMessage(`Не удалось отменить подписку: не удалось определить сессию`)
-			return
-		}
-		try {
-			await accountApi.revokeRecurringPayment(data.access)
-			await dispatch(getAllInfo(data.access)).unwrap()
-			showMessage('Автопродление подписки отменено', 'success')
-			handleCloseCancelSubscriptionModal()
-		} catch (e: unknown) {
-			const detail = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail
-			const errMsg =
-				detail ?? (e instanceof Error ? e.message : typeof e === 'string' ? e : 'Неизвестная ошибка')
-			showMessage(`Не удалось отменить подписку: ${errMsg}`)
-		}
+	if (recurrentPaymentsEnabled) {
+		return <SubscriptionRecurrentPage />
 	}
 
-	useEffect(() => {
-		if (data?.access) {
-			accountApi.getPaymentsPlans(data?.access).then((res) => {
-				if (res) {
-					setOffers(res)
-					setCurrentTokenLimitUID(res[0].uid)
-					setTokenLimits(
-						res.map((offer) => ({
-							value: offer.uid,
-							label: `${commaSeparated(Math.round(Number(offer.tokens_per_plan)))} токенов`,
-						}))
-					)
-				}
-			})
-		}
-	}, [data?.access])
-
-	useEffect(() => {
-		if (offers && currentTokenLimitUID) {
-			const foundOffer = offers.find((offer) => offer.uid === currentTokenLimitUID)
-			if (foundOffer) {
-				setCurrentFeatures(foundOffer.grouped_features)
-			}
-		}
-	}, [currentTokenLimitUID, offers])
-
-	const planTokensFormatted = commaSeparated(Math.round(Number(planTokenLimit) || 0))
-
-	return (
-		<Box className={styles.container}>
-			<Box sx={{ marginTop: '20px', marginBottom: '20px' }}>
-				<Typography sx={{ fontSize: 35, fontWeight: '600' }}>Подписка</Typography>
-			</Box>
-
-			<CurrentPlanAndBalance
-				balance={balance}
-				planPrice={planPrice}
-				planTokenLimit={planTokenLimit}
-				isIndividual={isIndividual}
-				isRecurring={isRecurring}
-				nextPaymentAt={nextPaymentAt}
-			/>
-
-			<PlansSection offers={offers} currentOfferUID={paymentPlanUid} currentPlanTokens={Number(planTokenLimit)} />
-
-			<FeaturesSection
-				tokenLimits={tokenLimits}
-				currentTokenLimitUID={currentTokenLimitUID}
-				onCurrentTokenLimitUIDChange={setCurrentTokenLimitUID}
-				features={currentFeatures}
-			/>
-
-			<FaqSection />
-
-			<Box className={styles.cancelSubscriptionButtonWrapper}>
-				{isIndividual || !isRecurring ? (
-					<TooltipCustom title={!isRecurring ? 'Подписка уже была отменена' : isIndividual ? 'Нельзя отменить индивидуальный план': ''} placement="top">
-						<span className={styles.cancelSubscriptionButtonTooltipTarget}>
-							<Button
-								variant="outlined"
-								className={styles.cancelSubscriptionButton}
-								fullWidth
-								disabled
-								onClick={handleOpenCancelSubscriptionModal}
-							>
-								Отмена подписки
-							</Button>
-						</span>
-					</TooltipCustom>
-				) : (
-					<Button
-						variant="outlined"
-						className={styles.cancelSubscriptionButton}
-						fullWidth
-						onClick={handleOpenCancelSubscriptionModal}
-					>
-						Отмена подписки
-					</Button>
-				)}
-			</Box>
-
-			<Modal
-				open={isCancelSubscriptionModalOpen}
-				onClose={handleCloseCancelSubscriptionModal}
-				paperSx={{ backgroundColor: '#151518' }}
-			>
-				<Box className={styles.cancelSubscriptionModalContainer}>
-					<Typography className={styles.cancelSubscriptionModalTitle}>Отмена подписки</Typography>
-
-					<Typography className={styles.cancelSubscriptionModalText} component="p">
-						Внимание! Вы отменяете подписку на тариф{' '}
-						<Typography component="span" className={styles.cancelSubscriptionModalTextEmphasis}>
-							{planTokensFormatted} токенов
-						</Typography>
-						. Следующее списание будет отменено, вы можете продолжать пользоваться возможностями тарифа до истечения
-						его срока.
-					</Typography>
-
-					<Box className={styles.cancelSubscriptionModalButtons}>
-						<Button onClick={handleCloseCancelSubscriptionModal} fullWidth className={styles.cancelSubscriptionButtonKeep}>
-							Не отменять
-						</Button>
-						<Button
-							onClick={() => void handleCancelSubscription()}
-							fullWidth
-							variant="outlined"
-							className={styles.cancelSubscriptionButtonCancel}
-						>
-							Да, отменить
-						</Button>
-					</Box>
-				</Box>
-			</Modal>
-		</Box>
-	)
+	return <SubscriptionLegacyPage />
 }
 
 export default SubscriptionPage