@@ -140,7 +140,7 @@
 .locked {
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	justify-content: end;
 	flex-direction: column;
 	position: absolute;
 	top: 0;
@@ -149,12 +149,35 @@
 	height: 100%;
 	background-color: rgba(0, 0, 0, 0.7);
 	border-radius: 15px;
-	padding-right: 20px;
-	z-index: 1;
+	padding: 20px;
+	z-index: 10000;
+	&:hover {
+		outline: 4px solid #8280ff66;
+		outline-offset: -3px;
+		box-shadow: 0px 0px 15.1px 0px #8280ff40;
+	}
+
+	&__label {
+		margin: auto;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+	}
+
+	&__button {
+		width: 100%;
+
+		button {
+			width: 100%;
+			text-align: center;
+		}
+	}
 
 	span {
 		color: white;
 		padding-top: 10px;
-		font-weight: 500;
+		font-weight: 600;
+		font-size: 15px;
+		letter-spacing: -1%;
 	}
 }
@@ -138,7 +138,7 @@
 .locked {
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	justify-content: end;
 	flex-direction: column;
 	position: absolute;
 	top: 0;
@@ -147,11 +147,35 @@
 	height: 100%;
 	background-color: rgba(0, 0, 0, 0.7);
 	border-radius: 15px;
-	padding-right: 20px;
+	padding: 20px;
+	z-index: 10000;
+	&:hover {
+		outline: 4px solid #8280ff66;
+		outline-offset: -3px;
+		box-shadow: 0px 0px 15.1px 0px #8280ff40;
+	}
+
+	&__label {
+		margin: auto;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+	}
+
+	&__button {
+		width: 100%;
+
+		button {
+			width: 100%;
+			text-align: center;
+		}
+	}
 
 	span {
 		color: white;
 		padding-top: 10px;
-		font-weight: 500;
+		font-weight: 600;
+		font-size: 15px;
+		letter-spacing: -1%;
 	}
 }
@@ -10,24 +10,16 @@ import { useThemeAndDevice } from '#/shared/lib/hooks'
 import { c } from '#/shared/lib/helpers'
 import { IShortModel } from '#/entities/model-entity'
 import { SvgIcon } from '#/shared/ui/svg'
+import { CommonButton } from '#/shared/ui/button'
+import { uid } from 'chart.js/dist/helpers/helpers.core'
 
 export interface ChatModelCardProps extends IShortModel {
 	accessed_models: string[] | null
 }
 
-export function ChatModelCard({
-	description,
-	image,
-	title,
-	slug,
-	accessed_models,
-	blocked,
-	tags,
-}: ChatModelCardProps) {
+export function ChatModelCard({ description, image, title, slug, accessed_models, blocked, tags }: ChatModelCardProps) {
 	const link = useMemo(() => {
-		return accessed_models && !accessed_models.includes(slug)
-			? '/account?scope=subscribe'
-			: `chat-bot/${slug}`
+		return accessed_models && !accessed_models.includes(slug) ? '/account?scope=subscribe' : `chat-bot/${slug}`
 	}, [accessed_models])
 
 	const { theme } = useThemeAndDevice()
@@ -36,13 +28,7 @@ export function ChatModelCard({
 		<Link href={link}>
 			<div className={c(styles.card, blocked && styles.card_blocked)} style={{ userSelect: blocked ? 'none' : 'auto' }}>
 				<div>
-					<Image
-						src={image || '/model-preview.png'}
-						width={70}
-						height={70}
-						alt={title}
-						className={styles.card__image}
-					/>
+					<Image src={image || '/model-preview.png'} width={70} height={70} alt={title} className={styles.card__image} />
 				</div>
 				<div className={styles.card__content}>
 					<div className={styles.description}>
@@ -50,21 +36,22 @@ export function ChatModelCard({
 						<p className={styles.text}>{description}</p>
 					</div>
 
-					{blocked ? (
+					{blocked && (
 						<div className={styles.blocked}>
 							<BlockedSvg width={16} height={16} color='white' />
-							<span className={c(styles.blocked__text)}>
-								Модель недоступна
-							</span>
+							<span className={c(styles.blocked__text)}>Модель недоступна</span>
 						</div>
-					) : (
-						accessed_models &&
-						!accessed_models.includes(slug) && (
-							<div className={styles.locked}>
+					)}
+					{accessed_models && !accessed_models.includes(slug) && (
+						<div className={styles.locked}>
+							<div className={styles.locked__label}>
 								<LockSvg width={53} height={53} color='#8280FF' />
 								<span>Недоступно в текущем тарифе</span>
 							</div>
-						)
+							<Link className={styles.locked__button} href={link}>
+								<CommonButton variant='primary'>Выбрать тариф</CommonButton>
+							</Link>
+						</div>
 					)}
 				</div>
 
@@ -72,12 +59,7 @@ export function ChatModelCard({
 					{tags &&
 						tags.map((tag, index) => (
 							<div key={index} className={styles.tag}>
-								<SvgIcon
-									className={styles.tag__icon}
-									width={26}
-									height={26}
-									url={tag.icon}
-								/>
+								<SvgIcon className={styles.tag__icon} width={26} height={26} url={tag.icon} />
 								<span className={c(styles.tag__text)}>{tag.title}</span>
 							</div>
 						))}
@@ -10,24 +10,15 @@ import { useThemeAndDevice } from '#/shared/lib/hooks'
 import { c } from '#/shared/lib/helpers'
 import { IShortModel } from '#/entities/model-entity'
 import { SvgIcon } from '#/shared/ui/svg'
+import { CommonButton } from '#/shared/ui/button'
 
 export interface ImageModelCardProps extends IShortModel {
 	accessed_models: string[] | null
 }
 
-export function ImageModelCard({
-	description,
-	image,
-	title,
-	slug,
-	accessed_models,
-	blocked,
-	tags,
-}: ImageModelCardProps) {
+export function ImageModelCard({ description, image, title, slug, accessed_models, blocked, tags }: ImageModelCardProps) {
 	const link = useMemo(() => {
-		return accessed_models && !accessed_models.includes(slug)
-			? '/account?scope=subscribe'
-			: `images/${slug}`
+		return accessed_models && !accessed_models.includes(slug) ? '/account?scope=subscribe' : `images/${slug}`
 	}, [accessed_models])
 
 	const { theme } = useThemeAndDevice()
@@ -36,13 +27,7 @@ export function ImageModelCard({
 		<Link href={link}>
 			<div className={c(styles.card, blocked && styles.card_blocked)} style={{ userSelect: blocked ? 'none' : 'auto' }}>
 				<div>
-					<Image
-						src={image || '/model-preview.png'}
-						width={400}
-						height={200}
-						alt={title}
-						className={styles.card__image}
-					/>
+					<Image src={image || '/model-preview.png'} width={400} height={200} alt={title} className={styles.card__image} />
 				</div>
 				<div className={styles.card__content}>
 					<div className={styles.description}>
@@ -50,21 +35,22 @@ export function ImageModelCard({
 						<p className={styles.text}>{description}</p>
 					</div>
 
-					{blocked ? (
+					{blocked && (
 						<div className={styles.blocked}>
 							<BlockedSvg width={16} height={16} color='white' />
-							<span className={c(styles.blocked__text)}>
-								Модель недоступна
-							</span>
+							<span className={c(styles.blocked__text)}>Модель недоступна</span>
 						</div>
-					) : (
-						accessed_models &&
-						!accessed_models.includes(slug) && (
-							<div className={styles.locked}>
+					)}
+					{accessed_models && !accessed_models.includes(slug) && (
+						<div className={styles.locked}>
+							<div className={styles.locked__label}>
 								<LockSvg width={53} height={53} color='#8280FF' />
 								<span>Недоступно в текущем тарифе</span>
 							</div>
-						)
+							<Link className={styles.locked__button} href={link}>
+								<CommonButton variant='primary'>Выбрать тариф</CommonButton>
+							</Link>
+						</div>
 					)}
 				</div>
 
@@ -72,12 +58,7 @@ export function ImageModelCard({
 					{tags &&
 						tags.map((tag, index) => (
 							<div key={index} className={styles.tag}>
-								<SvgIcon
-									className={styles.tag__icon}
-									width={26}
-									height={26}
-									url={tag.icon}
-								/>
+								<SvgIcon className={styles.tag__icon} width={26} height={26} url={tag.icon} />
 								<span className={c(styles.tag__text)}>{tag.title}</span>
 							</div>
 						))}
@@ -1,10 +1,10 @@
 .wrapper {
 	display: flex;
 	align-items: center;
-	padding: 14px 14px;
+	padding: 19px 14px;
 	width: 100%;
 	border-radius: 15px;
-  gap: 10px;
+	gap: 10px;
 }
 
 :root[data-theme='light'] {
@@ -12,7 +12,7 @@
 		border: 2px solid #e1e1e1;
 	}
 	.divider {
-		background-color: #EBEFF5;
+		background-color: #ebeff5;
 	}
 }
 
@@ -21,7 +21,7 @@
 		border: 2px solid rgb(66, 66, 72) !important;
 	}
 	.divider {
-		background-color: #40404E;
+		background-color: #40404e;
 	}
 }
 
@@ -35,9 +35,9 @@
 	font-size: 16px;
 	max-height: 82px;
 
-  &::placeholder{
-    font-size: 16px;
-  }
+	&::placeholder {
+		font-size: 16px;
+	}
 
 	border: none;
 	outline: none;
@@ -58,5 +58,5 @@
 }
 
 // theme === 'dark'
-		// 												? '#40404E'
-		// 												: '#EBEFF5',
\ No newline at end of file
+// 												? '#40404E'
+// 												: '#EBEFF5',
@@ -0,0 +1,9 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+	message: string
+}
+
+export default function handler(req: NextApiRequest, res: NextApiResponse<ResponseData>) {
+	res.status(200).json({ message: 'App is running' })
+}
@@ -220,6 +220,7 @@ const Page: NextPageWithLayout<ChatBotPageProps> = () => {
 							modelType={modelType}
 							modelTitle={botParams?.title}
 							currentVersion={version}
+							tags={botParams?.tags ?? []}
 						/>
 						{/* {botParams?.blocked && (
 							<div className={styles.blocked}>
@@ -38,24 +38,24 @@
 	}
 }
 
-.blocked {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: white;
-	border-radius: 100px;
-	padding-right: 20px;
-	padding: 8px 12px;
-	width: max-content;
-
-	span {
-		color: #ff2372;
-		font-weight: 500;
-		padding-left: 10px;
-		font-size: 14px;
-		width: max-content;
-	}
-}
+// .blocked {
+// 	display: flex;
+// 	align-items: center;
+// 	justify-content: center;
+// 	background-color: white;
+// 	border-radius: 100px;
+// 	padding-right: 20px;
+// 	padding: 8px 12px;
+// 	width: max-content;
+
+// 	span {
+// 		color: #ff2372;
+// 		font-weight: 500;
+// 		padding-left: 10px;
+// 		font-size: 14px;
+// 		width: max-content;
+// 	}
+// }
 
 .icon {
 }
@@ -121,30 +121,31 @@
 }
 
 .blocked {
+	height: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	background-color: #c32528;
-	// padding-right: 20px;
-	padding: 8px 15px;
-	gap: 5px;
+	padding: 20px;
+	gap: 10px;
 	position: absolute;
+
 	left: 0;
 
 	width: 100%;
-	border-radius: 15px 15px 0px 0px;
-	top: -23px;
+	border-radius: 15px;
+	top: 0;
 
 	@media screen and (max-width: 768px) {
 		top: unset;
-		bottom: -22px;
+		// bottom: -22px;
 		z-index: 1;
-		border-radius: 0px 0px 15px 15px;
+		border-radius: 15px;
 	}
 
 	&__text {
 		color: white !important;
-		font-size: 14px;
+		font-size: 16px;
 		font-weight: 600;
 	}
 }
@@ -181,50 +181,53 @@ const ImageModelPage: NextPageWithLayout = () => {
 									<Loader />
 								</div>
 							</div>
-
-							<Box
-								sx={{
-									padding: '30px',
-									height: `calc(100dvh - 116px - 61px - 10px ${botParams?.blocked ? '- 20px' : ''})`,
-									overflowY: 'scroll',
-									overflowX: 'hidden',
-									position: 'relative',
-								}}
-								ref={mobileScrollContainer}
-								className={'smallScroll'}
-							>
-								<div style={{ position: 'absolute', top: 300 }} ref={refScrollMobile}></div>
-								<ImageMessagesList
-									isComplete={loading}
-									device={deviceType}
-									images={messages}
-									getMessagesPagination={fetchMessages}
-								/>
-							</Box>
-							<Stack alignItems='center' sx={{ position: 'relative', zIndex: 10 }}>
-								{botParams && (
-									<ModelInput
-										currentVersion={version}
-										styles={'images'}
-										input_types={botParams.inputs}
-										image={image}
-										blocked={botParams.blocked}
-										value={prompt}
-										desktop={desktop}
-										loading={createLoading}
-										imageLoad={onLoadImage}
-										sendMessage={onCreateImage}
-										unpinImage={() => setImage(null)}
-										viewMobileSettings={() => setOpenFiltersMobile(true)}
+							<div style={{ position: 'relative', borderRadius: '13px' }}>
+								<Box
+									sx={{
+										padding: '30px',
+										height: `calc(100dvh - 116px - 61px - 15px ${botParams?.blocked ? '- 17px' : '- 23.5px'})`,
+										// height: `calc(100dvh - 116px - 61px - 15px - 23.5px)`,
+										overflowY: 'scroll',
+										overflowX: 'hidden',
+										position: 'relative',
+									}}
+									ref={mobileScrollContainer}
+									className={'smallScroll'}
+								>
+									<div style={{ position: 'absolute', top: 300 }} ref={refScrollMobile}></div>
+									<ImageMessagesList
+										isComplete={loading}
+										device={deviceType}
+										images={messages}
+										getMessagesPagination={fetchMessages}
 									/>
-								)}
-								{botParams?.blocked && (
-									<div className={styles.blocked}>
-										<BlockedSvg width={16} height={16} color='white' />
-										<span className={c(styles.blocked__text)}>Модель недоступна</span>
-									</div>
-								)}
-							</Stack>
+								</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={botParams.blocked}
+											value={prompt}
+											desktop={desktop}
+											loading={createLoading}
+											imageLoad={onLoadImage}
+											sendMessage={onCreateImage}
+											unpinImage={() => setImage(null)}
+											viewMobileSettings={() => setOpenFiltersMobile(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>
@@ -3,14 +3,14 @@
 	justify-content: center;
 	background-color: #c32528;
 	padding: 8px 15px;
-	gap: 5px;
+	gap: 10px;
 	position: absolute;
 	left: 0;
-	// display: none;
-  display: flex;
-	bottom: -21px;
+	display: flex;
+	top: 0;
+	height: 100%;
 	width: 100%;
-	border-radius: 0px 0px 15px 15px;
+	border-radius: 15px;
 
 	// @media screen and (max-width: 768px) {
 	// 	top: -30px;
@@ -22,7 +22,7 @@
 
 	&__text {
 		color: white !important;
-		font-size: 14px;
+		font-size: 16px;
 		font-weight: 600;
 	}
 }
@@ -12,7 +12,7 @@ import styles from './chat-window.module.scss'
 import 'intro.js/introjs.css'
 import { c } from '#/shared'
 import { Device, DeviceOs } from '#/shared/lib/types/entities'
-import { IModelInputs } from '#/entities/model-entity'
+import { IModelInputs, IModelTag } from '#/entities/model-entity'
 import { Message } from '#/entities/message'
 import { ModelInput } from '#/features/model-input'
 
@@ -42,6 +42,7 @@ export interface ChatProps<T> {
 	deleteMessage: (message_uid: string) => void
 	modelTitle: string | undefined
 	currentVersion: string
+	tags: IModelTag[]
 }
 
 function Chat<T>({
@@ -60,23 +61,21 @@ function Chat<T>({
 	blocked,
 	currentVersion,
 	deviceOs,
+	tags,
 }: ChatProps<T>) {
 	const desktop = device === 'desktop'
 
 	const theme = useAppSelector((state) => state.theme.theme)
 	const [resendValue, setResendValue] = React.useState<string>('')
 
-	const onLoadImage = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement> | null, file?: File) => {
-			if (event?.target.files) {
-				setFile(event.target.files[0])
-			}
-			if (file) {
-				setFile(file)
-			}
-		},
-		[]
-	)
+	const onLoadImage = useCallback((event: React.ChangeEvent<HTMLInputElement> | null, file?: File) => {
+		if (event?.target.files) {
+			setFile(event.target.files[0])
+		}
+		if (file) {
+			setFile(file)
+		}
+	}, [])
 
 	const handleSetResetValue = useCallback(
 		(value: string) => {
@@ -103,18 +102,12 @@ function Chat<T>({
 				spacing={0}
 				sx={{
 					borderRadius: desktop ? '15px' : '13px',
-					backgroundColor: desktop
-						? theme === 'light'
-							? 'white'
-							: '#151518'
-						: theme === 'light'
-						? 'white'
-						: '#151518',
-					padding: desktop ? (blocked ? 2 : 2) : 1.5,
+					backgroundColor: desktop ? (theme === 'light' ? 'white' : '#151518') : theme === 'light' ? 'white' : '#151518',
+					padding: desktop ? (blocked ? 2 : 2) : 1.25,
 					paddingTop: 0,
-					paddingBottom: blocked ? (desktop ? 3.8 : 5) : 1,
+					paddingBottom: 1.25,
 					width: '100%',
-					height: desktop ? '75vh' : 'calc(100dvh - 245px)',
+					height: desktop ? '75vh' : `calc(100dvh - ${tags.length == 0 ? '200px' : '240px'})`,
 					overflow: 'hidden',
 				}}
 			>
@@ -148,10 +141,8 @@ function Chat<T>({
 
 					{blocked && (
 						<div className={styles.blocked}>
-							<BlockedSvg width={16} height={16} color='white' />
-							<span className={c(styles.blocked__text)}>
-								Модель недоступна
-							</span>
+							<BlockedSvg width={21} height={21} color='white' />
+							<span className={c(styles.blocked__text)}>Модель недоступна</span>
 						</div>
 					)}
 				</div>