@@ -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
@@ -6,6 +6,7 @@ export interface IShortModel {
 	description: string
 	slug: string
 	image: string
+  blocked: boolean
 	actual_stat: {
 		generation_time: string
 		tokens_cost: string
@@ -4,10 +4,18 @@ import { useMemo, useState } from 'react'
 export function useImageModelsPopup() {
 	const { bots, fetchBots, setBots } = useImagesBots()
 
-  const [popupOpen, setPopupOpen] = useState(false)
+	const [popupOpen, setPopupOpen] = useState(false)
+
+	const fileteredModels = useMemo(
+		() =>
+			bots.sort((a, b) =>
+				a.blocked && !b.blocked ? 1 : !a.blocked && b.blocked ? -1 : 0
+			),
+		[bots]
+	)
 
 	const averageTokenCost = useMemo(() => {
-    if (!bots.length) return 0
+		if (!bots.length) return 0
 
 		const prices = bots.filter((item) => item.actual_stat).map((item) => item.actual_stat)
 
@@ -21,7 +29,8 @@ export function useImageModelsPopup() {
 		setBots,
 		fetchBots,
 		averageTokenCost,
-    popupOpen,
-    setPopupOpen
+		popupOpen,
+		fileteredModels,
+		setPopupOpen,
 	}
 }
@@ -1,11 +1,27 @@
 .container {
 	position: relative;
 
-  @media (max-width: 768px) {
-    position: static;
-  }
+	@media (max-width: 768px) {
+		position: static;
+	}
 }
+.wrapper {
+	background: rgba($color: #000000, $alpha: 0.4);
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 104;
+	visibility: hidden;
+	opacity: 0;
+	transition: all 0.3s ease-in-out;
 
+	&_open {
+		visibility: visible;
+		opacity: 1;
+	}
+}
 .select {
 	padding: 0px 18px;
 	background: rgba(#8280ff, 0.1);
@@ -19,8 +35,8 @@
 	&__arrow {
 		padding-top: 5px;
 		@media (max-width: 768px) {
-      width: 15px;
-      height: 15px;
+			width: 15px;
+			height: 15px;
 		}
 	}
 
@@ -45,16 +61,16 @@
 	visibility: hidden;
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
-  border: 1px solid #40404e4b;
-  max-height: 70vh;
-  overflow-y: scroll;
+	border: 1px solid #40404e4b;
+	max-height: 70vh;
+	overflow-y: scroll;
+	top: calc(100% + 10px);
 
-
-  @media (max-width: 768px) {
-    left: 0;
-    right: 0;
-    width: fit-content;
-  }
+	@media (max-width: 768px) {
+		left: 0;
+		right: 0;
+		width: fit-content;
+	}
 
 	&_open {
 		visibility: visible;
@@ -13,7 +13,8 @@ interface ImageModelsPopupProps {
 }
 
 export const ImageModelsPopup = ({ model }: ImageModelsPopupProps) => {
-	const { bots, fetchBots, averageTokenCost, popupOpen, setPopupOpen } = useImageModelsPopup()
+	const { fileteredModels, fetchBots, averageTokenCost, popupOpen, setPopupOpen } =
+		useImageModelsPopup()
 
 	const { push } = useRouter()
 
@@ -36,10 +37,14 @@ export const ImageModelsPopup = ({ model }: ImageModelsPopupProps) => {
 						height={20}
 					/>
 				</div>
+				<div
+					onClick={() => setPopupOpen(false)}
+					className={c(styles.wrapper, popupOpen ? styles.wrapper_open : null)}
+				></div>
 				<div className={c(styles.popup, popupOpen ? styles.popup_open : null)}>
-					{bots.map((item) => (
+					{fileteredModels.map((item) => (
 						<ImagePopupModel
-							averageTokenCost={averageTokenCost} 
+							averageTokenCost={averageTokenCost}
 							active={model ? item.slug === model.slug : false}
 							setActive={(slug) => {
 								setPopupOpen(false)
@@ -7,21 +7,39 @@
 	gap: 22px;
 	justify-content: space-between;
 	max-width: 500px;
-  transition: background-color 0.3s ease;
+	transition: background-color 0.3s ease;
+	position: relative;
 
-  &:hover{
-    background-color: rgba($color: #a4aab5, $alpha: 0.1);
-  }
+	&:hover {
+		background-color: rgba($color: #a4aab5, $alpha: 0.1);
+	}
+
+	@media (max-width: 768px) {
+		// max-width: calc(100% - 100px) !important;
+		width: 100%;
+		// max-width: unset;
+	}
 
-  @media (max-width: 768px) {
-    // max-width: calc(100% - 100px) !important;
-    width: 100%;
-    // max-width: unset;
-  }
+	&__blocked {
+		background-color: rgba($color: #000000, $alpha: 0.7);
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		span {
+			color: white;
+			font-weight: 600;
+			padding-left: 8px;
+		}
+	}
 	&__title {
 		font-weight: 600;
 		font-size: 18px;
-		margin-bottom: 4px; 
+		margin-bottom: 4px;
 	}
 
 	&__description {
@@ -39,7 +57,7 @@
 		padding: 4px 6px;
 		font-size: 13px;
 		display: flex;
-    align-items: center;
+		align-items: center;
 		gap: 2px;
 		background-color: rgba($color: #a4aab5, $alpha: 0.1);
 		color: white;
@@ -6,7 +6,7 @@ import { c, formatDate } from '@/src/shared/lib/helpers'
 import SuccessRoundedSvg from '@/src/assets/svg/success-rounded.svg?react'
 import ClockSvg from '@/src/assets/svg/clock.svg?react'
 import LightningSvg from '@/src/assets/svg/lightning.svg?react'
-import { CostZones } from '../types'
+import LockSvg from '@/src/assets/svg/lock.svg?react'
 
 interface ImagePopupModelProps extends IShortModel {
 	active: boolean
@@ -26,11 +26,10 @@ export const costZoneColors: CostZone[] = [
 ]
 
 export const ImagePopupModel = ({
-	uid,
 	title,
 	description,
 	slug,
-	image,
+	blocked,
 	actual_stat,
 	active,
 	averageTokenCost,
@@ -49,14 +48,21 @@ export const ImagePopupModel = ({
 
 	const costZone = useMemo(() => {
 		if (!actual_stat) return null
-    
+
 		const remainder = Number(actual_stat.tokens_cost) - averageTokenCost
 
 		return costZoneColors.find((item) => item.remainder > remainder)
 	}, [actual_stat, averageTokenCost])
 
 	return (
-		<div onClick={() => setActive(slug)} className={styles.model}>
+		<div onClick={() => !blocked && setActive(slug)} className={styles.model}>
+			{blocked && (
+				<div className={c(styles.model__blocked)}>
+					<LockSvg color='#8280FF' width={20} height={20} />
+					<span>Недоступно в текущем тарифе</span>
+				</div>
+			)}
+
 			<div className={styles.model__content}>
 				<p className={styles.model__title}>{title}</p>
 				<p className={styles.model__description}>{description}</p>
@@ -68,7 +74,10 @@ export const ImagePopupModel = ({
 							<span>{formatedTime}</span>
 						</div>
 
-						<div style={{ color: costZone?.color }} className={c(styles.model__badge, styles.model__cost)}>
+						<div
+							style={{ color: costZone?.color }}
+							className={c(styles.model__badge, styles.model__cost)}
+						>
 							<LightningSvg fill={costZone?.color} width={10} height={18} />
 							{Number(actual_stat.tokens_cost)}
 						</div>