@@ -13,6 +13,8 @@ import { TooltipCustom } from '#/shared'
 import { SvgIcon } from '#/shared/ui/svg'
 import { declineToken } from '#/shared/lib/helpers/get-token'
 import { IProps } from '#/shared/lib/types/entities'
+import { getDaysLeft } from '#/shared/lib/helpers/date-helper'
+import { SubscriptionDaysBadge } from '#/shared/ui/subscription-days-badge/subscription-days-badge'
 
 interface InfoBarProps extends IProps {}
 
@@ -38,6 +40,8 @@ const convertLang = <T extends boolean>(toShort: T, lang: LangParam<T>): LangRet
 }
 
 const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
+	const nextPaymentAt = useAppSelector((state) => state.user.payment_plan.next_payment_at)
+	const daysLeft = getDaysLeft(nextPaymentAt)
 	const balance = useAppSelector((state) => state.balance.balance)
 	const { email, first_name, last_name, profile_picture_link, account_type, show_balance } = useAppSelector((state) => state.user)
 
@@ -78,6 +82,7 @@ const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
 						marginRight: '80px',
 					}}
 				>
+					{daysLeft != null && daysLeft <= 3 ? <SubscriptionDaysBadge days={daysLeft} /> : null}
 					<Popover
 						sx={{ marginTop: '6px' }}
 						PaperProps={{
@@ -119,7 +124,12 @@ const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
 							</Box>
 							{show_balance && (
 								<Box className={styles.balanceBox}>
-					                <SvgIcon className={styles.generationIcon} url='/svg/chatgpt/generation-icon.svg' width={12} height={16} />
+									<SvgIcon
+										className={styles.generationIcon}
+										url='/svg/chatgpt/generation-icon.svg'
+										width={12}
+										height={16}
+									/>
 									<Typography className={styles.balance} sx={{ fontSize: 15 }}>
 										{declineToken(balance.toString())}
 									</Typography>
@@ -168,20 +178,9 @@ const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
 							>
 								<Box padding={2}>
 									<Link href={'/account?scope=setting'}>
-										<Box
-											display='flex'
-											onClick={() => router.push('/account?scope=setting')}
-										>
-											<Image
-												src={'/svg/setting.svg'}
-												width={19}
-												height={19}
-												alt={''}
-											/>
-											<Typography
-												className='title-main-gray'
-												sx={{ marginLeft: '10px' }}
-											>
+										<Box display='flex' onClick={() => router.push('/account?scope=setting')}>
+											<Image src={'/svg/setting.svg'} width={19} height={19} alt={''} />
+											<Typography className='title-main-gray' sx={{ marginLeft: '10px' }}>
 												{' '}
 												Настройки{' '}
 											</Typography>
@@ -189,20 +188,9 @@ const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
 									</Link>
 									<Box style={{ marginTop: '15px' }}>
 										<Link href={'/account?scope=business'}>
-											<Box
-												display='flex'
-												onClick={() => router.push('/account?scope=business')}
-											>
-												<Image
-													src={'/svg/side-menu/corp-acc-off.svg'}
-													width={18}
-													height={18}
-													alt={''}
-												/>
-												<Typography
-													className='title-main-gray'
-													sx={{ marginLeft: '10px' }}
-												>
+											<Box display='flex' onClick={() => router.push('/account?scope=business')}>
+												<Image src={'/svg/side-menu/corp-acc-off.svg'} width={18} height={18} alt={''} />
+												<Typography className='title-main-gray' sx={{ marginLeft: '10px' }}>
 													{' '}
 													Компаниям{' '}
 												</Typography>
@@ -213,20 +201,9 @@ const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
 									{account_type === 'regular' && (
 										<Box style={{ marginTop: '15px' }}>
 											<Link href={'/account?scope=referral'}>
-												<Box
-													display='flex'
-													onClick={() => router.push('/account?scope=referral')}
-												>
-													<Image
-														src={'/svg/side-menu/referral.svg'}
-														width={18}
-														height={18}
-														alt={''}
-													/>
-													<Typography
-														className='title-main-gray'
-														sx={{ marginLeft: '10px' }}
-													>
+												<Box display='flex' onClick={() => router.push('/account?scope=referral')}>
+													<Image src={'/svg/side-menu/referral.svg'} width={18} height={18} alt={''} />
+													<Typography className='title-main-gray' sx={{ marginLeft: '10px' }}>
 														{' '}
 														Рефералам{' '}
 													</Typography>
@@ -33,11 +33,13 @@ export type ResponseAllInfo = {
 	}
 	payment_plan: {
 		uid: string
+		is_recurring: boolean
 		plan: {
 			uid: string
 			price: string
 			individual: boolean
 			tokens_per_plan: string
+			is_corporate: boolean
 			title: string
 			duration: string
 			accessed_models: string[] | null
@@ -74,10 +76,12 @@ const initialState: UserState & ResponseAllInfo = {
 	account_type: 'regular',
 	payment_plan: {
 		uid: '',
+		is_recurring: false,
 		plan: {
 			uid: '',
 			price: '',
 			tokens_per_plan: '',
+			is_corporate: false,
 			individual: false,
 			duration: '',
 			title: '',
@@ -73,3 +73,8 @@
 .generationIcon {
 	margin-top: 3px;
 }
+
+.settingsIcon {
+	flex-shrink: 0;
+	cursor: pointer;
+}
@@ -2,14 +2,11 @@ import React, { FC, useCallback, useEffect, useRef } from 'react'
 import { TextFieldProps } from '@mui/material/TextField/TextField'
 
 import classes from './model-input.module.scss'
+import { PredictPrice } from './predict-price'
 
 import { LoadImage } from '#/app/components/input_components/load_image'
 import { SendBtn } from '#/app/components/input_components/send_button'
 import { IModelInputs } from '#/shared/api/models/models'
-import { TooltipCustom } from '#/shared'
-import { SvgIcon } from '#/shared/ui/svg'
-import { Typography } from '@mui/material'
-import { ThreePOutlined } from '@mui/icons-material'
 
 function buildTypeVersionsMap(inputs: IModelInputs[]): Record<string, string[]> {
 	const byType = new Map<string, string[][]>()
@@ -96,7 +93,7 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 			if (type === 'text') return false
 			return Array.isArray(versions) && (versions.length === 0 || versions.includes(currentVersion))
 		})
-	
+
 	// Используем внешнее значение если оно передано, иначе внутреннее
 	const value = externalValue !== undefined ? externalValue : internalValue
 	const setValue = externalOnChange ? (val: string) => externalOnChange(val) : setInternalValue
@@ -220,16 +217,7 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 			></textarea>
 
 			<div className={classes.endAdornment}>
-				{typeof predictedPrice === 'string' && (
-					<TooltipCustom title='Стоимость генерации' placement='top'>
-						<div className={classes.predictPrice}>
-							<SvgIcon className={classes.generationIcon} url='/svg/chatgpt/generation-icon.svg' width={12} height={16} />
-							<Typography fontSize={14} fontWeight={600} color='#7F7DF3'>
-								{Math.ceil(Number(predictedPrice))}
-								</Typography>
-						</div>
-					</TooltipCustom>
-				)}
+				<PredictPrice isChatBot={styles === 'chats'} token={Number(predictedPrice) } />
 				{hasAttachInput && (
 						<>
 							{!blocked && (
@@ -0,0 +1,41 @@
+.predictPrice {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 4px 14px;
+	border-radius: 16px;
+	margin-right: 8px;
+	gap: 4px;
+	color: #7f7df3;
+	background-color: #7f7df31a;
+
+	:global(svg path) {
+		fill: currentColor;
+	}
+
+	&--low {
+		color: #10b981;
+		background-color: rgba(16, 185, 129, 0.12);
+	}
+
+	&--mid {
+		color: #f59e0b;
+		background-color: rgba(245, 158, 11, 0.12);
+	}
+
+	&--high {
+		color: #f15179;
+		background-color: rgba(241, 81, 121, 0.12);
+	}
+}
+
+.generationIcon {
+	margin-top: 3px;
+	color: inherit;
+}
+
+.value {
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 1;
+}
@@ -0,0 +1,31 @@
+import { TooltipCustom } from '#/shared'
+import { SvgIcon } from '#/shared/ui/svg'
+
+import classes from './predict-price.module.scss'
+
+const HIGH_COST_TOOLTIP =
+	'Генерация может выйти очень дорогой, т.к вы ввели очень большой запрос или в чате накопились большие сообщения. Если хотите снизить стоимость генерации, создайте новый чат или уменьшите количество запросов'
+
+function tierModifierClass(token: number): string {
+	if (token < 75) return classes['predictPrice--low']
+	if (token < 150) return classes['predictPrice--mid']
+	return classes['predictPrice--high']
+}
+
+export function PredictPrice({ token, isChatBot = false }: { token: number; isChatBot?: boolean }) {
+	const modifier = isChatBot ? tierModifierClass(token) : ''
+	const isHighCost = isChatBot && token >= 150
+
+	return (
+		<TooltipCustom
+			title={isHighCost ? HIGH_COST_TOOLTIP : 'Стоимость генерации'}
+			placement='top'
+			maxWidth={isHighCost ? 'min(360px, 92vw)' : undefined}
+		>
+			<div className={[classes.predictPrice, modifier].filter(Boolean).join(' ')}>
+				<SvgIcon className={classes.generationIcon} url='/svg/chatgpt/generation-icon.svg' width={12} height={16} />
+				<span className={classes.value}>{token}</span>
+			</div>
+		</TooltipCustom>
+	)
+}
@@ -73,24 +73,22 @@ export const accountApi = {
 		password_1: string,
 		password_2: string,
 		current_password: string
-	): Promise<{status:number,data:{detail:string}}>{
-		
-			const response= await axios.put(
-				getApiUrl() + '/auth/reset-pass',
-				{
-					password_1,
-					password_2,
-					current_password,
+	): Promise<{ status: number; data: { detail: string } }> {
+		const response = await axios.put(
+			getApiUrl() + '/auth/reset-pass',
+			{
+				password_1,
+				password_2,
+				current_password,
+			},
+			{
+				headers: {
+					Authorization: `Bearer ${token}`,
 				},
-				{
-					headers: {
-						Authorization: `Bearer ${token}`,
-					},
-				}
-			)
-
-			return response
-		
+			}
+		)
+
+		return response
 	},
 
 	async getApiKeys(token: string | null): Promise<AxiosResponse> {
@@ -146,4 +144,16 @@ export const accountApi = {
 			return null
 		}
 	},
+
+	revokeRecurringPayment(token: string) {
+		return axios.post(
+			getApiUrl() + '/payments/revoke-recurring-payment',
+			{},
+			{
+				headers: {
+					Authorization: `Bearer ${token}`,
+				},
+			}
+		)
+	},
 }
@@ -1,4 +1,4 @@
 export const baseColor = '#7F7DF3'
-export const errorColor = '#F15179;'
+export const errorColor = '#F15179'
 export const colorLight = '#5E5E5E'
 export const colorDark = '#A6A5A5'
@@ -22,15 +22,22 @@ export function formatAndSortDates(inputArray: { date: string; value: number }[]
 	})
 }
 
-export function formatDate(
-  date: string | number | Date,
-  options: Intl.DateTimeFormatOptions,
-  lang?: string
-) {
-  if (typeof date !== "object") {
-    date = new Date(typeof date === "number" ? date : Date.parse(date))
-  }
-
-  const formatter = Intl.DateTimeFormat("ru", options)
-  return formatter.format(date)
+export function formatDate(date: string | number | Date, options: Intl.DateTimeFormatOptions, lang?: string) {
+	if (typeof date !== 'object') {
+		date = new Date(typeof date === 'number' ? date : Date.parse(date))
+	}
+
+	const formatter = Intl.DateTimeFormat('ru', options)
+	return formatter.format(date)
 }
+
+export function getDaysLeft(iso: string | null | undefined): number | null {
+	if (!iso?.trim()) return null
+	const target = new Date(iso)
+	if (Number.isNaN(target.getTime())) return null
+
+	const now = new Date()
+	const msDiff = target.getTime() - now.getTime()
+	return Math.max(0, Math.ceil(msDiff / (1000 * 60 * 60 * 24)))
+}
+
@@ -24,3 +24,4 @@
 		right: 25px;
 	}
 }
+
@@ -1,6 +1,7 @@
 import { FC, ReactNode } from 'react'
 import { Box } from '@mui/material'
 import Dialog from '@mui/material/Dialog'
+import type { SxProps, Theme } from '@mui/material/styles'
 import Image from 'next/image'
 
 import styles from './modal.module.scss'
@@ -8,21 +9,29 @@ export interface ModalProps {
 	open: boolean
 	onClose: (e?: any) => void
 	children?: ReactNode
+	/** Доп. стили для Paper — например minWidth на десктопе */
+	paperSx?: SxProps<Theme>
+	/** Растянуть диалог по ширине (по умолчанию фиксированная ширина 408px у корневого sx) */
+	wide?: boolean
 }
-export const Modal: FC<ModalProps> = ({ open, onClose, children }) => {
+export const Modal: FC<ModalProps> = ({ open, onClose, children, paperSx, wide = false }) => {
 	return (
 		<Dialog
 			className={styles.modal}
-			sx={{
-				width: '408px',
-				margin: '0 auto',
-				textAlign: 'center',
-			}}
+			sx={
+				wide
+					? { margin: '0 auto', textAlign: 'center', width: '100%', maxWidth: '100vw' }
+					: {
+							width: '408px',
+							margin: '0 auto',
+							textAlign: 'center',
+					  }
+			}
 			PaperProps={{
 				style: {
 					borderRadius: 20,
-					backgroundColor: '#373737',
 				},
+				sx: [{ backgroundColor: '#373737' }, ...(paperSx ? [paperSx] : [])] as SxProps<Theme>,
 			}}
 			open={open}
 			onClose={onClose}
@@ -0,0 +1,2 @@
+export { SubscriptionDaysBadge } from './subscription-days-badge'
+
@@ -0,0 +1,74 @@
+.badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 14px;
+	border-radius: 16px;
+	background: rgba(130, 128, 255, 0.16);
+	color: #8280ff;
+	cursor: pointer;
+	border: none;
+	outline: none;
+	font: inherit;
+
+	&_expiring {
+		background: #B01E1E26;
+		color: #B01E1E;
+	}
+
+	&:disabled {
+		cursor: default;
+	}
+}
+
+.badge:hover {
+	background: rgba(130, 128, 255, 0.16);
+	color: #8280ff;
+}
+
+.icon {
+	font-size: 24px !important;
+}
+
+.text {
+	font-size: 15px;
+	font-weight: 600;
+	white-space: nowrap;
+	position: relative;
+
+	&_highlight {
+		font-weight: 700;
+	}
+}
+
+.textDefault {
+	opacity: 1;
+}
+
+.textHover {
+	position: absolute;
+	right: 50%;
+	top: 0;
+	opacity: 0;
+	pointer-events: none;
+	transform: translateX(50%);
+}
+
+.badge_expiring:hover .textDefault {
+	opacity: 0;
+}
+
+.badge_expiring:hover .textHover {
+	opacity: 1;
+}
+
+@media (max-width: 900px) {
+	.badge {
+		padding: 6px 10px;
+	}
+
+	.text {
+		font-size: 14px;
+	}
+}
+
@@ -0,0 +1,85 @@
+import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined'
+import Router from 'next/router'
+import { useSession } from 'next-auth/react'
+
+import { useAppSelector } from '#/app/store/store'
+import { accountApi } from '#/shared/api/account-endpoints'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+
+import styles from './subscription-days-badge.module.scss'
+
+interface SubscriptionDaysBadgeProps {
+	days: number
+}
+
+function declineDays(days: number): string {
+	const abs = Math.abs(days) % 100
+	const last = abs % 10
+
+	if (abs > 10 && abs < 20) return 'дней'
+	if (last > 1 && last < 5) return 'дня'
+	if (last === 1) return 'день'
+	return 'дней'
+}
+
+export const SubscriptionDaysBadge = ({ days }: SubscriptionDaysBadgeProps) => {
+	const normalizedDays = Number.isFinite(days) ? Math.max(0, Math.trunc(days)) : 0
+	const isExpiring = normalizedDays <= 3
+	const currentPlanUid = useAppSelector((state) => state.user.payment_plan.plan.uid)
+	const { data } = useSession()
+	const { showMessage } = useShowDataStore()
+
+	const label =
+		normalizedDays <= 1
+			? normalizedDays === 0
+				? 'Закончится сегодня'
+				: 'Закончится завтра'
+			: `Закончится через ${normalizedDays} ${declineDays(normalizedDays)}`
+
+	const handleRenew = async () => {
+		if (!data?.access || !currentPlanUid) {
+			showMessage('Произошла ошибка при оплате')
+			return
+		}
+		try {
+			const urlForPay = await accountApi.payProduct(data.access, currentPlanUid)
+			if (urlForPay) {
+				await Router.push(urlForPay)
+			}
+		} catch (err: any) {
+			const detail = err?.response?.data?.detail
+			const message = detail ?? 'Произошла ошибка при оплате'
+			showMessage(message)
+		}
+	}
+
+	return (
+		<button
+			type="button"
+			className={[
+				styles.badge,
+				isExpiring ? styles.badge_expiring : '',
+			].filter(Boolean).join(' ')}
+			onClick={isExpiring ? handleRenew : undefined}
+			disabled={!isExpiring}
+		>
+			<AccessTimeOutlinedIcon className={styles.icon} />
+			<span className={styles.text}>
+				<span className={styles.textDefault}>
+					{normalizedDays <= 1 ? (
+						label
+					) : (
+						<>
+							Закончится через{' '}
+							<b className={styles.text_highlight}>
+								{normalizedDays} {declineDays(normalizedDays)}
+							</b>
+						</>
+					)}
+				</span>
+				{isExpiring ? <span className={styles.textHover}>Продлить</span> : null}
+			</span>
+		</button>
+	)
+}
+
@@ -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>
+	)
+}
@@ -1,8 +1,10 @@
 import { Box, LinearProgress, linearProgressClasses, Stack, styled, Typography } from '@mui/material'
 
 import { commaSeparated } from '#/shared'
+import { formatDate, getDaysLeft } from '#/shared/lib/helpers/date-helper'
 import { formatPlanPrice } from '#/shared/lib/helpers/format-plan-price'
 import { declineToken } from '#/shared/lib/helpers/get-token'
+import {SubscriptionDaysBadge} from '#/shared/ui/subscription-days-badge'
 
 import styles from './subscription.module.scss'
 
@@ -23,28 +25,57 @@ interface CurrentPlanAndBalanceProps {
 	planTokenLimit: string
 	planPrice: string
 	isIndividual: boolean
+	isRecurring: boolean
+	nextPaymentAt?: string | null
 }
 
-export const CurrentPlanAndBalance = ({ balance, planTokenLimit, planPrice, isIndividual }: CurrentPlanAndBalanceProps) => {
+function formatNextPaymentLabel(iso: string | null | undefined): string | null {
+	if (!iso?.trim()) return null
+	const d = new Date(iso)
+	if (Number.isNaN(d.getTime())) return null
+	return formatDate(d, { day: '2-digit', month: '2-digit', year: 'numeric' })
+}
+
+export const CurrentPlanAndBalance = ({
+	balance,
+	planTokenLimit,
+	planPrice,
+	isIndividual,
+	isRecurring,
+	nextPaymentAt,
+}: CurrentPlanAndBalanceProps) => {
 	const formatterdPlanPrice = formatPlanPrice(planPrice, isIndividual)
+	const isDemoPlan = !formatterdPlanPrice.includes('₽')
+	const nextPaymentFormatted = formatNextPaymentLabel(nextPaymentAt)
+	const daysLeft = getDaysLeft(nextPaymentAt)
+	const nextPaymentLabel = nextPaymentFormatted
+		? `${isRecurring ? 'Следующее списание' : 'Дата окончания'}: ${nextPaymentFormatted}`
+		: 'Без даты окончания'
 	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 direction='row' justifyContent='space-between' alignItems='flex-start' sx={{ marginBottom: '15px' }}>
+					<Typography
+						className={styles.subTitle}
+					>
+						Моя подписка
+					</Typography>
+					{daysLeft !== null ? <SubscriptionDaysBadge days={daysLeft} /> : null}
+				</Stack>
 				<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>
+						<Typography className={styles.subTitle}>
+							{isDemoPlan ? (isIndividual ? 'Индивидуальная' : 'Демо доступ') : `${formatterdPlanPrice} / мес`}
+						</Typography>
+						<Typography className={styles.subTitle} sx={{ textAlign: 'right' }}>
+							{nextPaymentLabel}
+						</Typography>
 					</Stack>
 				</Stack>
 			</Box>
@@ -18,7 +18,7 @@ export const FeaturesSection = ({ currentTokenLimitUID, onCurrentTokenLimitUIDCh
 	return (
 		<Box width='100%' textAlign='start' marginTop={'50px'}>
 			<Stack direction={'row'} justifyContent={'start'} alignItems={'center'} className={styles.selectContainer}>
-				<Typography className={styles.title}></Typography>
+				<Typography className={styles.title}>Возможности с подпиской</Typography>
 				<Select
 					value={currentTokenLimitUID}
 					onChange={(e: SelectChangeEvent<string>) => onCurrentTokenLimitUIDChange(e.target.value)}
@@ -45,10 +45,8 @@
 		cursor: pointer;
 
 		&.tarif_btn_current {
-			background-color: transparent;
-			border: 3px solid #FFFFFF;
+			background-color: #8280FF;
 			color: #FFFFFF;
-			cursor: default;
 		}
 	}
 
@@ -3,10 +3,10 @@ import { Box } from '@mui/material'
 import Router from 'next/router'
 import { useSession } from 'next-auth/react'
 
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 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'
@@ -15,9 +15,10 @@ interface IOfferProps extends IOffer {
 	device: 'desktop' | 'mobile'
 	isCurrentSubscription?: boolean
 	index?: number
+	currentPlanTokens?: number
 }
 
-const Offer: React.FC<IOfferProps> = ({ uid, tokens_per_plan, price, grouped_features, isCurrentSubscription, index }) => {
+const Offer: React.FC<IOfferProps> = ({ uid, tokens_per_plan, price, grouped_features, isCurrentSubscription, index, currentPlanTokens = 0 }) => {
 	const { data } = useSession()
 	const { showMessage } = useShowDataStore()
 
@@ -26,6 +27,8 @@ const Offer: React.FC<IOfferProps> = ({ uid, tokens_per_plan, price, grouped_fea
 		'Чат-боты': 'страниц текста',
 		Видео: 'видео',
 		Аудио: 'аудиозаписей',
+		Музыка: 'минут',
+		Голос: 'минут',
 	}
 
 	const formatFeatures = (groupedFeatures: IFeatures[] | undefined): string[] => {
@@ -53,16 +56,22 @@ const Offer: React.FC<IOfferProps> = ({ uid, tokens_per_plan, price, grouped_fea
 
 	const formattedFeatures = formatFeatures(grouped_features)
 
-	const pay = async (uid: string) => {
+
+	const pay = async (planUid: string) => {
 		try {
-			const urlForPay = await accountApi.payProduct(data!.access, uid)
-			if (urlForPay) await Router.push(urlForPay)
-		} catch (err) {
-			const message = err instanceof Error ? err.message : 'Ошибка оплаты'
+			const urlForPay = await accountApi.payProduct(data!.access, planUid)
+			urlForPay ? await Router.push(urlForPay) : null
+		} catch (err: any) {
+			const detail = err?.response?.data?.detail
+			const message = detail ?? 'Произошла ошибка при оплате';
 			showMessage(message)
 		}
 	}
 
+	const handlePayClick = () => {
+			pay(uid)
+	}
+
 	return (
 		<Box className={`${styles.tarif} ${index === 1 ? styles.tarif_bg_1 : ''} ${index === 2 ? styles.tarif_bg_2 : ''}`}>
 			<Box>
@@ -88,10 +97,10 @@ const Offer: React.FC<IOfferProps> = ({ uid, tokens_per_plan, price, grouped_fea
 					className={`${styles.tarif_btn} ${isCurrentSubscription ? styles.tarif_btn_current : ''}`}
 					onClick={(e) => {
 						e.stopPropagation()
-						pay(uid)
+						handlePayClick()
 					}}
 				>
-					Оплатить
+					{isCurrentSubscription ? 'Восстановить токены' : 'Оплатить'}
 				</Box>
 			</Box>
 		</Box>
@@ -8,12 +8,14 @@ import styles from './subscription.module.scss'
 
 interface PlansSectionProps {
     offers: IOffer[] | null
-    currentOfferUID:string
+    currentOfferUID: string
+    currentPlanTokens: number
 }
 
 export const PlansSection = ({
     offers,
-    currentOfferUID
+    currentOfferUID,
+    currentPlanTokens,
 }: PlansSectionProps) => {
 
     return (
@@ -24,9 +26,10 @@ export const PlansSection = ({
                         <Offer
                             {...offer}
                             device={'desktop'}
-                            isCurrentSubscription={false}
+                            isCurrentSubscription={offer.uid === currentOfferUID}
                             index={idx}
                             key={offer.uid}
+                            currentPlanTokens={currentPlanTokens}
                         />
                     )
                 })}
@@ -0,0 +1,182 @@
+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 { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { balanceSelector } from '#/shared/lib/selectors'
+
+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 isDemoPlan = Number(planPrice) <= 0
+
+	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 />
+
+			{!isDemoPlan && !isIndividual ? (
+				<Box className={styles.cancelSubscriptionButtonWrapper}>
+					{!isRecurring ? (
+						<TooltipCustom
+							title={'Подписка уже была отменена'}
+							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>
+			) : null}
+
+			<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>
+	)
+}
@@ -237,88 +237,121 @@
 	margin-top: 50px;
 }
 
+/* обёртка для Tooltip + disabled Button (MUI) */
+.cancelSubscriptionButtonTooltipTarget {
+	display: inline-flex;
+	width: 100%;
+}
+
 .cancelSubscriptionButton {
-	background-color: #b01e1e1a;
-	padding: 15px 0;
+	background-color: #B01E1E1A;
+	padding: 15px 24px;
 	font-weight: 600;
 	font-style: Semi Bold;
 	font-size: 20px;
 	line-height: 100%;
-	letter-spacing: -1%;
-	text-align: right;
+	text-align: center;
 	vertical-align: middle;
 	color: #b01e1e;
 	text-transform: none;
-	border-radius: 0;
+	border-radius: 12px;
+	border: 1px solid #b01e1e;
+	box-shadow: none;
 
 	&:hover {
-		background-color: #b01e1e1a;
+		background-color: transparent;
+		border-color: #b01e1e;
+		border: 1px solid #b01e1e;
+		color: #b01e1e;
+		box-shadow: none;
+	}
+
+	// поверх стилей MuiButton-outlined
+	&:global(.MuiButton-outlined) {
+		color: #b01e1e;
+		border-color: #b01e1e;
+		background-color: #B01E1E1A;
+
+		&:hover {
+			color: #b01e1e;
+			border-color: #b01e1e;
+			background-color: transparent;
+		}
+
+		&:global(.Mui-disabled) {
+			color: rgba(176, 30, 30, 0.42);
+			border-color: rgba(176, 30, 30, 0.28);
+			background-color: #B01E1E1A;
+			cursor: not-allowed;
+		}
 	}
 }
 
+.cancelSubscriptionModalContainer {
+	width: 100%;
+}
+
 .cancelSubscriptionModalTitle {
-	font-size: 30px;
+	color: var(--new-ui-text-color);
+	font-size: 20px;
+	font-style: normal;
 	font-weight: 600;
-	line-height: 100%;
-	letter-spacing: -0.02em;
-	vertical-align: bottom;
-	margin-bottom: 20px;
+	line-height: 120%;
+	margin-bottom: 16px;
 	text-align: left;
 }
 
 .cancelSubscriptionModalText {
-	font-size: 15px;
-	font-weight: 700;
-	line-height: 150%;
-	letter-spacing: -0.01em;
-	vertical-align: bottom;
-	color: #868686;
-	margin-bottom: 30px;
+	color: rgba(255, 255, 255, 0.8);
+	font-size: 16px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 140%;
+	margin-bottom: 16px;
 	text-align: left;
+	width: 100%;
+	margin-top: 0;
+}
+
+.cancelSubscriptionModalTextEmphasis {
+	font-weight: 800;
+	font-size: inherit;
+	line-height: inherit;
+	text-wrap: nowrap;
+	color: inherit;
 }
 
 .cancelSubscriptionModalButtons {
 	display: flex;
-	gap: 8px;
-	justify-content: flex-start;
-	margin-top: 20px;
+	gap: 16px;
+	margin-top: 16px;
+
+	@media (max-width: 600px) {
+		flex-direction: column-reverse;
+		gap: 8px;
+	}
 }
 
 .cancelSubscriptionButtonKeep {
-	font-weight: 500;
-	font-style: Medium;
-	font-size: 14px;
-	line-height: 140%;
-	letter-spacing: -0.01em;
-	vertical-align: middle;
-	color: #ffffff;
-	background-color: #8280ff;
-	border: none;
-	border-radius: 12px;
-	padding: 15px 25px;
-	text-transform: none;
+	background-color: #7f7df3 !important;
+	color: white !important;
+	border-radius: 8px;
+	text-transform: none !important;
 
 	&:hover {
-		background-color: #6d6ae6;
+		background-color: #6b69e0 !important;
 	}
 }
 
 .cancelSubscriptionButtonCancel {
-	font-weight: 500;
-	font-style: Medium;
-	font-size: 14px;
-	line-height: 140%;
-	letter-spacing: -0.01em;
-	vertical-align: middle;
-	color: #ffffff;
-	background-color: #5d5a5a;
-	border: none;
-	border-radius: 12px;
-	padding: 15px 25px;
-	text-transform: none;
+	border-color: rgba(255, 255, 255, 0.3) !important;
+	color: white !important;
+	border-radius: 8px;
+	text-transform: none !important;
 
 	&:hover {
-		background-color: #4a4747;
+		border-color: rgba(255, 255, 255, 0.5) !important;
+		background-color: rgba(255, 255, 255, 0.1) !important;
 	}
 }
 
@@ -1,85 +1,19 @@
-import { useEffect, useState } from 'react'
-import { Box, Typography } from '@mui/material'
-import { useSession } from 'next-auth/react'
-
-import { useAppSelector } from '#/app/store/store'
 import { NextPageWithLayout } from '#/pages/_app'
-import { commaSeparated } from '#/shared'
-import { accountApi } from '#/shared/api/account-endpoints'
-import { balanceSelector } from '#/shared/lib/selectors'
-
-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 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>
-
-			<CurrentPlanAndBalance balance={balance} planPrice={planPrice} planTokenLimit={planTokenLimit} isIndividual={isIndividual} />
-
-			<PlansSection offers={offers} currentOfferUID={paymentPlanUid} />
-
-			<FeaturesSection
-				tokenLimits={tokenLimits}
-				currentTokenLimitUID={currentTokenLimitUID}
-				onCurrentTokenLimitUIDChange={setCurrentTokenLimitUID}
-				features={currentFeatures}
-			/>
+	const recurrentPaymentsEnabled = useFeatureFlag(RECURRENT_PAYMENTS_FLAG)
 
-			<FaqSection />
+	if (recurrentPaymentsEnabled) {
+		return <SubscriptionRecurrentPage />
+	}
 
-			{/* ПОКА НЕ ИСПОЛЬЗУЙЕТСЯ. НЕ ВЫПИЛИВАТЬ!! */}
-			{/* <CancelSubscriptionButton /> */}
-		</Box>
-	)
+	return <SubscriptionLegacyPage />
 }
 
 export default SubscriptionPage
@@ -228,7 +228,7 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images,
 
 											<TooltipCustom
 												placement='right'
-												title={message.content.length > 30 ? message.content : ''}
+												title={message.content.length > (device === 'mobile' ? 35 : 30) ? message.content : ''}
 											>
 												<Typography
 													onClick={() => message.content.length > 0 && onPromptClick?.(message.content)}
@@ -243,9 +243,9 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images,
 													{!loaded
 														? ''
 														: message.content.length > 0
-														? message?.content.replaceAll('"', '').slice(0, 30)
+														? message?.content.replaceAll('"', '').slice(0, device === 'mobile' ? 35 : 30)
 														: 'описание отсутствует'}
-													{message?.content.length > 30 && loaded && '...'}
+													{message?.content.length > (device === 'mobile' ? 35 : 30) && loaded && '...'}
 												</Typography>
 											</TooltipCustom>
 										</Box>
@@ -98,7 +98,7 @@ export const Referral = ({ device }: IProps) => {
 								direction={'row'}
 								alignItems={'center'}
 							>
-								{device === 'mobile' ? url.slice(0, 20) + '...' : url.slice(0, 40) + '...'}
+								{device === 'mobile' ? url.slice(0, 35) + '...' : url.slice(0, 40) + '...'}
 								<Image
 									src={'/svg/copy.svg'}
 									alt={''}