@@ -16,6 +16,10 @@
 	position: relative;
 	border-radius: 15px;
 
+	&_disabled {
+		cursor: default;
+	}
+
 	@media screen and (max-width: 1000px) {
 		width: 291px;
 		height: 291px;
@@ -10,6 +10,7 @@ import Image from 'next/image'
 import { useMediaQuery } from 'usehooks-ts'
 import { useEventStore } from '#/shared/lib/event-source'
 import { eventBus } from '#/shared/classes'
+import { GALLERY_IMAGES, getModalById } from '#/features/modals'
 
 interface FileImageMessageProps extends Message {}
 
@@ -20,19 +21,29 @@ export const FileImageMessage = ({ file, content, uid, ...message }: FileImageMe
 
 	const [loaded, setLoaded] = useState(false)
 
+	const [error, setError] = useState(false)
+
 	const [hasEvent, setHasEvent] = useState(false)
 
+	const modal = getModalById(GALLERY_IMAGES)
+
 	useEffect(() => {
 		eventBus.subscribe(`image-generate-${uid}`, (data) => {
 			setHasEvent(data)
 		})
 	}, [])
 
+	const text = useMemo(() => (error ? 'Ошибка загрузки' : 'Изображение загружается'), [error])
+
 	return (
-		<button className={c(styles.wrap)}>
+		<button className={c(styles.wrap, hasEvent || error && styles.wrap_disabled)}>
 			<div className={styles.wrap__image__wrapper}>
 				<Image
+					onClick={() => {
+						file && !error && !hasEvent && modal.setState(true)
+					}}
 					onLoadingComplete={() => setLoaded(true)}
+					onError={() => setError(true)}
 					className={`${styles.wrap__image} ${
 						loaded ? styles.wrap__image_loaded : styles.wrap__image_hidden
 					}`}
@@ -44,7 +55,7 @@ export const FileImageMessage = ({ file, content, uid, ...message }: FileImageMe
 				<div className={styles.skeleton}>
 					<PhorographSvg width={28} height={28} color='#A4AAB5' />
 					<p className={styles.skeleton__text}>
-						{hasEvent ? 'Изображение генерируется' : 'Изображение загружается'}
+						{hasEvent ? 'Изображение генерируется' : text}
 					</p>
 				</div>
 				{loaded && <ImageIcons {...{ file, content, uid, ...message }} />}
@@ -1,14 +1,14 @@
 .wrap {
 	padding: 12px 9px;
 	background-color: var(--new-ui-bg-color);
-  min-width: unset !important;
-  border-radius: 100px;
+	min-width: unset !important;
+	border-radius: 100px;
 
-  margin-top: 10px;
+	margin-top: 10px;
 
-  &__content{
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-  }
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+	}
 }
@@ -17,7 +17,11 @@ export const ImageIconsPopup = ({ uid, file, content }: ImageIconsPopupProps) =>
 	return (
 		<PopupTemplate horizontal='center' className={styles.wrap} id={uid}>
 			<div className={styles.wrap__content}>
-				<CommonTooltip content='Открыть в новой вкладке' position='bottom'>
+				<CommonTooltip
+					className={styles.tooltip_new}
+					content='Открыть в новой вкладке'
+					position='right'
+				>
 					<button
 						style={{ color: 'var(--air-color)' }}
 						onClick={() => file && window.open(file, '_blank') && popup.setState(false)}
@@ -25,7 +29,7 @@ export const ImageIconsPopup = ({ uid, file, content }: ImageIconsPopupProps) =>
 						<BlankLinkSvg width={15} height={15} />
 					</button>
 				</CommonTooltip>
-				<CommonTooltip content='Скачать изображение' position='bottom'>
+				<CommonTooltip content='Скачать изображение' position='right'>
 					<button
 						style={{ color: 'var(--air-color)' }}
 						onClick={() => downloadFile(file, content ?? 'image')}
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import styles from './bot-params-map.module.scss'
 
 import { SwitchFilter } from '#/features/switch-filter/'
@@ -13,15 +13,20 @@ interface BotParamsMap {}
 export default function BotParamsMap({}: BotParamsMap) {
 	const { infrerenceValues, setInferenceValueByKey, inferenceParams } = useChatBotParams()
 
+	const sortedInferenceParams = useMemo(
+		() => inferenceParams.sort((a, b) => (a.type === 'choices' ? 1 : -1)),
+		[inferenceParams]
+	)
+
 	return (
 		<div className={styles.container}>
-			{inferenceParams.map(({ key, type, name, description, values }) => {
+			{sortedInferenceParams.map(({ key, type, name, description, values }) => {
 				if (type == 'floatrange' || type == 'intrange') {
 					return (
 						<CommonTooltip
 							key={key}
 							position='left'
-              variant='descriptor'
+							variant='descriptor'
 							title={name}
 							disabled={!description || description.length == 0}
 							description={description}
@@ -23,7 +23,7 @@ export function useImageBotPagination(deviceType: Device) {
 
 	const { query } = useRouter()
 
-	const { messages, setLoading, setMessages, loading } = useImageBotMessages()
+	const { messages, setLoading, setMessages, loading, loaded, setLoaded } = useImageBotMessages()
 
 	const { showMessage } = useShowDataStore()
 
@@ -52,6 +52,8 @@ export function useImageBotPagination(deviceType: Device) {
 
 		setLoading(true)
 
+		setLoaded(false)
+
 		const { data: answer, ...response } = await getImagesBySlug(
 			query.slug as string,
 			data.access,
@@ -62,6 +64,8 @@ export function useImageBotPagination(deviceType: Device) {
 		if (response.status >= 400 || !Array.isArray(answer.messages))
 			return showMessage('Ошибка загрузки чата')
 
+		setLoaded(true)
+
 		const messages = useImageBotMessages.getState().messages
 
 		if (deviceType === 'desktop') setMessages([...messages, ...answer.messages])
@@ -146,5 +150,7 @@ export function useImageBotPagination(deviceType: Device) {
 		setMessages,
 		fetchMessages,
 		mobileScrollContainer,
+		loaded,
+		setLoaded,
 	}
 }
@@ -4,3 +4,4 @@
 	gap: 16px;
 	padding-right: 8px;
 }
+
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo, useRef } from 'react'
 import styles from './image-bot-params-map.module.scss'
 
 import { SwitchFilter } from '#/features/switch-filter/'
@@ -7,20 +7,28 @@ import { useChatBotParams, useImageBotParams } from '#/entities/model-entity'
 import { CommonTooltip } from '#/shared/ui/tooltip'
 import { RangeSlider } from '#/shared/ui/range-slider'
 import { CommonSelect } from '#/shared/ui/common-select'
+import { c } from '#/shared'
 
 interface ImageBotParamsMap {}
 
 export function ImageBotParamsMap({}: ImageBotParamsMap) {
 	const { infrerenceValues, setInferenceValueByKey, inferenceParams } = useImageBotParams()
 
+	const sortedInferenceParams = useMemo(
+		() => inferenceParams.sort((a, b) => (a.type === 'choices' ? -1 : 1)),
+		[inferenceParams]
+	)
+
+	const containerRef = useRef<HTMLDivElement>(null)
+
 	return (
-		<div className={styles.container}>
-			{inferenceParams.map(({ key, type, name, description, values }) => {
+		<div ref={containerRef} className={styles.container}>
+			{sortedInferenceParams.map(({ key, type, name, description, values }, idx) => {
 				if (type == 'floatrange' || type == 'intrange') {
 					return (
 						<CommonTooltip
 							key={key}
-              variant='descriptor'
+							variant='descriptor'
 							position='left'
 							title={name}
 							disabled={!description || description.length == 0}
@@ -54,6 +62,12 @@ export function ImageBotParamsMap({}: ImageBotParamsMap) {
 					return (
 						<CommonSelect
 							key={key}
+							onSetState={(state) => {
+								const { current } = containerRef
+								if (!current || !current.parentElement) return
+								current.parentElement!.style.overflow = state ? 'visible' : 'auto'
+							}}
+							classNameList={c(styles.select__list)}
 							value={infrerenceValues[key]}
 							setValue={(value) => setInferenceValueByKey(key, value)}
 							withoutTooltip
@@ -60,6 +60,24 @@ html[data-theme='light'] {
 	box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
 		rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
 
+	max-height: 250px;
+	overflow-y: auto;
+
+	*::-webkit-scrollbar {
+		height: 5px;
+		width: 1px !important;
+	}
+
+	*::-webkit-scrollbar-track {
+		background: initial;
+		margin: 21px 0;
+	}
+
+	*::-webkit-scrollbar-thumb {
+		background-color: rgba(217, 217, 217, 0.49);
+		border-radius: 5px;
+	}
+
 	&__wrap {
 		&:first-child {
 			li {
@@ -1,5 +1,5 @@
 'use client'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { HtmlHTMLAttributes, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import ArrowDownSvg from '#/assets/svg/arrow-down.svg?react'
 
 import styles from './common-select.module.scss'
@@ -8,11 +8,13 @@ import { CommonTooltip } from '#/shared/ui/tooltip'
 import { SelectItem } from '../types/select-item'
 import { CSSTransition } from 'react-transition-group'
 
-interface CommonSelectProps {
+interface CommonSelectProps extends HtmlHTMLAttributes<HTMLUListElement> {
 	value: string | null | undefined
 	setValue: (value: string) => void
 	items: SelectItem[]
 	withoutTooltip?: boolean
+	classNameList?: string
+	onSetState?: (state: boolean) => void
 }
 
 export const CommonSelect = ({
@@ -20,6 +22,8 @@ export const CommonSelect = ({
 	setValue,
 	items,
 	withoutTooltip = false,
+	classNameList,
+	onSetState,
 	...props
 }: CommonSelectProps) => {
 	const ref = useRef<HTMLDivElement>(null)
@@ -37,6 +41,8 @@ export const CommonSelect = ({
 		[ref]
 	)
 
+	useEffect(() => onSetState && onSetState(opened), [opened])
+
 	useEffect(() => {
 		window.addEventListener('click', callback)
 		return () => window.removeEventListener('click', callback)
@@ -50,7 +56,6 @@ export const CommonSelect = ({
 					e.stopPropagation()
 					setOpened((x) => !x)
 				}}
-				{...props}
 			>
 				<p className={styles.select__text}>{item?.label}</p>
 				<ArrowDownSvg
@@ -65,7 +70,7 @@ export const CommonSelect = ({
 					in={opened}
 					unmountOnExit
 				>
-					<ul ref={listRef} className={styles.list}>
+					<ul {...props} ref={listRef} className={c(styles.list, classNameList)}>
 						{items.map(({ label, description, ...item }) => (
 							<CommonTooltip
 								position='left'
@@ -74,7 +79,7 @@ export const CommonSelect = ({
 								key={item.value}
 								className={styles.list__wrap}
 								description={description}
-                disabled={!description}
+								disabled={!description}
 							>
 								<li
 									onClick={(e) => {
@@ -11,6 +11,7 @@
 	position: absolute;
 	left: 50%;
 	font-weight: 500;
+	z-index: 1;
 
 	transition: all 0.3s ease-in-out;
 	top: 140%;
@@ -117,6 +118,42 @@
 		}
 	}
 
+	&_right {
+		background-color: white;
+		top: 50%;
+		left: 210%; // Появляется справа от элемента
+		right: unset;
+		padding: 12px 16px;
+		transform: translateY(-50%) scale(0.9);
+
+		&_exiting {
+			opacity: 0;
+		}
+
+		&_entered {
+			transform: translateY(-50%) scale(1);
+			opacity: 1;
+		}
+
+		&_entering {
+			transform: translateY(-50%) scale(1);
+			opacity: 1;
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			top: 50%;
+			right: 100%;
+			left: unset;
+			transform: translateY(-50%);
+			width: 12px;
+			height: 12px;
+			background-color: #ececff;
+			clip-path: polygon(100% 0, 0% 50%, 100% 100%);
+		}
+	}
+
 	&__heading {
 		font-size: 17px;
 		line-height: 1.5;
@@ -10,6 +10,7 @@
 	z-index: -1;
 	transition: all 0.3s ease-in-out;
 
+
 	&_active {
 		opacity: 1;
 		z-index: 100;
@@ -22,6 +22,8 @@ import { CommonTitle } from '#/shared/ui/title'
 import { ImageModelOptions } from '#/widgets/image-model-options'
 import { useImageBotInput } from '#/features/image-bot-input'
 import { POPUP_IMAGE_BOT_PARAMS, getPopupById } from '#/shared/ui/popup'
+import { useEventSource, useEventStore } from '#/shared/lib/event-source'
+import { useImageMessagesEvents } from '#/entities/message'
 
 const ImageModelPage: NextPageWithLayout = () => {
 	const { botParams, fetchBotParams } = useImageBot()
@@ -41,6 +43,8 @@ const ImageModelPage: NextPageWithLayout = () => {
 		loading,
 		offset,
 		messages,
+		loaded,
+		setLoaded,
 	} = useImageBotPagination(deviceType)
 
 	const { createImage } = useImageBotCreateImage(deviceType, mobileScrollContainer, offset)
@@ -54,11 +58,25 @@ const ImageModelPage: NextPageWithLayout = () => {
 
 	const popup = getPopupById(POPUP_IMAGE_BOT_PARAMS)
 
+	const { closeEvent } = useEventSource()
+
+	const { makeEvent } = useImageMessagesEvents()
+
 	useEffect(() => {
 		onFetch()
 		onObserverMounted()
 	}, [botParams?.slug])
 
+	useEffect(() => {
+		if (!loaded) return
+		closeEvent('images')
+		makeEvent('images')
+
+		return () => {
+			closeEvent('images')
+			setLoaded(false)
+		}
+	}, [loaded])
 	return (
 		<>
 			<Head>
@@ -101,7 +119,7 @@ const ImageModelPage: NextPageWithLayout = () => {
 			>
 				<Box
 					sx={{
-						width: desktop ? '73%' : '100%',
+						width: desktop ? '83%' : '100%',
 						marginLeft: 0,
 						display: 'flex',
 						flexDirection: desktop ? 'column' : 'column-reverse',
@@ -41,8 +41,10 @@
 		flex-direction: column;
 		transition: max-height 0.25s;
 		max-height: 100dvh;
+		padding-bottom: 10px;
 		&_close {
 			max-height: 0px;
+			padding-bottom: 0px;
 			overflow: hidden;
 		}
 	}
@@ -11,7 +11,6 @@
 	color: #fff;
 }
 .wrap {
-	display: flex;
 	overflow: hidden;
 	width: 100%;
 	flex-wrap: wrap;
@@ -56,6 +55,34 @@
 		letter-spacing: 0.03rem;
 	}
 
+	&__scrollContainer {
+		height: calc(100vh - 450px);
+		overflow-y: auto;
+
+		@media (max-width: 1000px) {
+			height: calc(100dvh - 300px);
+		}
+	}
+
+	&__grid {
+		display: grid;
+		justify-content: left;
+		align-items: center;
+		grid-template-columns: repeat(auto-fit, 250px);
+		gap: 20px;
+		padding-bottom: 20px;
+
+		/* 		display: grid;
+		justify-content: start;
+		grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
+		row-gap: 20px;
+		padding-bottom: 20px;
+
+		@media (max-width: 768px) {
+			grid-template-columns: 1fr;
+		} */
+	}
+
 	&__container {
 		display: flex;
 		flex-wrap: wrap;
@@ -18,8 +18,6 @@ interface ImageMessagesListProps {
 export const ImageMessagesList = ({ device, images, getMessagesPagination }: ImageMessagesListProps) => {
 	const { chosenImage, setChosenImage, computedLibraryImages } = useMessages(images)
 
-	const modal = getModalById(GALLERY_IMAGES)
-
 	const deviceType = getDeviceType()
 
 	return (
@@ -38,17 +36,16 @@ export const ImageMessagesList = ({ device, images, getMessagesPagination }: Ima
 			<div className={c(styles.images)}>
 				<p className={c(styles.images__title)}>ГЕНЕРАЦИИ</p>
 
-				<div key={images.length} className={c(styles.images__container)}>
-					{images.map((message, index) => (
-						<ImageMessage
-							style={{ zIndex: images.length - index }}
-							onClick={() => {
-								message.file && modal.setState(true)
-							}}
-							key={message.uid}
-							{...message}
-						/>
-					))}
+				<div className={c(styles.images__scrollContainer)}>
+					<div className={c(styles.images__grid)}>
+						{images.map((message, index) => (
+							<ImageMessage
+								onClick={() => setChosenImage(message.file)}
+								style={{ zIndex: images.length - index }}
+								{...message}
+							/>
+						))}
+					</div>
 				</div>
 			</div>
 		</>