@@ -9,11 +9,12 @@ import { signOut } from 'next-auth/react'
 
 import styles from '#/app/layout/styles/styles.module.css'
 import { useAppSelector } from '#/app/store/store'
-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 { NavigationSearch } from '#/widgets/navigation-search'
+import { getDaysLeft } from '#/shared/lib/helpers/date-helper'
+import { SubscriptionDaysBadge } from '#/shared/ui/subscription-days-badge/subscription-days-badge'
 
 interface InfoBarProps extends IProps {}
 
@@ -39,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)
 
@@ -80,6 +83,7 @@ const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
 						marginRight: '80px',
 					}}
 				>
+					{daysLeft != null && daysLeft <= 3 ? <SubscriptionDaysBadge days={daysLeft} /> : null}
 					<Popover
 						sx={{ marginTop: '6px' }}
 						PaperProps={{
@@ -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: '',
@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+
+import { getModalById, LOW_BALANCE_OFFER } from '#/features/modals'
+
+import { LowBalanceOfferPlate } from './low-balance-offer-plate'
+
+
+export const LowBalanceOfferOnStart = () => {
+	const modal = getModalById(LOW_BALANCE_OFFER)
+
+	useEffect(() => {
+		modal.setState(true)
+	}, [])
+
+	return <LowBalanceOfferPlate />
+}
@@ -0,0 +1,47 @@
+.container {
+	width: 100%;
+	max-width: 570px;
+	padding: 32px 0 0 0;
+	display: flex;
+	flex-direction: column;
+	background-color: #151518;
+	align-items: flex-start;
+}
+
+.text {
+	color: #8B8B8B;
+	font-size: 17px;
+	line-height: 1.5;
+	margin: 16px 0 24px;
+}
+
+.text_heading {
+	font-weight: 800;
+	font-size: 48px;
+	line-height: 42px;
+}
+
+.offersWrapper {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 20px;
+	width: 100%;
+	margin-bottom: 24px;
+	border-radius: 30px;
+	box-shadow:
+		0 0 20px rgba(100, 180, 255, 0.12),
+		0 0 40px rgba(80, 150, 255, 0.08),
+}
+
+.link {
+	font-weight: 600;
+	font-style: SemiBold;
+	font-size: 16px;
+	align-self: center;
+
+	p {
+		color:#80808E;
+	}
+}
@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useSession } from 'next-auth/react'
+
+import { LOW_BALANCE_OFFER, getModalById, PlateTemplate } from '#/features/modals'
+import { c } from '#/shared'
+import { accountApi } from '#/shared/api/account-endpoints'
+import { getDeviceType } from '#/shared/lib/helpers'
+import { IOffer } from '#/views/subscription'
+import Offer from '#/views/subscription/ui/offer'
+
+import styles from './low-balance-offer-plate.module.scss'
+
+export const LowBalanceOfferPlate = () => {
+	const modal = getModalById(LOW_BALANCE_OFFER)
+	const { data } = useSession()
+	const [offers, setOffers] = useState<IOffer[] | null>(null)
+
+	useEffect(() => {
+		if (data?.access) {
+			accountApi.getPaymentsPlans(data.access).then((res) => {
+				if (res) setOffers(res)
+			})
+		}
+	}, [data?.access])
+
+	const handleClose = () => {
+		modal.setState(false)
+	}
+
+	const offerIndex = modal.getStoreProperty<number>('offerIndex') ?? 1
+	const offerUid = modal.getStoreProperty<string>('offerUid');
+	const notEnoughtTokens = modal.getStoreProperty<boolean>('notEnoughtTokens')
+	
+	const offerToShow = offerUid
+		? offers?.find((o) => o.uid === offerUid)
+		: offerIndex
+			? offers?.[offerIndex]
+			: offers?.[1]
+
+	return (
+		<PlateTemplate id={LOW_BALANCE_OFFER}>
+			<div className={c(styles.container)} onClick={(e) => e.stopPropagation()}>
+				{notEnoughtTokens ? (
+					<p className={styles.text_heading}>У вас не осталось<br />токенов...</p>
+				) : (
+					<p className={styles.text_heading}>Осталось<br />мало токенов...</p>
+				)}
+				<p className={styles.text}>
+					Подобрали для Вас наиболее подходящий тариф,<br />
+					взгляните на преимущества!
+				</p>
+				<div className={styles.offersWrapper}>
+					{offers === null ? (
+						<p className={styles.text}>Загрузка тарифов...</p>
+					) : offerToShow ? (
+						<Offer
+							key={offerToShow.uid}
+							{...offerToShow}
+							device={getDeviceType()}
+							isCurrentSubscription={false}
+							index={offerIndex}
+						/>
+					) : null}
+				</div>
+				<Link className={styles.link} href='/subscription' onClick={handleClose}>
+					<p>Нет, я хочу посмотреть все тарифы</p>
+				</Link>
+			</div>
+		</PlateTemplate>
+	)
+}
@@ -0,0 +1,80 @@
+import { useEffect, useRef } from 'react'
+import axios from 'axios'
+
+import { useAppSelector } from '#/app/store/store'
+import { getModalById, LOW_BALANCE_OFFER } from '#/features/modals'
+import { LowBalanceOfferPlate } from './low-balance-offer-plate'
+import type { ResponseAllInfo } from '#/entities/user-account/model/user-type-slice'
+import { useFeatureFlag } from '#/shared/lib/hooks/use-feature-flag'
+import { balanceSelector } from '#/shared/lib/selectors'
+
+
+export const LowBalanceOfferTrigger = () => {
+	const balance = useAppSelector(balanceSelector)
+	const me = useAppSelector((state) => state.user) as ResponseAllInfo & { status: string; referral: string }
+	const isFewTokensModalEnabled = useFeatureFlag('few-tokens-modal-enabled')
+	const prevBalanceRef = useRef<number | null>(null)
+	const modal = getModalById(LOW_BALANCE_OFFER)
+
+	useEffect(() => {
+		const interceptorId = axios.interceptors.response.use(
+			(response) => {
+				if (response.status === 402 && response?.data?.detail?.includes('Баланс')) {
+					invokeLowBalanceOffer(true)
+				}
+				return response
+			},
+		)
+
+		return () => {
+			axios.interceptors.response.eject(interceptorId)
+		}
+	}, [])
+
+	useEffect(() => {
+
+		if (!isFewTokensModalEnabled) return
+
+		// Пропускаем первый рендер (начальная загрузка баланса)
+		if (prevBalanceRef.current === null) {
+			prevBalanceRef.current = balance
+			return
+		}
+
+		if (prevBalanceRef.current !== balance) {
+			prevBalanceRef.current = balance
+
+			if (typeof window !== 'undefined' && sessionStorage.getItem('low-balance-offer-shown') === 'true') {
+				return
+			}
+
+			invokeLowBalanceOffer();
+		}
+	}, [balance, me, modal, isFewTokensModalEnabled])
+
+	const invokeLowBalanceOffer = (notEnoughtTokens: boolean = false) => {
+		const tokensPerPlan = Number(me.payment_plan?.plan?.tokens_per_plan)
+			const isCorporate = me.payment_plan?.plan?.is_corporate
+			const isFreePlan = tokensPerPlan <= 10
+			const threshold = tokensPerPlan * 0.15
+			const freePlanThreshold = tokensPerPlan * 0.3
+
+			if (isCorporate) {
+				return
+			}
+
+			if (!isFreePlan && balance < threshold) {
+				modal.setState(true, { offerUid: me.payment_plan?.plan?.uid, me, notEnoughtTokens })
+				sessionStorage.setItem('low-balance-offer-shown', 'true')
+				return
+			}
+
+			if (isFreePlan && balance < freePlanThreshold) {
+				modal.setState(true, { offerIndex: 1, notEnoughtTokens })
+				sessionStorage.setItem('low-balance-offer-shown', 'true')
+				return
+			}
+	}
+
+	return  <LowBalanceOfferPlate />
+}
@@ -0,0 +1,3 @@
+export { LowBalanceOfferPlate } from './ui/low-balance-offer-plate'
+export { LowBalanceOfferOnStart } from './ui/low-balance-offer-on-start'
+export { LowBalanceOfferTrigger } from './ui/low-balance-offer-trigger'
@@ -3,5 +3,5 @@ export const RESEND_INVATION_PASSWORD = 'resend-invation-password'
 export const ERROR_REPORT = 'error-report'
 export const BUSINESS_ERROR_REPORT = 'business-error-report'
 export const LOW_BALANCE_OFFER = 'low-balance-offer'
-export const SUBSCRIPTION_CHANGE_NOTIFICATION = 'subscription-change-notification'
 export const PLATE_ADD_VOICE = 'plate-add-voice'
+export const SUBSCRIPTION_CHANGE_NOTIFICATION = 'subscription-change-notification'
@@ -13,11 +13,12 @@ function makeModalInstance(set: Set, get: Get, key: string) {
     store: {},
     setState(state, store) {
       const modals = get().modals;
+      const currentModal = modals[key];
 
-      store = store ?? {};
+      const newStore = store !== undefined ? store : (currentModal?.store ?? {});
 
       set(() => ({
-        modals: { ...modals, [this.id]: { ...modals[key], state, store } },
+        modals: { ...modals, [this.id]: { ...modals[key], state, store: newStore } },
       }));
     },
     setStoreProperty(key, value) {
@@ -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[][]>()
@@ -214,16 +211,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 token={Number(predictedPrice)} />
 				{typeVersions['image'] &&
 					(typeVersions['image'].length === 0 ||
 						typeVersions['image'].includes(currentVersion)) && (
@@ -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 }: { token: number }) {
+	const modifier = tierModifierClass(token)
+	const isHighCost = 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>
+	)
+}
@@ -0,0 +1,44 @@
+.container {
+	width: 100%;
+	max-width: 920px;
+	padding: 32px 0 12px 0px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.text_heading {
+	font-weight: 800;
+	font-size: 56px;
+	margin-bottom: 16px;
+}
+
+.text {
+	color: #ffffff;
+	font-size: 18px;
+	font-weight: 500;
+	margin: 0 0 24px;
+}
+
+.highlight {
+	color: #7F7DF3;
+}
+
+.buttons {
+	display: flex;
+	justify-content: flex-end;
+	flex-direction: row;
+	align-items: flex-end;
+	margin-top: 12px;
+	gap: 8px;
+}
+
+.buttonSecondary {
+	background-color: #2A2B30;
+	color: #ffffff;
+	border: none;
+	border-radius: 12px;
+	padding: 15px 25px;
+	cursor: pointer;
+	text-transform: none;
+}
@@ -0,0 +1,68 @@
+import React from 'react'
+
+import { getModalById, PlateTemplate, SUBSCRIPTION_CHANGE_NOTIFICATION } from '#/features/modals'
+import { c } from '#/shared'
+import { CommonButton } from '#/shared/ui/button'
+
+import styles from './subscription-change-notification-plate.module.scss'
+
+const formatTokens = (num: number) => num.toLocaleString('ru-RU')
+
+export const SubscriptionChangeNotificationPlate = () => {
+	const modal = getModalById(SUBSCRIPTION_CHANGE_NOTIFICATION)
+
+	const fromTokens = modal.getStoreProperty<number>('fromTokens') ?? 0
+	const toTokens = modal.getStoreProperty<number>('toTokens') ?? 0
+	const isUpgrade = modal.getStoreProperty<boolean>('isUpgrade') ?? false
+	const actionType = modal.getStoreProperty<'topup' | 'upgrade'>('actionType')
+	const tokensToAdd = modal.getStoreProperty<number>('tokensToAdd')
+	const purchasePrice = modal.getStoreProperty<number>('purchasePrice')
+
+	const handleClose = () => {
+		modal.setState(false)
+	}
+
+	const handleConfirm = () => {
+		modal.getStoreProperty<() => void>('onConfirm')?.()
+		modal.setState(false)
+	}
+
+	return (
+		<PlateTemplate id={SUBSCRIPTION_CHANGE_NOTIFICATION}>
+			<div className={c(styles.container)} onClick={(e) => e.stopPropagation()}>
+				<p className={styles.text_heading}>Смена подписки</p>
+
+				{(actionType === 'topup' || actionType === 'upgrade') && tokensToAdd != null && purchasePrice != null ? (
+					<p className={styles.text}>
+						Вы докупите <span className={styles.highlight}>{formatTokens(tokensToAdd)}</span> токенов за{' '}
+						<span className={styles.highlight}>{formatTokens(purchasePrice)}</span> руб. Продолжить?
+					</p>
+				) : !isUpgrade ? (
+					<p className={styles.text}>
+						Вы собираетесь перейти на подписку{' '}
+						<span className={styles.highlight}>{formatTokens(toTokens)} токенов</span>.
+						<br />
+						Обратите внимание! Все неиспользованные токены сгорят после перехода на подписку дешевле.
+						<br />
+						Вы можете использовать токены, а затем перейти на подписку дешевле.
+						<br />
+						Продолжить?
+					</p>
+				) : (
+					<p className={styles.text}>
+						Уведомляем вас, что при смене подписки часть токенов сверх лимита текущей подписки сгорит и не перенесётся на новый план. Продолжить?
+					</p>
+				)}
+
+				<div className={styles.buttons}>
+					<CommonButton variant="primary" onClick={handleConfirm}>
+						{fromTokens !== toTokens ? 'Оформить подписку' : 'Подтвердить'}
+					</CommonButton>
+					<CommonButton className={styles.buttonSecondary} onClick={handleClose}>
+						Отмена
+					</CommonButton>
+				</div>
+			</div>
+		</PlateTemplate>
+	)
+}
@@ -0,0 +1,5 @@
+import { SubscriptionChangeNotificationPlate } from './subscription-change-notification-plate'
+
+export const SubscriptionChangeNotificationTrigger = () => {
+	return <SubscriptionChangeNotificationPlate />
+}
@@ -0,0 +1,2 @@
+export { SubscriptionChangeNotificationPlate } from './ui/subscription-change-notification-plate'
+export { SubscriptionChangeNotificationTrigger } from './ui/subscription-change-notification-trigger'
@@ -11,6 +11,8 @@ import { FlagProvider } from '@unleash/proxy-client-react'
 
 import { store } from '#/app/store/store'
 import { Error } from '#/shared'
+import { LowBalanceOfferTrigger } from '#/features/low-balance-offer'
+import { SubscriptionChangeNotificationTrigger } from '#/features/subscription-change-notification'
 import { TourManager, getTourSteps, TourCard, setTourCompleted } from '#/features/nextstep-tour'
 import { pingFangFont } from '#/shared/lib/constants/font/font'
 import { getDeviceType } from '#/shared/lib/helpers'
@@ -74,7 +76,9 @@ function AppContent({
 										<Providers>
 											{Component.getLayout ? Component.getLayout(<Component {...pageProps} />) : <Component {...pageProps} />}
 											<Error />
-										</Providers> 
+											<SubscriptionChangeNotificationTrigger />
+											<LowBalanceOfferTrigger />
+										</Providers>
 									</ThemeProvider>
 								</TourManager>
 							</SessionProvider>
@@ -74,7 +74,7 @@ export const accountApi = {
 		password_2: string,
 		current_password: string
 	): Promise<{status:number,data:{detail:string}}>{
-		
+
 			const response= await axios.put(
 				getApiUrl() + '/auth/reset-pass',
 				{
@@ -90,7 +90,7 @@ export const accountApi = {
 			)
 
 			return response
-		
+
 	},
 
 	async getApiKeys(token: string | null): Promise<AxiosResponse> {
@@ -146,4 +146,12 @@ export const accountApi = {
 			return null
 		}
 	},
+
+	revokeRecurringPayment(token: string) {
+		return axios.post(getApiUrl() + '/payments/revoke-recurring-payment', {}, {
+			headers: {
+				Authorization: `Bearer ${token}`,
+			},
+		})
+	},
 }
@@ -22,7 +22,7 @@ export function setupAxios() {
 
 		const session = await getSession()
 
-		if (!session || session.error) {
+		if (session?.error) {
 			await signOut({ callbackUrl: '/login' })
 		}
 
@@ -1,4 +1,4 @@
 export const baseColor = '#7F7DF3'
-export const errorColor = '#F15179;'
+export const errorColor = '#F15179'
 export const colorLight = '#5E5E5E'
 export const colorDark = '#A6A5A5'
@@ -34,3 +34,13 @@ export function formatDate(
   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)))
+}
@@ -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,39 @@
+.badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 14px;
+	border-radius: 16px;
+	background: rgba(130, 128, 255, 0.16);
+	color: #8280ff;
+
+	&_expiring {
+		background: #B01E1E26;
+		color: #B01E1E;
+	}
+}
+
+.icon {
+	font-size: 24px !important;
+}
+
+.text {
+	font-size: 15px;
+	font-weight: 600;
+	white-space: nowrap;
+
+	&_highlight {
+		font-weight: 700;
+	}
+}
+
+@media (max-width: 900px) {
+	.badge {
+		padding: 6px 10px;
+	}
+
+	.text {
+		font-size: 14px;
+	}
+}
+
@@ -0,0 +1,32 @@
+import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined'
+
+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;
+
+	return (
+		<div className={isExpiring ? styles.badge_expiring + ' ' + styles.badge : styles.badge}>
+			<AccessTimeOutlinedIcon className={styles.icon} />
+			<span className={styles.text}>
+				Истечет через <b className={styles.text_highlight}>{normalizedDays} {declineDays(normalizedDays)}</b>
+			</span>
+		</div>
+	)
+}
+
@@ -25,6 +25,7 @@ export { Search } from './ui/search/search'
 export { SelectUI as Select } from './ui/select'
 export { Slider } from './ui/slider/slider'
 export { SwitchCustom } from './ui/switch/switch'
+export { SubscriptionDaysBadge } from './ui/subscription-days-badge'
 export { TooltipCustom } from './ui/tooltip/tooltip'
 export { TooltipFreeTokens } from './ui/tooltip-free-tokens'
 export { useModel } from '#/shared/api/models/endpoints'
@@ -1,62 +0,0 @@
-import { useState } from 'react'
-import { Box, Button, Typography } from '@mui/material'
-
-import { Modal } from '#/shared'
-
-import styles from './subscription.module.scss'
-
-export const CancelSubscriptionButton = () => {
-    const [isModalOpen, setIsModalOpen] = useState(false)
-
-    const handleOpenModal = () => {
-        setIsModalOpen(true)
-    }
-
-    const handleCloseModal = () => {
-        setIsModalOpen(false)
-    }
-
-    const handleCancelSubscription = () => {
-        // Здесь будет логика отмены подписки
-        handleCloseModal()
-    }
-
-    return (
-        <>
-            <Box className={styles.cancelSubscriptionButtonWrapper}>
-                <Button 
-                    className={styles.cancelSubscriptionButton}
-                    fullWidth
-                    onClick={handleOpenModal}
-                >
-                    Отменить подписку
-                </Button>
-            </Box>
-
-            <Modal open={isModalOpen} onClose={handleCloseModal}>
-                <Typography className={styles.cancelSubscriptionModalTitle}>
-                    Отмена подписки
-                </Typography>
-
-                <Typography className={styles.cancelSubscriptionModalText}>
-                    Внимание! Вы отменяете подписку на тариф 10 000 токенов. Следующее списание будет отменено, вы можете продолжать пользоваться возможностями тарифа до истечения его срока.
-                </Typography>
-
-                <Box className={styles.cancelSubscriptionModalButtons}>
-                    <Button
-                        onClick={handleCloseModal}
-                        className={styles.cancelSubscriptionButtonKeep}
-                    >
-                        Не отменять
-                    </Button>
-                    <Button
-                        onClick={handleCancelSubscription}
-                        className={styles.cancelSubscriptionButtonCancel}
-                    >
-                        Отменить
-                    </Button>
-                </Box>
-            </Modal>
-        </>
-    )
-}
\ No newline at end of file
@@ -1,6 +1,7 @@
 import { Box, LinearProgress, linearProgressClasses, Stack, styled, Typography } from '@mui/material'
 
-import { commaSeparated } from '#/shared'
+import { commaSeparated, SubscriptionDaysBadge } 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'
 
@@ -23,28 +24,55 @@ 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 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}
+						sx={{ visibility: !formatterdPlanPrice.includes('₽') ? 'hidden' : 'visible' }}
+					>
+						Мой тариф
+					</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}>{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)}
@@ -48,7 +48,6 @@
 			background-color: transparent;
 			border: 3px solid #FFFFFF;
 			color: #FFFFFF;
-			cursor: default;
 		}
 	}
 
@@ -3,10 +3,13 @@ import { Box } from '@mui/material'
 import Router from 'next/router'
 import { useSession } from 'next-auth/react'
 
+import { useAppSelector } from '#/app/store/store'
+import { balanceSelector } from '#/shared/lib/selectors'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 import LightningSvg from '#/assets/svg/lightning.svg?react'
+import { getModalById, SUBSCRIPTION_CHANGE_NOTIFICATION } from '#/features/modals'
 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,10 +18,14 @@ 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 isRecurring = useAppSelector((state) => state.user.payment_plan?.is_recurring) ?? false
+	const balance = useAppSelector(balanceSelector)
+	const currentPlanPrice = Number(useAppSelector((state) => state.user.payment_plan?.plan?.price) ?? 0)
 	const { showMessage } = useShowDataStore()
 
 	const unitMap: Record<string, string> = {
@@ -53,16 +60,101 @@ const Offer: React.FC<IOfferProps> = ({ uid, tokens_per_plan, price, grouped_fea
 
 	const formattedFeatures = formatFeatures(grouped_features)
 
-	const pay = async (uid: string) => {
+	const modal = getModalById(SUBSCRIPTION_CHANGE_NOTIFICATION)
+
+	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 isFreePlan = currentPlanTokens <= 10
+
+	const toTokens = Number(tokens_per_plan)
+	const isCurrentPlan = Boolean(isCurrentSubscription)
+	const isUpgrade = !isCurrentPlan && currentPlanTokens < toTokens
+	const isDowngrade = !isCurrentPlan && currentPlanTokens > toTokens
+	const balanceExceedsLimit = balance > currentPlanTokens
+	const isTopUpCurrentPlan = isCurrentPlan
+
+	const openPurchaseModal = (planUid: string, targetPlanTokens: number, actionType: 'topup' | 'upgrade') => {
+		const newPlanPrice = Number(price) || 0
+		const spentTokens = Math.max(currentPlanTokens - balance, 0)
+		const tokensToAdd = Math.max(targetPlanTokens - balance, 0)
+		const purchasePrice = Math.round(
+			newPlanPrice - currentPlanPrice + (currentPlanPrice / Math.max(currentPlanTokens, 1)) * spentTokens
+		)
+
+		modal.setState(true, {
+			fromTokens: currentPlanTokens,
+			toTokens: targetPlanTokens,
+			tokensToAdd,
+			purchasePrice: Math.max(purchasePrice, 0),
+			isUpgrade: actionType === 'upgrade',
+			actionType,
+			onConfirm: () => pay(planUid),
+		})
+	}
+
+	const handlePayClick = () => {
+
+		// Бесплатный план: не показываем модалку
+		if (isFreePlan) {
+			pay(uid)
+			return
+		}
+
+		// Не ежемесячный план: показываем модалку с уведомлением о том, что неиспользованные токены сгорят
+		if (!isRecurring) {
+			modal.setState(true, {
+				fromTokens: currentPlanTokens,
+				toTokens,
+				onConfirm: () => pay(uid),
+			})
+			return
+		}
+
+		// Апгрейд: модалка только если баланс превышает лимит текущего плана (токены сгорят)
+		if (isUpgrade && balanceExceedsLimit) {
+			openPurchaseModal(uid, toTokens, 'upgrade')
+			return
+		}
+
+		// Апгрейд без токенов сверх лимита: показываем сколько токенов докупит юзер
+		if (isUpgrade && !balanceExceedsLimit) {
+			openPurchaseModal(uid, toTokens, 'upgrade')
+			return
+		}
+
+		// Рекуррентный юзер докупает на текущем плане
+		if (isTopUpCurrentPlan) {
+			const tokensToAdd = toTokens - balance
+			if (tokensToAdd > 0) {
+				openPurchaseModal(uid, toTokens, 'topup')
+				return
+			}
+			pay(uid)
+			return
+		}
+
+		// Даунгрейд: модалка всегда (неиспользованные токены сгорят)
+		if (isDowngrade) {
+			modal.setState(true, {
+				fromTokens: currentPlanTokens,
+				toTokens,
+				onConfirm: () => pay(uid),
+			})
+			return
+		}
+
+		pay(uid)
+	}
+
 	return (
 		<Box className={`${styles.tarif} ${index === 1 ? styles.tarif_bg_1 : ''} ${index === 2 ? styles.tarif_bg_2 : ''}`}>
 			<Box>
@@ -88,10 +180,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}
                         />
                     )
                 })}
@@ -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,12 +1,14 @@
 import { useEffect, useState } from 'react'
-import { Box, Typography } from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
 import { useSession } from 'next-auth/react'
 
-import { useAppSelector } from '#/app/store/store'
+import { useAppDispatch, useAppSelector } from '#/app/store/store'
+import { getAllInfo } from '#/entities/user-account/model/user-type-slice'
 import { NextPageWithLayout } from '#/pages/_app'
-import { commaSeparated } from '#/shared'
+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'
 
@@ -28,8 +30,34 @@ const SubscriptionPage: NextPageWithLayout = () => {
 		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) {
@@ -57,15 +85,24 @@ const SubscriptionPage: NextPageWithLayout = () => {
 		}
 	}, [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>
+				<Typography sx={{ fontSize: 35, fontWeight: '600' }}>Подписка</Typography>
 			</Box>
 
-			<CurrentPlanAndBalance balance={balance} planPrice={planPrice} planTokenLimit={planTokenLimit} isIndividual={isIndividual} />
+			<CurrentPlanAndBalance
+				balance={balance}
+				planPrice={planPrice}
+				planTokenLimit={planTokenLimit}
+				isIndividual={isIndividual}
+				isRecurring={isRecurring}
+				nextPaymentAt={nextPaymentAt}
+			/>
 
-			<PlansSection offers={offers} currentOfferUID={paymentPlanUid} />
+			<PlansSection offers={offers} currentOfferUID={paymentPlanUid} currentPlanTokens={Number(planTokenLimit)} />
 
 			<FeaturesSection
 				tokenLimits={tokenLimits}
@@ -76,8 +113,65 @@ const SubscriptionPage: NextPageWithLayout = () => {
 
 			<FaqSection />
 
-			{/* ПОКА НЕ ИСПОЛЬЗУЙЕТСЯ. НЕ ВЫПИЛИВАТЬ!! */}
-			{/* <CancelSubscriptionButton /> */}
+			<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>
 	)
 }