@@ -142,4 +142,12 @@ export const accountApi = {
 			return null
 		}
 	},
+
+	revokeRecurringPayment(token: string) {
+		return axios.post(getApiUrl() + '/payments/revoke-recurring-payment', {}, {
+			headers: {
+				Authorization: `Bearer ${token}`,
+			},
+		})
+	},
 }
@@ -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>
 }
-export const Modal: FC<ModalProps> = ({ open, onClose, children }) => {
+export const Modal: FC<ModalProps> = ({ open, onClose, children, paperSx }) => {
+	const isWide = Boolean(paperSx)
 	return (
 		<Dialog
 			className={styles.modal}
-			sx={{
-				width: '408px',
-				margin: '0 auto',
-				textAlign: 'center',
-			}}
+			sx={
+				isWide
+					? { margin: '0 auto', textAlign: 'center', width: '100%', maxWidth: '100vw' }
+					: {
+							width: '408px',
+							margin: '0 auto',
+							textAlign: 'center',
+					  }
+			}
 			PaperProps={{
 				style: {
 					borderRadius: 20,
 					backgroundColor: '#373737',
 				},
+				sx: paperSx,
 			}}
 			open={open}
 			onClose={onClose}
@@ -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 { formatDate } from '#/shared/lib/helpers/date-helper'
 import { formatPlanPrice } from '#/shared/lib/helpers/format-plan-price'
 import { declineToken } from '#/shared/lib/helpers/get-token'
 
@@ -23,10 +24,25 @@ interface CurrentPlanAndBalanceProps {
 	planTokenLimit: string
 	planPrice: string
 	isIndividual: 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,
+	nextPaymentAt,
+}: CurrentPlanAndBalanceProps) => {
 	const formatterdPlanPrice = formatPlanPrice(planPrice, isIndividual)
+	const nextPaymentFormatted = formatNextPaymentLabel(nextPaymentAt)
 	const planTokenLimitNumber = Number(planTokenLimit)
 	const percentage = planTokenLimitNumber > 0 ? Math.min(100, Math.max(0, (balance / planTokenLimitNumber) * 100)) : 0
 
@@ -45,6 +61,11 @@ export const CurrentPlanAndBalance = ({ balance, planTokenLimit, planPrice, isIn
 					</Typography>
 					<Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} className={styles.planInfoRow}>
 						<Typography className={styles.subTitle}>{formatterdPlanPrice}</Typography>
+						{nextPaymentFormatted ? (
+							<Typography className={styles.subTitle} sx={{ textAlign: 'right' }}>
+								Следующее списание: {nextPaymentFormatted}
+							</Typography>
+						) : null}
 					</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)}
@@ -237,30 +237,64 @@
 	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;
 	font-weight: 600;
 	line-height: 100%;
-	letter-spacing: -0.02em;
 	vertical-align: bottom;
 	margin-bottom: 20px;
 	text-align: left;
@@ -268,20 +302,42 @@
 
 .cancelSubscriptionModalText {
 	font-size: 15px;
-	font-weight: 700;
+	font-weight: 600;
 	line-height: 150%;
-	letter-spacing: -0.01em;
 	vertical-align: bottom;
-	color: #868686;
 	margin-bottom: 30px;
 	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;
+	flex-direction: column;
+	align-items: stretch;
 	gap: 8px;
 	justify-content: flex-start;
 	margin-top: 20px;
+
+	@media (min-width: 768px) {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.cancelSubscriptionButtonKeep,
+	.cancelSubscriptionButtonCancel {
+		@media (max-width: 767px) {
+			width: 100%;
+		}
+	}
 }
 
 .cancelSubscriptionButtonKeep {
@@ -289,7 +345,6 @@
 	font-style: Medium;
 	font-size: 14px;
 	line-height: 140%;
-	letter-spacing: -0.01em;
 	vertical-align: middle;
 	color: #ffffff;
 	background-color: #8280ff;
@@ -308,7 +363,6 @@
 	font-style: Medium;
 	font-size: 14px;
 	line-height: 140%;
-	letter-spacing: -0.01em;
 	vertical-align: middle;
 	color: #ffffff;
 	background-color: #5d5a5a;
@@ -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,33 @@ 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 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,13 +84,21 @@ 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}
+				nextPaymentAt={nextPaymentAt}
+			/>
 
 			<PlansSection offers={offers} currentOfferUID={paymentPlanUid} currentPlanTokens={Number(planTokenLimit)} />
 
@@ -76,8 +111,59 @@ const SubscriptionPage: NextPageWithLayout = () => {
 
 			<FaqSection />
 
-			{/* ПОКА НЕ ИСПОЛЬЗУЙЕТСЯ. НЕ ВЫПИЛИВАТЬ!! */}
-			{/* <CancelSubscriptionButton /> */}
+			<Box className={styles.cancelSubscriptionButtonWrapper}>
+				{isIndividual ? (
+					<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>
+
+			<Modal
+				open={isCancelSubscriptionModalOpen}
+				onClose={handleCloseCancelSubscriptionModal}
+			>
+				<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} className={styles.cancelSubscriptionButtonKeep}>
+							Не отменять
+						</Button>
+						<Button onClick={() => void handleCancelSubscription()} className={styles.cancelSubscriptionButtonCancel}>
+							Да, отменить
+						</Button>
+					</Box>
+				</Box>
+			</Modal>
 		</Box>
 	)
 }