@@ -1,9 +1,35 @@
 import axios from 'axios'
 
-import { Message, MessageSend } from '../types'
+import { MediaGenerationsPage, MediaStore, Message, MessageSend } from '../types'
 
 import { getApiUrl } from '#/shared/lib/constants'
 
+export async function getMediaGenerations(
+	token: string,
+	options: {
+		store: MediaStore
+		page_size?: number
+		cursor?: string | null
+	}
+) {
+	const params = new URLSearchParams({ store: options.store })
+
+	if (options.page_size != null) {
+		params.set('page_size', String(options.page_size))
+	}
+
+	if (options.cursor) {
+		params.set('cursor', options.cursor)
+	}
+
+	return await axios.get<MediaGenerationsPage>(`${getApiUrl()}/api/media/generations/?${params.toString()}`, {
+		validateStatus: (status) => status < 500,
+		headers: {
+			Authorization: `Bearer ${token}`,
+		},
+	})
+}
+
 export async function sendMediaMessage<T>(
 	model: string | null,
 	modelType: 'video' | 'image' | 'audio' | 'voice',
@@ -4,6 +4,14 @@ export interface MessageSend<T> {
 	info: T
 }
 
+export type MediaStore = 'image' | 'video' | 'audio' | 'voice_clone'
+
+export interface MediaGenerationsPage<T = File | null | string> {
+	next: string | null
+	previous: string | null
+	results: Message<T>[]
+}
+
 export interface Message<T = File | null | string> {
 	content: string
 	created_at: string
@@ -1,94 +1,106 @@
-import React from 'react'

-import { Stack } from '@mui/material'

-

-import { CheckboxFilter } from '#/app/components/filters/checkbox_filter'

-import { InputFilter } from '#/app/components/filters/input_filter'

-import { SelectFilter } from '#/app/components/filters/select_filter'

-import { Slide } from '#/app/components/filters/slide_filter'

-import { setParams } from '#/app/store/model-parametres-store'

-import { useAppDispatch, useAppSelector } from '#/app/store/store'

-import { IModelParams } from '#/shared/api/models/models'

-

-import { usePruneModelParams } from './model/use-prune-model-params'

-

-interface IProps {

-	params: IModelParams[]

-	currentVersion: string

-}

-export default function BotParamsMap({ params, currentVersion }: IProps) {

-	const includeParams = useAppSelector((state) => state.params.params)

-	const dispatch = useAppDispatch()

-

-	usePruneModelParams(params, currentVersion)

-

-	const setNewParam = React.useCallback(

-		(payload: { [key: string]: string | number | number[] | boolean }) => {

-			dispatch(setParams(payload))

-		},

-		[dispatch]

-	)

-

-	return (

-		<Stack spacing={2}>

-			{params.map((item, idx) => {

-				if (item.versions.length === 0 || item.versions.includes(currentVersion)) {

-					if (item.type == 'floatrange' || item.type == 'intrange') {

-						return (

-							<Slide

-								key={idx}

-								title={item.name}

-								values={item.values}

-								item_key={item.key}

-								description={item.description}

-								filters={includeParams}

-								setNewParam={setNewParam}

-							/>

-						)

-					}

-					if (item.type == 'bool') {

-						return (

-							<CheckboxFilter

-								key={idx}

-								value={item.values.default as boolean}

-								name={item.name}

-								description={item.description}

-								item_key={item.key}

-								filters={includeParams}

-								setNewParam={setNewParam}

-							/>

-						)

-					}

-

-					if (item.type == 'list') {

-						return (

-							<SelectFilter

-								key={idx}

-								name={item.name}

-								description={item.description}

-								selects={item.values}

-								filters={includeParams}

-								item_key={item.key}

-								setNewParam={setNewParam}

-							/>

-						)

-					}

-

-					if (item.type == 'int' || item.type == 'str') {

-						return (

-							<InputFilter

-								key={idx}

-								filters={includeParams}

-								title={item.name}

-								values={item.values}

-								item_key={item.key}

-								description={item.description}

-								setNewParam={setNewParam}

-							/>

-						)

-					}

-				}

-			})}

-		</Stack>

-	)

-}

+import React from 'react'
+import { Stack } from '@mui/material'
+
+import { CheckboxFilter } from '#/app/components/filters/checkbox_filter'
+import { InputFilter } from '#/app/components/filters/input_filter'
+import { SelectFilter } from '#/app/components/filters/select_filter'
+import { Slide } from '#/app/components/filters/slide_filter'
+import { setParams } from '#/app/store/model-parametres-store'
+import { useAppDispatch, useAppSelector } from '#/app/store/store'
+import { IModelParams } from '#/shared/api/models/models'
+
+import { usePruneModelParams } from './model/use-prune-model-params'
+
+interface IProps {
+	params: IModelParams[]
+	currentVersion: string
+	layout?: 'rows' | 'grid'
+}
+export default function BotParamsMap({ params, currentVersion, layout = 'rows' }: IProps) {
+	const includeParams = useAppSelector((state) => state.params.params)
+	const dispatch = useAppDispatch()
+
+	usePruneModelParams(params, currentVersion)
+
+	const setNewParam = React.useCallback(
+		(payload: { [key: string]: string | number | number[] | boolean }) => {
+			dispatch(setParams(payload))
+		},
+		[dispatch]
+	)
+
+	return (
+		<Stack
+			spacing={layout === 'rows' ? 2 : 0}
+			sx={
+				layout === 'grid'
+					? {
+							display: 'grid',
+							gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+							gap: 2,
+						}
+					: undefined
+			}
+		>
+			{params.map((item, idx) => {
+				if (item.versions.length === 0 || item.versions.includes(currentVersion)) {
+					if (item.type == 'floatrange' || item.type == 'intrange') {
+						return (
+							<Slide
+								key={idx}
+								title={item.name}
+								values={item.values}
+								item_key={item.key}
+								description={item.description}
+								filters={includeParams}
+								setNewParam={setNewParam}
+							/>
+						)
+					}
+					if (item.type == 'bool') {
+						return (
+							<CheckboxFilter
+								key={idx}
+								value={item.values.default as boolean}
+								name={item.name}
+								description={item.description}
+								item_key={item.key}
+								filters={includeParams}
+								setNewParam={setNewParam}
+							/>
+						)
+					}
+
+					if (item.type == 'list') {
+						return (
+							<SelectFilter
+								key={idx}
+								name={item.name}
+								description={item.description}
+								selects={item.values}
+								filters={includeParams}
+								item_key={item.key}
+								setNewParam={setNewParam}
+							/>
+						)
+					}
+
+					if (item.type == 'int' || item.type == 'str') {
+						return (
+							<InputFilter
+								key={idx}
+								filters={includeParams}
+								title={item.name}
+								values={item.values}
+								item_key={item.key}
+								description={item.description}
+								setNewParam={setNewParam}
+							/>
+						)
+					}
+				}
+			})}
+		</Stack>
+	)
+}
 
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './use-media-generations-pagination'
@@ -0,0 +1,137 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useSession } from 'next-auth/react'
+
+import { getMediaGenerations, MediaStore, Message } from '#/entities/message'
+import { getApiUrl } from '#/shared/lib/constants'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+
+const PAGE_SIZE = 20
+
+function extractCursor(nextUrl: string | null): string | null {
+	if (!nextUrl) {
+		return null
+	}
+
+	try {
+		const url = new URL(nextUrl, getApiUrl())
+		return url.searchParams.get('cursor')
+	} catch {
+		return null
+	}
+}
+
+function appendUniqueByUid(prev: Message[], incoming: Message[]): Message[] {
+	const seen = new Set(prev.map((message) => message.uid))
+	const additions = incoming.filter((message) => !seen.has(message.uid))
+
+	if (additions.length === 0) {
+		return prev
+	}
+
+	return [...prev, ...additions]
+}
+
+export function useMediaGenerationsPagination(store: MediaStore) {
+	const { data } = useSession()
+	const { showMessage } = useShowDataStore()
+
+	const [items, setItems] = useState<Message[] | null>(null)
+	const [loading, setLoading] = useState(true)
+	const [paginationLoading, setPaginationLoading] = useState(false)
+	const [cursor, setCursor] = useState<string | null>(null)
+	const [hasMore, setHasMore] = useState(true)
+
+	useEffect(() => {
+		if (!data?.access) {
+			return
+		}
+
+		setItems(null)
+		setCursor(null)
+		setHasMore(true)
+
+		let cancelled = false
+
+		;(async () => {
+			setLoading(true)
+
+			try {
+				const { data: page, status } = await getMediaGenerations(data.access, {
+					store,
+					page_size: PAGE_SIZE,
+				})
+
+				if (cancelled) {
+					return
+				}
+
+				if (status >= 400 || !Array.isArray(page?.results)) {
+					showMessage('Ошибка загрузки')
+					setItems([])
+					setHasMore(false)
+					return
+				}
+
+				const nextCursor = extractCursor(page.next)
+				setItems(page.results)
+				setCursor(nextCursor)
+				setHasMore(Boolean(nextCursor))
+			} catch (error) {
+				console.error('[useMediaGenerationsPagination] initial load failed', { store, error })
+				if (!cancelled) {
+					showMessage('Ошибка загрузки')
+					setItems([])
+					setHasMore(false)
+				}
+			} finally {
+				if (!cancelled) {
+					setLoading(false)
+				}
+			}
+		})()
+
+		return () => {
+			cancelled = true
+		}
+	}, [data?.access, store, showMessage])
+
+	const loadMore = useCallback(async () => {
+		if (!data?.access || paginationLoading || loading || !hasMore || !cursor) {
+			return
+		}
+
+		setPaginationLoading(true)
+
+		try {
+			const { data: page, status } = await getMediaGenerations(data.access, {
+				store,
+				page_size: PAGE_SIZE,
+				cursor,
+			})
+
+			if (status >= 400 || !Array.isArray(page?.results) || page.results.length === 0) {
+				setHasMore(false)
+				return
+			}
+
+			const nextCursor = extractCursor(page.next)
+			setItems((prev) => (prev ? appendUniqueByUid(prev, page.results) : page.results))
+			setCursor(nextCursor)
+			setHasMore(Boolean(nextCursor))
+		} catch (error) {
+			console.error('[useMediaGenerationsPagination] loadMore failed', { store, error })
+			showMessage('Ошибка загрузки')
+		} finally {
+			setPaginationLoading(false)
+		}
+	}, [data?.access, paginationLoading, loading, hasMore, cursor, store, showMessage])
+
+	return {
+		items,
+		loading,
+		paginationLoading,
+		hasMore,
+		loadMore,
+		setItems,
+	}
+}
@@ -0,0 +1 @@
+export * from './model'
@@ -8,6 +8,17 @@
 	border: 2px solid rgb(66, 66, 72) !important;
 }
 
+.wrapperStacked {
+	flex-direction: column;
+	align-items: stretch;
+	padding: 16px 18px 14px;
+	border-radius: 28px;
+	gap: 12px;
+	border: 1px solid rgba(66, 66, 72, 0.9) !important;
+	background: rgba(21, 21, 24, 0.92);
+	backdrop-filter: blur(10px);
+}
+
 .wrapperImages {
 	background-color: #151518;
 }
@@ -19,6 +30,8 @@
 .settingsIcon {
 	min-width: 21px;
 	min-height: 21px;
+	flex-shrink: 0;
+	cursor: pointer;
 }
 
 .area {
@@ -31,6 +44,8 @@
 	padding: 0px;
 	font-size: 16px;
 	max-height: 82px;
+	background: transparent;
+	color: #ffffff;
 
 	&::-webkit-scrollbar {
 		display: none; /* Chrome, Brave, Edge */
@@ -38,6 +53,7 @@
 
 	&::placeholder {
 		font-size: 16px;
+		color: #8b919c;
 	}
 
 	border: none;
@@ -47,6 +63,13 @@
 	}
 }
 
+.areaStacked {
+	max-height: 120px;
+	min-height: 48px;
+	line-height: 1.4;
+	color: #ffffff;
+}
+
 .endAdornment {
 	position: relative;
 	display: flex;
@@ -54,6 +77,39 @@
 	justify-content: center;
 }
 
+.endAdornmentStacked {
+	width: 100%;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.endActions {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+}
+
+.paramsBtn {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 14px;
+	border: none;
+	border-radius: 999px;
+	background: rgba(127, 125, 243, 0.18);
+	color: #7f7df3;
+	font: inherit;
+	font-size: 14px;
+	font-weight: 600;
+	cursor: pointer;
+	flex-shrink: 0;
+
+	&:hover {
+		background: rgba(127, 125, 243, 0.26);
+	}
+}
+
 .divider {
 	height: 20px;
 	width: 1px;
@@ -68,7 +124,7 @@
 	padding: 4px 14px;
 	border-radius: 16px;
 	margin-right: 8px;
-	background-color: #7F7DF31A;
+	background-color: #7f7df31a;
 	gap: 4px;
 
 	@media screen and (max-width: 400px) {
@@ -81,8 +137,3 @@
 .generationIcon {
 	margin-top: 3px;
 }
-
-.settingsIcon {
-	flex-shrink: 0;
-	cursor: pointer;
-}
@@ -62,6 +62,11 @@ interface Input {
 	value?: string
 	onValueChange?: (value: string) => void
 	predictedPrice?: string | null
+	/** media: textarea сверху, кнопки снизу */
+	layout?: 'inline' | 'stacked'
+	showParamsButton?: boolean
+	onOpenParams?: () => void
+	placeholder?: string
 }
 
 export const ModelInput: FC<Input & TextFieldProps> = ({
@@ -80,6 +85,10 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 	value: externalValue,
 	onValueChange: externalOnChange,
 	predictedPrice,
+	layout = 'inline',
+	showParamsButton = false,
+	onOpenParams,
+	placeholder,
 }: Input) => {
 	const [disabled, setDisabled] = React.useState<boolean>(true)
 	const [required, setRequired] = React.useState<(string | null)[]>([])
@@ -231,100 +240,135 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 		return () => window.removeEventListener('tour-send-message', handleTourSendMessage)
 	}, [clearDraft, sendMessage, unpinImage])
 
-	return (
-		<>
-		<div
-			className={c(classes.wrapper, styles === 'images' ? classes.wrapperImages : classes.wrapperTransparent)}
+	const isStacked = layout === 'stacked'
+	const resolvedPlaceholder =
+		placeholder ??
+		(disabled || blocked
+			? 'Ввод текста недоступен для этой модели'
+			: isStacked
+				? 'Опишите то, что хотите сгенерировать'
+				: 'Ваше сообщение')
+
+	const paramsButton = showParamsButton ? (
+		<button
+			type='button'
+			className={classes.paramsBtn}
+			onClick={() => onOpenParams?.()}
 		>
-			{!desktop && (
-				<svg
-					className={classes.settingsIcon}
-					width='26'
-					height='26'
-					viewBox='0 0 21 21'
-					fill='none'
-					xmlns='http://www.w3.org/2000/svg'
-					onClick={viewMobileSettings}
-				>
-					<path
-						d='M20.0499 10.5001V10.5C20.0497 10.2215 19.8248 9.99512 19.5469 9.99503C19.5469 9.99503 19.5468 9.99503 19.5467 9.99503H16.1776C15.9411 8.73429 14.8391 7.7764 13.5158 7.7764C12.1925 7.7764 11.0902 8.73428 10.8536 9.99503H1.45301C1.17504 9.99503 0.95 10.2216 0.95 10.5001C0.95 10.7788 1.17523 11.0051 1.45301 11.0051H10.8536C11.0902 12.2659 12.1921 13.2238 13.5155 13.2238C14.8388 13.2238 15.9408 12.2659 16.1774 11.0051H19.5469C19.8249 11.0051 20.0499 10.7786 20.0499 10.5001ZM13.5157 12.2135C12.5755 12.2135 11.8102 11.4449 11.8102 10.5001C11.8102 9.55518 12.5757 8.78674 13.5157 8.78674C14.4558 8.78674 15.2212 9.55538 15.2212 10.5001C15.2212 11.4451 14.4556 12.2135 13.5157 12.2135ZM19.5469 16.8213H10.1463C9.90977 15.5605 8.80778 14.6026 7.48444 14.6026C6.16111 14.6026 5.05897 15.5605 4.82234 16.8213H1.45317C1.1752 16.8213 0.950162 17.0478 0.950162 17.3263C0.950162 17.605 1.17539 17.8314 1.45317 17.8314H4.82266C5.05916 19.0921 6.16115 20.05 7.48448 20.05C8.80782 20.05 9.90981 19.0921 10.1463 17.8314H19.5469C19.8249 17.8314 20.05 17.6048 20.05 17.3263C20.05 17.0477 19.8249 16.8213 19.5469 16.8213ZM7.48444 19.0397C6.54428 19.0397 5.77896 18.2711 5.77896 17.3264C5.77896 16.3814 6.54448 15.613 7.48444 15.613C8.42461 15.613 9.18993 16.3816 9.18993 17.3264C9.18993 18.2713 8.42457 19.0397 7.48444 19.0397ZM1.45321 4.17873H4.8227C5.0592 5.43948 6.16119 6.39736 7.48453 6.39736C8.80786 6.39736 9.90984 5.43948 10.1463 4.17873H19.547C19.825 4.17873 20.05 3.95216 20.05 3.67368C20.05 3.39501 19.8248 3.16863 19.547 3.16863H10.1463C9.90985 1.90789 8.80786 0.95 7.48453 0.95C6.16119 0.95 5.05905 1.90789 4.82242 3.16863H1.45325C1.17528 3.16863 0.950243 3.3952 0.950243 3.67368C0.950243 3.95233 1.17509 4.17873 1.45321 4.17873ZM7.48444 1.96026C8.42461 1.96026 9.18993 2.7289 9.18993 3.67364C9.18993 4.61858 8.42441 5.38703 7.48444 5.38703C6.54428 5.38703 5.77896 4.61838 5.77896 3.67364C5.77896 2.7287 6.54416 1.96026 7.48444 1.96026Z'
-						fill='#7F7DF3'
-						stroke='#868686'
-						strokeWidth='0.1'
-					/>
-				</svg>
-			)}
-			<textarea
-				onInput={(e) => {
-					const target = e.target as HTMLTextAreaElement
-					target.style.height = 'auto'
-					target.style.height = target.scrollHeight + 'px'
-				}}
-				onKeyDown={async (e) => {
-					if (e.shiftKey && e.key === 'Enter') {
-					} else if (e.key === 'Enter') {
-						e.preventDefault()
-						const isSend = wrappedSendMessage(value, required)
-						if (isSend) {
-							clearDraft()
-							if (unpinImage) unpinImage()
-						}
-					}
-				}}
-				rows={1}
-				placeholder={disabled || blocked ? 'Ввод текста недоступен для этой модели' : 'Ваше сообщение'}
-				className={classes.area}
-				disabled={disabled || blocked}
-				onChange={(e) => setValue(e.target.value)}
-				value={value}
-			></textarea>
-
-			<div className={classes.endAdornment}>
-				<PredictPrice isChatBot={styles === 'chats'} token={Number(predictedPrice) } />
+			<svg width='18' height='18' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden>
+				<path
+					d='M20.0499 10.5001V10.5C20.0497 10.2215 19.8248 9.99512 19.5469 9.99503C19.5469 9.99503 19.5468 9.99503 19.5467 9.99503H16.1776C15.9411 8.73429 14.8391 7.7764 13.5158 7.7764C12.1925 7.7764 11.0902 8.73428 10.8536 9.99503H1.45301C1.17504 9.99503 0.95 10.2216 0.95 10.5001C0.95 10.7788 1.17523 11.0051 1.45301 11.0051H10.8536C11.0902 12.2659 12.1921 13.2238 13.5155 13.2238C14.8388 13.2238 15.9408 12.2659 16.1774 11.0051H19.5469C19.8249 11.0051 20.0499 10.7786 20.0499 10.5001ZM13.5157 12.2135C12.5755 12.2135 11.8102 11.4449 11.8102 10.5001C11.8102 9.55518 12.5757 8.78674 13.5157 8.78674C14.4558 8.78674 15.2212 9.55538 15.2212 10.5001C15.2212 11.4451 14.4556 12.2135 13.5157 12.2135ZM19.5469 16.8213H10.1463C9.90977 15.5605 8.80778 14.6026 7.48444 14.6026C6.16111 14.6026 5.05897 15.5605 4.82234 16.8213H1.45317C1.1752 16.8213 0.950162 17.0478 0.950162 17.3263C0.950162 17.605 1.17539 17.8314 1.45317 17.8314H4.82266C5.05916 19.0921 6.16115 20.05 7.48448 20.05C8.80782 20.05 9.90981 19.0921 10.1463 17.8314H19.5469C19.8249 17.8314 20.05 17.6048 20.05 17.3263C20.05 17.0477 19.8249 16.8213 19.5469 16.8213ZM7.48444 19.0397C6.54428 19.0397 5.77896 18.2711 5.77896 17.3264C5.77896 16.3814 6.54448 15.613 7.48444 15.613C8.42461 15.613 9.18993 16.3816 9.18993 17.3264C9.18993 18.2713 8.42457 19.0397 7.48444 19.0397ZM1.45321 4.17873H4.8227C5.0592 5.43948 6.16119 6.39736 7.48453 6.39736C8.80786 6.39736 9.90984 5.43948 10.1463 4.17873H19.547C19.825 4.17873 20.05 3.95216 20.05 3.67368C20.05 3.39501 19.8248 3.16863 19.547 3.16863H10.1463C9.90985 1.90789 8.80786 0.95 7.48453 0.95C6.16119 0.95 5.05905 1.90789 4.82242 3.16863H1.45325C1.17528 3.16863 0.950243 3.3952 0.950243 3.67368C0.950243 3.95233 1.17509 4.17873 1.45321 4.17873ZM7.48444 1.96026C8.42461 1.96026 9.18993 2.7289 9.18993 3.67364C9.18993 4.61858 8.42441 5.38703 7.48444 5.38703C6.54428 5.38703 5.77896 4.61838 5.77896 3.67364C5.77896 2.7287 6.54416 1.96026 7.48444 1.96026Z'
+					fill='currentColor'
+				/>
+			</svg>
+			<span>Параметры</span>
+		</button>
+	) : null
+
+	const controls = (
+		<div className={c(classes.endAdornment, isStacked && classes.endAdornmentStacked)}>
+			{isStacked && paramsButton}
+			<div className={classes.endActions}>
+				<PredictPrice isChatBot={styles === 'chats'} token={Number(predictedPrice)} />
 				{hasAttachInput && (
-						<>
-							{!blocked && (
-								<LoadImage
-									loading={loading}
-									image={image}
-									unpinImage={unpinImage}
-									imageLoad={handleFileLoad}
-									types={types}
-									desktop={desktop}
-								/>
-							)}
-							<div className={classes.divider}></div>
-						</>
-					)}
+					<>
+						{!blocked && (
+							<LoadImage
+								loading={loading}
+								image={image}
+								unpinImage={unpinImage}
+								imageLoad={handleFileLoad}
+								types={types}
+								desktop={desktop}
+							/>
+						)}
+						{!isStacked && <div className={classes.divider}></div>}
+					</>
+				)}
 				{!disabled && !blocked && (
 					<SendBtn
 						loading={loading}
 						unpinImage={unpinImage}
 						input={value}
 						sendMessage={wrappedSendMessage}
-						setInput={externalOnChange ? 
-							(val: string | ((prev: string) => string)) => {
-								const newVal = typeof val === 'function' ? val(value) : val
-								externalOnChange(newVal)
-							} : 
-							(val: string | ((prev: string) => string)) => {
-								const next = typeof val === 'function' ? val(value) : val
-								if (next === '') {
-									clearDraft()
-								} else {
-									setInternalValue(next)
-								}
-							}
+						setInput={
+							externalOnChange
+								? (val: string | ((prev: string) => string)) => {
+										const newVal = typeof val === 'function' ? val(value) : val
+										externalOnChange(newVal)
+									}
+								: (val: string | ((prev: string) => string)) => {
+										const next = typeof val === 'function' ? val(value) : val
+										if (next === '') {
+											clearDraft()
+										} else {
+											setInternalValue(next)
+										}
+									}
 						}
 						required={required}
 					/>
 				)}
 			</div>
 		</div>
+	)
+
+	return (
+		<>
+			<div
+				className={c(
+					classes.wrapper,
+					styles === 'images' ? classes.wrapperImages : classes.wrapperTransparent,
+					isStacked && classes.wrapperStacked
+				)}
+			>
+				{!desktop && !isStacked && (
+					<svg
+						className={classes.settingsIcon}
+						width='26'
+						height='26'
+						viewBox='0 0 21 21'
+						fill='none'
+						xmlns='http://www.w3.org/2000/svg'
+						onClick={viewMobileSettings}
+					>
+						<path
+							d='M20.0499 10.5001V10.5C20.0497 10.2215 19.8248 9.99512 19.5469 9.99503C19.5469 9.99503 19.5468 9.99503 19.5467 9.99503H16.1776C15.9411 8.73429 14.8391 7.7764 13.5158 7.7764C12.1925 7.7764 11.0902 8.73428 10.8536 9.99503H1.45301C1.17504 9.99503 0.95 10.2216 0.95 10.5001C0.95 10.7788 1.17523 11.0051 1.45301 11.0051H10.8536C11.0902 12.2659 12.1921 13.2238 13.5155 13.2238C14.8388 13.2238 15.9408 12.2659 16.1774 11.0051H19.5469C19.8249 11.0051 20.0499 10.7786 20.0499 10.5001ZM13.5157 12.2135C12.5755 12.2135 11.8102 11.4449 11.8102 10.5001C11.8102 9.55518 12.5757 8.78674 13.5157 8.78674C14.4558 8.78674 15.2212 9.55538 15.2212 10.5001C15.2212 11.4451 14.4556 12.2135 13.5157 12.2135ZM19.5469 16.8213H10.1463C9.90977 15.5605 8.80778 14.6026 7.48444 14.6026C6.16111 14.6026 5.05897 15.5605 4.82234 16.8213H1.45317C1.1752 16.8213 0.950162 17.0478 0.950162 17.3263C0.950162 17.605 1.17539 17.8314 1.45317 17.8314H4.82266C5.05916 19.0921 6.16115 20.05 7.48448 20.05C8.80782 20.05 9.90981 19.0921 10.1463 17.8314H19.5469C19.8249 17.8314 20.05 17.6048 20.05 17.3263C20.05 17.0477 19.8249 16.8213 19.5469 16.8213ZM7.48444 19.0397C6.54428 19.0397 5.77896 18.2711 5.77896 17.3264C5.77896 16.3814 6.54448 15.613 7.48444 15.613C8.42461 15.613 9.18993 16.3816 9.18993 17.3264C9.18993 18.2713 8.42457 19.0397 7.48444 19.0397ZM1.45321 4.17873H4.8227C5.0592 5.43948 6.16119 6.39736 7.48453 6.39736C8.80786 6.39736 9.90984 5.43948 10.1463 4.17873H19.547C19.825 4.17873 20.05 3.95216 20.05 3.67368C20.05 3.39501 19.8248 3.16863 19.547 3.16863H10.1463C9.90985 1.90789 8.80786 0.95 7.48453 0.95C6.16119 0.95 5.05905 1.90789 4.82242 3.16863H1.45325C1.17528 3.16863 0.950243 3.3952 0.950243 3.67368C0.950243 3.95233 1.17509 4.17873 1.45321 4.17873ZM7.48444 1.96026C8.42461 1.96026 9.18993 2.7289 9.18993 3.67364C9.18993 4.61858 8.42441 5.38703 7.48444 5.38703C6.54428 5.38703 5.77896 4.61838 5.77896 3.67364C5.77896 2.7287 6.54416 1.96026 7.48444 1.96026Z'
+							fill='#7F7DF3'
+							stroke='#868686'
+							strokeWidth='0.1'
+						/>
+					</svg>
+				)}
+				<textarea
+					onInput={(e) => {
+						const target = e.target as HTMLTextAreaElement
+						target.style.height = 'auto'
+						target.style.height = target.scrollHeight + 'px'
+					}}
+					onKeyDown={async (e) => {
+						if (e.shiftKey && e.key === 'Enter') {
+						} else if (e.key === 'Enter') {
+							e.preventDefault()
+							const isSend = wrappedSendMessage(value, required)
+							if (isSend) {
+								clearDraft()
+								if (unpinImage) unpinImage()
+							}
+						}
+					}}
+					rows={isStacked ? 2 : 1}
+					placeholder={resolvedPlaceholder}
+					className={c(classes.area, isStacked && classes.areaStacked)}
+					disabled={disabled || blocked}
+					onChange={(e) => setValue(e.target.value)}
+					value={value}
+				></textarea>
+
+				{controls}
+			</div>
 
-			{styles === 'chats' && (
-				<ChatDisclaimer desktop={desktop} />
-			)}
+			{styles === 'chats' && <ChatDisclaimer desktop={desktop} />}
 		</>
 	)
 }
@@ -0,0 +1,6 @@
+import { MediaPage } from '#/views/media'
+import { getDefaultLayout } from '#/widgets/layouts'
+
+MediaPage.getLayout = getDefaultLayout({ titlePage: 'Медиа', darkSurface: true })
+
+export default MediaPage
@@ -0,0 +1,2 @@
+export { default } from './media-page'
+export { MediaPage } from './media-page'
@@ -0,0 +1,48 @@
+.page {
+	position: relative;
+	flex: 1;
+	min-height: 0;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.selectorOverlay {
+	position: absolute;
+	top: 16px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 12;
+	pointer-events: none;
+
+	> * {
+		pointer-events: auto;
+	}
+}
+
+.gridScroll {
+	flex: 1;
+	min-height: 0;
+	overflow-x: hidden;
+	overflow-y: auto;
+	padding-bottom: 160px;
+}
+
+.inputBar {
+	position: fixed;
+	left: 130px;
+	right: 80px;
+	bottom: 24px;
+	z-index: 20;
+	max-width: 920px;
+	width: calc(100% - 210px);
+	margin: 0 auto;
+
+	@media (max-width: 766px) {
+		left: 12px;
+		right: 12px;
+		bottom: 16px;
+		width: auto;
+	}
+}
@@ -0,0 +1,186 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useSession } from 'next-auth/react'
+
+import { useAppSelector } from '#/app/store/store'
+import { IShortModel } from '#/entities/model-entity'
+import { useImageBot } from '#/entities/model-entity/model/use-image-bot'
+import { useCreateMediaMessage } from '#/features/create-media-message'
+import { useImagesBotFilters } from '#/features/image-bot-filters'
+import { useImagesUniqInput } from '#/features/image-bot-input'
+import { useMediaGenerationsPagination } from '#/features/media-generations-pagination'
+import { ModelInput } from '#/features/model-input'
+import { usePredictPrice } from '#/features/predict-price/model/use-predict-price'
+import { NextPageWithLayout } from '#/pages/_app'
+import model_api from '#/shared/api/models/api'
+import { getDeviceType, getOs } from '#/shared/lib/helpers'
+import { useDeviceType } from '#/shared/lib/hooks'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+
+import { MediaPageContentPaginated } from '../media-page-content-paginated'
+import { MediaParamsPopover } from '../media-params-popover'
+import { ModelSelector } from '../model-selector'
+
+import styles from './media-page.module.scss'
+
+const MEDIA_MODEL_SLUG_KEY = 'media-selected-image-model'
+
+export const MediaPage: NextPageWithLayout = () => {
+	const deviceOs = getOs()
+	const deviceType = getDeviceType()
+	const { desktop } = useDeviceType(deviceType, deviceOs)
+	const { data: session } = useSession()
+	const { showMessage } = useShowDataStore()
+	const payment_plan = useAppSelector((state) => state.user.payment_plan)
+	const scrollContainerRef = useRef<HTMLDivElement | null>(null)
+	const inputBarRef = useRef<HTMLDivElement | null>(null)
+
+	const [models, setModels] = useState<IShortModel[]>([])
+	const [selectedSlug, setSelectedSlug] = useState('')
+	const [prompt, setPrompt] = useState('')
+	const [paramsOpen, setParamsOpen] = useState(false)
+
+	const { botParams, version, modelType, fetchBotParams, resetParams } = useImageBot(selectedSlug)
+	const { includeParams } = useImagesBotFilters()
+	const { items, setItems, loading, paginationLoading, hasMore, loadMore } = useMediaGenerationsPagination('image')
+	const { createImage, createLoading } = useCreateMediaMessage(
+		showMessage,
+		modelType,
+		'image',
+		deviceType,
+		setItems,
+		scrollContainerRef
+	)
+	const { onCreateImage, onLoadImage, image, setImage, pinImageFromUrl } = useImagesUniqInput(
+		version,
+		includeParams,
+		createImage
+	)
+
+	const canAttachFile = useMemo(() => {
+		if (!botParams?.inputs) return false
+
+		return botParams.inputs.some((input) => {
+			if (input.type === 'text') return false
+			if (input.versions.length === 0) return true
+			if (!version) return true
+			return input.versions.includes(version)
+		})
+	}, [botParams?.inputs, version])
+
+	const hasParams = useMemo(() => {
+		if (!botParams?.parameters?.length) return false
+		return botParams.parameters.some(
+			(param) => param.versions.length === 0 || !version || param.versions.includes(version)
+		)
+	}, [botParams?.parameters, version])
+
+	const predictPriceInfo = useMemo(
+		() => ({ ...(includeParams || {}), ...(version ? { version } : {}) }),
+		[includeParams, version]
+	)
+
+	const predictedPrice = usePredictPrice({
+		modelSlug: modelType,
+		content: prompt,
+		fileExists: !!image,
+		info: predictPriceInfo,
+		token: session?.access,
+		enabled: !!modelType && !!session?.access,
+	})
+
+	useEffect(() => {
+		if (!session?.access) return
+
+		model_api.getImages(session.access).then((list) => {
+			const available = Array.isArray(list) ? list.filter((model) => !model.blocked) : []
+			const all = Array.isArray(list) ? list : []
+			setModels(all)
+
+			const savedSlug = typeof window !== 'undefined' ? localStorage.getItem(MEDIA_MODEL_SLUG_KEY) : null
+			const initial =
+				(savedSlug && all.find((model) => model.slug === savedSlug)?.slug) ||
+				available[0]?.slug ||
+				all[0]?.slug ||
+				''
+
+			setSelectedSlug(initial)
+		})
+	}, [session?.access])
+
+	useEffect(() => {
+		if (!session?.access || !selectedSlug) return
+
+		localStorage.setItem(MEDIA_MODEL_SLUG_KEY, selectedSlug)
+		void fetchBotParams()
+	}, [session?.access, selectedSlug])
+
+	const handleSelectModel = (slug: string) => {
+		if (slug === selectedSlug) return
+		setSelectedSlug(slug)
+		setPrompt('')
+		setImage(null)
+	}
+
+	return (
+		<div className={styles.page}>
+			<div className={styles.selectorOverlay}>
+				<ModelSelector
+					models={models}
+					selectedSlug={selectedSlug}
+					onSelect={handleSelectModel}
+					accessedModels={payment_plan?.plan?.accessed_models}
+				/>
+			</div>
+
+			<div className={`${styles.gridScroll} smallScroll`} ref={scrollContainerRef}>
+				<MediaPageContentPaginated
+					items={items}
+					loading={loading}
+					paginationLoading={paginationLoading}
+					hasMore={hasMore}
+					loadMore={loadMore}
+					canAttachFile={canAttachFile}
+					onPinImageFromUrl={pinImageFromUrl}
+					scrollRootRef={scrollContainerRef}
+				/>
+			</div>
+
+			<div className={styles.inputBar} ref={inputBarRef}>
+				{botParams && (
+					<>
+						<ModelInput
+							currentVersion={version}
+							styles='images'
+							layout='stacked'
+							input_types={botParams.inputs}
+							image={image}
+							value={prompt}
+							onValueChange={setPrompt}
+							desktop={desktop}
+							blocked={botParams.blocked}
+							loading={createLoading}
+							imageLoad={onLoadImage}
+							sendMessage={onCreateImage}
+							unpinImage={() => setImage(null)}
+							viewMobileSettings={() => undefined}
+							predictedPrice={predictedPrice}
+							showParamsButton={hasParams}
+							onOpenParams={() => setParamsOpen(true)}
+						/>
+						<MediaParamsPopover
+							anchorEl={inputBarRef.current}
+							open={paramsOpen}
+							onClose={() => setParamsOpen(false)}
+							params={botParams.parameters || []}
+							currentVersion={version}
+							onReset={resetParams}
+							desktop={desktop}
+						/>
+					</>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export default MediaPage
@@ -0,0 +1 @@
+export { MediaPageContentPaginated } from './media-page-content-paginated'
@@ -0,0 +1,107 @@
+.root {
+	position: relative;
+	min-height: 320px;
+	padding: 0 80px 0 0;
+	border-radius: 0;
+}
+
+.grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 4px;
+	width: 100%;
+	align-items: start;
+
+	@media (max-width: 1200px) {
+		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+	}
+
+	@media (max-width: 766px) {
+		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+	}
+}
+
+.tile {
+	position: relative;
+	display: block;
+	width: 100%;
+	border-radius: 4px;
+	overflow: hidden;
+	cursor: pointer;
+	background: #2d2d2f;
+}
+
+.tileZip {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 180px;
+	border: 1px solid #8280ff;
+	cursor: default;
+	padding: 12px;
+	text-align: center;
+}
+
+.image {
+	display: block;
+	width: 100%;
+	height: auto;
+	border-radius: 4px;
+	user-select: none;
+	vertical-align: top;
+}
+
+.imageVisible {
+	opacity: 1;
+}
+
+.imageHidden {
+	opacity: 0;
+	position: absolute;
+}
+
+.skeleton {
+	display: block;
+	width: 100%;
+	min-height: 200px;
+	border-radius: 4px;
+}
+
+.model {
+	position: absolute;
+	top: 12px;
+	left: 12px;
+	z-index: 2;
+	background-color: rgba(#151518, 0.5);
+	font-size: 13px;
+	padding: 2px 8px;
+	border-radius: 10px;
+	font-weight: 500;
+	color: #fff;
+}
+
+.empty {
+	color: #a4aab5;
+	font-size: 15px;
+	text-align: center;
+	padding: 40px 0;
+}
+
+.loader {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 200px;
+}
+
+.paginationLoader {
+	display: flex;
+	justify-content: center;
+	padding-top: 20px;
+}
+
+.sentinel {
+	height: 1px;
+	width: 100%;
+}
@@ -0,0 +1,174 @@
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Box, CircularProgress, Skeleton, Typography } from '@mui/material'
+import Image from 'next/image'
+import Link from 'next/link'
+
+import { ImageModal } from '#/features/image-modal'
+import { ClientOnly, Loader } from '#/shared'
+import { c } from '#/shared/lib/helpers'
+import { ImageIcons, useMessages } from '#/widgets/messages'
+
+import styles from './media-page-content-paginated.module.scss'
+import { MediaPageContentPaginatedProps } from './types'
+
+export const MediaPageContentPaginated = ({
+	items,
+	loading,
+	paginationLoading,
+	hasMore,
+	loadMore,
+	canAttachFile = false,
+	onPinImageFromUrl,
+	scrollRootRef,
+}: MediaPageContentPaginatedProps) => {
+	const paginationSentinelRef = useRef<HTMLDivElement | null>(null)
+	const [modal, setModal] = useState(false)
+	const [loadedMap, setLoadedMap] = useState<Record<string, boolean>>({})
+	const { chosenImage, setChosenImage, computedLibraryImages } = useMessages(items ?? [])
+
+	useEffect(() => {
+		if (!hasMore || !items?.length || loading) {
+			return
+		}
+
+		const sentinel = paginationSentinelRef.current
+		if (!sentinel) {
+			return
+		}
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (!entries[0]?.isIntersecting || paginationLoading || !hasMore) {
+					return
+				}
+
+				void loadMore()
+			},
+			{
+				root: scrollRootRef?.current ?? null,
+				rootMargin: '400px',
+			}
+		)
+
+		observer.observe(sentinel)
+
+		return () => observer.disconnect()
+	}, [hasMore, items?.length, loading, loadMore, paginationLoading, scrollRootRef])
+
+	const openModal = (file: string) => {
+		setChosenImage(file)
+		setModal(true)
+	}
+
+	return (
+		<Box className={c('bg-color-block', styles.root)}>
+			<ClientOnly>
+				{createPortal(
+					<ImageModal
+						images={computedLibraryImages}
+						modal={modal}
+						onSlideFalse={() => {
+							if (hasMore) {
+								void loadMore()
+							}
+						}}
+						setModal={setModal}
+						reverse
+						current={chosenImage}
+					/>,
+					document.getElementById('modal-container')!
+				)}
+			</ClientOnly>
+
+			{loading ? (
+				<Box className={styles.loader}>
+					<Loader />
+				</Box>
+			) : items?.length === 0 ? (
+				<Typography className={styles.empty}>Пока нет генераций</Typography>
+			) : (
+				<>
+					<div className={styles.grid}>
+						{items?.map((message) => {
+							const file = message.file?.toString() ?? ''
+							const isZip = file.includes('.zip')
+							const isLoaded = Boolean(loadedMap[message.uid])
+
+							if (isZip) {
+								return (
+									<div key={message.uid} className={c(styles.tile, styles.tileZip)}>
+										<Typography>Эта генерация является архивом</Typography>
+										<Typography color='#8280FF' marginTop={1}>
+											<Link href={file}>Скачать</Link>
+										</Typography>
+									</div>
+								)
+							}
+
+							return (
+								<div key={message.uid} className={styles.tile}>
+									{file && (
+										<Image
+											className={c(styles.image, isLoaded ? styles.imageVisible : styles.imageHidden)}
+											src={file}
+											alt={message.content || 'Генерация'}
+											width={800}
+											height={800}
+											sizes='(max-width: 766px) 50vw, 280px'
+											style={{ width: '100%', height: 'auto' }}
+											onClick={() => openModal(file)}
+											onLoadingComplete={() => {
+												setLoadedMap((prev) => ({ ...prev, [message.uid]: true }))
+											}}
+										/>
+									)}
+
+									{!isLoaded && (
+										<Skeleton
+											className={styles.skeleton}
+											sx={{
+												background: '#2d2d2f',
+												transform: 'none',
+											}}
+											variant='rectangular'
+											width='100%'
+											height={200}
+										/>
+									)}
+
+									{message.model && !(canAttachFile && file) && (
+										<span className={styles.model}>{message.model}</span>
+									)}
+
+									<ImageIcons
+										uid={message.uid}
+										content={message.content}
+										url={file || null}
+										accentColor='#FFFFFF'
+										onPinImageClick={
+											file && canAttachFile && onPinImageFromUrl
+												? () => onPinImageFromUrl(file)
+												: undefined
+										}
+									/>
+								</div>
+							)
+						})}
+					</div>
+
+					{hasMore && (
+						<>
+							{paginationLoading && (
+								<Box className={styles.paginationLoader}>
+									<CircularProgress size={18} thickness={3} sx={{ color: '#7F7DF3' }} />
+								</Box>
+							)}
+							<div ref={paginationSentinelRef} className={styles.sentinel} />
+						</>
+					)}
+				</>
+			)}
+		</Box>
+	)
+}
@@ -0,0 +1,13 @@
+import { Message } from '#/entities/message'
+import { RefObject } from 'react'
+
+export interface MediaPageContentPaginatedProps {
+	items: Message[] | null
+	loading: boolean
+	paginationLoading: boolean
+	hasMore: boolean
+	loadMore: () => Promise<void>
+	canAttachFile?: boolean
+	onPinImageFromUrl?: (url: string) => void
+	scrollRootRef?: RefObject<HTMLDivElement | null>
+}
@@ -0,0 +1 @@
+export { MediaParamsPopover } from './media-params-popover'
@@ -0,0 +1,51 @@
+.paper {
+	translate: 0 -12px;
+	border-radius: 20px !important;
+	background: rgba(28, 28, 32, 0.96) !important;
+	backdrop-filter: blur(12px);
+	color: #fff !important;
+	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
+	overflow: visible !important;
+	max-height: none !important;
+}
+
+.root {
+	display: flex;
+	flex-direction: column;
+	padding: 18px 18px 12px;
+	width: 100%;
+	box-sizing: border-box;
+	overflow: hidden;
+}
+
+.title {
+	font-size: 13px !important;
+	font-weight: 600 !important;
+	letter-spacing: 0.08em;
+	color: #a4aab5 !important;
+	margin-bottom: 16px !important;
+}
+
+.body {
+	width: 100%;
+	overflow: hidden;
+	min-width: 0;
+
+	:global(.MuiStack-root) {
+		width: 100%;
+		min-width: 0;
+	}
+
+	:global(.MuiSlider-root),
+	:global(.MuiFormControl-root),
+	:global(.MuiBox-root) {
+		max-width: 100%;
+		min-width: 0;
+	}
+}
+
+.empty {
+	color: #a4aab5 !important;
+	font-size: 14px !important;
+	padding: 8px 0 16px;
+}
@@ -0,0 +1,62 @@
+import { Box, Popover, Typography } from '@mui/material'
+
+import { ResetFilters } from '#/app/components/filters/reset_filters'
+import BotParamsMap from '#/features/bot-params/bot-params-map'
+import { IModelParams } from '#/shared/api/models/models'
+
+import styles from './media-params-popover.module.scss'
+
+interface MediaParamsPopoverProps {
+	anchorEl: HTMLElement | null
+	open: boolean
+	onClose: () => void
+	params: IModelParams[]
+	currentVersion: string
+	onReset: () => void
+	desktop: boolean
+}
+
+export const MediaParamsPopover = ({
+	anchorEl,
+	open,
+	onClose,
+	params,
+	currentVersion,
+	onReset,
+	desktop,
+}: MediaParamsPopoverProps) => {
+	return (
+		<Popover
+			open={open}
+			anchorEl={anchorEl}
+			onClose={onClose}
+			anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+			transformOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+			slotProps={{
+				paper: {
+					className: styles.paper,
+					sx: {
+						width: anchorEl ? anchorEl.offsetWidth : undefined,
+						maxWidth: anchorEl ? anchorEl.offsetWidth : '100%',
+					},
+				},
+			}}
+			disableScrollLock
+			marginThreshold={8}
+		>
+			<div className={styles.root}>
+				<Typography className={styles.title}>ПАРАМЕТРЫ</Typography>
+
+				<Box className={styles.body}>
+					{params.length > 0 ? (
+						<BotParamsMap params={params} currentVersion={currentVersion} layout='rows' />
+					) : (
+						<Typography className={styles.empty}>Нет доступных параметров</Typography>
+					)}
+				</Box>
+
+				<ResetFilters reset={onReset} desktop={desktop} closeDrawer={onClose} />
+			</div>
+		</Popover>
+	)
+}
@@ -0,0 +1 @@
+export { ModelSelector } from './model-selector'
@@ -0,0 +1,191 @@
+.root {
+	pointer-events: auto;
+}
+
+.trigger {
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+	padding: 8px 10px 8px 16px;
+	border: none;
+	border-radius: 20px;
+	background: rgba(30, 30, 34, 0.9);
+	backdrop-filter: blur(8px);
+	color: #fff;
+	cursor: pointer;
+	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
+	font: inherit;
+}
+
+.label {
+	color: #fff;
+	font-size: 20px;
+	font-weight: 500;
+	line-height: 1.2;
+}
+
+.nameChip {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 4px 10px 4px 12px;
+	border: 1px solid #7f7df3;
+	border-radius: 14px;
+	background: #7f7df3;
+}
+
+.name {
+	color: #fff;
+	font-size: 20px;
+	font-weight: 600;
+	line-height: 1.2;
+}
+
+.chevron {
+	font-size: 22px !important;
+	color: #fff;
+	transition: transform 0.15s ease;
+}
+
+.chevronOpen {
+	transform: rotate(180deg);
+}
+
+.menuPaper {
+	margin-top: 10px !important;
+	width: min(440px, calc(100vw - 32px));
+	max-height: min(420px, 70vh) !important;
+	border-radius: 20px !important;
+	background: rgba(28, 28, 32, 0.96) !important;
+	backdrop-filter: blur(12px);
+	color: #fff !important;
+	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
+	overflow: hidden;
+}
+
+.menuList {
+	max-height: min(420px, 70vh);
+	overflow-y: auto;
+	padding: 8px !important;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.menuItem {
+	display: flex !important;
+	align-items: flex-start !important;
+	justify-content: space-between !important;
+	gap: 12px;
+	padding: 14px 16px !important;
+	border-radius: 16px !important;
+	white-space: normal !important;
+	background: transparent !important;
+	opacity: 1 !important;
+
+	&:hover {
+		background: rgba(127, 125, 243, 0.12) !important;
+	}
+
+	&.Mui-disabled {
+		opacity: 1 !important;
+	}
+}
+
+.menuItemSelected {
+	background: rgba(127, 125, 243, 0.16) !important;
+
+	&:hover {
+		background: rgba(127, 125, 243, 0.2) !important;
+	}
+}
+
+.menuItemMuted {
+	.itemTitle {
+		color: rgba(255, 255, 255, 0.72);
+	}
+
+	.itemDescription {
+		color: rgba(164, 170, 181, 0.75);
+	}
+}
+
+.itemBody {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+	flex: 1;
+}
+
+.itemHeader {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+}
+
+.itemTitle {
+	font-size: 18px;
+	font-weight: 600;
+	line-height: 1.25;
+	color: #fff;
+}
+
+.itemTitleSelected {
+	color: #7f7df3;
+}
+
+.itemDescription {
+	font-size: 13px !important;
+	line-height: 1.4 !important;
+	color: #a4aab5 !important;
+}
+
+.tags {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 6px;
+}
+
+.tag {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 2px 8px;
+	border: 1px solid #7f7df3;
+	border-radius: 999px;
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 1.4;
+	background: transparent;
+}
+
+.tagIcon {
+	flex-shrink: 0;
+	color: inherit;
+}
+
+.tagText {
+	white-space: nowrap;
+}
+
+.itemStatus {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	min-width: 24px;
+	padding-top: 2px;
+}
+
+.statusSelected {
+	font-size: 22px !important;
+	color: #7f7df3;
+}
+
+.statusBlocked {
+	font-size: 22px !important;
+	color: #e84d4d;
+}
@@ -0,0 +1,144 @@
+import { useState } from 'react'
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import { Menu, MenuItem, Typography } from '@mui/material'
+import { useRouter } from 'next/router'
+
+import LockSvg from '#/assets/svg/lock.svg?react'
+import { IShortModel } from '#/entities/model-entity'
+import { c } from '#/shared/lib/helpers'
+import { SvgIcon } from '#/shared/ui/svg'
+
+import styles from './model-selector.module.scss'
+
+interface ModelSelectorProps {
+	models: IShortModel[]
+	selectedSlug: string
+	onSelect: (slug: string) => void
+	accessedModels?: string[] | null
+	className?: string
+}
+
+export const ModelSelector = ({
+	models,
+	selectedSlug,
+	onSelect,
+	accessedModels,
+	className,
+}: ModelSelectorProps) => {
+	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+	const open = Boolean(anchorEl)
+	const { push } = useRouter()
+
+	const selected = models.find((model) => model.slug === selectedSlug)
+	const title = selected?.title || 'Модель'
+
+	const isLocked = (slug: string) => Boolean(accessedModels && !accessedModels.includes(slug))
+
+	const handleSelect = (model: IShortModel) => {
+		if (model.blocked) return
+
+		if (isLocked(model.slug)) {
+			setAnchorEl(null)
+			void push('/subscription')
+			return
+		}
+
+		onSelect(model.slug)
+		setAnchorEl(null)
+	}
+
+	return (
+		<div className={c(styles.root, className)}>
+			<button
+				type='button'
+				className={styles.trigger}
+				onClick={(event) => setAnchorEl(event.currentTarget)}
+				aria-haspopup='listbox'
+				aria-expanded={open}
+			>
+				<span className={styles.label}>Модель</span>
+				<span className={styles.nameChip}>
+					<span className={styles.name}>{title}</span>
+					<KeyboardArrowDownIcon className={c(styles.chevron, open && styles.chevronOpen)} />
+				</span>
+			</button>
+
+			<Menu
+				anchorEl={anchorEl}
+				open={open}
+				onClose={() => setAnchorEl(null)}
+				anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+				transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+				slotProps={{
+					paper: {
+						className: styles.menuPaper,
+					},
+				}}
+				MenuListProps={{
+					className: styles.menuList,
+				}}
+			>
+				{models.map((model) => {
+					const isSelected = model.slug === selectedSlug
+					const locked = isLocked(model.slug)
+
+					return (
+						<MenuItem
+							key={model.uid || model.slug}
+							selected={isSelected}
+							disabled={model.blocked}
+							onClick={() => handleSelect(model)}
+							className={c(
+								styles.menuItem,
+								isSelected && styles.menuItemSelected,
+								(model.blocked || locked) && styles.menuItemMuted
+							)}
+						>
+							<div className={styles.itemBody}>
+								<div className={styles.itemHeader}>
+									<span className={c(styles.itemTitle, isSelected && styles.itemTitleSelected)}>
+										{model.title}
+									</span>
+
+									{model.tags?.length > 0 && (
+										<div className={styles.tags}>
+											{model.tags.map((tag, index) => (
+												<span
+													key={`${model.slug}-tag-${index}`}
+													className={styles.tag}
+													style={{
+														borderColor: tag.color || '#7f7df3',
+														color: tag.color || '#7f7df3',
+													}}
+												>
+													{tag.icon && (
+														<SvgIcon className={styles.tagIcon} width={14} height={14} url={tag.icon} />
+													)}
+													<span className={styles.tagText}>{tag.title}</span>
+												</span>
+											))}
+										</div>
+									)}
+								</div>
+
+								{model.description && (
+									<Typography className={styles.itemDescription}>{model.description}</Typography>
+								)}
+							</div>
+
+							<div className={styles.itemStatus}>
+								{isSelected && !model.blocked && !locked && (
+									<CheckCircleIcon className={styles.statusSelected} />
+								)}
+								{locked && !model.blocked && <LockSvg width={18} height={18} color='#7F7DF3' />}
+								{model.blocked && <ErrorOutlineIcon className={styles.statusBlocked} />}
+							</div>
+						</MenuItem>
+					)
+				})}
+			</Menu>
+		</div>
+	)
+}
@@ -0,0 +1,3 @@
+export { default as MediaPage } from './media-page'
+export { MediaPageContentPaginated } from './media-page-content-paginated'
+export { ModelSelector } from './model-selector'
@@ -0,0 +1 @@
+export * from './ui'
@@ -7,4 +7,6 @@ export interface LayoutProps {
 	device?: Device
 	isLoader?: boolean
 	height?: string
+	/** Фон контента и хедера #151518 без визуального разделения (медиа-галерея) */
+	darkSurface?: boolean
 }
@@ -22,7 +22,14 @@ import { LayoutProps } from '../types'
 
 import styles from './default.module.scss'
 
-export const Layout: React.FC<LayoutProps> = ({ children, titlePage, isLoader, height, device = getDeviceType() }) => {
+export const Layout: React.FC<LayoutProps> = ({
+	children,
+	titlePage,
+	isLoader,
+	height,
+	device = getDeviceType(),
+	darkSurface = false,
+}) => {
 	const dispatch = useAppDispatch()
 
 	const meStatus = useAppSelector((state) => state.user.status)
@@ -121,22 +128,59 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, isLoader, h
 							<Box
 								width='100%'
 								sx={{
-									padding: '5px 0px 0px 70px',
+									padding: darkSurface ? '0px 0px 0px 70px' : '5px 0px 0px 70px',
 									marginLeft: '60px',
 									overflowX: 'hidden',
 									minHeight: '100dvh',
+									...(darkSurface && {
+										backgroundColor: 'var(--new-ui-main-color)',
+										height: '100dvh',
+										display: 'flex',
+										flexDirection: 'column',
+										overflow: 'hidden',
+									}),
 								}}
 							>
 								<InfoBar device={device} token={''} />
-								<Box sx={{ paddingBottom: '15px' }} width='100%'>
+								<Box
+									sx={{
+										paddingBottom: darkSurface ? 0 : '15px',
+										...(darkSurface && {
+											flex: 1,
+											minHeight: 0,
+											overflow: 'hidden',
+											display: 'flex',
+											flexDirection: 'column',
+										}),
+									}}
+									width='100%'
+								>
 									{children}
 								</Box>
 							</Box>
 						</Box>
 					) : (
-						<Box>
+						<Box
+							sx={
+								darkSurface
+									? {
+											backgroundColor: 'var(--new-ui-main-color)',
+											height: '100dvh',
+											display: 'flex',
+											flexDirection: 'column',
+											overflow: 'hidden',
+										}
+									: undefined
+							}
+						>
 							<MainMenuMobile />
-							{children}
+							{darkSurface ? (
+								<Box sx={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+									{children}
+								</Box>
+							) : (
+								children
+							)}
 						</Box>
 					)}
 				</Box>
@@ -1,3 +1,4 @@
 export * from './use-images-pagination'
 export * from './use-image-icons'
 export * from './use-audio-file-load'
+export * from './use-messages'
@@ -12,9 +12,18 @@ export interface ImageIconsProps {
 	buttonText?: string
 	content?: string
 	onPinImageClick?: () => void
+	/** Цвет иконок в меню и на триггере. По умолчанию фиолетовый как в /images */
+	accentColor?: string
 }
 
-export const ImageIcons = ({ uid, url, content, buttonText, onPinImageClick }: ImageIconsProps) => {
+export const ImageIcons = ({
+	uid,
+	url,
+	content,
+	buttonText,
+	onPinImageClick,
+	accentColor = '#827FFF',
+}: ImageIconsProps) => {
 	const { toggleMenu, downloadFile, iconsMenu } = useImageIcons()
 
 	return (
@@ -55,7 +64,7 @@ export const ImageIcons = ({ uid, url, content, buttonText, onPinImageClick }: I
 								<g transform='translate(17.5, 17.5) scale(0.85) translate(-9.25, -10.5)'>
 									<path
 										d='M12.1725 4.95085L5.58651 11.5368C5.39549 11.7213 5.24312 11.942 5.13831 12.186C5.03349 12.43 4.97831 12.6925 4.97601 12.958C4.9737 13.2236 5.0243 13.487 5.12486 13.7328C5.22543 13.9785 5.37393 14.2019 5.56172 14.3896C5.7495 14.5774 5.97281 14.7259 6.2186 14.8265C6.46439 14.9271 6.72775 14.9777 6.99331 14.9753C7.25887 14.973 7.52131 14.9179 7.76532 14.8131C8.00932 14.7082 8.23001 14.5559 8.41451 14.3648L14.8285 7.77885C15.5571 7.02444 15.9603 6.01403 15.9512 4.96524C15.9421 3.91646 15.5214 2.91321 14.7798 2.17157C14.0381 1.42994 13.0349 1.00926 11.9861 1.00015C10.9373 0.991038 9.92692 1.39422 9.17251 2.12285L2.75751 8.70785C1.63219 9.83316 1 11.3594 1 12.9508C1 14.5423 1.63219 16.0685 2.75751 17.1938C3.88282 18.3192 5.40907 18.9514 7.00051 18.9514C8.59194 18.9514 10.1182 18.3192 11.2435 17.1938L17.5005 10.9508'
-										stroke='#827FFF'
+										stroke={accentColor}
 										strokeWidth='2'
 										strokeLinecap='round'
 										strokeLinejoin='round'
@@ -84,7 +93,7 @@ export const ImageIcons = ({ uid, url, content, buttonText, onPinImageClick }: I
 					fillRule='evenodd'
 					clipRule='evenodd'
 					d='M11 12.4377C11 12.1957 11.0978 11.9637 11.272 11.7926C11.4461 11.6215 11.6823 11.5254 11.9286 11.5254H23.0714C23.3177 11.5254 23.5539 11.6215 23.728 11.7926C23.9022 11.9637 24 12.1957 24 12.4377C24 12.6796 23.9022 12.9117 23.728 13.0828C23.5539 13.2538 23.3177 13.35 23.0714 13.35H11.9286C11.6823 13.35 11.4461 13.2538 11.272 13.0828C11.0978 12.9117 11 12.6796 11 12.4377ZM11 16.9991C11 16.7571 11.0978 16.5251 11.272 16.354C11.4461 16.1829 11.6823 16.0868 11.9286 16.0868H23.0714C23.3177 16.0868 23.5539 16.1829 23.728 16.354C23.9022 16.5251 24 16.7571 24 16.9991C24 17.241 23.9022 17.4731 23.728 17.6442C23.5539 17.8152 23.3177 17.9114 23.0714 17.9114H11.9286C11.6823 17.9114 11.4461 17.8152 11.272 17.6442C11.0978 17.4731 11 17.241 11 16.9991ZM11 21.5605C11 21.3185 11.0978 21.0865 11.272 20.9154C11.4461 20.7443 11.6823 20.6482 11.9286 20.6482H23.0714C23.3177 20.6482 23.5539 20.7443 23.728 20.9154C23.9022 21.0865 24 21.3185 24 21.5605C24 21.8024 23.9022 22.0345 23.728 22.2056C23.5539 22.3766 23.3177 22.4728 23.0714 22.4728H11.9286C11.6823 22.4728 11.4461 22.3766 11.272 22.2056C11.0978 22.0345 11 21.8024 11 21.5605Z'
-					fill='#827FFF'
+					fill={accentColor}
 				/>
 			</svg>
 
@@ -101,6 +110,7 @@ export const ImageIcons = ({ uid, url, content, buttonText, onPinImageClick }: I
 						padding: '12px 9px',
 						borderRadius: '60px',
 						display: iconsMenu === uid ? 'flex' : 'none',
+						color: accentColor,
 					}}
 				>
 					<TooltipCustom title={'Открыть в новой вкладке'} placement={'right'}>
@@ -116,7 +126,7 @@ export const ImageIcons = ({ uid, url, content, buttonText, onPinImageClick }: I
 						>
 							<path
 								d='M5.875 2.625H2.625C2.19402 2.625 1.7807 2.7962 1.47595 3.10095C1.1712 3.4057 1 3.81902 1 4.25V12.375C1 12.806 1.1712 13.2193 1.47595 13.524C1.7807 13.8288 2.19402 14 2.625 14H10.75C11.181 14 11.5943 13.8288 11.899 13.524C12.2038 13.2193 12.375 12.806 12.375 12.375V9.125M9.125 1H14M14 1V5.875M14 1L5.875 9.125'
-								stroke='#827FFF'
+								stroke={accentColor}
 								strokeWidth='2'
 								strokeLinecap='round'
 								strokeLinejoin='round'
@@ -136,7 +146,7 @@ export const ImageIcons = ({ uid, url, content, buttonText, onPinImageClick }: I
 						>
 							<path
 								d='M1 10.75V11.5625C1 12.209 1.25681 12.829 1.71393 13.2861C2.17105 13.7432 2.79103 14 3.4375 14H11.5625C12.209 14 12.829 13.7432 13.2861 13.2861C13.7432 12.829 14 12.209 14 11.5625V10.75M10.75 7.5L7.5 10.75M7.5 10.75L4.25 7.5M7.5 10.75V1'
-								stroke='#827FFF'
+								stroke={accentColor}
 								strokeWidth='2'
 								strokeLinecap='round'
 								strokeLinejoin='round'