@@ -34,20 +34,18 @@
 	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;
+	top: 20px;
+	right: 20px;
+	background-color: white;
+	border-radius: 100px;
 	padding-right: 20px;
-	cursor: not-allowed;
+	padding: 8px 12px;
 
 	span {
-		color: white;
+		color: #ff2372;
 		font-weight: 500;
+		padding-left: 10px;
 	}
 }
 
@@ -6,6 +6,7 @@ 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
@@ -24,13 +25,10 @@ const ChatCard = ({ text, icon, title, uid, slug, accessed_models, blocked }: Ca
 			: `chat-bot/${slug}`
 	}, [accessed_models])
 
+	const { theme } = useThemeAndDevice()
+
 	return (
-		<Link
-			style={{
-				pointerEvents: blocked ? 'none' : 'auto',
-			}}
-			href={link}
-		>
+		<Link href={link}>
 			<Box
 				className={styles.card}
 				sx={{ position: 'relative', userSelect: blocked ? 'none' : 'auto' }}
@@ -44,9 +42,18 @@ const ChatCard = ({ text, icon, title, uid, slug, accessed_models, blocked }: Ca
 				</Box>
 
 				{blocked ? (
-					<div className={styles.blocked}>
-						<BlockedSvg width={53} height={53} color='#FF2372' />
-						<span>Модель недоступна</span>
+					<div
+						className={styles.blocked}
+						style={{ background: theme === 'light' ? '#FF2372' : '#FFFFFF' }}
+					>
+						<BlockedSvg
+							width={26}
+							height={26}
+							color={theme === 'light' ? '#FFFFFF' : '#FF2372'}
+						/>
+						<span style={{ color: theme === 'light' ? '#FFFFFF' : '#FF2372' }}>
+							Модель недоступна
+						</span>
 					</div>
 				) : (
 					accessed_models &&
@@ -33,23 +33,20 @@
 	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;
+	top: 20px;
+	right: 20px;
+	background-color: white;
+	border-radius: 100px;
 	padding-right: 20px;
-	cursor: not-allowed;
+	padding: 8px 12px;
 
 	span {
-		color: white;
+		color: #ff2372;
 		font-weight: 500;
+		padding-left: 10px;
 	}
 }
-
 .locked {
 	display: flex;
 	align-items: center;
@@ -6,6 +6,7 @@ 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
@@ -24,8 +25,10 @@ export const Card = ({ text, icon, title, blocked, slug, accessed_models }: IPro
 			: `/images/${slug}`
 	}, [accessed_models])
 
+	const { theme } = useThemeAndDevice()
+
 	return (
-		<Link style={{ pointerEvents: blocked ? 'none' : 'auto' }} href={link}>
+		<Link href={link}>
 			<Box sx={{ useSelect: blocked ? 'none' : 'auto' }} className={styles.card}>
 				<Box
 					height='50%'
@@ -43,9 +46,18 @@ export const Card = ({ text, icon, title, blocked, slug, accessed_models }: IPro
 				</Box>
 
 				{blocked ? (
-					<div className={styles.blocked}>
-						<BlockedSvg width={53} height={53} color='#FF2372' />
-						<span>Модель недоступна</span>
+					<div
+						className={styles.blocked}
+						style={{ background: theme === 'light' ? '#FF2372' : '#FFFFFF' }}
+					>
+						<BlockedSvg
+							width={26}
+							height={26}
+							color={theme === 'light' ? '#FFFFFF' : '#FF2372'}
+						/>
+						<span style={{ color: theme === 'light' ? '#FFFFFF' : '#FF2372' }}>
+							Модель недоступна
+						</span>
 					</div>
 				) : (
 					accessed_models &&