Binary files a/public/images/dashboard.png and b/public/images/dashboard.png differ
@@ -1,11 +1,12 @@
-import axios from 'axios'
+import axios, { AxiosResponse } from 'axios'
 
 import { IShortModel } from '#/entities/model-entity'
+import { MessageSend, sendMediaMessage } from '#/entities/message'
 import { getApiUrl } from '#/shared/lib/constants'
 
-export async function getAudio(token?: string): Promise<IShortModel[]> {
+async function fetchMlModelsByCategory(category: string, token?: string): Promise<IShortModel[]> {
 	try {
-		const { data } = await axios.get(getApiUrl() + '/ml_models/?category=audio', {
+		const { data } = await axios.get(getApiUrl() + `/ml_models/?category=${encodeURIComponent(category)}`, {
 			headers: {
 				Authorization: `Bearer ${token}`,
 			},
@@ -15,3 +16,97 @@ export async function getAudio(token?: string): Promise<IShortModel[]> {
 		return []
 	}
 }
+
+export async function getAudio(token?: string): Promise<IShortModel[]> {
+	return fetchMlModelsByCategory('audio', token)
+}
+
+export async function getVoiceCloneModels(token?: string): Promise<IShortModel[]> {
+	return fetchMlModelsByCategory('voice', token)
+}
+
+export interface MediaVoiceItem {
+	uid: string
+	title: string
+	file: string
+}
+
+export async function getMediaVoices(token?: string): Promise<MediaVoiceItem[]> {
+	try {
+		const { data } = await axios.get<MediaVoiceItem[]>(getApiUrl() + '/api/media/voices/?kind=voice', {
+			headers: {
+				Authorization: `Bearer ${token}`,
+			},
+		})
+		return Array.isArray(data) ? data : []
+	} catch {
+		return []
+	}
+}
+
+export async function getMediaPresets(token?: string): Promise<MediaVoiceItem[]> {
+	try {
+		const { data } = await axios.get<MediaVoiceItem[]>(getApiUrl() + '/api/media/presets/?kind=voice', {
+			headers: {
+				Authorization: `Bearer ${token}`,
+			},
+		})
+		return Array.isArray(data) ? data : []
+	} catch {
+		return []
+	}
+}
+
+export async function getVoicesAndPresets(token?: string): Promise<{ voices: MediaVoiceItem[]; presets: MediaVoiceItem[] }> {
+	const [voices, presets] = await Promise.all([getMediaVoices(token), getMediaPresets(token)])
+	return { voices, presets }
+}
+
+/** POST /api/media/voices/ — загрузить голос (file обязателен: mp3, ogg, wav; title опционален) */
+export async function createMediaVoice(file: File, token?: string, title?: string): Promise<AxiosResponse<MediaVoiceItem>> {
+	const formData = new FormData()
+	formData.append('file', file)
+	if (title != null && title !== '') {
+		formData.append('title', title)
+	}
+
+	return axios.post<MediaVoiceItem>(getApiUrl() + '/api/media/voices/', formData, {
+		withCredentials: true,
+		validateStatus: (status) => status < 500,
+		headers: {
+			Authorization: `Bearer ${token}`,
+		},
+	})
+}
+
+/** DELETE /api/media/voices/{voice_id}/ */
+export async function deleteMediaVoice(voiceId: string, token?: string): Promise<AxiosResponse<unknown>> {
+	return axios.delete(getApiUrl() + `/api/media/voices/${encodeURIComponent(voiceId)}/`, {
+		withCredentials: true,
+		validateStatus: (status) => status < 500,
+		headers: {
+			Authorization: `Bearer ${token}`,
+		},
+	})
+}
+
+/** PATCH /api/media/voices/{voice_id}/ — сменить title */
+export async function patchMediaVoiceTitle(voiceId: string, title: string, token?: string): Promise<AxiosResponse<unknown>> {
+	return axios.patch(
+		getApiUrl() + `/api/media/voices/${encodeURIComponent(voiceId)}/`,
+		{ title },
+		{
+			withCredentials: true,
+			validateStatus: (status) => status < 500,
+			headers: {
+				Authorization: `Bearer ${token}`,
+				'Content-Type': 'application/json',
+			},
+		}
+	)
+}
+
+/** POST /media/voice/{model} — генерация (тот же FormData/JSON, что у остальных media POST) */
+export function postVoiceCloneGeneration<T>(model: string | null, dataForSend: MessageSend<T> | FormData, token?: string) {
+	return sendMediaMessage(model, 'voice', dataForSend, token)
+}
@@ -4,9 +4,12 @@ import { Message, MessageSend } from '../types'
 
 import { getApiUrl } from '#/shared/lib/constants'
 
-
-
-export async function sendMediaMessage<T>(model: string | null, modelType: 'video' | 'image' | 'audio', dataForSend: MessageSend<T> | FormData, token?: string) {
+export async function sendMediaMessage<T>(
+	model: string | null,
+	modelType: 'video' | 'image' | 'audio' | 'voice',
+	dataForSend: MessageSend<T> | FormData,
+	token?: string
+) {
 	const HeaderDataType = dataForSend instanceof FormData ? 'multipart/form-data' : 'application/json'
 
 	return await axios.post<Message[]>(getApiUrl() + `/media/${modelType}/${model}`, dataForSend, {
@@ -19,7 +22,7 @@ export async function sendMediaMessage<T>(model: string | null, modelType: 'vide
 	})
 }
 
-export async function getImagesBySlug(slug: string, token: string, type:'image' | 'video' | 'audio', offset?: number, limit = 10) {
+export async function getImagesBySlug(slug: string, token: string, type: 'image' | 'video' | 'audio' | 'voice', offset?: number, limit = 10) {
 	return await axios.get<Message>(getApiUrl() + `/media/${type}/${slug}?limit=${limit}&offset=${offset}`, {
 		validateStatus: (status) => status < 500,
 		headers: {
@@ -13,12 +13,23 @@ import styles from './card.module.scss'
 
 export interface AudioModelCardProps extends IShortModel {
 	accessed_models: string[] | null
+	/** Базовый сегмент URL списка моделей (например audio, voice-cloning) */
+	modelsBasePath?: string
 }
 
-export function AudioModelCard({ description, image, title, slug, accessed_models, blocked, tags }: AudioModelCardProps) {
+export function AudioModelCard({
+	description,
+	image,
+	title,
+	slug,
+	accessed_models,
+	blocked,
+	tags,
+	modelsBasePath = 'audio',
+}: AudioModelCardProps) {
 	const link = useMemo(() => {
-		return accessed_models && !accessed_models.includes(slug) ? '/subscription' : `audio/${slug}`
-	}, [accessed_models])
+		return accessed_models && !accessed_models.includes(slug) ? '/subscription' : `${modelsBasePath}/${slug}`
+	}, [accessed_models, slug, modelsBasePath])
 
 
 	return (
@@ -29,7 +29,15 @@ export function useGlobalSettings() {
 		makePrivateRequest(async (type: string, value: any) => {
 			const option = settings.find((x) => x.type === type)
 
-			if (!option) return showMessage('Ошибка присвоения настроек')
+			if (!option) {
+				// Если настройки нет, создаём её
+				const { status, data: newSetting } = await postUserSettings({ device, type, value })
+
+				if (status !== 200) return showMessage('Ошибка создания настроек')
+
+				setSettings((s) => [...s, newSetting])
+				return
+			}
 
 			const { status } = await updateUserSettings(option.id, value)
 
@@ -37,7 +45,7 @@ export function useGlobalSettings() {
 
 			setSettings((s) => [...s.filter((x) => x.type !== type), { ...option, value }])
 		}),
-		[settings, data]
+		[settings, data, device]
 	)
 
 	const fetchUserSettings = makePrivateRequest(async () => {
@@ -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: '',
@@ -9,6 +9,7 @@ import styles2 from '#/widgets/business-persons/ui/persons-list/persons-list.mod
 
 import { InviteRoles, inviteRoles } from '../../invite-person-in-business/lib/constants'
 import { updateLimit } from '../api/set-limit'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 
 interface LimitModalProps {
 	person: ResponseGetPersons | null
@@ -20,28 +21,35 @@ interface LimitModalProps {
 	addList: (newUser: ResponseGetPersons, list: 'personal' | 'security') => void
 }
 
-export const LimitModal: React.FC<LimitModalProps> = ({
-	person,
-	onClose,
-	updateLimitProp,
-	list,
-	setList,
-	addList,
-	listType,
-}) => {
+export const LimitModal: React.FC<LimitModalProps> = ({ person, onClose, updateLimitProp, list, setList, addList, listType }) => {
 	const [limit, setLimit] = useState(person?.token_limit ? Math.floor(+person.token_limit).toString() : '0')
 	const [role, setRole] = useState<InviteRoles>('Сотрудник')
+	const [originalRole, setOriginalRole] = useState<InviteRoles>('Сотрудник')
 	const { data } = useSession()
+	const { showMessage } = useShowDataStore()
+
+	const getRoleFromAccountType = (accountType: string | undefined): InviteRoles => {
+		switch (accountType) {
+			case 'business_account':
+				return 'Сотрудник'
+			case 'business_admin':
+				return 'Администратор'
+			case 'business_security':
+				return 'Сотрудник безопасности'
+			default:
+				return 'Сотрудник'
+		}
+	}
 
 	const handleChangeBalance = () => {
+		const originalRoleValue = getRoleFromAccountType(person?.account_type)
+
 		updateLimit(person?.email, limit, data?.access, role).then((res) => {
 			if (res === null) {
 				return
 			} else if (list && res.account_type !== person?.account_type) {
 				if (
-					(res.account_type === 'business_host' ||
-						res.account_type === 'business_account' ||
-						res.account_type === 'business_admin') &&
+					(res.account_type === 'business_host' || res.account_type === 'business_account' || res.account_type === 'business_admin') &&
 					listType === 'security'
 				) {
 					setList(list.filter((el) => el.email !== res.email))
@@ -52,19 +60,19 @@ export const LimitModal: React.FC<LimitModalProps> = ({
 				}
 			}
 
-			updateLimitProp(res.token_limit, person?.email)
+			if (role !== originalRoleValue) {
+				showMessage(`Роль пользователя ${person?.email} успешно изменена на "${role}"!`, 'success')
+			} else {
+				updateLimitProp(res.token_limit, person?.email)
+			}
 		})
 	}
 
 	useEffect(() => {
-		if (person?.account_type === 'business_account') {
-			setRole('Сотрудник')
-		}
-		if (person?.account_type === 'business_admin') {
-			setRole('Администратор')
-		}
-		if (person?.account_type === 'business_security') {
-			setRole('Сотрудник безопасности')
+		if (person) {
+			const roleFromAccount = getRoleFromAccountType(person.account_type)
+			setRole(roleFromAccount)
+			setOriginalRole(roleFromAccount)
 		}
 	}, [person])
 
@@ -84,13 +92,7 @@ export const LimitModal: React.FC<LimitModalProps> = ({
 				<Typography sx={{ marginBottom: '10px' }} className={styles.hint}>
 					Изменение лимита токенов
 				</Typography>
-				<TextField
-					value={limit}
-					type='text'
-					onChange={(e) => setLimit(e.target.value)}
-					fullWidth
-					sx={{ ...InputStyleDark }}
-				/>
+				<TextField value={limit} type='text' onChange={(e) => setLimit(e.target.value)} fullWidth sx={{ ...InputStyleDark }} />
 			</Box>
 			<Box className={styles.wrap}>
 				<Typography className={styles.hint} sx={{ marginBottom: '10px' }}>
@@ -10,7 +10,7 @@ import { formDataHelper } from '#/widgets/messages'
 export function useCreateMediaMessage(
 	showError: (message: string) => void,
 	type: string,
-	modelType: 'video' | 'image' | 'audio',
+	modelType: 'video' | 'image' | 'audio' | 'voice',
 	device: Device,
 	setMessages: Dispatch<SetStateAction<Message[]>>,
 	mobileScrollContainer: RefObject<HTMLDivElement>
@@ -9,7 +9,7 @@ import { getImagesBySlug, Message } from '#/entities/message'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 import { Device } from '#/shared/lib/types/entities'
 
-export function useMediaBotPagination(deviceType: Device, type:'image' | 'video' | 'audio') {
+export function useMediaBotPagination(deviceType: Device, type: 'image' | 'video' | 'audio' | 'voice') {
 	const refScrollMobile = useRef<HTMLDivElement | null>(null)
 	const refScrollDesktop = useRef<HTMLDivElement | null>(null)
 	const mobileScrollContainer = useRef<HTMLDivElement | null>(null)
@@ -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'
@@ -2,3 +2,6 @@ export const PLATE_CHANGE_PASSWORD = 'plate-change-password'
 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'
@@ -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) {
@@ -3,7 +3,7 @@
 	width: 100%;
 	max-width: calc(100dvw);
 	height: 100dvh;
-	background-color: rgba(0, 0, 0, 0.4);
+	background-color: rgba(0, 0, 0, 0.7);
 	top: 0;
 	left: 0;
 	transition: all 300ms ease-in-out;
@@ -66,7 +66,7 @@
 
 	&__content {
 		background-color: var(--new-ui-main-color);
-		border-radius: 20px;
+		border-radius: 16px;
 		position: relative;
 		overflow: hidden;
 		height: fit-content;
@@ -20,6 +20,8 @@ export interface PlatesTemplateProps {
 	animationClass?: string
 	animationBehaviorClass?: string
 	headerClassName?: string
+	/** Перекрывает фон контента плашки (например `#151518`) */
+	contentBackgroundColor?: string
 	variant?: Variant
 }
 
@@ -35,6 +37,7 @@ export default function PlatesTemplate({
 	animationBehaviorClass = styles['template__animation-behavior'],
 	closeModal = () => {},
 	headerClassName,
+	contentBackgroundColor,
 	variant = 'primary',
 }: PlatesTemplateProps) {
 	const { setModal, getModal } = usePlatesStore()
@@ -64,6 +67,7 @@ export default function PlatesTemplate({
 						modal.state ? '' : animationBehaviorClass,
 						styles[`template__content_${variant}`]
 					)}
+					style={contentBackgroundColor ? { backgroundColor: contentBackgroundColor } : undefined}
 					onClick={(e) => e.stopPropagation()}
 				>
 					<button
@@ -22,9 +22,10 @@ import { useDeviceType } from '#/shared/lib/hooks/use-device-type'
 
 interface IRegisterEmailFormProps {
 	successLogin: () => void
+	inputClassName?: string
 }
 
-export const RegisterEmailForm: React.FC<IRegisterEmailFormProps> = ({ successLogin }) => {
+export const RegisterEmailForm: React.FC<IRegisterEmailFormProps> = ({ successLogin, inputClassName }) => {
 	const { register, handleSubmit, reset, watch } = useForm()
 
 	const { desktop } = useDeviceType()
@@ -94,45 +95,19 @@ export const RegisterEmailForm: React.FC<IRegisterEmailFormProps> = ({ successLo
 
 	return (
 		<form onKeyDown={handleKeyDown}>
-			<Typography
-				variant='body2'
-				sx={{
-					color: '#A6A5A5',
-					lineHeight: '19.6px',
-					fontSize: '14px',
-					fontWeight: '550',
-					paddingTop: 1,
-					width: '100%',
-					marginBottom: 1.5,
-				}}
-			>
-				Email
-			</Typography>
 			<TextField
 				fullWidth
+				placeholder='Email'
+				className={inputClassName}
 				sx={{ ...InputStyleDark }}
 				{...register('email', emailOptions)}
 				onChange={handleInputChangeTrim}
 			/>
 
-			<Typography
-				variant='body2'
-				sx={{
-					color: '#A6A5A5',
-					lineHeight: '19.6px',
-					fontSize: '14px',
-					fontWeight: '550',
-					paddingTop: 1,
-					width: '100%',
-					marginBottom: 1.5,
-				}}
-			>
-				Пароль
-			</Typography>
-
 			<TextField
 				type={passwordShowed ? 'text' : 'password'}
 				fullWidth
+				placeholder='Пароль'
 				InputProps={{
 					endAdornment: (
 						<InputAdornment position='start'>
@@ -153,30 +128,18 @@ export const RegisterEmailForm: React.FC<IRegisterEmailFormProps> = ({ successLo
 						</InputAdornment>
 					),
 				}}
+				className={inputClassName}
 				sx={{ ...InputStyleDark }}
 				{...register('password1', {
 					...PasswordOptions,
 				})}
 			/>
 
-			<Typography
-				variant='body2'
-				sx={{
-					color: '#A6A5A5',
-					lineHeight: '19.6px',
-					fontSize: '14px',
-					fontWeight: '550',
-					paddingTop: 1,
-					width: '100%',
-					marginBottom: 1.5,
-				}}
-			>
-				Подтвердите пароль
-			</Typography>
-
 			<TextField
 				type={passwordShowed ? 'text' : 'password'}
 				fullWidth
+				placeholder='Подтвердите пароль'
+				className={inputClassName}
 				sx={{ ...InputStyleDark }}
 				{...register('password2', {
 					...PasswordOptions,
@@ -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,75 @@
+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 tokensToAdd = modal.getStoreProperty<number>('tokensToAdd')
+
+	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>
+
+				{tokensToAdd != null ? (
+					<p className={styles.text}>
+						{fromTokens === toTokens ? (
+							<>
+								При балансе{' '}
+								<span className={styles.highlight}>{formatTokens(toTokens - tokensToAdd)}</span> токенов
+								{' '}вы докупите ещё{' '}
+								<span className={styles.highlight}>{formatTokens(tokensToAdd)}</span> токенов. Продолжить?
+							</>
+						) : (
+							<>
+								Вы докупите{' '}
+								<span className={styles.highlight}>{formatTokens(tokensToAdd)}</span> токенов
+								{' '}(лимит плана {formatTokens(toTokens)} − баланс {formatTokens(toTokens - tokensToAdd)} = {formatTokens(tokensToAdd)}). Продолжить?
+							</>
+						)}
+					</p>
+				) : !isUpgrade ? (
+					<p className={styles.text}>
+						Внимание! Вы собираетесь перейти с подписки{' '}
+						<span className={styles.highlight}>{formatTokens(fromTokens)}</span> токенов на подписку{' '}
+						<span className={styles.highlight}>{formatTokens(toTokens)}</span> токенов.
+						<br />
+						Уведомляем Вас, что при смене подписки сгорают все неиспользованные в прежней подписке токены. Продолжить?
+					</p>
+				) : (
+					<p className={styles.text}>
+						Уведомляем вас, что при смене подписки часть токенов сверх лимита текущей подписки сгорит и не перенесётся на новый план. Продолжить?
+					</p>
+				)}
+
+				<div className={styles.buttons}>
+					<CommonButton variant="primary" onClick={handleConfirm}>
+						{tokensToAdd != null && 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'
@@ -0,0 +1,6 @@
+import { VoiceCloningModelPage } from '#/views/voice-cloning'
+import { getDefaultLayout } from '#/widgets/layouts'
+
+VoiceCloningModelPage.getLayout = getDefaultLayout()
+
+export default VoiceCloningModelPage
@@ -0,0 +1,6 @@
+import { VoiceCloningModelsPage } from '#/views/voice-cloning'
+import { getDefaultLayout } from '#/widgets/layouts'
+
+VoiceCloningModelsPage.getLayout = getDefaultLayout({ titlePage: 'Клонирование голоса' })
+
+export default VoiceCloningModelsPage
@@ -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,6 +76,8 @@ function AppContent({
 										<Providers>
 											{Component.getLayout ? Component.getLayout(<Component {...pageProps} />) : <Component {...pageProps} />}
 											<Error />
+											<LowBalanceOfferTrigger />
+											<SubscriptionChangeNotificationTrigger />
 										</Providers> 
 									</ThemeProvider>
 								</TourManager>
@@ -142,4 +142,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,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}
@@ -117,25 +117,47 @@ const Account: NextPageWithLayout = () => {
 		if (Object.keys(query).length === 0) addQueryParams('setting')
 	}, [])
 
+	// const changePassword = async () => {
+	// 	if (!data) return
+	// 	if (newPassword1 !== newPassword2) {
+	// 		showMessage('Укажите одинаковые новыe пароли!')
+	// 		return
+	// 	}
+	// 	const status = await accountApi.changePassword(data.access, newPassword1, newPassword2, currentPassword)
+
+	// 	if (status === 200) {
+	// 		showMessage('Пароль успешно изменён!')
+	// 		setNewPassword1('')
+	// 		setNewPassword2('')
+	// 		setCurrentPassword('')
+	// 		setTimeout(() => setSuccess(''), 6000)
+	// 		return
+	// 	}
+
+	// 	showMessage('К сожалению, произошла ошибка')
+	// }
 	const changePassword = async () => {
-		if (!data) return
-		if (newPassword1 !== newPassword2) {
-			showMessage('Укажите одинаковые новы пароли!')
-			return
-		}
-		const status = await accountApi.changePassword(data.access, newPassword1, newPassword2, currentPassword)
-
-		if (Number(status) === 200) {
-			showMessage('Пароль успешно изменён!')
-			setNewPassword1('')
-			setNewPassword2('')
-			setCurrentPassword('')
-			setTimeout(() => setSuccess(''), 6000)
-			return
-		}
-
-		showMessage('К сожалению, произошла ошибка')
-	}
+    if (!data) return
+    if (newPassword1 !== newPassword2) {
+        showMessage('Укажите одинаковые новые пароли!', 'error')
+        return
+    }
+
+    {
+        const response = await accountApi.changePassword(data.access, newPassword1, newPassword2, currentPassword)
+
+        if (response.status === 200) {
+            showMessage('Пароль успешно изменён!', 'success')
+            setNewPassword1('')
+            setNewPassword2('')
+            setCurrentPassword('')
+            setTimeout(() => setSuccess(''), 6000)
+            return
+        }
+
+        showMessage(response.data.detail)
+    }
+}
 
 	function body() {
 		if (type === 'regular') {
@@ -231,7 +253,7 @@ const Account: NextPageWithLayout = () => {
 				{ headers: { Authorization: `Bearer ${data.access}` } }
 			)
 
-			showMessage('Данные успешно изменены!')
+			showMessage('Данные успешно изменены!', 'success')
 			dispatch(getAllInfo(data.access))
 		} catch (e) {}
 	}
@@ -279,7 +279,7 @@ const AudioModelPage: NextPageWithLayout = () => {
 								<Box
 									sx={{
 										padding: '30px',
-										height: `calc(100dvh - 116px - 61px - 15px ${botParams?.blocked ? '- 17px' : '- 23.5px'})`,
+										height: `calc(100dvh - 116px - 61px - 15px ${botParams?.blocked ? '- 17px' : '- 110px'})`,
 										overflowY: 'scroll',
 										overflowX: 'hidden',
 										position: 'relative',
@@ -144,7 +144,7 @@ const Page: NextPageWithLayout<ChatBotPageProps> = () => {
 		}
 
 		let data = { ...(includeParams || {}) }
-		if (version !== '') data = { ...data, ...{'version': version} }
+		if (version !== '') data = { ...data, ...{ version: version } }
 
 		sendMessage<any>({
 			content: input,
@@ -163,50 +163,50 @@ const Page: NextPageWithLayout<ChatBotPageProps> = () => {
 		if (!botParams?.parameters) {
 			return {}
 		}
-		
+
 		// Получаем параметры, актуальные для текущей версии
-		const validParams = botParams.parameters.filter(param => {
+		const validParams = botParams.parameters.filter((param) => {
 			// Если у параметра нет версий - актуален для всех
 			if (param.versions.length === 0) return true
-			
+
 			// Если нет выбранной версии - показываем все параметры
 			if (!version) return true
-			
+
 			// Проверяем, актуален ли параметр для текущей версии
 			return param.versions.includes(version)
 		})
-		
+
 		// Создаем объект: если есть значение в Redux - берем его, иначе - дефолтное
-		return validParams.reduce((acc, param) => ({
-			...acc,
-			// @ts-ignore
-			[param.key]: includeParams?.[param.key] ?? param.values.default
-		}), {})
+		return validParams.reduce(
+			(acc, param) => ({
+				...acc,
+				// @ts-ignore
+				[param.key]: includeParams?.[param.key] ?? param.values.default,
+			}),
+			{}
+		)
 	}, [botParams?.parameters, version, includeParams])
-	
+
 	const showFileExample = useMemo(() => {
 		if (!botParams?.inputs) return false
-		
+
 		// Проверяем, есть ли типы кроме 'text', которые доступны для текущей версии
-		return botParams.inputs.some(input => {
+		return botParams.inputs.some((input) => {
 			// Пропускаем текстовый тип
 			if (input.type === 'text') return false
-			
+
 			// Если у input нет версий - актуален для всех
 			if (input.versions.length === 0) return true
-			
+
 			// Если нет выбранной версии - показываем все inputs
 			if (!version) return true
-			
+
 			// Проверяем, актуален ли input для текущей версии
 			return input.versions.includes(version)
 		})
 	}, [botParams?.inputs, version])
 
-	const predictPriceInfo = useMemo(
-		() => ({ ...(includeParams || {}), ...(version ? { version } : {}) }),
-		[includeParams, version]
-	)
+	const predictPriceInfo = useMemo(() => ({ ...(includeParams || {}), ...(version ? { version } : {}) }), [includeParams, version])
 
 	const predictedPrice = usePredictPrice({
 		modelSlug: modelType,
@@ -224,11 +224,7 @@ const Page: NextPageWithLayout<ChatBotPageProps> = () => {
 			</Head>
 			<TutorialContext.Provider value={{ step, setStep }}>
 				<div className={styles.header}>
-					<Title
-						title={botParams?.title ? botParams?.title : ''}
-						type={'Чат-боты'}
-						linkBack={'/chat-bot'}
-					/>
+					<Title title={botParams?.title ? botParams?.title : ''} type={'Чат-боты'} linkBack={'/chat-bot'} />
 					<div className={styles.tags}>
 						{botParams &&
 							botParams.tags.map((tag, index) => (
@@ -238,24 +234,31 @@ const Page: NextPageWithLayout<ChatBotPageProps> = () => {
 								</div>
 							))}
 					</div>
-				{desktop && <ChatsContainer desktop={desktop} modelType={modelType} />}
+					{desktop && <ChatsContainer desktop={desktop} modelType={modelType} />}
 
-					
-				{desktop && (
-						<Stack sx={{ display: 'flex', alignItems: 'center', width: '25%', minWidth: '25%', marginRight: 'calc(5% - 22px)', marginTop: '0px' }}>
+					{desktop && (
+						<Stack
+							sx={{
+								display: 'flex',
+								alignItems: 'center',
+								width: '25%',
+								minWidth: '25%',
+								marginRight: 'calc(5% - 22px)',
+								marginTop: '0px',
+							}}
+						>
 							<StaticTabs scope={scope} setScope={setScope} />
 						</Stack>
 					)}
 				</div>
 				{!desktop && (
-						<Stack sx={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '15px', marginTop: '10px' }}>
-							<StaticTabs scope={scope} setScope={setScope} />
-						</Stack>
-					)}
-					
+					<Stack sx={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '15px', marginTop: '10px' }}>
+						<StaticTabs scope={scope} setScope={setScope} />
+					</Stack>
+				)}
+
 				{!desktop && <ChatsContainer desktop={desktop} modelType={modelType} />}
 				<Box sx={{ height: 'calc(100% - 100px)' }} className={styles.main}>
-					
 					<Box className={styles.chatWindow}>
 						<Box sx={{ display: scope === 'playground' ? 'block' : 'none' }}>
 							<AllChatWindow
@@ -300,12 +303,17 @@ const Page: NextPageWithLayout<ChatBotPageProps> = () => {
 									overflowY: 'auto',
 								}}
 							>
-								<ModelApiView  version={version || ''} slug={botParams?.slug || ''} APIModel='text' modelParams={filteredParams} showFileExample={showFileExample}/>
+								<ModelApiView
+									version={version || ''}
+									slug={botParams?.slug || ''}
+									APIModel='text'
+									modelParams={filteredParams}
+									showFileExample={showFileExample}
+								/>
 							</Stack>
 						</Box>
 					</Box>
 					<Box className={styles.settings}>
-					
 						{desktop && (
 							<Stack id='text-models-tour-3' className='pd-30 bg-color-block border-radius-main' spacing={2}>
 								{botParams?.versions && botParams.versions?.length !== 0 && (
@@ -121,7 +121,6 @@
 	justify-content: flex-start;
 	align-items: stretch;
 	gap: 20px;
-	// margin-bottom: 24px;
 
 	.chatWindow {
 		width: 70%;
@@ -267,7 +267,7 @@ const ImageModelPage: NextPageWithLayout = () => {
 								<Box
 									sx={{
 										padding: '30px',
-										height: `calc(100dvh - 116px - 61px - 15px ${botParams?.blocked ? '- 17px' : '- 23.5px'})`,
+										height: `calc(100dvh - 116px - 61px - 15px ${botParams?.blocked ? '- 17px' : '- 93px'})`,
 										// height: `calc(100dvh - 116px - 61px - 15px - 23.5px)`,
 										overflowY: 'scroll',
 										overflowX: 'hidden',
@@ -1,11 +1,216 @@
+.container {
+	overflow: hidden;
+	padding: 0;
+	background-color: #151518;
+
+	@media screen and (max-width: 1000px) {
+		margin: 0 auto;
+	}
+}
+
+.registerLinkText {
+	color: #a4aab5;
+	line-height: 19.6px;
+	font-size: 14px;
+}
+
+.form {
+	width: 50%;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	@media screen and (max-width: 1000px) {
+		width: 100%;
+		align-items: flex-start;
+		margin-top: 10px;
+	}
+}
+
+.formInner {
+	width: 40vh;
+	height: 100%;
+
+	@media screen and (max-width: 1000px) {
+		margin-top: 40%;
+	}
+}
+
+.logoMobile {
+	margin-top: 20px;
+}
+
+.title {
+	color: #e1e1e1;
+	line-height: 36.4px;
+	font-size: 26px;
+	font-weight: bold;
+	margin-bottom: 20px;
+}
+
+.orEmail {
+	flex: 1;
+	font-size: 15px;
+	color: #a4aab5;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+
+.orEmailWrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+}
+
+.orEmailLine {
+	height: 1px;
+	flex: 1;
+	background-color: #44444A;
+}
+
+
+.inputField {
+	:global(.MuiInputBase-input) {
+		padding: 12px 12px 14px 16px;
+		&::placeholder {
+			color: #a4aab5;
+			opacity: 1;
+		}
+	}
+}
+
+.labelEmail {
+	color: #a4aab5;
+	line-height: 19.6px;
+	font-size: 14px;
+	padding-top: 8px;
+	padding-right: 90%;
+}
+
+.passwordRow {
+	padding-top: 4px;
+	width: 100%;
+	justify-content: space-between;
+	display: flex;
+}
+
+.labelPassword {
+	color: #a4aab5;
+	line-height: 19.6px;
+	font-size: 14px;
+}
+
+.forgotPassword {
+	color: #8153fb;
+	line-height: 19.6px;
+	font-size: 14px;
+	font-weight: 500;
+}
+
+.forgotPasswordLink {
+	text-decoration: none;
+	color: #7f7df3;
+}
+
+.eyeToggle {
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+}
+
+.buttonWrapper {
+	height: 50px;
+	width: 100%;
+}
+
+.submitButton {
+	margin-top: 15px;
+	background-color: #7f7df3;
+	color: #ffffff;
+	line-height: 20px;
+	font-size: 16px;
+	font-weight: 600;
+	border-radius: 13px;
+	text-transform: none;
+	width: 100%;
+	height: 48px;
+
+	&:hover {
+		background-color: #7f7df3;
+		opacity: 0.9;
+	}
+}
+
+.loadingWrapper {
+	margin: 25px auto;
+	display: flex;
+	justify-content: center;
+	color: #7f7df3;
+}
+
+.registerLink {
+	width: 100%;
+	text-align: center;
+	margin-top: 15px;
+}
+
+.registerLinkAnchor {
+	text-decoration: none;
+	color: #7f7df3;
+}
+
 .imagebox {
+	width: 50%;
+	height: 100vh;
+	background-color: #8280ff;
+	overflow: hidden;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
 	@media screen and (max-width: 1000px) {
 		display: none;
 	}
 }
 
-.form{
-  @media screen and (max-width: 1000px) {
-    width: 100%;
-	}
+.imageboxLogo {
+	position: absolute;
+	top: 35px;
+	left: 35px;
+}
+
+.dashboardImage {
+	position: absolute;
+	transform: scale(1.15);
+	bottom: 60px;
+	transform-origin: center;
+}
+
+.imageboxLogoContent {
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.imageboxLogoText {
+	font-weight: 800;
+	font-size: 48px;
+	color: #ffffff;
+}
+
+.imageboxLogoSubText {
+	font-weight: 400;
+	font-style: Regular;
+	line-height: 24px;
+	font-size: 20px;
+	text-align: center;
+	white-space: pre-line;
 }
\ No newline at end of file
@@ -21,11 +21,10 @@ import { ERROR_MAPPING, ERRROR_YANDEX_TRANSLATE_MAPPING } from '#/pages/api/auth
 import { emailOptions } from '#/shared'
 import { getDeviceType } from '#/shared/lib/helpers'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
-import { InputStyleDark, InputStyleLight } from '#/shared/ui/input'
+import { InputStyleDark } from '#/shared/ui/input'
 
 const Login: NextPageWithLayout = () => {
-	const device = getDeviceType()
-
+	const [desktop, setDesktop] = React.useState(true)
 	const { query, push } = useRouter()
 
 	const [, setCookie] = useCookies()
@@ -34,14 +33,16 @@ const Login: NextPageWithLayout = () => {
 		Object.entries(query).forEach(([key, value]) => setCookie(key, value))
 	}, [])
 
+	React.useEffect(() => {
+		setDesktop(getDeviceType() === 'desktop')
+	}, [])
+
 	const { showMessage } = useShowDataStore()
 
 	const [loading, setLoading] = React.useState(false)
 
 	const [passwordShowed, showPassword] = React.useState(false)
 
-	const desktop = device === 'desktop'
-
 	const { register, handleSubmit } = useForm()
 
 	useEffect(() => {
@@ -96,40 +97,20 @@ const Login: NextPageWithLayout = () => {
 				direction={desktop ? 'row' : 'column'}
 				alignItems='center'
 				justifyContent={desktop ? 'space-between' : 'center'}
-				sx={{
-					overflow: 'hidden',
-					padding: 0,
-					margin: desktop ? 0 : '0px auto',
-					backgroundColor: '#303035',
-				}}
 			>
 				{!desktop && (
 					<Image
-						style={{ marginTop: desktop ? 0 : '80px' }}
+						className={styles.logoMobile}
 						src={'/logo.svg'}
 						alt={''}
 						width={50}
 						height={50}
 					/>
 				)}
-				<Box
-					className={styles.form}
-					sx={{
-						width: '50%',
-						height: '100vh',
-						display: 'flex',
-						justifyContent: 'center',
-						alignItems: desktop ? 'center' : 'start',
-						marginTop: desktop ? 0 : '10px',
-					}}
-				>
+				<Box className={styles.form}>
 					<form onKeyDown={handleKeyDown} autoComplete={'off'}>
 						<Box
-							sx={{
-								width: '40vh',
-								height: '100%',
-								marginTop: desktop ? 0 : 5,
-							}}
+							className={styles.formInner}
 							onKeyDown={async (e) => {
 								if (e.key === 'Enter') {
 									await handleSubmit(onSubmit, checkError)
@@ -142,98 +123,32 @@ const Login: NextPageWithLayout = () => {
 								alignItems='center'
 								spacing={2}
 							>
-								<Typography
-									sx={{
-										color: '#E1E1E1',
-										lineHeight: '36.4px',
-										fontSize: '26px',
-										fontWeight: 'bold',
-										marginBottom: '20px',
-									}}
-								>
-									Вход
-								</Typography>
+								<Typography className={styles.title}>Вход</Typography>
 								<YandexAuthButton />
-								<Typography sx={{ fontSize: '15px', color: '#A4AAB5' }}>
-									или email
-								</Typography>
-								<Typography
-									variant='body2'
-									sx={{
-										color: '#A4AAB5',
-										lineHeight: '19.6px',
-										fontSize: '14px',
-										paddingTop: 1,
-										paddingRight: '90%',
-									}}
-								>
-									Email
-								</Typography>
+								<Box className={styles.orEmailWrapper}>
+									<div className={styles.orEmailLine} ></div>
+									<Typography className={styles.orEmail}>или email</Typography>
+									<div className={styles.orEmailLine}></div>
+								</Box>
+								
 								<TextField
 									fullWidth
+									placeholder='Email'
+									className={styles.inputField}
 									sx={{ ...InputStyleDark }}
 									{...register('email', emailOptions)}
 									onChange={handleInputChangeTrim}
 								/>
-
-								<Box
-									sx={{
-										width: '100%',
-										justifyContent: 'space-between',
-										display: 'flex',
-									}}
-								>
-									<Box>
-										<Typography
-											variant='body2'
-											display='inline'
-											sx={{
-												color: '#A4AAB5',
-												lineHeight: '19.6px',
-												fontSize: '14px',
-											}}
-										>
-											Пароль
-										</Typography>
-									</Box>
-									<Box>
-										<Typography
-											variant='body2'
-											display='inline'
-											sx={{
-												color: '#8153FB',
-												lineHeight: '19.6px',
-												fontSize: '14px',
-												fontWeight: '500',
-											}}
-										>
-											<Link
-												href='/reset'
-												style={{
-													textDecoration: 'none',
-													color: '#7F7DF3',
-												}}
-											>
-												Забыли пароль?
-											</Link>
-										</Typography>
-									</Box>
-								</Box>
 								<TextField
 									type={passwordShowed ? 'text' : 'password'}
 									fullWidth
+									placeholder='Пароль'
 									InputProps={{
 										endAdornment: (
 											<InputAdornment position='start'>
 												<div
-													onClick={() =>
-														showPassword((x) => !x)
-													}
-													style={{
-														cursor: 'pointer',
-														display: 'flex',
-														alignItems: 'center',
-													}}
+													className={styles.eyeToggle}
+													onClick={() => showPassword((x) => !x)}
 												>
 													{passwordShowed ? (
 														<ClosedEyeSvg
@@ -252,66 +167,37 @@ const Login: NextPageWithLayout = () => {
 											</InputAdornment>
 										),
 									}}
+									
+									className={styles.inputField}
 									sx={{ ...InputStyleDark }}
 									{...register('password', {
 										...PasswordOptions,
 									})}
 								/>
-								<Box sx={{ height: '50px', width: '100%' }}>
+								<Box className={styles.passwordRow}>
+									<Typography variant='body2' display='inline' className={styles.forgotPassword}>
+										<Link href='/reset' className={styles.forgotPasswordLink}>
+											Забыли пароль?
+										</Link>
+									</Typography>
+								</Box>
+								<Box className={styles.buttonWrapper}>
 									{!loading ? (
 										<Button
 											variant='contained'
-											style={{
-												marginTop: '15px',
-											}}
-											sx={{
-												backgroundColor: '#7F7DF3',
-												color: '#FFFFFF',
-												lineHeight: '20px',
-												fontSize: '16px',
-												fontWeight: '600px',
-												borderRadius: '13px',
-												textTransform: 'none',
-												width: '100%',
-												height: 48,
-												'&:hover': {
-													backgroundColor: '#7F7DF3',
-													opacity: [0.9, 0.8, 0.7],
-												},
-											}}
+											className={styles.submitButton}
 											onClick={handleSubmit(onSubmit, checkError)}
 										>
 											Войти
 										</Button>
 									) : (
-										<Box
-											style={{
-												margin: '25px auto',
-												display: 'flex',
-												justifyContent: 'center',
-											}}
-										>
-											<CircularProgress
-												size={30}
-												thickness={5}
-												sx={{ color: '#7F7DF3' }}
-											/>
+										<Box className={styles.loadingWrapper}>
+											<CircularProgress size={30} thickness={5} color='inherit' />
 										</Box>
 									)}
-									<Box
-										sx={{
-											width: '100%',
-											textAlign: 'center',
-											marginTop: '15px',
-										}}
-									>
-										<Link
-											href='/register'
-											style={{
-												textDecoration: 'none',
-												color: '#7F7DF3',
-											}}
-										>
+									<Box className={styles.registerLink}>
+										<Typography variant='body2' display='inline' className={styles.registerLinkText}>Нет аккаунта? </Typography>
+										<Link href='/register' className={styles.registerLinkAnchor}>
 											Зарегистрироваться
 										</Link>
 									</Box>
@@ -321,38 +207,29 @@ const Login: NextPageWithLayout = () => {
 					</form>
 				</Box>
 				{desktop && (
-					<Box
-						className={styles.imagebox}
-						sx={{
-							width: '50%',
-							height: '100vh',
-							backgroundColor: '#8280FF',
-							overflow: 'hidden',
-							position: 'relative',
-						}}
-					>
+					<Box className={styles.imagebox}>
 						<Image
-							style={{ position: 'absolute', top: 35, left: 35 }}
-							src={'/svg/logo.svg'}
+							className={styles.dashboardImage}
+							src={'/images/dashboard.png'}
 							alt={''}
-							width={42}
-							height={42}
+							width={1275}
+							height={871}
 						/>
 						<Image
-							src={'/images/dashboard.png'}
+							className={styles.imageboxLogo}
+							src={'/svg/logo.svg'}
 							alt={''}
-							width={900}
-							height={1002}
-							style={{
-								borderRadius: '20px',
-								position: 'relative',
-								zIndex: 1000,
-								bottom: -260,
-								right: -390,
-								border: '10px solid rgba(255, 255, 255, 0.30)',
-								transform: 'rotate(-13deg)',
-							}}
+							width={42}
+							height={42}
 						/>
+						<Box className={styles.imageboxLogoContent}>
+						<Typography className={styles.imageboxLogoText}>
+							Творчество. Технологии. Ты.
+						</Typography>
+						<Typography className={styles.imageboxLogoSubText}>
+							{`Создавай уникальный контент и общайся с продвинутыми чат-ботами,\n используя современные нейросети.`}
+						</Typography>
+						</Box>
 					</Box>
 				)}
 			</Stack>
@@ -1,11 +1,139 @@
+.container {
+	overflow: hidden;
+	padding: 0;
+	background-color: #151518;
+
+	@media screen and (max-width: 1000px) {
+		margin: 0 auto;
+	}
+}
+
+.form {
+	width: 50%;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	@media screen and (max-width: 1000px) {
+		width: 100%;
+		align-items: flex-start;
+		margin-top: 10px;
+	}
+}
+
+.formInner {
+	width: 40vh;
+	height: 80%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	@media screen and (max-width: 1000px) {
+		margin-top: 16px;
+	}
+}
+
+.logoMobile {
+	margin-top: 20px;
+}
+
+.title {
+	color: #e1e1e1;
+	line-height: 36.4px;
+	font-size: 26px;
+	font-weight: bold;
+	margin-bottom: 20px;
+}
+
+.orEmailWrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+}
+
+.orEmailLine {
+	height: 1px;
+	flex: 1;
+	background-color: #44444a;
+}
+
+.orEmail {
+	flex: 1;
+	font-size: 15px;
+	color: #a4aab5;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.successText {
+	text-align: center;
+	color: #e1e1e1;
+}
+
 .imagebox {
+	width: 50%;
+	height: 100vh;
+	background-color: #8280ff;
+	overflow: hidden;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
 	@media screen and (max-width: 1000px) {
 		display: none;
 	}
 }
 
-.form{
-  @media screen and (max-width: 1000px) {
-    width: 100%;
+.imageboxLogo {
+	position: absolute;
+	top: 35px;
+	left: 35px;
+}
+
+.dashboardImage {
+	position: absolute;
+	transform: scale(1.15);
+	bottom: 60px;
+	transform-origin: center;
+}
+
+.imageboxLogoContent {
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.imageboxLogoText {
+	font-weight: 800;
+	font-size: 48px;
+	color: #ffffff;
+}
+
+.imageboxLogoSubText {
+	font-weight: 400;
+	font-style: Regular;
+	line-height: 24px;
+	font-size: 20px;
+	text-align: center;
+	white-space: pre-line;
+}
+
+.inputField {
+	margin-bottom: 16px;
+
+	:global(.MuiInputBase-input) {
+		padding-block: 10px;
+
+		&::placeholder {
+			color: #a4aab5;
+			opacity: 1;
+		}
 	}
 }
\ No newline at end of file
@@ -17,11 +17,12 @@ import { getDeviceType } from '#/shared/lib/helpers'
 import styles from './register.module.scss'
 
 const Register: NextPageWithLayout = () => {
-	const device = getDeviceType()
-
-	const desktop = device === 'desktop'
-
+	const [desktop, setDesktop] = useState(true)
 	const [success, setSuccess] = useState(false)
+
+	React.useEffect(() => {
+		setDesktop(getDeviceType() === 'desktop')
+	}, [])
 	const [isReferral, setIsReferral] = useState<boolean>(true)
 
 	const referral = useAppSelector((state) => state.user.referral)
@@ -45,49 +46,25 @@ const Register: NextPageWithLayout = () => {
 
 	return (
 		<Stack
+			className={styles.container}
 			direction={desktop ? 'row' : 'column'}
 			alignItems='center'
 			justifyContent={desktop ? 'space-between' : 'center'}
-			sx={{
-				overflow: 'hidden',
-				padding: 0,
-				margin: desktop ? 0 : '0px auto',
-				backgroundColor: '#303035',
-			}}
 		>
 			{!desktop && (
 				<Image
-					style={{ marginTop: desktop ? 0 : '20px' }}
+					className={styles.logoMobile}
 					src={'/logo.svg'}
 					alt={''}
 					width={50}
 					height={50}
 				/>
 			)}
-			<Box
-        className={styles.form}
-				sx={{
-					width: desktop ? '50%' : '100%',
-					height: '100vh',
-					display: 'flex',
-					justifyContent: 'center',
-					alignItems: 'center',
-					marginTop: desktop ? 0 : '10px',
-				}}
-			>
-				<Box
-					sx={{
-						width: '40vh',
-						height: '100%',
-						marginTop: desktop ? 0 : 2,
-						justifyContent: 'center',
-						alignItems: 'center',
-						display: 'flex',
-					}}
-				>
+			<Box className={styles.form}>
+				<Box className={styles.formInner}>
 					{success ? (
-						<Box textAlign='center'>
-							<Typography className='text'>
+						<Box className={styles.successText}>
+							<Typography>
 								Вы успешно зарегистрированы.
 								<br />
 								Мы отправили письмо для верификации на ваш email. В случае отсутствия, проверьте
@@ -100,66 +77,49 @@ const Register: NextPageWithLayout = () => {
 						</Box>
 					) : (
 						<Stack direction='column' justifyContent='center' alignItems='center' spacing={2}>
-							<Typography
-								sx={{
-									color: '#E1E1E1',
-									lineHeight: '36.4px',
-									fontSize: '26px',
-									fontWeight: 'bold',
-									marginBottom: '20px',
-								}}
-							>
-								Регистрация
-							</Typography>
+							<Typography className={styles.title}>Регистрация</Typography>
 
 							{referral === '' && isReferral && (
 								<>
 									<YandexAuthButton />
-									<Typography sx={{ fontSize: '15px', color: '#A4AAB5' }}>
-										или email
-									</Typography>
+									<Box className={styles.orEmailWrapper}>
+										<div className={styles.orEmailLine} />
+										<Typography className={styles.orEmail}>или email</Typography>
+										<div className={styles.orEmailLine} />
+									</Box>
 								</>
 							)}
-							<RegisterEmailForm successLogin={onSuccessRegister} />
+							<RegisterEmailForm successLogin={onSuccessRegister} inputClassName={styles.inputField} />
 						</Stack>
 					)}
 				</Box>
 			</Box>
 			{desktop && (
-				<Box
-          className={styles.imagebox}
-					sx={{
-						width: '50%',
-						height: '100vh',
-						backgroundColor: '#8280FF',
-						overflow: 'hidden',
-						position: 'relative',
-					}}
-				>
-					<Image
-						style={{ position: 'absolute', top: 35, left: 35 }}
-						src={'/svg/logo.svg'}
-						alt={''}
-						width={42}
-						height={42}
-					/>
-					<Image
-						src={'/images/dashboard.png'}
-						alt={''}
-						width={900}
-						height={1002}
-						style={{
-							borderRadius: '20px',
-							position: 'relative',
-							zIndex: 1000,
-							bottom: -260,
-							right: -390,
-							border: '10px solid rgba(255, 255, 255, 0.30)',
-							transform: 'rotate(-13deg)',
-						}}
-					/>
-				</Box>
-			)}
+					<Box className={styles.imagebox}>
+						<Image
+							className={styles.dashboardImage}
+							src={'/images/dashboard.png'}
+							alt={''}
+							width={1275}
+							height={871}
+						/>
+						<Image
+							className={styles.imageboxLogo}
+							src={'/svg/logo.svg'}
+							alt={''}
+							width={42}
+							height={42}
+						/>
+						<Box className={styles.imageboxLogoContent}>
+						<Typography className={styles.imageboxLogoText}>
+							Творчество. Технологии. Ты.
+						</Typography>
+						<Typography className={styles.imageboxLogoSubText}>
+							{`Создавай уникальный контент и общайся с продвинутыми чат-ботами,\n используя современные нейросети.`}
+						</Typography>
+						</Box>
+					</Box>
+				)}
 		</Stack>
 	)
 }
@@ -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,30 @@ 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 nextPaymentLabel = nextPaymentFormatted
+		? `${isRecurring ? 'Следующее списание' : 'Дата окончания'}: ${nextPaymentFormatted}`
+		: 'Без даты окончания'
 	const planTokenLimitNumber = Number(planTokenLimit)
 	const percentage = planTokenLimitNumber > 0 ? Math.min(100, Math.max(0, (balance / planTokenLimitNumber) * 100)) : 0
 
@@ -45,6 +66,9 @@ 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>
+						<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)}
@@ -3,7 +3,11 @@ 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 { IFeatures, IOffer, formatFeatureValue } from '#/views/subscription'
@@ -14,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 { showMessage } = useShowDataStore()
 
 	const unitMap: Record<string, string> = {
 		Изображения: 'изображений',
@@ -51,9 +59,96 @@ const Offer: React.FC<IOfferProps> = ({ uid, tokens_per_plan, price, grouped_fea
 
 	const formattedFeatures = formatFeatures(grouped_features)
 
-	const pay = async (uid: string) => {
-		const urlForPay = await accountApi.payProduct(data!.access, uid)
-		urlForPay ? await Router.push(urlForPay) : null
+	const modal = getModalById(SUBSCRIPTION_CHANGE_NOTIFICATION)
+
+	const pay = async (planUid: string) => {
+		try {
+			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 isUpgrade = currentPlanTokens < toTokens
+	const isDowngrade = currentPlanTokens > toTokens
+	const balanceExceedsLimit = balance > currentPlanTokens
+	const isSamePlan = currentPlanTokens === toTokens
+
+
+	const handlePayClick = () => {
+
+		// Бесплатный план: не показываем модалку
+		if (isFreePlan) {
+			pay(uid)
+			return
+		}
+
+		// Не ежемесячный план: показываем модалку с уведомлением о том, что неиспользованные токены сгорят
+		if (!isRecurring) {
+			modal.setState(true, {
+				fromTokens: currentPlanTokens,
+				toTokens,
+				onConfirm: () => pay(uid),
+			})
+			return
+		}
+
+		// Апгрейд: модалка только если баланс превышает лимит текущего плана (токены сгорят)
+		if (isUpgrade && balanceExceedsLimit) {
+			modal.setState(true, {
+				fromTokens: currentPlanTokens,
+				toTokens,
+				isUpgrade: true,
+				onConfirm: () => pay(uid),
+			})
+			return
+		}
+
+		// Апгрейд без токенов сверх лимита: показываем сколько токенов докупит юзер
+		if (isUpgrade && !balanceExceedsLimit) {
+			const tokensToAdd = toTokens - balance
+			modal.setState(true, {
+				fromTokens: currentPlanTokens,
+				toTokens,
+				tokensToAdd,
+				onConfirm: () => pay(uid),
+			})
+			return
+		}
+
+		// Рекуррентный юзер покупает тот же план: показываем сколько токенов докупит (если есть что докупать)
+		if (isSamePlan) {
+			const tokensToAdd = toTokens - balance
+			if (tokensToAdd > 0) {
+				modal.setState(true, {
+					fromTokens: currentPlanTokens,
+					toTokens,
+					tokensToAdd,
+					onConfirm: () => pay(uid),
+				})
+				return
+			}
+			pay(uid)
+			return
+		}
+
+		// Даунгрейд: модалка всегда (неиспользованные токены сгорят)
+		if (isDowngrade) {
+			modal.setState(true, {
+				fromTokens: currentPlanTokens,
+				toTokens,
+				onConfirm: () => pay(uid),
+			})
+			return
+		}
+
+		pay(uid)
 	}
 
 	return (
@@ -81,7 +176,7 @@ 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()
 					}}
 				>
 					Оплатить
@@ -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 (
@@ -27,6 +29,7 @@ export const PlansSection = ({
                             isCurrentSubscription={false}
                             index={idx}
                             key={offer.uid}
+                            currentPlanTokens={currentPlanTokens}
                         />
                     )
                 })}
@@ -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,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,59 @@ const SubscriptionPage: NextPageWithLayout = () => {
 
 			<FaqSection />
 
-			{/* ПОКА НЕ ИСПОЛЬЗУЙЕТСЯ. НЕ ВЫПИЛИВАТЬ!! */}
-			{/* <CancelSubscriptionButton /> */}
+			<Box className={styles.cancelSubscriptionButtonWrapper}>
+				{isIndividual || !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>
+
+			<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>
 	)
 }
@@ -277,7 +277,7 @@ const VideoModelPage: NextPageWithLayout = () => {
 								<Box
 									sx={{
 										padding: '30px',
-										height: `calc(100dvh - 116px - 61px - 15px ${botParams?.blocked ? '- 17px' : '- 23.5px'})`,
+										height: `calc(100dvh - 116px - 61px - 15px ${botParams?.blocked ? '- 17px' : '- 106px'})`,
 										// height: `calc(100dvh - 116px - 61px - 15px - 23.5px)`,
 										overflowY: 'scroll',
 										overflowX: 'hidden',
@@ -0,0 +1,33 @@
+.cta {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 12px;
+	width: 100%;
+	padding: 12px 16px;
+	margin-bottom: 12px;
+	border: 1px dashed #8280FF;
+	border-radius: 12px;
+	background: #8280FF1A;
+	color: #8280FF;
+	font-size: 15px;
+	font-weight: 500;
+	cursor: pointer;
+	font-family: inherit;
+	transition: opacity 0.2s ease;
+	height: 56px;
+
+	&:hover {
+		opacity: 0.88;
+	}
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+}
+
+.icon {
+	flex-shrink: 0;
+	color: #7f7df3;
+}
@@ -0,0 +1,19 @@
+import PlusIcon from '#/assets/svg/plus.svg?react'
+import { getModalById, PLATE_ADD_VOICE } from '#/features/modals'
+
+import styles from './add-voice-cta.module.scss'
+
+type AddVoiceCtaProps = {
+	disabled?: boolean
+}
+
+export function AddVoiceCta({ disabled }: AddVoiceCtaProps) {
+	const modal = getModalById(PLATE_ADD_VOICE)
+
+	return (
+		<button type='button' className={styles.cta} disabled={disabled} onClick={() => modal.setState(true)}>
+			<PlusIcon className={styles.icon} width={20} height={20} />
+			<span>Добавить голос</span>
+		</button>
+	)
+}
@@ -0,0 +1 @@
+export { AddVoiceCta } from './add-voice-cta'
@@ -0,0 +1,171 @@
+.container {
+	padding-bottom: 0 !important;
+}
+
+.modal {
+	padding: 56px 24px 24px 24px;
+	min-width: 450px;
+	min-height: 300px;
+	width: 648px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.upload {
+	border: 1px dashed #a4aab5;
+	width: 100%;
+	padding: 32px 24px;
+	background-color: #1d1d2180;
+	border-radius: 16px;
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	gap: 16px;
+	transition:
+		border-color 0.2s ease,
+		background-color 0.2s ease;
+
+	&_dragging {
+		border-color: #8280ff;
+		background-color: rgba(130, 128, 255, 0.08);
+	}
+}
+
+.visuallyHidden {
+	position: absolute;
+	visibility: hidden;
+}
+
+.uploadIcon {
+	width: 56px;
+	height: 56px;
+}
+
+.title {
+	font-size: 18px;
+	font-style: bold;
+	font-weight: 700;
+	color: #a4aab5;
+}
+
+.hint {
+	margin: 0;
+	font-size: 14px;
+	color: #80808e;
+}
+
+.hintAccent {
+	font-weight: 600;
+}
+
+.fileName {
+	margin: 0;
+	font-size: 13px;
+	color: #a4aab5;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.previewBlock {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+}
+
+.playerWrap {
+	width: 100%;
+	position: relative;
+	display: flex;
+	align-items: center;
+	border-radius: 15px;
+	background-color: #1e1e20;
+	padding: 12px;
+	box-sizing: border-box;
+}
+
+
+
+.actions {
+	display: flex;
+	gap: 12px;
+	width: 100%;
+	margin-top: 16px;
+}
+
+.actionBtn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 8px;
+	height: 38px;
+	border: 1px solid #8280FF;
+}
+
+.uploadFromMicBtn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	max-width: 400px;
+	border-radius: 8px;
+	height: 38px;
+	border: 1px solid #8280ff;
+}
+
+.micPanel {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	width: 100%;
+	max-width: 440px;
+	margin-top: 4px;
+}
+
+.micRow {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+}
+
+.micSelect {
+	flex: 1;
+	min-width: 0;
+	height: 38px;
+	padding: 0 12px;
+	border-radius: 8px;
+	border: 1px solid #5a5a5a;
+	background: #2a2a2a;
+	color: #e0e0e0;
+	font-size: 14px;
+	font-family: inherit;
+	cursor: pointer;
+}
+
+.micStartBtn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 8px;
+	height: 38px;
+	border: 1px solid #8280ff;
+}
+
+.micHint {
+	margin: 0;
+	font-size: 13px;
+	color: #80808e;
+}
+
+.or {
+	margin: 0;
+	font-size: 14px;
+	color: #80808e;
+}
\ No newline at end of file
@@ -0,0 +1,480 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useSession } from 'next-auth/react'
+
+import { createMediaVoice } from '#/entities/audio-model'
+import { getModalById, PLATE_ADD_VOICE, PlateTemplate } from '#/features/modals'
+import { c, getDeviceType, getOs } from '#/shared/lib/helpers'
+import { useDeviceType } from '#/shared/lib/hooks'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { CommonButton } from '#/shared/ui/button'
+import { CommonInput } from '#/shared/ui/common-input'
+import { AudioPlayer } from '#/widgets/messages/ui/audio-player'
+
+import styles from './add-voice-plate.module.scss'
+
+const MAX_BYTES = 10 * 1024 * 1024
+const FILE_ACCEPT = '.mp3,.wav,audio/mpeg,audio/wav'
+const PREVIEW_PLAYER_UID = 'add-voice-plate-preview'
+const DEFAULT_VOICE_TITLE = 'Аудиозапись 1'
+
+function defaultTitleFromFile(file: File): string {
+	const base = file.name.replace(/\.[^/.]+$/, '').trim()
+	return base || DEFAULT_VOICE_TITLE
+}
+
+type AddVoicePlateProps = {
+	onSuccess: () => Promise<void> | void
+}
+
+function validateAudioFile(file: File): string | null {
+	if (file.size > MAX_BYTES) {
+		return 'Размер файла не больше 10 МБ'
+	}
+	const ext = file.name.split('.').pop()?.toLowerCase()
+	if (ext !== 'mp3' && ext !== 'wav' && ext !== 'ogg' && ext !== 'weba') {
+		return 'Допустимы только файлы .mp3, .wav, .ogg, .weba'
+	}
+	return null
+}
+
+function audioMime(file: File): string {
+	if (file.type) return file.type
+	const ext = file.name.split('.').pop()?.toLowerCase()
+	if (ext === 'wav') return 'audio/wav'
+	if (ext === 'ogg') return 'audio/ogg'
+	if (ext === 'webm' || ext === 'weba') return 'audio/webm'
+	return 'audio/mpeg'
+}
+
+function pickRecordingMime(): string {
+	if (typeof MediaRecorder === 'undefined') return ''
+	const candidates = ['audio/ogg;codecs=opus', 'audio/webm;codecs=opus', 'audio/webm']
+	for (const m of candidates) {
+		if (MediaRecorder.isTypeSupported(m)) return m
+	}
+	return ''
+}
+
+export function AddVoicePlate({ onSuccess }: AddVoicePlateProps) {
+	/** Главный экран модалки: выбор источника или превью перед обучением */
+	const ModalView = {
+		PickSource: 'pick_source',
+		Preview: 'preview',
+	} as const
+
+	/** Подэкран микрофона внутри PickSource (панель открыта по кнопке «Записать…») */
+	const MicPanelPhase = {
+		Closed: 'closed',
+		LoadingList: 'loading_list',
+		NoMicrophones: 'no_microphones',
+		Ready: 'ready',
+		Recording: 'recording',
+	} as const
+
+	const modal = getModalById(PLATE_ADD_VOICE)
+	const { data: session } = useSession()
+	const { showMessage } = useShowDataStore()
+
+	const deviceType = getDeviceType()
+	const deviceOs = getOs()
+	const { desktop } = useDeviceType(deviceType, deviceOs)
+
+	const fileInputRef = useRef<HTMLInputElement>(null)
+	const dragDepthRef = useRef(0)
+	const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+	const mediaStreamRef = useRef<MediaStream | null>(null)
+
+	const [isDragging, setIsDragging] = useState(false)
+	const [pickedFile, setPickedFile] = useState<File | null>(null)
+	const [voiceTitle, setVoiceTitle] = useState('')
+	const [training, setTraining] = useState(false)
+	const [micPanelOpen, setMicPanelOpen] = useState(false)
+	const [micDevices, setMicDevices] = useState<MediaDeviceInfo[]>([])
+	const [micDevicesLoading, setMicDevicesLoading] = useState(false)
+	const [selectedMicId, setSelectedMicId] = useState('')
+	const [isRecording, setIsRecording] = useState(false)
+
+	const modalView = pickedFile ? ModalView.Preview : ModalView.PickSource
+
+	const micPanelPhase = useMemo(() => {
+		if (!micPanelOpen) return MicPanelPhase.Closed
+		if (micDevicesLoading) return MicPanelPhase.LoadingList
+		if (micDevices.length === 0) return MicPanelPhase.NoMicrophones
+		if (isRecording) return MicPanelPhase.Recording
+		return MicPanelPhase.Ready
+	}, [micPanelOpen, micDevicesLoading, micDevices.length, isRecording])
+
+	const showMicInvite = micPanelPhase === MicPanelPhase.Closed
+	const showMicPanel = micPanelPhase !== MicPanelPhase.Closed
+	const showMicDeviceRow = micPanelPhase === MicPanelPhase.Ready || micPanelPhase === MicPanelPhase.Recording
+
+	const previewUrl = useMemo(() => (pickedFile ? URL.createObjectURL(pickedFile) : null), [pickedFile])
+
+	useEffect(() => {
+		if (!previewUrl) return
+		return () => {
+			URL.revokeObjectURL(previewUrl)
+		}
+	}, [previewUrl])
+
+	const applyFile = useCallback(
+		(file: File) => {
+			const err = validateAudioFile(file)
+			if (err) {
+				showMessage(err)
+				return
+			}
+			setPickedFile(file)
+		},
+		[showMessage]
+	)
+
+	const stopMediaStream = useCallback(() => {
+		mediaStreamRef.current?.getTracks().forEach((t) => t.stop())
+		mediaStreamRef.current = null
+	}, [])
+
+	const discardRecording = useCallback(() => {
+		const rec = mediaRecorderRef.current
+		if (rec && rec.state !== 'inactive') {
+			rec.onstop = null
+			rec.stop()
+		}
+		mediaRecorderRef.current = null
+		stopMediaStream()
+		setIsRecording(false)
+	}, [stopMediaStream])
+
+	const resetFile = useCallback(() => {
+		discardRecording()
+		setPickedFile(null)
+		setVoiceTitle('')
+		setMicPanelOpen(false)
+		setMicDevices([])
+		setSelectedMicId('')
+	}, [discardRecording])
+
+	const refreshMicDevices = useCallback(async () => {
+		if (!navigator.mediaDevices?.enumerateDevices) {
+			showMessage('Браузер не поддерживает выбор микрофона')
+			return
+		}
+		setMicDevicesLoading(true)
+		try {
+			const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+			stream.getTracks().forEach((t) => t.stop())
+			const list = await navigator.mediaDevices.enumerateDevices()
+			const inputs = list.filter((d) => d.kind === 'audioinput')
+			setMicDevices(inputs)
+			setSelectedMicId((prev) => {
+				if (prev && inputs.some((i) => i.deviceId === prev)) return prev
+				return inputs[0]?.deviceId ?? ''
+			})
+			if (!inputs.length) {
+				showMessage('Не найдено ни одного микрофона')
+			}
+		} catch {
+			showMessage('Нет доступа к микрофону')
+			setMicDevices([])
+			setSelectedMicId('')
+		} finally {
+			setMicDevicesLoading(false)
+		}
+	}, [showMessage])
+
+	const onUploadFromMic = useCallback(
+		(e: React.MouseEvent) => {
+			e.stopPropagation()
+			e.preventDefault()
+			setMicPanelOpen(true)
+			void refreshMicDevices()
+		},
+		[refreshMicDevices]
+	)
+
+	const onMicStartStop = useCallback(
+		async (e: React.MouseEvent) => {
+			e.stopPropagation()
+			e.preventDefault()
+			if (isRecording) {
+				mediaRecorderRef.current?.stop()
+				return
+			}
+			const mime = pickRecordingMime()
+			if (!mime) {
+				showMessage('Запись в этом браузере недоступна')
+				return
+			}
+			try {
+				const constraints: MediaStreamConstraints = {
+					audio: selectedMicId ? { deviceId: { exact: selectedMicId } } : true,
+				}
+				const stream = await navigator.mediaDevices.getUserMedia(constraints)
+				mediaStreamRef.current = stream
+				const rec = new MediaRecorder(stream, { mimeType: mime })
+				mediaRecorderRef.current = rec
+				const chunks: BlobPart[] = []
+				rec.ondataavailable = (ev) => {
+					if (ev.data.size) chunks.push(ev.data)
+				}
+				rec.onstop = () => {
+					const blob = new Blob(chunks, { type: mime })
+					mediaRecorderRef.current = null
+					stopMediaStream()
+					setIsRecording(false)
+					/* бэкенд ожидает аудио WebM под расширением .weba */
+					const ext = mime.includes('ogg') ? 'ogg' : 'weba'
+					const file = new File([blob], `voice-record.${ext}`, { type: mime })
+					applyFile(file)
+					setMicPanelOpen(false)
+					setMicDevices([])
+				}
+				rec.start()
+				setIsRecording(true)
+			} catch {
+				showMessage('Не удалось начать запись')
+				discardRecording()
+			}
+		},
+		[applyFile, discardRecording, isRecording, selectedMicId, showMessage, stopMediaStream]
+	)
+
+	useEffect(() => {
+		return () => {
+			discardRecording()
+		}
+	}, [discardRecording])
+
+	useEffect(() => {
+		if (!pickedFile) return
+		setVoiceTitle(defaultTitleFromFile(pickedFile))
+	}, [pickedFile])
+
+	const openFileDialog = () => {
+		fileInputRef.current?.click()
+	}
+
+	const onFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const f = e.target.files?.[0]
+		if (f) applyFile(f)
+		e.target.value = ''
+	}
+
+	const onDragEnter = (e: React.DragEvent) => {
+		e.preventDefault()
+		e.stopPropagation()
+		dragDepthRef.current += 1
+		setIsDragging(true)
+	}
+
+	const onDragLeave = (e: React.DragEvent) => {
+		e.preventDefault()
+		e.stopPropagation()
+		dragDepthRef.current -= 1
+		if (dragDepthRef.current <= 0) {
+			dragDepthRef.current = 0
+			setIsDragging(false)
+		}
+	}
+
+	const onDragOver = (e: React.DragEvent) => {
+		e.preventDefault()
+		e.stopPropagation()
+	}
+
+	const onDrop = (e: React.DragEvent) => {
+		e.preventDefault()
+		e.stopPropagation()
+		dragDepthRef.current = 0
+		setIsDragging(false)
+		const f = e.dataTransfer.files?.[0]
+		if (f) applyFile(f)
+	}
+
+	const onTrain = async () => {
+		if (!pickedFile || !session?.access) {
+			if (!session?.access) showMessage('Нет авторизации')
+			return
+		}
+		setTraining(true)
+		try {
+			const titleForApi = voiceTitle.trim() || DEFAULT_VOICE_TITLE
+			const res = await createMediaVoice(pickedFile, session.access, titleForApi)
+			if (res.status >= 400) {
+				const data = res.data as { detail?: unknown }
+				const detail = data?.detail
+				const msg =
+					typeof detail === 'string'
+						? detail
+						: Array.isArray(detail)
+							? detail.map((d) => (typeof d === 'object' && d && 'msg' in d ? String((d as { msg: string }).msg) : String(d))).join(', ')
+							: 'Не удалось загрузить голос'
+				showMessage(msg)
+				return
+			}
+			await onSuccess()
+			showMessage('Голос добавлен', 'success')
+			modal.setState(false)
+			resetFile()
+		} catch {
+			showMessage('Не удалось загрузить голос')
+		} finally {
+			setTraining(false)
+		}
+	}
+
+	return (
+		<PlateTemplate
+			id={PLATE_ADD_VOICE}
+			headerClassName={styles.container}
+			variant='secondary'
+			contentBackgroundColor='#151518'
+			closeModal={() => {}}
+		>
+			<div className={styles.modal}>
+				{modalView === ModalView.PickSource ? (
+					<div
+						className={c(styles.upload, isDragging && styles.upload_dragging)}
+						onClick={openFileDialog}
+						onDragEnter={onDragEnter}
+						onDragLeave={onDragLeave}
+						onDragOver={onDragOver}
+						onDrop={onDrop}
+						role='button'
+						tabIndex={0}
+						onKeyDown={(e) => {
+							if (e.key === 'Enter' || e.key === ' ') {
+								e.preventDefault()
+								openFileDialog()
+							}
+						}}
+					>
+						<input
+							ref={fileInputRef}
+							type='file'
+							className={styles.visuallyHidden}
+							accept={FILE_ACCEPT}
+							onChange={onFileInputChange}
+						/>
+						<div className={styles.uploadIcon} aria-hidden>
+							<svg width='55' height='55' viewBox='0 0 55 55' fill='none' xmlns='http://www.w3.org/2000/svg'>
+								<path
+									d='M20.6276 29.7917H34.3776M27.5026 22.9167V36.6667M38.9609 48.125H16.0443C14.8287 48.125 13.6629 47.6421 12.8034 46.7826C11.9438 45.923 11.4609 44.7572 11.4609 43.5417V11.4583C11.4609 10.2428 11.9438 9.07697 12.8034 8.21743C13.6629 7.35789 14.8287 6.875 16.0443 6.875H28.8455C29.4533 6.87513 30.0361 7.11666 30.4657 7.54646L42.8728 19.9535C43.3026 20.3832 43.5441 20.966 43.5443 21.5737V43.5417C43.5443 44.7572 43.0614 45.923 42.2018 46.7826C41.3423 47.6421 40.1765 48.125 38.9609 48.125Z'
+									stroke='#A4AAB5'
+									strokeWidth='4'
+									strokeLinecap='round'
+									strokeLinejoin='round'
+								/>
+							</svg>
+						</div>
+						<h2 className={styles.title}>
+							Загрузите примеры голоса <br /> для клонирования
+						</h2>
+						<p className={styles.hint}>
+							аудиофайлы в формате <span className={styles.hintAccent}>.mp3</span> или{' '}
+							<span className={styles.hintAccent}>.wav</span>, не более{' '}
+							<span className={styles.hintAccent}>10MB</span> каждый
+						</p>
+						{showMicInvite ? (
+							<>
+								<p className={styles.or} onClick={(e) => e.stopPropagation()}>
+									или
+								</p>
+								<CommonButton
+									type='button'
+									variant='primary'
+									className={styles.uploadFromMicBtn}
+									onClick={onUploadFromMic}
+								>
+									Записать аудио с микрофона
+								</CommonButton>
+							</>
+						) : null}
+						{showMicPanel ? (
+							<div className={styles.micPanel} onClick={(e) => e.stopPropagation()}>
+								{micPanelPhase === MicPanelPhase.LoadingList ? (
+									<p className={styles.micHint}>Загрузка списка микрофонов…</p>
+								) : null}
+								{micPanelPhase === MicPanelPhase.NoMicrophones ? (
+									<p className={styles.micHint}>Нет доступных микрофонов. Проверьте разрешения браузера.</p>
+								) : null}
+								{showMicDeviceRow ? (
+									<div className={styles.micRow}>
+										<select
+											className={styles.micSelect}
+											value={selectedMicId}
+											onChange={(ev) => setSelectedMicId(ev.target.value)}
+											disabled={micPanelPhase === MicPanelPhase.Recording}
+											aria-label='Микрофон'
+										>
+											{micDevices.map((d, i) => (
+												<option key={d.deviceId || String(i)} value={d.deviceId}>
+													{d.label?.trim() || `Микрофон ${i + 1}`}
+												</option>
+											))}
+										</select>
+										<CommonButton
+											type='button'
+											variant='primary'
+											className={styles.micStartBtn}
+											onClick={(ev) => void onMicStartStop(ev)}
+										>
+											{micPanelPhase === MicPanelPhase.Recording ? 'Остановить' : 'Начать'}
+										</CommonButton>
+									</div>
+								) : null}
+							</div>
+						) : null}
+					</div>
+				) : (
+					<div className={styles.previewBlock}>
+						<CommonInput
+							label='Название'
+							variant='outline'
+							placeholder={DEFAULT_VOICE_TITLE}
+							value={voiceTitle}
+							onChange={(e) => setVoiceTitle(e.target.value)}
+						/>
+						<div className={styles.playerWrap}>
+							<AudioPlayer
+								key={previewUrl ?? 'none'}
+								uid={PREVIEW_PLAYER_UID}
+								url={previewUrl ?? undefined}
+								content={voiceTitle.trim() || DEFAULT_VOICE_TITLE}
+								buttonText='Скачать аудио'
+								device={desktop ? 'desktop' : 'mobile'}
+								style={{
+									width: '100%',
+									height: '48px',
+								}}
+							>
+								<source src={previewUrl!} type={audioMime(pickedFile!)} />
+								Ваш браузер не поддерживает аудио.
+							</AudioPlayer>
+						</div>
+						<div className={styles.actions}>
+							<CommonButton
+								type='button'
+								variant='outline'
+								className={styles.actionBtn}
+								disabled={training}
+								onClick={resetFile}
+							>
+								Попробовать ещё
+							</CommonButton>
+							<CommonButton
+								type='button'
+								variant='primary'
+								className={c(styles.actionBtn, styles.trainBtn)}
+								disabled={training || !session?.access}
+								onClick={() => void onTrain()}
+							>
+								Обучить &gt;
+							</CommonButton>
+						</div>
+					</div>
+				)}
+			</div>
+		</PlateTemplate>
+	)
+}
@@ -0,0 +1 @@
+export { AddVoicePlate } from './add-voice-plate'
@@ -0,0 +1 @@
+export { VoiceCloneSelect } from './voice-clone-select'
@@ -0,0 +1,61 @@
+.subheader {
+	background-color: #151518;
+	color: #a4aab5;
+	font-weight: 600;
+	font-size: 12px;
+	line-height: 32px;
+}
+
+.hiddenAudio {
+	display: none;
+}
+
+/* min-height синхронизирован с VOICE_SELECT_ROW_HEIGHT в voice-clone-select.tsx */
+.menuItemRow {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	min-height: 58px;
+	padding-block: 0;
+	background-color: transparent;
+	overflow: hidden;
+}
+
+.menuItemRowAlt {
+	background-color: #1d1d21;
+}
+
+/* ширина/высота = VOICE_PREVIEW_PLAY_SIZE в voice-clone-select.tsx */
+.menuPlaySlot {
+	flex-shrink: 0;
+	width: 26px;
+	height: 26px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.rowActions {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	gap: 0;
+	margin-left: 2px;
+}
+
+.titleInput {
+	flex: 1;
+	min-width: 0;
+	padding: 4px 8px;
+	border-radius: 6px;
+	border: 1px solid #5a5a5a;
+	background: #2a2a2a;
+	color: #e0e0e0;
+	font-size: 15px;
+	line-height: 1.2;
+	outline: none;
+
+	&:focus {
+		border-color: #827fff;
+	}
+}
@@ -0,0 +1,481 @@
+import { Pause, PlayArrow } from '@mui/icons-material'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import {
+	Box,
+	IconButton,
+	ListSubheader,
+	MenuItem,
+	Select,
+	SelectChangeEvent,
+	Stack,
+	Typography,
+} from '@mui/material'
+import type { MenuProps } from '@mui/material/Menu'
+import Image from 'next/image'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { deleteMediaVoice, MediaVoiceItem, patchMediaVoiceTitle } from '#/entities/audio-model'
+import { baseColor } from '#/shared/lib/constants/colors'
+import { c } from '#/shared/lib/helpers'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { TooltipCustom } from '#/shared'
+
+import styles from './voice-clone-select.module.scss'
+
+const VOICE_TITLE_DISPLAY_MAX = 15
+
+function formatVoiceSelectLabel(full: string): { text: string; tooltip?: string } {
+	if (full.length <= VOICE_TITLE_DISPLAY_MAX) return { text: full }
+	return { text: `${full.slice(0, VOICE_TITLE_DISPLAY_MAX)}…`, tooltip: full }
+}
+
+function VoiceSelectLabel({ full }: { full: string }) {
+	const { text, tooltip } = formatVoiceSelectLabel(full)
+	const typo = (
+		<Typography sx={{ fontSize: '18px' }} noWrap component='span' display='block'>
+			{text}
+		</Typography>
+	)
+	if (!tooltip) return typo
+	return (
+		<TooltipCustom title={tooltip} placement='top'>
+			{typo}
+		</TooltipCustom>
+	)
+}
+
+/** Иконки из /public (как в api-keys, account) */
+const VOICE_ICON_EDIT = '/svg/account/pencil.svg'
+const VOICE_ICON_SAVE = '/svg/tic.svg'
+const VOICE_ICON_DELETE = '/svg/main_menu/trash.svg'
+
+/** Высота поля селекта и строк меню (px) */
+const VOICE_SELECT_ROW_HEIGHT = 58
+
+/** Круглая кнопка превью (px), без класса плеера 42px */
+const VOICE_PREVIEW_PLAY_SIZE = 26
+
+const previewPlayIconButtonSx = {
+	flexShrink: 0,
+	width: VOICE_PREVIEW_PLAY_SIZE,
+	height: VOICE_PREVIEW_PLAY_SIZE,
+	minWidth: VOICE_PREVIEW_PLAY_SIZE,
+	padding: 0,
+	borderRadius: '50%',
+	backgroundColor: baseColor,
+	color: '#fff',
+	'&:hover': {
+		backgroundColor: '#6d6be0',
+	},
+} as const
+
+const previewPlayIconSx = { fontSize: 14 } as const
+
+const voiceActionIconButtonSx = {
+	flexShrink: 0,
+	width: 32,
+	height: 32,
+	minWidth: 32,
+	padding: 0,
+	borderRadius: '8px',
+	color: '#8280ff',
+	'&:hover': {
+		backgroundColor: 'rgba(130, 128, 255, 0.12)',
+	},
+	'&.Mui-disabled': {
+		opacity: 0.45,
+	},
+} as const
+
+const selectSx = {
+	boxShadow: 'none',
+	borderRadius: '13px',
+	backgroundColor: '#4B4B4B',
+	border: '2px solid #40404E;',
+	color: '#A6A5A5',
+	'.MuiOutlinedInput-root': {
+		minHeight: VOICE_SELECT_ROW_HEIGHT,
+		height: VOICE_SELECT_ROW_HEIGHT,
+	},
+	'.MuiSelect-select': {
+		display: 'flex',
+		alignItems: 'center',
+		minHeight: VOICE_SELECT_ROW_HEIGHT,
+		height: '100%',
+		paddingTop: 0,
+		paddingBottom: 0,
+		boxSizing: 'border-box',
+	},
+	'.MuiSelect-icon': {
+		color: '#A6A5A5',
+	},
+	'&& fieldset': {
+		border: '0px solid transparent',
+	},
+	'&.Mui-focused': {
+		border: '2px solid #40404E;',
+		borderColor: baseColor,
+		'& .MuiOutlinedInput-notchedOutline': {
+			border: 'none',
+		},
+	},
+	'&:hover': {
+		'&& fieldset': {
+			border: '0px solid transparent',
+		},
+	},
+} as const
+
+/** Как в Autocomplete listbox / прочих меню: ограничение высоты + overflow; скроллбар — globals `.smallScroll` (см. voice-cloning-model, image-model). */
+const VOICE_SELECT_MENU_LIST_MAX_HEIGHT = 'min(45vh, 400px)'
+
+const VOICE_SELECT_MENU_PROPS: Partial<MenuProps> = {
+	transitionDuration: 0,
+	PaperProps: {
+		sx: {
+			backgroundColor: '#151518',
+			borderRadius: '8px',
+			marginTop: '8px',
+			boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.04), 0px 4px 32px rgba(0, 0, 0, 0.16)',
+		},
+	},
+	MenuListProps: {
+		className: 'smallScroll',
+		sx: {
+			color: '#A6A5A5',
+			backgroundColor: '#151518',
+			maxHeight: VOICE_SELECT_MENU_LIST_MAX_HEIGHT,
+			overflowY: 'auto',
+			scrollbarGutter: 'stable',
+			'& .MuiMenuItem-root': {
+				minHeight: VOICE_SELECT_ROW_HEIGHT,
+			},
+		},
+	},
+}
+
+type Props = {
+	voices: MediaVoiceItem[]
+	presets: MediaVoiceItem[]
+	value: string
+	loading: boolean
+	onSelect: (item: MediaVoiceItem) => void
+	/** Токен для PATCH/DELETE голосов; без него кнопки не показываются */
+	accessToken?: string
+	onVoiceListChanged?: () => void
+	/** После удаления — сбросить выбранный uid, если удалён он */
+	onDeletedVoice?: (uid: string) => void
+}
+
+export function VoiceCloneSelect({
+	voices,
+	presets,
+	value,
+	loading,
+	onSelect,
+	accessToken,
+	onVoiceListChanged,
+	onDeletedVoice,
+}: Props) {
+	const { showMessage } = useShowDataStore()
+	const all = [...voices, ...presets]
+	const audioRef = useRef<HTMLAudioElement | null>(null)
+	const [playingUid, setPlayingUid] = useState<string | null>(null)
+	const [editingUid, setEditingUid] = useState<string | null>(null)
+	const [editDraft, setEditDraft] = useState('')
+	const [mutatingUid, setMutatingUid] = useState<string | null>(null)
+
+	const stopPreview = useCallback(() => {
+		const el = audioRef.current
+		if (el) {
+			el.pause()
+		}
+		setPlayingUid(null)
+	}, [])
+
+	const togglePreview = useCallback(
+		(item: MediaVoiceItem) => {
+			const el = audioRef.current
+			if (!el || !item.file?.trim()) return
+
+			if (playingUid === item.uid) {
+				el.pause()
+				setPlayingUid(null)
+				return
+			}
+
+			el.pause()
+			el.src = item.file
+			el.currentTime = 0
+			const p = el.play()
+			if (p !== undefined) {
+				p.then(() => setPlayingUid(item.uid)).catch(() => setPlayingUid(null))
+			}
+		},
+		[playingUid]
+	)
+
+	useEffect(() => {
+		const el = audioRef.current
+		if (!el) return
+		const onEnded = () => setPlayingUid(null)
+		el.addEventListener('ended', onEnded)
+		return () => {
+			el.removeEventListener('ended', onEnded)
+		}
+	}, [])
+
+	useEffect(
+		() => () => {
+			audioRef.current?.pause()
+		},
+		[]
+	)
+
+	const onChange = (e: SelectChangeEvent<string>) => {
+		const uid = e.target.value
+		const item = all.find((v) => v.uid === uid) ?? null
+		if (item) {
+			onSelect(item)
+		}
+	}
+
+	const closeMenuExtras = useCallback(() => {
+		stopPreview()
+		setEditingUid(null)
+		setEditDraft('')
+	}, [stopPreview])
+
+	const commitRename = useCallback(
+		async (item: MediaVoiceItem) => {
+			if (!accessToken) return
+			const trimmed = editDraft.trim()
+			if (!trimmed) {
+				showMessage('Введите название')
+				return
+			}
+			setMutatingUid(item.uid)
+			try {
+				const res = await patchMediaVoiceTitle(item.uid, trimmed, accessToken)
+				if (res.status >= 400) {
+					showMessage('Не удалось изменить название')
+					return
+				}
+				setEditingUid(null)
+				setEditDraft('')
+				onVoiceListChanged?.()
+				showMessage('Название изменено', 'success')
+			} finally {
+				setMutatingUid(null)
+			}
+		},
+		[accessToken, editDraft, onVoiceListChanged, showMessage]
+	)
+
+	const removeVoice = useCallback(
+		async (item: MediaVoiceItem) => {
+			if (!accessToken) return
+			if (!window.confirm('Удалить этот голос?')) return
+			setMutatingUid(item.uid)
+			try {
+				const res = await deleteMediaVoice(item.uid, accessToken)
+				if (res.status >= 400) {
+					showMessage('Не удалось удалить голос')
+					return
+				}
+				if (editingUid === item.uid) {
+					setEditingUid(null)
+					setEditDraft('')
+				}
+				onDeletedVoice?.(item.uid)
+				onVoiceListChanged?.()
+				showMessage('Голос удалён', 'success')
+			} finally {
+				setMutatingUid(null)
+			}
+		},
+		[accessToken, editingUid, onDeletedVoice, onVoiceListChanged, showMessage]
+	)
+
+	const flatDisabled = !loading && all.length === 0
+
+	const renderVoiceMenuItem = (item: MediaVoiceItem, optionIndex: number, isUserVoice: boolean) => {
+		const hasPreview = Boolean(item.file?.trim())
+		const isEditing = editingUid === item.uid
+		const busy = mutatingUid === item.uid
+		const showActions = isUserVoice && Boolean(accessToken)
+
+		return (
+			<MenuItem
+				key={item.uid}
+				value={item.uid}
+				className={c(styles.menuItemRow, optionIndex % 2 === 1 && styles.menuItemRowAlt)}
+			>
+				{hasPreview ? (
+					<IconButton
+						size='small'
+						sx={previewPlayIconButtonSx}
+						onClick={(e) => {
+							e.stopPropagation()
+							togglePreview(item)
+						}}
+						onMouseDown={(e) => e.stopPropagation()}
+						aria-label={playingUid === item.uid ? 'Пауза' : 'Прослушать пример'}
+					>
+						{playingUid === item.uid ? <Pause sx={previewPlayIconSx} /> : <PlayArrow sx={previewPlayIconSx} />}
+					</IconButton>
+				) : (
+					<Box className={styles.menuPlaySlot} aria-hidden />
+				)}
+				{isEditing ? (
+					<input
+						type='text'
+						className={styles.titleInput}
+						value={editDraft}
+						onChange={(e) => setEditDraft(e.target.value)}
+						onClick={(e) => e.stopPropagation()}
+						onMouseDown={(e) => e.stopPropagation()}
+						onKeyDown={(e) => {
+							if (e.key === 'Enter') {
+								e.preventDefault()
+								e.stopPropagation()
+								void commitRename(item)
+							}
+						}}
+						aria-label='Название голоса'
+						autoFocus
+					/>
+				) : (
+					<Box sx={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
+						<VoiceSelectLabel full={item.title} />
+					</Box>
+				)}
+				{showActions ? (
+					<Box className={styles.rowActions}>
+						<IconButton
+							type='button'
+							size='small'
+							disabled={busy}
+							sx={voiceActionIconButtonSx}
+							onMouseDown={(e) => e.stopPropagation()}
+							onClick={(e) => {
+								e.stopPropagation()
+								e.preventDefault()
+								if (isEditing) {
+									void commitRename(item)
+								} else {
+									setEditingUid(item.uid)
+									setEditDraft(item.title)
+								}
+							}}
+							aria-label={isEditing ? 'Сохранить' : 'Изменить'}
+						>
+							{isEditing ? (
+								<Image
+									src={VOICE_ICON_SAVE}
+									width={18}
+									height={14}
+									alt=''
+									style={{ display: 'block' }}
+								/>
+							) : (
+								<Image
+									src={VOICE_ICON_EDIT}
+									width={18}
+									height={18}
+									alt=''
+									style={{ display: 'block' }}
+								/>
+							)}
+						</IconButton>
+						<IconButton
+							type='button'
+							size='small'
+							disabled={busy}
+							sx={voiceActionIconButtonSx}
+							onMouseDown={(e) => e.stopPropagation()}
+							onClick={(e) => {
+								e.stopPropagation()
+								e.preventDefault()
+								void removeVoice(item)
+							}}
+							aria-label='Удалить голос'
+						>
+							<Image src={VOICE_ICON_DELETE} width={18} height={20} alt='' style={{ display: 'block' }} />
+						</IconButton>
+					</Box>
+				) : null}
+			</MenuItem>
+		)
+	}
+
+	return (
+		<Stack spacing={0.5}>
+			<audio ref={audioRef} className={styles.hiddenAudio} preload='none' />
+			<Typography className='title-main-gray'>Голос</Typography>
+			<Select
+				disabled={loading || flatDisabled}
+				displayEmpty
+				IconComponent={KeyboardArrowDownIcon}
+				value={value}
+				onChange={onChange}
+				onClose={closeMenuExtras}
+				renderValue={(selected) => {
+					if (!selected) {
+						return (
+							<Typography component='span' sx={{ fontSize: '18px', color: '#6e6e6e' }}>
+								{loading ? 'Загрузка...' : flatDisabled ? 'Нет доступных голосов' : 'Выберите голос'}
+							</Typography>
+						)
+					}
+					const item = all.find((v) => v.uid === selected)
+					const title = item?.title ?? String(selected)
+					const hasPreview = Boolean(item?.file?.trim())
+
+					return (
+						<Box
+							sx={{
+								display: 'flex',
+								alignItems: 'center',
+								gap: 1,
+								width: '100%',
+								minWidth: 0,
+								height: '56px',
+								overflow: 'hidden',
+							}}
+						>
+							{hasPreview && item ? (
+								<IconButton
+									size='small'
+									sx={previewPlayIconButtonSx}
+									onClick={(e) => {
+										e.stopPropagation()
+										togglePreview(item)
+									}}
+									onMouseDown={(e) => e.stopPropagation()}
+									aria-label={playingUid === item.uid ? 'Пауза' : 'Прослушать пример'}
+								>
+									{playingUid === item.uid ? <Pause sx={previewPlayIconSx} /> : <PlayArrow sx={previewPlayIconSx} />}
+								</IconButton>
+							) : null}
+							<Box sx={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
+								<VoiceSelectLabel full={title} />
+							</Box>
+						</Box>
+					)
+				}}
+				MenuProps={VOICE_SELECT_MENU_PROPS}
+				style={{
+					backgroundColor: 'transparent',
+				}}
+				sx={selectSx}
+				fullWidth
+			>
+				{voices.length > 0 && <ListSubheader className={styles.subheader}>Мои голоса</ListSubheader>}
+				{voices.map((v, i) => renderVoiceMenuItem(v, i, true))}
+				{presets.length > 0 && <ListSubheader className={styles.subheader}>Пресеты</ListSubheader>}
+				{presets.map((v, i) => renderVoiceMenuItem(v, voices.length + i, false))}
+			</Select>
+		</Stack>
+	)
+}
@@ -0,0 +1,2 @@
+export { default } from './voice-cloning-model'
+export { default as VoiceCloningModelPage } from './voice-cloning-model'
@@ -0,0 +1,181 @@
+.container {
+	width: 100%;
+	border-radius: 15px;
+	height: 100%;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	background-color: var(--new-ui-main-color);
+	opacity: 0;
+	z-index: -1;
+	transition: all 0.3s ease-in-out;
+
+	&_active {
+		opacity: 1;
+		z-index: 100;
+	}
+}
+
+.staticTabsWrapper {
+	display: flex;
+	align-items: center;
+	width: calc(24.5% + 2px);
+	margin-left: auto;
+	margin-right: calc(3%);
+	margin-top: 0;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	gap: 22px;
+	margin: 14px 0;
+
+	> *:first-child {
+		min-width: 200px;
+	}
+
+	@media screen and (max-width: 768px) {
+		align-items: flex-start;
+		width: 100%;
+		max-width: 100%;
+		gap: 4px;
+		overflow-x: hidden;
+	}
+}
+@keyframes fadein {
+	0% {
+		opacity: 0;
+	}
+	50% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.icon {
+}
+
+
+.tags {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: flex-end;
+
+	@media screen and (max-width: 768px) {
+		overflow-x: auto;
+		overflow-y: hidden;
+		width: 100%;
+		min-width: 0;
+		max-width: 100%;
+		align-self: stretch;
+		-webkit-overflow-scrolling: touch;
+	}
+}
+
+.tag {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: white;
+	border-radius: 100px;
+	width: 50px;
+	height: 50px;
+	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
+	transition: width 0.3s ease-in-out;
+
+	@media screen and (max-width: 768px) {
+		width: 150px;
+		height: 40px;
+		padding: 12px;
+		transition: none;
+		flex-shrink: 0;
+
+		.tag__text {
+			opacity: 1;
+			position: static;
+			display: block;
+		}
+	}
+
+	&__icon {
+		color: var(--air-color);
+	}
+
+	&:hover {
+		padding: 12px;
+		width: 200px;
+
+		@media screen and (max-width: 768px) {
+			width: 150px;
+
+			.tag__icon {
+				animation: none;
+			}
+
+			.tag__text {
+				animation: none;
+			}
+		}
+
+		@media screen and (min-width: 769px) {
+			.tag__icon {
+				animation: fadein 0.6s ease-in-out;
+			}
+
+			.tag__text {
+				opacity: 1;
+				position: static;
+				animation: fadein 0.6s ease-in-out;
+				display: block;
+			}
+		}
+	}
+
+	&__text {
+		position: absolute;
+		color: var(--air-color);
+		font-weight: 500;
+		padding-left: 10px;
+		font-size: 14px;
+		opacity: 0;
+		display: none;
+		min-width: max-content !important;
+	}
+}
+
+.blocked {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #c32528;
+	padding: 20px;
+	gap: 10px;
+	position: absolute;
+
+	left: 0;
+
+	width: 100%;
+	border-radius: 15px;
+	top: 0;
+
+	@media screen and (max-width: 768px) {
+		top: unset;
+		// bottom: -22px;
+		z-index: 1;
+		border-radius: 15px;
+	}
+
+	&__text {
+		color: white !important;
+		font-size: 16px;
+		font-weight: 600;
+	}
+}
+
@@ -0,0 +1,585 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Box, Collapse, Stack, Typography } from '@mui/material'
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+import { useSession } from 'next-auth/react'
+
+import styles from './voice-cloning-model.module.scss'
+
+import { ChatSelect } from '#/app/components/chat_select'
+import { ResetFilters } from '#/app/components/filters/reset_filters'
+import BlockedSvg from '#/assets/svg/blocked.svg?react'
+import { useImageBot } from '#/entities/model-entity/model/use-image-bot'
+import BotParamsMap from '#/features/bot-params/bot-params-map'
+import { useCreateMediaMessage } from '#/features/create-media-message'
+import { useImagesBotFilters } from '#/features/image-bot-filters'
+import { useImagesUniqInput } from '#/features/image-bot-input'
+import { useMediaBotPagination } from '#/features/image-bot-pagination'
+import { ModelInput } from '#/features/model-input'
+import { usePredictPrice } from '#/features/predict-price/model/use-predict-price'
+import Title from '#/features/title/title'
+import { getVoicesAndPresets, MediaVoiceItem } from '#/entities/audio-model'
+import { MessageSend } from '#/entities/message'
+import { NextPageWithLayout } from '#/pages/_app'
+import { DrawerCustom, Loader } from '#/shared'
+import { c, getDeviceType, getOs } from '#/shared/lib/helpers'
+import { useProgressLoader } from '#/shared/lib/hooks/use-progress-loader'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { SvgIcon } from '#/shared/ui/svg'
+import ProgressLoader from '#/widgets/loaders/progress-loader-props'
+import { AudioMessagesList } from '#/widgets/messages/ui/audio-messages-list'
+import { ModelApiView, StaticTabs } from '#/widgets/model-api-view'
+import { useDeviceType } from '#/shared/lib/hooks'
+
+import { AddVoiceCta } from '../add-voice-cta'
+import { AddVoicePlate } from '../add-voice-plate'
+import { VoiceCloneSelect } from '../voice-clone-select'
+
+const VoiceCloningModelPage: NextPageWithLayout = () => {
+	const { query, push } = useRouter()
+	const { data: session } = useSession()
+	const { showMessage } = useShowDataStore()
+
+	const deviceType = getDeviceType()
+	const deviceOs = getOs()
+	const { desktop } = useDeviceType(deviceType, deviceOs)
+
+	const [scope, setScope] = useState<'playground' | 'api'>('playground')
+	const [prompt, setPrompt] = useState('')
+	const [selectedVoiceUid, setSelectedVoiceUid] = useState('')
+	const [voices, setVoices] = useState<MediaVoiceItem[]>([])
+	const [presets, setPresets] = useState<MediaVoiceItem[]>([])
+	const [voicesLoading, setVoicesLoading] = useState(false)
+
+	const { botParams, version, modelType, fetchBotParams, resetParams, setDefaultParams, setVersion } = useImageBot(query.slug as string)
+	const { openFiltersMobile, setOpenFiltersMobile, params, setParams, includeParams } = useImagesBotFilters()
+	const { refScrollMobile, refScrollDesktop, mobileScrollContainer, onObserverMounted, setMessages, fetchMessages, loading, offset, messages } =
+		useMediaBotPagination(deviceType, 'voice')
+	const { createImage, isComplete, createLoading } = useCreateMediaMessage(
+		showMessage,
+		modelType,
+		'voice',
+		deviceType,
+		setMessages,
+		mobileScrollContainer
+	)
+
+	const createWithVoice = useCallback(
+		<T,>(dataForSend: MessageSend<T>) => {
+			const baseInfo =
+				typeof dataForSend.info === 'object' && dataForSend.info !== null
+					? { ...(dataForSend.info as Record<string, unknown>) }
+					: {}
+
+			const voiceOrPreset = presets.some((p) => p.uid === selectedVoiceUid)
+						? { preset_id: selectedVoiceUid }
+						: { voice_id: selectedVoiceUid }
+
+			return createImage({
+				...dataForSend,
+				 ...baseInfo, ...voiceOrPreset 
+			})
+		},
+		[createImage, selectedVoiceUid, presets]
+	)
+
+	const { onCreateImage, onLoadImage, image, setImage } = useImagesUniqInput(version, includeParams, createWithVoice)
+
+	const onVoiceSelect = useCallback((item: MediaVoiceItem) => {
+		setSelectedVoiceUid(item.uid)
+	}, [])
+
+	const refetchVoicesAndPresets = useCallback(async () => {
+		if (!session?.access) return
+		setVoicesLoading(true)
+		try {
+			const { voices: v, presets: p } = await getVoicesAndPresets(session.access)
+			setVoices(v)
+			setPresets(p)
+		} finally {
+			setVoicesLoading(false)
+		}
+	}, [session?.access])
+
+	const allVoiceOptions = useMemo(() => [...voices, ...presets], [voices, presets])
+
+	useEffect(() => {
+		if (voicesLoading || allVoiceOptions.length === 0) return
+		const valid = Boolean(selectedVoiceUid && allVoiceOptions.some((v) => v.uid === selectedVoiceUid))
+		if (!valid) {
+			onVoiceSelect(allVoiceOptions[0])
+		}
+	}, [voicesLoading, allVoiceOptions, selectedVoiceUid, onVoiceSelect])
+
+	const { progress, isVisible: isProgressVisible } = useProgressLoader({
+		isLoading: createLoading,
+		duration: 150000, // 150 секунд для создания аудио
+	})
+
+	async function onFetch() {
+		const result = await fetchBotParams()
+
+		if (typeof result === 'string' || !result) {
+			showMessage(result || 'Произошла ошибка')
+			return push('/404')
+		}
+	}
+
+	useEffect(() => {
+		if (!session) return
+		onFetch()
+		onObserverMounted()
+	}, [session?.access])
+
+	useEffect(() => {
+		if (!session?.access) return
+		let cancelled = false
+		setVoicesLoading(true)
+		getVoicesAndPresets(session.access)
+			.then(({ voices: v, presets: p }) => {
+				if (!cancelled) {
+					setVoices(v)
+					setPresets(p)
+				}
+			})
+			.finally(() => {
+				if (!cancelled) setVoicesLoading(false)
+			})
+		return () => {
+			cancelled = true
+		}
+	}, [session?.access])
+
+	// Подготавливаем данные для API вкладки
+	// Фильтруем параметры - оставляем только актуальные для текущей версии
+	const filteredParams = useMemo(() => {
+		if (!botParams?.parameters) {
+			return {}
+		}
+
+		// Получаем параметры, актуальные для текущей версии
+		const validParams = botParams.parameters.filter((param) => {
+			// Если у параметра нет версий - актуален для всех
+			if (param.versions.length === 0) return true
+
+			// Если нет выбранной версии - показываем все параметры
+			if (!version) return true
+
+			// Проверяем, актуален ли параметр для текущей версии
+			return param.versions.includes(version)
+		})
+
+		// Создаем объект: если есть значение в Redux - берем его, иначе - дефолтное
+		return validParams.reduce(
+			(acc, param) => ({
+				...acc,
+				// @ts-ignore
+				[param.key]: includeParams?.[param.key] ?? param.values.default,
+			}),
+			{}
+		)
+	}, [botParams?.parameters, version, includeParams])
+
+	const showFileExample = useMemo(() => {
+		if (!botParams?.inputs) return false
+
+		// Проверяем, есть ли типы кроме 'text', которые доступны для текущей версии
+		return botParams.inputs.some((input) => {
+			// Пропускаем текстовый тип
+			if (input.type === 'text') return false
+
+			// Если у input нет версий - актуален для всех
+			if (input.versions.length === 0) return true
+
+			// Если нет выбранной версии - показываем все inputs
+			if (!version) return true
+
+			// Проверяем, актуален ли input для текущей версии
+			return input.versions.includes(version)
+		})
+	}, [botParams?.inputs, version])
+
+	const predictPriceInfo = useMemo(
+		() => ({ ...(includeParams || {}), ...(version ? { version } : {}) }),
+		[includeParams, version]
+	)
+
+	const predictedPrice = usePredictPrice({
+		modelSlug: modelType,
+		content: prompt,
+		fileExists: !!image,
+		info: predictPriceInfo,
+		token: session?.access,
+		enabled: !!modelType && !!session?.access && scope === 'playground',
+	})
+
+	return (
+		<>
+			<Head>
+				<title>{botParams ? botParams?.title : 'Загрузка...'}</title>
+			</Head>
+			<div className={styles.header}>
+				<Title
+					title={botParams ? botParams.title : 'Загрузка...'}
+					type={'Клонирование голоса'}
+					linkBack={'/voice-cloning'}
+				/>
+				<div className={styles.tags}>
+							{botParams &&
+								botParams.tags.map((tag, index) => (
+									<div key={index} className={styles.tag}>
+										<SvgIcon width={23} height={23} url={tag.icon} className={styles.tag__icon} />
+
+										<span className={styles.tag__text}>{tag.title}</span>
+									</div>
+								))}
+						</div>
+				{desktop && (
+									<Stack className={styles.staticTabsWrapper}>
+										<StaticTabs scope={scope} setScope={setScope} />
+									</Stack>)}
+			</div>
+			
+						{!desktop && (
+						<Stack sx={{ display: 'flex', alignItems: 'center', width: '100%', marginTop: '10px' }}>
+							<StaticTabs scope={scope} setScope={setScope} />
+						</Stack>
+					)}
+						
+			<Box
+				display={'flex'}
+				justifyContent='space-between'
+				alignItems='start'
+				flexDirection={desktop ? 'row' : 'column-reverse'}
+				sx={{
+					marginBottom: desktop ? 0 : 2,
+					width: desktop ? '97%' : '100%',
+					marginTop: desktop ? 3 : '15px',
+				}}
+			>
+				<Box
+					sx={{
+						width: desktop ? '73%' : '100%',
+						marginLeft: 0,
+						display: 'flex',
+						flexDirection: desktop ? 'column' : 'column-reverse',
+					}}
+				>
+					{desktop ? (
+						<>
+							<Stack
+								alignItems='center'
+								sx={{
+									marginBottom: '15px',
+									position: 'relative',
+									zIndex: 1,
+								}}
+							>
+								{botParams && (
+									<ModelInput
+										currentVersion={version}
+										styles={'images'}
+										input_types={botParams.inputs}
+										image={image}
+										value={prompt}
+										onValueChange={(value: string) => setPrompt(value)}
+										desktop={desktop}
+										blocked={scope === 'playground' ? botParams.blocked : true}
+										loading={createLoading}
+										imageLoad={onLoadImage}
+										sendMessage={onCreateImage}
+										unpinImage={() => setImage(null)}
+										viewMobileSettings={() => setOpenFiltersMobile(true)}
+										predictedPrice={predictedPrice}
+									/>
+								)}
+								<Box sx={{ width: '100%', marginTop: '10px' }}>
+									{isProgressVisible && (
+										<ProgressLoader progress={progress} height={15} title='Создание аудио...' showPercentage={true} />
+									)}
+								</Box>
+								{botParams?.blocked && (
+									<div className={styles.blocked}>
+										<BlockedSvg width={16} height={16} color='white' />
+										<span className={c(styles.blocked__text)}>Модель недоступна</span>
+									</div>
+								)}
+							</Stack>
+							<Box
+								className={'bg-color-block border-radius-main'}
+								sx={{
+									padding: '30px',
+									position: 'relative',
+								}}
+							>
+								<Box sx={{ display: scope === 'api' ? 'block' : 'none' }}>
+									<ModelApiView
+										version={version || ''}
+										slug={botParams?.slug || ''}
+										APIModel='voice'
+										modelParams={filteredParams}
+										showFileExample={showFileExample}
+									/>
+								</Box>
+								<Box sx={{ display: scope === 'playground' ? 'block' : 'none' }}>
+									<AudioMessagesList device={deviceType} audios={messages} getMessagesPagination={fetchMessages} onPromptClick={(content) => setPrompt(content)} />
+								</Box>
+								<Box
+									sx={{
+										position: 'absolute',
+										bottom: '0',
+										visibility: 'hidden',
+										height: '800px',
+										width: '100%',
+									}}
+									ref={refScrollDesktop}
+								></Box>
+							</Box>
+						</>
+					) : (
+						<Box className={'bg-color-block border-radius-main'} sx={{ position: 'relative' }}>
+							<div className={c(styles.container, loading && offset.current === 0 && styles.container_active)}>
+								<div
+									style={{
+										position: 'absolute',
+										top: '50%',
+										left: '50%',
+										transform: 'translate(-50%, -50%)',
+									}}
+								>
+									<Loader />
+								</div>
+							</div>
+							<div style={{ position: 'relative', borderRadius: '13px' }}>
+								<Box
+									sx={{
+										padding: '30px',
+										height: `calc(100dvh - 116px - 61px - 15px ${botParams?.blocked ? '- 17px' : '- 23.5px'})`,
+										overflowY: 'scroll',
+										overflowX: 'hidden',
+										position: 'relative',
+									}}
+									ref={mobileScrollContainer}
+									className={'smallScroll'}
+								>
+									<Box sx={{ display: scope === 'playground' ? 'block' : 'none' }}>
+										<div style={{ position: 'absolute', top: 300 }} ref={refScrollMobile}></div>
+										<AudioMessagesList device={deviceType} audios={messages} getMessagesPagination={fetchMessages} onPromptClick={(content) => setPrompt(content)} />
+									</Box>
+
+									<Box sx={{ display: scope === 'api' ? 'block' : 'none' }}>
+										<ModelApiView
+											version={version || ''}
+											slug={botParams?.slug || ''}
+											APIModel='voice'
+											modelParams={filteredParams}
+											showFileExample={showFileExample}
+										/>
+									</Box>
+								</Box>
+
+								<Stack alignItems='center' sx={{ zIndex: 10, position: 'relative', margin: 1.25 }}>
+									{botParams && (
+										<ModelInput
+											currentVersion={version}
+											styles={'images'}
+											input_types={botParams.inputs}
+											image={image}
+											blocked={scope === 'playground' ? botParams.blocked : true}
+											value={prompt}
+											onValueChange={(value: string) => setPrompt(value)}
+											desktop={desktop}
+											loading={createLoading}
+											imageLoad={onLoadImage}
+											sendMessage={onCreateImage}
+											unpinImage={() => setImage(null)}
+											viewMobileSettings={() => setOpenFiltersMobile(true)}
+											predictedPrice={predictedPrice}
+										/>
+									)}
+									{isProgressVisible && (
+										<ProgressLoader progress={progress} height={15} title='Создание аудио...' showPercentage={true} />
+									)}
+									{botParams?.blocked && (
+										<div className={styles.blocked}>
+											<BlockedSvg width={21} height={21} color='white' />
+											<span className={c(styles.blocked__text)}>Модель недоступна</span>
+										</div>
+									)}
+								</Stack>
+							</div>
+						</Box>
+					)}
+				</Box>
+
+				<Stack spacing={2} sx={{ width: desktop ? '25.5%' : '100%', paddingBottom: desktop ? '' : '15px' }}>
+					{desktop && (
+						<Stack spacing={2} className='pd-30 bg-color-block border-radius-main' sx={{ height: 'auto' }}>
+							{botParams?.versions && botParams.versions.length !== 0 ? (
+								<>
+									<Typography
+										sx={{
+											color: '#A4AAB5',
+											fontWeight: '600',
+											fontSize: '14px',
+											letterSpacing: '0.1px',
+										}}
+									>
+										ВЕРСИИ
+									</Typography>
+									<ChatSelect
+										setDefaultParams={setDefaultParams}
+										value={version}
+										list={botParams.versions}
+										setValue={setVersion}
+									/>
+								</>
+							) : (
+								<></>
+							)}
+							<AddVoiceCta disabled={!session?.access} />
+							<VoiceCloneSelect
+								voices={voices}
+								presets={presets}
+								value={selectedVoiceUid}
+								loading={voicesLoading}
+								onSelect={onVoiceSelect}
+								accessToken={session?.access}
+								onVoiceListChanged={refetchVoicesAndPresets}
+								onDeletedVoice={(uid) => {
+									if (selectedVoiceUid === uid) setSelectedVoiceUid('')
+								}}
+							/>
+							{botParams && botParams.parameters?.length > 0 && (
+								<Box
+									display={'flex'}
+									alignItems={'center'}
+									gap={'5px'}
+									sx={{ cursor: 'pointer' }}
+									onClick={() => {
+										setParams(!params)
+									}}
+								>
+									<Typography
+										sx={{
+											color: '#A4AAB5',
+											fontWeight: '600',
+											fontSize: '14px',
+											letterSpacing: '0.1px',
+										}}
+									>
+										ПАРАМЕТРЫ
+									</Typography>
+									<svg
+										width='14'
+										height='20'
+										viewBox='0 0 21 13'
+										fill='none'
+										xmlns='http://www.w3.org/2000/svg'
+										className={`${params ? 'rotate-180' : 'rotate-0'}`}
+									>
+										<path
+											fillRule='evenodd'
+											clipRule='evenodd'
+											d='M0.614851 0.615358C1.00866 0.221668 1.54271 0.000505666 2.09955 0.000505642C2.6564 0.000505617 3.19044 0.221668 3.58425 0.615357L10.4996 7.53066L17.4149 0.615357C17.8109 0.232825 18.3414 0.0211567 18.892 0.0259414C19.4426 0.0307261 19.9693 0.25158 20.3587 0.640937C20.748 1.03029 20.9689 1.557 20.9737 2.10761C20.9784 2.65823 20.7668 3.18869 20.3842 3.58476L11.9843 11.9848C11.5904 12.3784 11.0564 12.5996 10.4996 12.5996C9.94271 12.5996 9.40866 12.3784 9.01485 11.9848L0.614851 3.58476C0.221162 3.19095 -4.3461e-07 2.6569 -4.5895e-07 2.10006C-4.8329e-07 1.54321 0.221162 1.00917 0.614851 0.615358Z'
+											fill='#7f7df3'
+										/>
+									</svg>
+								</Box>
+							)}
+
+							{botParams && botParams.parameters?.length > 0 ? (
+								<Collapse in={params} orientation='vertical' collapsedSize={0}>
+									<BotParamsMap currentVersion={version} params={botParams?.parameters} />
+									<ResetFilters desktop={desktop} closeDrawer={() => setOpenFiltersMobile(false)} reset={resetParams} />
+								</Collapse>
+							) : (
+								<Typography
+									sx={{
+										color: '#6e6e6e',
+										fontSize: '15px',
+										fontWeight: '500',
+									}}
+								>
+									Параметры отсутствуют
+								</Typography>
+							)}
+						</Stack>
+					)}
+				</Stack>
+				<DrawerCustom open={openFiltersMobile} onClose={() => setOpenFiltersMobile(false)}>
+					<Stack spacing={1} padding={2.4}>
+						{botParams?.versions && botParams.versions.length !== 0 ? (
+							<>
+								<Typography
+									sx={{
+										color: '#A4AAB5',
+										fontWeight: '600',
+										fontSize: '14px',
+										letterSpacing: '0.1px',
+										margin: '20px 0px 0px !important',
+									}}
+								>
+									ВЕРСИИ
+								</Typography>
+								<ChatSelect
+									setDefaultParams={setDefaultParams}
+									value={version}
+									list={botParams.versions}
+									setValue={setVersion}
+								/>
+							</>
+						) : (
+							<></>
+						)}
+						<Box sx={{ marginTop: '12px' }}>
+							<AddVoiceCta disabled={!session?.access} />
+							<VoiceCloneSelect
+								voices={voices}
+								presets={presets}
+								value={selectedVoiceUid}
+								loading={voicesLoading}
+								onSelect={onVoiceSelect}
+								accessToken={session?.access}
+								onVoiceListChanged={refetchVoicesAndPresets}
+								onDeletedVoice={(uid) => {
+									if (selectedVoiceUid === uid) setSelectedVoiceUid('')
+								}}
+							/>
+						</Box>
+						{botParams && botParams.parameters?.length > 0 ? (
+							<>
+								<Typography
+									sx={{
+										color: '#A4AAB5',
+										fontWeight: '600',
+										fontSize: '14px',
+										letterSpacing: '0.1px',
+										margin: '20px 0px 0px !important',
+									}}
+								>
+									ПАРАМЕТРЫ
+								</Typography>
+								<BotParamsMap currentVersion={version} params={botParams?.parameters} />
+								<ResetFilters closeDrawer={() => setOpenFiltersMobile(false)} desktop={desktop} reset={resetParams} />
+							</>
+						) : (
+							<Typography
+								sx={{
+									color: '#6e6e6e',
+									fontSize: '15px',
+									fontWeight: '500',
+								}}
+							>
+								Параметры отсутствуют
+							</Typography>
+						)}
+					</Stack>
+				</DrawerCustom>
+			</Box>
+			<AddVoicePlate onSuccess={refetchVoicesAndPresets} />
+		</>
+	)
+}
+
+export default VoiceCloningModelPage
@@ -0,0 +1,2 @@
+export { default } from './voice-cloning-models'
+export { VoiceCloningModelsPage } from './voice-cloning-models'
@@ -0,0 +1,31 @@
+.apiButton {
+	margin-left: 15px;
+	margin-top: 25px;
+}
+
+.cards {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+
+	align-items: flex-start;
+	justify-content: flex-start;
+	justify-items: stretch;
+
+	@media screen and (max-width: 1000px) {
+		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+	}
+	gap: 20px;
+	padding-top: 40px;
+
+	margin-right: 60px;
+
+	@media screen and (min-width: 1820px) {
+		margin-right: 240px;
+		grid-template-columns: repeat(auto-fit, 360px);
+	}
+
+	@media screen and (max-width: 1000px) {
+		margin-right: 0px;
+	}
+}
+
@@ -0,0 +1,72 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import { Box, Typography } from '@mui/material'
+import CircularProgress from '@mui/material/CircularProgress'
+import { useSession } from 'next-auth/react'
+
+import { useAppSelector } from '#/app/store/store'
+import { getVoiceCloneModels } from '#/entities/audio-model'
+import { AudioModelCard, IShortModel } from '#/entities/model-entity'
+import { NextPageWithLayout } from '#/pages/_app'
+
+import styles from './voice-cloning-models.module.scss'
+import { getDeviceType, getOs } from '#/shared/lib/helpers'
+import { useDeviceType } from '#/shared/lib/hooks'
+
+export const VoiceCloningModelsPage: NextPageWithLayout = () => {
+	const [models, setModels] = useState<IShortModel[] | null>(null)
+	const deviceType = getDeviceType()
+	const deviceOs = getOs()
+	const { desktop } = useDeviceType(deviceType, deviceOs)
+
+	const { data, status } = useSession()
+	const payment_plan = useAppSelector((state) => state.user.payment_plan)
+
+	useEffect(() => {
+		if (!data) return
+
+		getVoiceCloneModels(data.access).then((res) => setModels(res)).catch(() => {
+			setModels([])
+		})
+	}, [status])
+
+	return (
+		<>
+			<Box
+				sx={{
+					display: 'flex',
+					alignItems: 'center',
+				}}
+			>
+				<Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>Клонирование голоса</Typography>
+			</Box>
+			<Box className={styles.cards} sx={{ position: 'relative', marginRight: desktop ? '60px' : '0px' }}>
+				{models ? (
+					models.map((item, index) => (
+						<AudioModelCard
+							accessed_models={payment_plan.plan.accessed_models}
+							modelsBasePath='voice-cloning'
+							key={item.slug || item.title || index}
+							{...item}
+						/>
+					))
+				) : (
+					<CircularProgress
+						size={50}
+						thickness={3}
+						sx={{
+							color: '#7F7DF3',
+							position: 'absolute',
+							top: '40%',
+							left: 0,
+							right: 0,
+							margin: '0 auto',
+						}}
+					/>
+				)}
+			</Box>
+		</>
+	)
+}
+
+export default VoiceCloningModelsPage
@@ -0,0 +1,2 @@
+export { default as VoiceCloningModelsPage } from './voice-cloning-models'
+export { default as VoiceCloningModelPage } from './voice-cloning-model'
@@ -0,0 +1 @@
+export * from './ui'
@@ -21,7 +21,7 @@ import { getPersons } from '#/widgets/business-persons/api/get-persons'
 import ArrowUpOrDown from '#/widgets/top-bar-model/ui/arrow-up-or-down'
 
 import { translateEmailStatus, formatDateStatus, formatEmail } from '../../lib/lib'
-import { getModalById, PLATE_CHANGE_PASSWORD, RESEND_INVATION_PASSWORD } from '#/features/modals'
+import { getModalById, PLATE_CHANGE_PASSWORD } from '#/features/modals'
 import { ResponseGetBusinessGroups } from '#/features/invite-person-in-business/model/types'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 import { resendInvation } from '#/features/resend-invation-corp/api/resend-invation'
@@ -43,7 +43,6 @@ export const PersonsList = ({
 	const { data: session } = useSession()
 	
 	const passChangeModal = getModalById(PLATE_CHANGE_PASSWORD)
-	const passResendModal = getModalById(RESEND_INVATION_PASSWORD)
 
 	useEffect(() => {
 		setPersons(personsList)
@@ -79,24 +78,32 @@ export const PersonsList = ({
 			})
 		)
 		setCurrentPerson(null)
-		showMessage(`Лимит пользователя ${email} успешно изменён!`, 'success')
+		showMessage(`Данные сотрудника ${email} изменены!`, 'success')
 	}
 
 	const handleOpenResendModal = async (email: string) => {
-		const response = await resendInvation(email, session?.access)
-		
-		if (response.status == 200) {
-			showMessage('Приглашение переотправлено!', 'success')
-			setPersons((prev) =>
-				prev?.map((el) => {
-					if (el.email === email) {
-						return { ...el, acceptance_status: 'pending' as const }
-					}
-					return el
-				}) ?? null
-			)
-		} else {
-			showMessage(response.data)
+		try {
+			const response = await resendInvation(email, session?.access)
+			
+			if (response.status == 200) {
+				showMessage('Приглашение переотправлено!', 'success')
+				setPersons((prev) =>
+					prev?.map((el) => {
+						if (el.email === email) {
+							return { ...el, acceptance_status: 'pending' as const }
+						}
+						return el
+					}) ?? null
+				)
+			} else {
+				// Проверяем тип response.data и преобразуем в строку
+				const errorMessage = typeof response.data === 'string' 
+					? response.data 
+					: response.data?.detail || 'Ошибка при отправке приглашения'
+				showMessage(errorMessage, 'error')
+			}
+		} catch (error) {
+			showMessage('Произошла ошибка при отправке приглашения', 'error')
 		}
 	}
 
@@ -250,4 +257,4 @@ export const PersonsList = ({
 			)}
 		</Box>
 	)
-}
+}
\ No newline at end of file
@@ -38,11 +38,12 @@ import { Search } from '#/shared'
 // import styles from '#/widgets/business-models/ui/models-list/models-list.module.scss'
 import { getBusinessGroups } from '#/widgets/business-persons/api/get-businessGroups'
 import ArrowUpOrDown from '#/widgets/top-bar-model/ui/arrow-up-or-down'
-import { getModalById, PLATE_CHANGE_PASSWORD, RESEND_INVATION_PASSWORD } from '#/features/modals'
+import { getModalById, PLATE_CHANGE_PASSWORD } from '#/features/modals'
 
 import { formatDateStatus, formatEmail, translateEmailStatus } from '../../lib/lib'
 import { XMark } from '#/features/remove-person'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { resendInvation } from '#/features/resend-invation-corp/api/resend-invation'
 
 export const SecurityList = ({
 	securityList,
@@ -59,7 +60,6 @@ export const SecurityList = ({
 	const [currentPerson, setCurrentPerson] = useState<ResponseGetPersons | null>(null)
 
 	const passChangeModal = getModalById(PLATE_CHANGE_PASSWORD)
-	const passResendModal = getModalById(RESEND_INVATION_PASSWORD)
 
 	useEffect(() => {
 		setPersons(securityList)
@@ -91,12 +91,40 @@ export const SecurityList = ({
 					el.token_limit = limit
 					return el
 				}
-
 				return el
 			})
 		)
 		setCurrentPerson(null)
-		showMessage(`Лимит пользователя ${email} успешно изменён!`, 'success')
+		showMessage(`Данные сотрудника ${email} изменены!`, 'success')
+	}
+
+	const handleOpenResendModal = async (email: string) => {
+		try {
+			const response = await resendInvation(email, data?.access)
+			
+			if (response.status == 200) {
+				showMessage('Приглашение переотправлено!', 'success')
+				setPersons((prev) =>
+					prev?.map((el) => {
+						if (el.email === email) {
+							return { ...el, acceptance_status: 'pending' as const }
+						}
+						return el
+					}) ?? null
+				)
+			} else {
+				const errorMessage = typeof response.data === 'string' 
+					? response.data 
+					: response.data?.detail || 'Ошибка при отправке приглашения'
+				showMessage(errorMessage, 'error')
+			}
+		} catch (error) {
+			showMessage('Произошла ошибка при отправке приглашения', 'error')
+		}
+	}
+
+	const handleChangePassword = (email: string) => {
+			passChangeModal.setState(true, { email })
 	}
 
 	useEffect(() => {
@@ -179,13 +207,7 @@ export const SecurityList = ({
 														{statusPerson === 'Приглашен' ? (
 															<button
 																className={styles.refreshStatusButton}
-																onClick={() => {
-																	passResendModal.setState(true, {
-																		callback: () => {
-																			console.log('Смена пароля')
-																		},
-																	})
-																}}
+																onClick={() => handleOpenResendModal(person.email)}
 															>
 																<Image
 																	src={'/svg/refresh-outline.svg'}
@@ -200,13 +222,7 @@ export const SecurityList = ({
 													<TableCell>{Math.floor(+person.token_limit)}</TableCell>
 													<TableCell className={styles.change}>
 														<button
-															onClick={() => {
-																passChangeModal.setState(true, {
-																	callback: () => {
-																		console.log('Смена пароля')
-																	},
-																})
-															}}
+															onClick={() => handleChangePassword(person.email)}
 														>
 															Сменить пароль
 														</button>
@@ -352,4 +368,4 @@ export const InviteSecurityModal: FC<InviteModalProps> = ({ open, onClose, showN
 			</form>
 		</Modal>
 	)
-}
+}
\ No newline at end of file
@@ -41,7 +41,7 @@ export interface ChatProps<T> {
 	deleteMessage: (message_uid: string) => void
 	modelTitle: string | undefined
 	currentVersion: string
-  botParams: IModel | null
+	botParams: IModel | null
 	tags: IModelTag[]
 	inputValue?: string
 	onInputValueChange?: (value: string) => void
@@ -57,7 +57,7 @@ function Chat<T>({
 	openMobileFilters,
 	setFile,
 	file,
-  botParams,
+	botParams,
 	getMessagesPagination,
 	input_types,
 	deleteMessage,
@@ -113,13 +113,12 @@ function Chat<T>({
 					paddingTop: 0,
 					paddingBottom: 1.25,
 					width: '100%',
-					height: desktop ? '75vh' : `calc(100dvh - ${tags.length == 0 ? '200px' : '240px'})`,
+					height: desktop ? '75vh' : `calc(100dvh - ${tags.length == 0 ? '200px' : '285px'})`,
 					overflow: 'hidden',
 				}}
 			>
 				<ChatMessagesList
-					
-          			botParams={botParams}
+					botParams={botParams}
 					onLoadImage={onLoadImage}
 					setResendValue={handleSetResetValue}
 					device={device}
@@ -80,6 +80,10 @@
 	transform: translateX(-50%);
 	z-index: 1000;
 	pointer-events: auto;
+	/* мост по hover: между кнопкой и вертикальным слайдером иначе pointer «просвечивает» и срабатывает mouseleave */
+	padding-bottom: 52px;
+	margin-bottom: -52px;
+	box-sizing: content-box;
 }
 
 .volumeSlider {
@@ -275,7 +275,11 @@ const AudioPlayerBase = (
 			</Box>
 
 			{device === 'desktop' && (
-				<Box className={styles.volumeContainer} onMouseEnter={() => setVolumeHovered(true)}>
+				<Box
+					className={styles.volumeContainer}
+					onMouseEnter={() => setVolumeHovered(true)}
+					onMouseLeave={() => setVolumeHovered(false)}
+				>
 					<IconButton
 						onClick={toggleMute}
 						className={styles.volumeButton}
@@ -286,7 +290,7 @@ const AudioPlayerBase = (
 					</IconButton>
 
 					{volumeHovered && (
-						<Box onMouseEnter={() => setVolumeHovered(true)} className={styles.volumeSliderWrapper}>
+						<Box className={styles.volumeSliderWrapper}>
 							<Slider
 								size='small'
 								orientation='vertical'
@@ -7,10 +7,10 @@ export interface IScope {
 export interface IComponentProps {
 	currentVersion: string
 	modelSlug: string
-	modelsType: 'text' | 'image' | 'video' | 'audio'
+	modelsType: 'text' | 'image' | 'video' | 'audio' | 'voice'
 	showFileExample: boolean
 	modelParams: Record<string, string | number | number[] | boolean>
 }
 
 export type TScope = 'chat-bots' | 'api'
-export type TApiModel = 'text' | 'image' | 'video' | 'audio'
+export type TApiModel = 'text' | 'image' | 'video' | 'audio' | 'voice'
@@ -8,7 +8,7 @@ interface IProps {
 	scopeTitle: string
 	currentVersion: string
 	modelSlug: string
-	modelsType: 'text' | 'image' | 'video' | 'audio'
+	modelsType: 'text' | 'image' | 'video' | 'audio' | 'voice'
 	showFileExample: boolean
 	modelParams: Record<string, string | number | number[] | boolean>
 }
@@ -63,6 +63,12 @@ export const menuListMiddle = [
 		icon: '/svg/side-menu/audio',
 		activeList: ['audio'],
 	},
+	{
+		title: 'Клонирование голоса',
+		link: '/voice-cloning',
+		icon: '/svg/side-menu/audio',
+		activeList: ['voice-cloning'],
+	},
 ]
 
 const drawerWidth = 240
@@ -123,11 +129,7 @@ export const SideMenu = ({}) => {
 	const business_error_report = getModalById(BUSINESS_ERROR_REPORT)
 	const match = useMediaQuery('(min-height:800px)')
 
-	const open = useMemo(() => getOptionValue('sidemenu', { sidemenu_state: 'opened' }).sidemenu_state, [settings])
-
-	useEffect(() => {
-		if (isNextStepVisible) updateSettings('sidemenu', { sidemenu_state: 'closed' })
-	}, [isNextStepVisible, updateSettings])
+	const open = useMemo(() => getOptionValue('sidemenu', { sidemenu_state: 'closed' }).sidemenu_state, [settings])
 
 	const filteredMenuListTop = useMemo(() => {
 		return menuListTop.filter((item) => {