@@ -0,0 +1,13 @@
+<svg viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M42.209 11.3674C41.3488 11.3674 40.6562 12.06 40.6562 12.9202V16.0256H42.209C43.0665 16.0256 43.7617 16.7208 43.7617 17.5784C43.7617 18.4359 43.0665 19.1311 42.209 19.1311H40.6562V28.4475H42.209C43.0665 28.4475 43.7617 29.1427 43.7617 30.0002C43.7617 30.8578 43.0665 31.553 42.209 31.553H40.6562V34.6584C40.6562 35.5187 41.3488 36.2112 42.209 36.2112H50.2086C50.9359 36.2112 51.5254 35.6216 51.5254 34.8944V12.6842C51.5254 11.957 50.9359 11.3674 50.2086 11.3674H42.209Z"
+    fill="currentColor" />
+  <path
+    d="M10.1118 29.563C8.8789 23.5149 12.3122 17.348 18.3118 15.3222L19.783 14.8255C20.598 14.5503 21.4757 14.9849 21.7509 15.7999L22.7443 18.7422L28.9741 16.6457C29.7863 16.3724 30.6663 16.8087 30.9405 17.6206C31.215 18.4337 30.7779 19.3153 29.9646 19.589L23.7378 21.6844L26.7181 30.5113L32.9479 28.4148C33.7601 28.1415 34.6402 28.5778 34.9143 29.3897C35.1888 30.2028 34.7518 31.0843 33.9384 31.3581L27.7116 33.4535L28.7051 36.3958C28.9802 37.2108 28.5457 38.0885 27.7307 38.3637L26.2595 38.8604C20.2597 40.8862 13.791 38.0627 11.1053 32.5052L6.5999 34.0265C5.78742 34.3008 4.90637 33.8645 4.63204 33.0521C4.3577 32.2396 4.79396 31.3585 5.60644 31.0842L10.1118 29.563Z"
+    fill="currentColor" />
+  <rect x="24.3594" y="7.45898" width="1.31677" height="4.2795" rx="0.658385"
+    transform="rotate(-41.6506 24.3594 7.45898)" fill="currentColor" />
+  <rect x="30.2852" y="4.60864" width="1.31677" height="4.2795" rx="0.658385" fill="currentColor" />
+  <rect x="36.4512" y="5.92554" width="1.31677" height="4.2795" rx="0.658385"
+    transform="rotate(21.3389 36.4512 5.92554)" fill="currentColor" />
+</svg>
\ No newline at end of file
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" fill="currentColor" clip-rule="evenodd"
+    d="M5 9V7C5 5.67392 5.52678 4.40215 6.46447 3.46447C7.40215 2.52678 8.67392 2 10 2C11.3261 2 12.5979 2.52678 13.5355 3.46447C14.4732 4.40215 15 5.67392 15 7V9C15.5304 9 16.0391 9.21071 16.4142 9.58579C16.7893 9.96086 17 10.4696 17 11V16C17 16.5304 16.7893 17.0391 16.4142 17.4142C16.0391 17.7893 15.5304 18 15 18H5C4.46957 18 3.96086 17.7893 3.58579 17.4142C3.21071 17.0391 3 16.5304 3 16V11C3 10.4696 3.21071 9.96086 3.58579 9.58579C3.96086 9.21071 4.46957 9 5 9ZM13 7V9H7V7C7 6.20435 7.31607 5.44129 7.87868 4.87868C8.44129 4.31607 9.20435 4 10 4C10.7956 4 11.5587 4.31607 12.1213 4.87868C12.6839 5.44129 13 6.20435 13 7Z"
+  />
+</svg>
\ No newline at end of file
@@ -0,0 +1,11 @@
+import { API_URL } from '#/shared/lib/constants'
+import axios from 'axios'
+import { IModel } from '../types'
+
+export async function getBotParams(slug: string, token?: string) {
+	return await axios.get<IModel>(API_URL + `/ml_models/${slug}`, {
+		headers: {
+			Authorization: `Bearer ${token}`,
+		},
+	})
+}
@@ -0,0 +1,11 @@
+import { API_URL } from '#/shared/lib/constants'
+import axios from 'axios'
+import { IShortModel } from '../types'
+
+export async function getModelsImages(token?: string) {
+	return await axios.get<IShortModel[]>(API_URL + '/ml_models/?category=images', {
+		headers: {
+			Authorization: `Bearer ${token}`,
+		},
+	})
+}
@@ -0,0 +1,2 @@
+export * from './bot.route'
+export * from './images-bots.route'
@@ -0,0 +1 @@
+export * from './use-images-bots'
\ No newline at end of file
@@ -0,0 +1,118 @@
+import { useState } from 'react'
+import { IModel } from '../types'
+import { useSession } from 'next-auth/react'
+import { getBotParams } from '../api'
+import { useAppDispatch } from '#/app/store/store'
+import { setParams } from '#/app/store/model-parametres-store'
+
+export function useImageBot(slug: string) {
+	const [botParams, setBotParams] = useState<IModel | null>(null)
+	const [version, setVersion] = useState<string>('')
+	const [modelType, setModelType] = useState<string>('')
+
+	const dispatch = useAppDispatch()
+
+	const { data } = useSession()
+
+	function setDefault(bot: IModel) {
+		setVersion('')
+
+		dispatch(setParams(bot.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {})))
+	}
+
+	// это пиз**ц
+	// нужен рефакторинг (я то в этом не разбираюсь)
+	// а стажеры и подавно))))
+	function setStoreParams(bot: IModel) {
+		dispatch(
+			setParams(
+				bot.parameters.reduce(
+					(a, v) =>
+						v.versions.includes(bot.versions[0].slug)
+							? { ...a, [v.key]: v.values.default }
+							: { ...a },
+					{}
+				)
+			)
+		)
+	}
+
+	function setAllParams(bot: IModel) {
+		setBotParams(bot)
+		setModelType(bot.slug)
+
+		// store
+		if (bot.versions.length === 0) return setDefault(bot)
+
+		setVersion(bot.versions[0].slug)
+		setStoreParams(bot)
+	}
+
+	// это пиз**ц
+	const resetParams = () => {
+		if (botParams) {
+			dispatch(setParams({}))
+			if (botParams.versions.length !== 0) {
+				setVersion(botParams.versions[0].slug)
+				dispatch(
+					setParams(
+						botParams.parameters.reduce(
+							(a, v) =>
+								v.versions.includes(botParams.versions[0].slug)
+									? { ...a, [v.key]: v.values.default }
+									: { ...a },
+							{}
+						)
+					)
+				)
+			} else {
+				setVersion(botParams.slug)
+				dispatch(
+					setParams(botParams.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {}))
+				)
+			}
+		}
+	}
+
+	// это пиз**ц
+	const setDefaultParams = () => {
+		if (!botParams) return
+
+		dispatch(setParams({}))
+
+		if (version === '') {
+			return dispatch(
+				setParams(botParams.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {}))
+			)
+		}
+
+		dispatch(
+			setParams(
+				botParams.parameters.reduce(
+					(a, v) => (v.versions.includes(version) ? { ...a, [v.key]: v.values.default } : { ...a }),
+					{}
+				)
+			)
+		)
+	}
+
+	// api functions
+
+	async function fetchBotParams() {
+		if (!data) return
+
+		const { data: bot, ...response } = await getBotParams(slug, data.access)
+
+		if (response.status < 400) setAllParams(bot)
+	}
+
+	return {
+		botParams,
+		version,
+		modelType,
+		fetchBotParams,
+		setVersion,
+		resetParams,
+		setDefaultParams,
+	}
+}
@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import { getModelsImages } from '../api'
+import { useSession } from 'next-auth/react'
+import { IShortModel } from '../types'
+
+export function useImagesBots() {
+	const [bots, setBots] = useState<IShortModel[]>([])
+
+	const { data } = useSession()
+
+	async function fetchBots() {
+		if (!data) return
+
+		const response = await getModelsImages(data.access)
+
+		if (response.status < 400) setBots(response.data)
+	}
+
+  return {
+    bots,
+    fetchBots,
+    setBots
+  }
+}
@@ -0,0 +1 @@
+export * from './model.types'
\ No newline at end of file
@@ -0,0 +1,55 @@
+type ModelForChats = 'chatgpt' | 'llama2' | 'vicuna' | 'deepl' | 'mistral'
+
+export interface IShortModel {
+	uid: string
+	title: string
+	description: string
+	slug: string
+	image: string
+  blocked: boolean
+	actual_stat: {
+		generation_time: string
+		tokens_cost: string
+	}
+}
+
+export interface IModel {
+	uid: string
+	title: string
+	description: string
+	slug: string
+	image: string
+	settings: { is_active: boolean }
+	parameters: IModelParams[]
+	versions: IModelVersions[]
+	inputs: IModelInputs[]
+}
+export interface IModelParams {
+	name: string
+	description: string
+	key: string
+	type: string
+	required: boolean
+	values: {
+		availables: string[]
+		default: any
+		end: number
+		start: number
+		step: number
+	}
+	versions: string[]
+}
+export interface IModelVersions {
+	name: string
+	description: string
+	default: boolean
+	slug: string
+}
+export interface IModelInputs {
+	// type: 'image' | 'zip' | 'text' | 'audio' | 'pdf' | 'txt'
+	type: string
+	required: boolean
+	versions: string[]
+}
+
+export default ModelForChats
@@ -0,0 +1,3 @@
+export * from './api'
+export * from './model'
+export * from './types'
\ No newline at end of file
@@ -1,31 +1,72 @@
 .card {
-    background-color: var(--new-ui-main-color);
-    width: 381px;
-    height: 227px;
-    border-radius: 15px;
-    margin-right: 20px;
-    margin-top: 20px;
-
-    cursor: pointer;
-    padding: 30px;
-    box-sizing: border-box;
-
-    @media (max-width:420px) {
-        width: 92vw;
-    }
-
-    .description {
-        margin-top: 20px;
-
-        .title {
-            font-weight: 600;
-        }
-
-        .text {
-            color: var(--new-ui-gray-color);
-            font-weight: 400;
-            margin-top: 6px;
-            font-size: 15px;
-        }
-    }
-}
\ No newline at end of file
+	background-color: var(--new-ui-main-color);
+	width: 381px;
+	height: 227px;
+	border-radius: 15px;
+	margin-right: 20px;
+	margin-top: 20px;
+
+	cursor: pointer;
+	padding: 30px;
+	box-sizing: border-box;
+
+	@media (max-width: 420px) {
+		width: 92vw;
+	}
+
+	.description {
+		margin-top: 20px;
+
+		.title {
+			font-weight: 600;
+		}
+
+		.text {
+			color: var(--new-ui-gray-color);
+			font-weight: 400;
+			margin-top: 6px;
+			font-size: 15px;
+		}
+	}
+}
+
+.blocked {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	top: 20px;
+	right: 20px;
+	background-color: white;
+	border-radius: 100px;
+	padding-right: 20px;
+	padding: 8px 12px;
+
+	span {
+		color: #ff2372;
+		font-weight: 500;
+		padding-left: 10px;
+		font-size: 14px;
+	}
+}
+
+.locked {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.7);
+	border-radius: 15px;
+	padding-right: 20px;
+
+	span {
+		color: white;
+		padding-top: 10px;
+		font-weight: 500;
+	}
+}
@@ -2,29 +2,37 @@ import React, { useEffect, useMemo } from 'react'
 import { Avatar, Box, Button, Typography } from '@mui/material'
 import Image from 'next/image'
 import Link from 'next/link'
+import LockSvg from '@/src/assets/svg/lock.svg?react'
+import BlockedSvg from '@/src/assets/svg/blocked.svg?react'
 
 import styles from './card.module.scss'
+import { useThemeAndDevice } from '@/src/shared/lib/hooks'
 
 export type CardProps = {
 	title: string
 	icon: string
 	text: string
 	uid: string
+	blocked?: boolean
 	slug: string
 	accessed_models?: string[] | null
 }
 
-const ChatCard = ({ text, icon, title, uid, slug, accessed_models }: CardProps) => {
-
+const ChatCard = ({ text, icon, title, uid, slug, accessed_models, blocked }: CardProps) => {
 	const link = useMemo(() => {
 		return accessed_models && !accessed_models.includes(slug)
 			? '/account?scope=subscribe'
 			: `chat-bot/${slug}`
 	}, [accessed_models])
 
+	const { theme } = useThemeAndDevice()
+
 	return (
 		<Link href={link}>
-			<Box className={styles.card} sx={{ position: 'relative' }}>
+			<Box
+				className={styles.card}
+				sx={{ position: 'relative', userSelect: blocked ? 'none' : 'auto' }}
+			>
 				<Box display='flex' justifyContent='space-between' width='100%'>
 					<Avatar src={icon || '/model-preview.png'} />
 				</Box>
@@ -33,46 +41,28 @@ const ChatCard = ({ text, icon, title, uid, slug, accessed_models }: CardProps)
 					<Typography className={styles.text}>{text}</Typography>
 				</Box>
 
-				{accessed_models && !accessed_models.includes(slug) && (
-					<Box
-						sx={{
-							position: 'absolute',
-							height: '100%',
-							bottom: 0,
-							left: 0,
-							zIndex: 10,
-							width: '100%',
-							textAlign: 'center',
-						}}
+				{blocked ? (
+					<div
+						className={styles.blocked}
+						style={{ background: theme === 'light' ? '#FF2372' : '#FFFFFF' }}
 					>
-						<Box
-							sx={{
-								position: 'absolute',
-								height: '50%',
-								backdropFilter: 'blur(7px)',
-								bottom: 0,
-								left: 0,
-								zIndex: 10,
-								width: '100%',
-								textAlign: 'center',
-							}}
-						>
-							<Button
-								disabled
-								className='btn-classic'
-								sx={{ width: '86%', top: '30%' }}
-							>
-								<Image
-									style={{ marginRight: '7px', marginBottom: '2px' }}
-									src={'/star-white.svg'}
-									alt={'star'}
-									width={18}
-									height={16}
-								/>
-								Доступно в полной версии
-							</Button>
-						</Box>
-					</Box>
+						<BlockedSvg
+							width={23}
+							height={23}
+							color={theme === 'light' ? '#FFFFFF' : '#FF2372'}
+						/>
+						<span style={{ color: theme === 'light' ? '#FFFFFF' : '#FF2372' }}>
+							Модель недоступна
+						</span>
+					</div>
+				) : (
+					accessed_models &&
+					!accessed_models.includes(slug) && (
+						<div className={styles.locked}>
+							<LockSvg width={53} height={53} color='#8280FF' />
+							<span>Недоступно в текущем тарифе</span>
+						</div>
+					)
 				)}
 			</Box>
 		</Link>
@@ -9,8 +9,8 @@ import ChatCard from '@/src/main/components/chat_bot_card'
 import { Layout } from '@/src/main/layout'
 import { useAppSelector } from '@/src/main/store/store'
 import model_api from '@/src/shared/api/models/api'
-import { IShortModel } from '@/src/shared/api/models/models'
 import { getTypeDevice } from '@/src/shared/lib/helpers'
+import { IShortModel } from '@/src/entities/model-entity'
 
 export async function getServerSideProps(context: any): Promise<{ props: any }> {
 	const deviceType = getTypeDevice(context)
@@ -42,7 +42,9 @@ const Page: React.FC<any> = ({ deviceType }) => {
 
 	return (
 		<Layout titlePage={'Чат-боты'} device={deviceType}>
-			<Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>Чат-боты</Typography>
+			<Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>
+				Чат-боты
+			</Typography>
 			<Box display='flex' flexWrap='wrap' width='100%' justifyContent='start'>
 				{bots ? (
 					bots.map((item, idx) => (
@@ -50,6 +52,7 @@ const Page: React.FC<any> = ({ deviceType }) => {
 							accessed_models={user.payment_plan.plan.accessed_models}
 							uid={item.uid}
 							key={idx}
+              blocked={item.blocked}
 							title={item.title}
 							icon={item.image}
 							text={item.description}
@@ -8,9 +8,9 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { Layout } from '@/src/main/layout'
 import { useAppSelector } from '@/src/main/store/store'
 import model_api from '@/src/shared/api/models/api'
-import { IShortModel } from '@/src/shared/api/models/models'
 import { Card } from '@/src/shared/card/card'
 import { getTypeDevice } from '@/src/shared/lib/helpers'
+import { IShortModel } from '@/src/entities/model-entity'
 
 export async function getServerSideProps(context: any): Promise<{ props: any }> {
 	const deviceType = getTypeDevice(context)
@@ -38,7 +38,9 @@ export const Images: React.FC<any> = ({ deviceType }) => {
 
 	return (
 		<Layout titlePage={'Изображения'} device={deviceType}>
-			<Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>Изображения</Typography>
+			<Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>
+				Изображения
+			</Typography>
 			<Box display='flex' flexWrap='wrap'>
 				{bots ? (
 					bots.map((item, idx) => {
@@ -46,8 +48,9 @@ export const Images: React.FC<any> = ({ deviceType }) => {
 							<Card
 								accessed_models={user.payment_plan.plan.accessed_models}
 								uid={item.uid}
-                key={idx}
+								key={idx}
 								slug={item.slug}
+								blocked={item.blocked}
 								text={item.description}
 								title={item.title}
 								icon={item.image}
@@ -1,7 +1,8 @@
 import axios from 'axios'
 
-import { IModel, IShortModel } from '@/src/shared/api/models/models'
+import { IModel } from '@/src/shared/api/models/models'
 import { API_URL } from '@/src/shared/lib/constants'
+import { IShortModel } from '@/src/entities/model-entity'
 
 const model_api = {
 	async getBots(token?: string): Promise<IShortModel[]> {
@@ -1,32 +1,70 @@
 .card {
-  width: 381px;
-  overflow: hidden;
-  position: relative;
-  height: 290px;
-  border-radius: 15px;
-  background-color: var(--new-ui-main-color);
-  margin-top: 15px;
-  margin-right: 20px;
+	width: 381px;
+	overflow: hidden;
+	position: relative;
+	height: 290px;
+	border-radius: 15px;
+	background-color: var(--new-ui-main-color);
+	margin-top: 15px;
+	margin-right: 20px;
 
-  @media (max-width:420px) {
-    width: 92vw;
-    height: 300px;
-  }
-  
-  .description {
-    padding: 15px 20px;
+	@media (max-width: 420px) {
+		width: 92vw;
+		height: 300px;
+	}
 
-    .title {
-      color: var(--new-ui-text-color);
-      font-weight: 600;
-      font-size: 21px;
-    }
-    .text {
-      margin-top: 15px;
-      font-size: 15px;
-      color: var(--new-ui-gray-color);
-    }
-  }
+	.description {
+		padding: 15px 20px;
 
+		.title {
+			color: var(--new-ui-text-color);
+			font-weight: 600;
+			font-size: 21px;
+		}
+		.text {
+			margin-top: 15px;
+			font-size: 15px;
+			color: var(--new-ui-gray-color);
+		}
+	}
+}
 
-}
\ No newline at end of file
+.blocked {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	top: 20px;
+	right: 20px;
+	background-color: white;
+	border-radius: 100px;
+	padding-right: 20px;
+	padding: 8px 12px;
+
+	span {
+		color: #ff2372;
+		font-weight: 500;
+		padding-left: 10px;
+		font-size: 14px;
+	}
+}
+.locked {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.7);
+	border-radius: 15px;
+	padding-right: 20px;
+
+	span {
+		color: white;
+		padding-top: 10px;
+		font-weight: 500;
+	}
+}
@@ -2,8 +2,11 @@ import React, { useMemo } from 'react'
 import { Box, Button, Typography } from '@mui/material'
 import Image from 'next/image'
 import Link from 'next/link'
+import LockSvg from '@/src/assets/svg/lock.svg?react'
+import BlockedSvg from '@/src/assets/svg/blocked.svg?react'
 
 import styles from './card.module.scss'
+import { useThemeAndDevice } from '../lib/hooks'
 
 interface IProps {
 	text: string
@@ -11,19 +14,22 @@ interface IProps {
 	title: string
 	slug: string
 	uid: string
+	blocked: boolean
 	accessed_models?: string[] | null
 }
 
-export const Card = ({ text, icon, title, uid, slug, accessed_models }: IProps) => {
+export const Card = ({ text, icon, title, blocked, slug, accessed_models }: IProps) => {
 	const link = useMemo(() => {
 		return accessed_models && !accessed_models.includes(slug)
 			? '/account?scope=subscribe'
 			: `/images/${slug}`
 	}, [accessed_models])
 
+	const { theme } = useThemeAndDevice()
+
 	return (
 		<Link href={link}>
-			<Box className={styles.card}>
+			<Box sx={{ useSelect: blocked ? 'none' : 'auto' }} className={styles.card}>
 				<Box
 					height='50%'
 					sx={{
@@ -39,46 +45,28 @@ export const Card = ({ text, icon, title, uid, slug, accessed_models }: IProps)
 					<Typography className={styles.text}>{text}</Typography>
 				</Box>
 
-				{accessed_models && !accessed_models.includes(slug) && (
-					<Box
-						sx={{
-							position: 'absolute',
-							height: '100%',
-							bottom: 0,
-							left: 0,
-							zIndex: 10,
-							width: '100%',
-							textAlign: 'center',
-						}}
+				{blocked ? (
+					<div
+						className={styles.blocked}
+						style={{ background: theme === 'light' ? '#FF2372' : '#FFFFFF' }}
 					>
-						<Box
-							sx={{
-								position: 'absolute',
-								height: '30%',
-								backdropFilter: 'blur(7px)',
-								bottom: 0,
-								left: 0,
-								zIndex: 10,
-								width: '100%',
-								textAlign: 'center',
-							}}
-						>
-							<Button
-								disabled
-								className='btn-classic'
-								sx={{ width: '86%', top: '10%' }}
-							>
-								<Image
-									style={{ marginRight: '7px', marginBottom: '2px' }}
-									src={'/star-white.svg'}
-									alt={'star'}
-									width={18}
-									height={16}
-								/>
-								Доступно в полной версии
-							</Button>
-						</Box>
-					</Box>
+						<BlockedSvg
+							width={23}
+							height={23}
+							color={theme === 'light' ? '#FFFFFF' : '#FF2372'}
+						/>
+						<span style={{ color: theme === 'light' ? '#FFFFFF' : '#FF2372' }}>
+							Модель недоступна
+						</span>
+					</div>
+				) : (
+					accessed_models &&
+					!accessed_models.includes(slug) && (
+						<div className={styles.locked}>
+							<LockSvg width={53} height={53} color='#8280FF' />
+							<span>Недоступно в текущем тарифе</span>
+						</div>
+					)
 				)}
 			</Box>
 		</Link>
@@ -254,7 +254,9 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 					</Box>
 				</>
 			)}
-			{openErrorModal && <ErrorModalLazy device={'desktop'} open={openErrorModal} handleClose={handleCloseErrorModal} />}
+			{openErrorModal && (
+				<ErrorModalLazy device={'desktop'} open={openErrorModal} handleClose={handleCloseErrorModal} />
+			)}
 			<Box sx={{ position: 'absolute', bottom: 5, width: '100%', left: open ? 25 : 0 }}>
 				{open && (
 					<Box sx={{ width: 'fit-content' }}>
@@ -282,7 +284,10 @@ type MenuItemProps = {
 }
 
 export function MenuItem(props: MenuItemProps) {
-	const isActive = useMemo(() => props.link === props.pathname || props.activeList?.some((el) => props.pathname.includes(el)), [props.pathname])
+	const isActive = useMemo(
+		() => props.link === props.pathname || props.activeList?.some((el) => props.pathname.includes(el)),
+		[props.pathname]
+	)
 	const theme = useAppSelector((state) => state.theme.theme)
 
 	return (
@@ -307,7 +312,7 @@ export function MenuItem(props: MenuItemProps) {
 				},
 			}}
 		>
-			<Link href={props.link || ''}>
+			<Link onClick={(e) => !props.link && e.preventDefault()} href={props.link || ''}>
 				<ListItem
 					disablePadding
 					sx={{
@@ -341,7 +346,22 @@ export function MenuItem(props: MenuItemProps) {
 									justifyContent: 'center',
 								}}
 							>
-								<Image src={props.icon + (isActive ? '' : '-off') + '.svg'} width={19} height={19} alt={''} />
+								{typeof props.icon === 'string' ? (
+									<Image
+										src={props.icon + (isActive ? '' : '-off') + '.svg'}
+										width={19}
+										height={19}
+										alt={''}
+									/>
+								) : (
+									<div
+										style={{
+											color: isActive ? '#8280FF' : '#A4AAB5',
+										}}
+									>
+										{props.icon}
+									</div>
+								)}
 							</ListItemIcon>
 							<ListItemText
 								primary={props.title}