@@ -5,6 +5,7 @@ import axios from 'axios'
 import * as https from 'https'
 import { NextPage } from 'next'
 import type { AppProps } from 'next/app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { Raleway } from 'next/font/google'
 import { getSession,SessionProvider } from 'next-auth/react'
 import { appWithTranslation } from 'next-i18next'
@@ -49,11 +50,6 @@ axios.interceptors.response.use(
 
 const inter = Raleway({ subsets: ['latin'] })
 
-export type NextPageWithLayout<P = {}, DP = {}, IP = P> = NextPage<P, IP> & {
-	getLayout?: (page: ReactElement) => ReactNode
-	dynamicProps?: DP
-}
-
 export interface AppPropsWithLayout extends AppProps {
 	Component: NextPageWithLayout
 }
@@ -0,0 +1,8 @@
+import { ReactElement, ReactNode } from 'react'
+import { NextPage } from 'next'
+
+export type NextPageWithLayout<P = {}, DP = {}, IP = P> = NextPage<P, IP> & {
+	getLayout?: (page: ReactElement) => ReactNode
+	dynamicProps?: DP
+}
+
@@ -0,0 +1,92 @@
+import React from 'react'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import { MenuItem, Select, SelectChangeEvent, Stack, Typography } from '@mui/material'
+
+import { useAppSelector } from '#/app/store/store'
+import { InferenceReference } from '#/shared/api/models/models'
+import { baseColor } from '#/shared/lib/constants/colors'
+import TooltipModelTypes from '#/widgets/filters-gpt/ui/tooltip-model-types'
+
+interface ISelect {
+	value: string
+	setValue: React.Dispatch<React.SetStateAction<string>>
+	list: InferenceReference[]
+	[x: string]: any
+	setDefaultParams: () => void
+}
+
+export const ChatSelect: React.FC<ISelect> = ({ value, setValue, list, setDefaultParams, ...args }) => {
+	const theme = useAppSelector((state) => state.theme.theme)
+
+	const onChange = (event: SelectChangeEvent) => {
+		setValue(event.target.value as string)
+		setDefaultParams()
+	}
+
+	return (
+		<Stack spacing={0.5}>
+			<Select
+				IconComponent={KeyboardArrowDownIcon}
+				value={value}
+				onChange={onChange}
+				inputProps={{
+					MenuProps: {
+						MenuListProps: {
+							sx: {
+								color: theme === 'light' ? '#373737' : '#A6A5A5',
+								backgroundColor: theme === 'light' ? 'transparent' : '#151518',
+							},
+						},
+					},
+				}}
+				style={{
+					backgroundColor: theme === 'light' ? 'transparent' : 'transparent',
+				}}
+				sx={{
+					boxShadow: 'none',
+					borderRadius: '13px',
+					backgroundColor: theme === 'light' ? 'transparent' : '#4B4B4B',
+					border: theme === 'light' ? '1px solid transparent' : '2px solid #40404E;',
+					color: theme === 'light' ? '#373737' : '#A6A5A5',
+					'.MuiSelect-icon': {
+						color: '#A6A5A5',
+					},
+					'&& fieldset': {
+						border: theme === 'light' ? '1px solid #E9E9E9' : '0px solid transparent',
+					},
+					'&.Mui-focused': {
+						border: theme === 'light' ? `1px solid ${baseColor}` : '2px solid #40404E;',
+						borderColor: baseColor,
+						'& .MuiOutlinedInput-notchedOutline': {
+							border: 'none',
+						},
+					},
+					'&:hover': {
+						'&& fieldset': {
+							border: theme === 'light' ? '1px solid #E9E9E9' : '0px solid transparent',
+						},
+					},
+				}}
+				fullWidth
+				{...args}
+			>
+				{list.map((item, idx) => {
+					return (
+						<MenuItem key={idx} value={item.slug}>
+							<TooltipModelTypes title={item.name} description={item.description}>
+								<Typography
+									sx={{
+										fontSize: '18px',
+									}}
+								>
+									{item.name}
+								</Typography>
+							</TooltipModelTypes>
+						</MenuItem>
+					)
+				})}
+			</Select>
+		</Stack>
+	)
+}
+
@@ -0,0 +1,2 @@
+export { ChatSelect } from './ui/chat-select'
+
@@ -0,0 +1,50 @@
+import React from 'react'
+import { Stack, Typography } from '@mui/material'
+
+interface IProps {
+	reset: () => void
+	desktop: boolean
+	closeDrawer: () => void
+}
+
+export const ResetFilters = ({ reset, desktop, closeDrawer }: IProps) => {
+	return (
+		<Stack width={'100%'} direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
+			<Typography
+				variant='body2'
+				onClick={reset}
+				sx={{
+					color: '#FF4170',
+					lineHeight: '19.6px',
+					fontSize: '14px',
+					fontWeight: '400px',
+					marginTop: '15px !important',
+					'&:hover': {
+						cursor: 'pointer',
+					},
+				}}
+			>
+				Сбросить настройки
+			</Typography>
+			{!desktop && (
+				<Typography
+					variant='body2'
+					onClick={closeDrawer}
+					sx={{
+						color: '#808283',
+						lineHeight: '19.6px',
+						fontSize: '14px',
+						fontWeight: '400px',
+						marginTop: '15px !important',
+						'&:hover': {
+							cursor: 'pointer',
+						},
+					}}
+				>
+					Закрыть
+				</Typography>
+			)}
+		</Stack>
+	)
+}
+
@@ -0,0 +1,2 @@
+export { ResetFilters } from './ui/reset-filters'
+
@@ -3,6 +3,8 @@ export { translateTypeModel } from './lib/helpers/model-helpers'
 export { useAutoLoad } from './lib/hooks/use-auto-load'
 export { AccountMenu } from './ui/account-menu'
 export { Balance } from './ui/balance'
+export { ChatSelect } from './ui/chat-select'
+export { ResetFilters } from './ui/reset-filters'
 export { ButtonUI } from './ui/button/button'
 export { ButtonGray } from './ui/button/button-gray'
 export { CheckBoxAgreeWithRules } from './ui/check-box-agree-with-rules'
@@ -13,7 +13,7 @@ import styles from '#/app/styles/business.module.scss'
 import { getUserBalance } from '#/entities/balance'
 import { getAllInfo, unfollowEmail } from '#/entities/user-account/model/user-type-slice'
 import { DownloadModal } from '#/features/business-security-download'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { ButtonUI, Input, Loader, Modal, SwitchCustom } from '#/shared'
 import { accountApi } from '#/shared/api/account-endpoints'
 import { API_URL } from '#/shared/lib/constants/constants'
@@ -5,7 +5,7 @@ import { useAppSelector } from '#/app/store/store'
 import { StatsField } from '#/widgets/stats-field'
 import { useSession } from 'next-auth/react'
 import { getDeviceType } from '#/shared/lib/helpers'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 
 /**
  * @deprecated
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Box, Typography } from '@mui/material'
 
 import { ApiKeyModal } from '#/features/api-key-modal/api-key-modal'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { getDeviceType } from '#/shared/lib/helpers'
 
 import { useApiKeysPage } from '../model/use-api-keys'
@@ -6,7 +6,7 @@ import { useSession } from 'next-auth/react'
 import { useAppSelector } from '#/app/store/store'
 import { getAudio } from '#/entities/audio-model'
 import { ImageModelCard, IShortModel } from '#/entities/model-entity'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 
 export const AudioModelsPage: NextPageWithLayout = () => {
 	const [bots, setBots] = useState<IShortModel[] | null>(null)
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { getTokenByAPIGoogle } from '../api'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 
 const AuthSocial: NextPageWithLayout = () => {
 	useEffect(() => {
@@ -9,7 +9,7 @@ import { useRouter } from 'next/router'
 
 import { useAppSelector } from '#/app/store/store'
 import { getStepperInputStyles } from '#/features/register-business/ui/shared/form-styles'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { API_URL } from '#/shared/lib/constants/constants'
 import { getDeviceType, getRandomImage } from '#/shared/lib/helpers'
 
@@ -10,7 +10,7 @@ import { useAIModel } from '#/entities/model-entity/model/use-ai-model'
 import { selectCurrentChat } from '#/features/chats/chats-slice'
 import Title from '#/features/title/title'
 import { TutorialContext } from '#/features/tutorial-context/tutorial-context'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { useModelChatsStreaming } from '#/shared/api/models/endpoints'
 import { useEventSource } from '#/shared/lib/event-source'
 import { getDeviceType, getOs } from '#/shared/lib/helpers'
@@ -5,7 +5,7 @@ import CircularProgress from '@mui/material/CircularProgress'
 import { useSession } from 'next-auth/react'
 
 import { useAppSelector } from '#/app/store/store'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { chats } from '#/shared/api/models/api'
 import { ChatModel } from '#/shared/api/models/models'
 
@@ -3,10 +3,10 @@ import { Box, Typography } from '@mui/material'
 import axios from 'axios'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { signIn } from 'next-auth/react'
 
 import { API_URL } from '#/shared/lib/constants/constants'
-import { NextPageWithLayout } from '#/pages/_app'
-import { signIn } from 'next-auth/react'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 
 const Confirm: NextPageWithLayout = () => {
 	const { push } = useRouter()
@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { IModelInputs } from '#/shared/api/models/models'
+import { InferenceReference } from '#/shared/api/models/models'
+import { Message } from '#/entities/message'
+
+/**
+ * View-model для компонента ModelInput
+ */
+export interface ImageModelInputViewModel {
+	styles: 'images'
+	inputTypes: IModelInputs[]
+	image: File | null
+	disabled: boolean
+	desktop: boolean
+	loading: boolean
+	onLoadImage: React.ChangeEventHandler<HTMLInputElement>
+	onSend: (message: string, required: (string | null)[]) => boolean
+	onUnpinImage: () => void
+	onOpenSettings: () => void
+	prompt?: string
+}
+
+/**
+ * View-model для боковой панели (версии и параметры)
+ */
+export interface ImageModelSidebarViewModel {
+	scope: 'playground' | 'api'
+	onScopeChange: React.Dispatch<React.SetStateAction<'playground' | 'api'>>
+	
+	// Версии
+	hasVersions: boolean
+	versions: InferenceReference[]
+	currentVersion: string
+	onVersionChange: (value: string) => void
+	onSetDefaultParams: () => void
+	
+	// Параметры
+	hasParameters: boolean
+	parameters: any[]
+	parametersExpanded: boolean
+	onToggleParameters: () => void
+	onResetParameters: () => void
+	parametersKey: string
+	
+	// Общие
+	desktop: boolean
+	onCloseMobileDrawer: () => void
+}
+
+/**
+ * View-model для списка сообщений
+ */
+export interface ImageMessagesViewModel {
+	messages: Message[] | null
+	loading: boolean
+	device: 'mobile' | 'desktop'
+	onLoadMore: () => Promise<void>
+}
+
+/**
+ * View-model для API вкладки
+ */
+export interface ImageApiViewModel {
+	version: string
+	slug: string
+	showFileExample: boolean
+}
+
@@ -0,0 +1,169 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useRouter } from 'next/router'
+import { useSession } from 'next-auth/react'
+
+import { useAIModel } from '#/entities/model-entity/model/use-ai-model'
+import { useMediaBotFilters } from '#/features/image-bot-filters'
+import { useMediaUniqInput } from '#/features/image-bot-input'
+import { useMediaStreaming } from '#/shared/api/models/endpoints'
+import { getDeviceType, getOs } from '#/shared/lib/helpers'
+import { useThemeAndDevice } from '#/shared/lib/hooks'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+
+import {
+	ImageApiViewModel,
+	ImageMessagesViewModel,
+	ImageModelInputViewModel,
+	ImageModelSidebarViewModel,
+} from './types'
+
+type Scope = 'playground' | 'api'
+
+export const useImageModelPage = () => {
+	const [scope, setScope] = useState<Scope>('playground')
+
+	const deviceType = getDeviceType()
+	const deviceOs = getOs()
+
+	const { query } = useRouter()
+	const { desktop } = useThemeAndDevice(deviceType, deviceOs)
+	const { showMessage } = useShowDataStore()
+	const { data: session } = useSession()
+
+	const {
+		aiModel,
+		inferenceSettings,
+		version,
+		modelType,
+		fetchModel,
+		resetParams,
+		setDefaultParams,
+		setVersion,
+		loading: modelLoading,
+	} = useAIModel(query.slug as string)
+
+	const { openFiltersMobile, setOpenFiltersMobile, params, setParams, includeParams } = useMediaBotFilters()
+
+	const { messages, sendMediaMessage, loading, getPagination } = useMediaStreaming(
+		query.slug as string,
+		showMessage,
+		deviceType,
+		'images'
+	)
+
+	const { onCreateImage, onLoadImage, image, setImage } = useMediaUniqInput(version, includeParams, sendMediaMessage)
+
+	useEffect(() => {
+		if (!session?.access || modelLoading) return
+		const onFetch = async () => {
+			await fetchModel()
+		}
+		onFetch()
+	}, [session?.access, modelLoading, fetchModel])
+
+	const input_types = useMemo(() => {
+		return inferenceSettings?.inputs || []
+	}, [inferenceSettings?.inputs])
+
+	const showFileExample = useMemo(() => {
+		if (!input_types) return false
+
+		return input_types.some((input) => input.type !== 'text')
+	}, [input_types])
+
+	// View-model для ModelInput
+	const inputViewModel: ImageModelInputViewModel = useMemo(
+		() => ({
+			styles: 'images',
+			inputTypes: input_types,
+			image: image,
+			disabled: scope === 'playground' ? !(aiModel?.enabled ?? false) : true,
+			desktop: desktop,
+			loading: loading,
+			onLoadImage: onLoadImage,
+			onSend: onCreateImage,
+			onUnpinImage: () => setImage(null),
+			onOpenSettings: () => setOpenFiltersMobile(true),
+		}),
+		[input_types, image, scope, aiModel?.enabled, desktop, loading, onLoadImage, onCreateImage, setImage, setOpenFiltersMobile]
+	)
+
+	// View-model для боковой панели
+	const sidebarViewModel: ImageModelSidebarViewModel = useMemo(
+		() => ({
+			scope,
+			onScopeChange: setScope,
+			hasVersions: !!(aiModel?.inferences && aiModel.inferences.length > 0),
+			versions: aiModel?.inferences || [],
+			currentVersion: version || '',
+			onVersionChange: (value: string) => setVersion(value),
+			onSetDefaultParams: setDefaultParams,
+			hasParameters: !!(inferenceSettings?.parameters && inferenceSettings.parameters.length > 0),
+			parameters: inferenceSettings?.parameters || [],
+			parametersExpanded: params,
+			onToggleParameters: () => setParams(!params),
+			onResetParameters: resetParams,
+			parametersKey: `${version}-${inferenceSettings?.name || 'default'}`,
+			desktop: desktop,
+			onCloseMobileDrawer: () => setOpenFiltersMobile(false),
+		}),
+		[
+			scope,
+			setScope,
+			aiModel?.inferences,
+			version,
+			setVersion,
+			setDefaultParams,
+			inferenceSettings?.parameters,
+			inferenceSettings?.name,
+			params,
+			setParams,
+			resetParams,
+			desktop,
+			setOpenFiltersMobile,
+		]
+	)
+
+	// View-model для списка сообщений
+	const messagesViewModel: ImageMessagesViewModel = useMemo(
+		() => ({
+			messages: messages || null,
+			loading: loading,
+			device: deviceType,
+			onLoadMore: getPagination,
+		}),
+		[messages, loading, deviceType, getPagination]
+	)
+
+	// View-model для API вкладки
+	const apiViewModel: ImageApiViewModel = useMemo(
+		() => ({
+			version: version || '',
+			slug: query.slug as string,
+			showFileExample: showFileExample,
+		}),
+		[version, query.slug, showFileExample]
+	)
+
+	return {
+		// View-models
+		inputViewModel,
+		sidebarViewModel,
+		messagesViewModel,
+		apiViewModel,
+
+		// Raw data (для обратной совместимости и специфичных случаев)
+		aiModel,
+		inferenceSettings,
+		modelType,
+		deviceType,
+		deviceOs,
+		desktop,
+		scope,
+		openFiltersMobile,
+		setOpenFiltersMobile,
+		slug: query.slug as string,
+	}
+}
+
+
@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+import { useSession } from 'next-auth/react'
+
+import { images } from '#/shared/api/models/api'
+import type { ImageModel } from '#/shared/api/models/models'
+
+type UseImageModelsState = {
+	models: ImageModel[] | null
+	isLoading: boolean
+	isError: boolean
+}
+
+export const useImageModels = (): UseImageModelsState => {
+	const [models, setModels] = useState<ImageModel[] | null>(null)
+	const [isLoading, setIsLoading] = useState(false)
+	const [isError, setIsError] = useState(false)
+
+	const { data } = useSession()
+
+	useEffect(() => {
+		if (!data?.access) return
+
+		let isCancelled = false
+
+		const fetchModels = async () => {
+			setIsLoading(true)
+			setIsError(false)
+
+			try {
+				const res = await images.getImageModels(data.access)
+				if (!isCancelled) {
+					setModels(res)
+				}
+			} catch {
+				if (!isCancelled) {
+					setIsError(true)
+					setModels([])
+				}
+			} finally {
+				if (!isCancelled) {
+					setIsLoading(false)
+				}
+			}
+		}
+
+		fetchModels()
+
+		return () => {
+			isCancelled = true
+		}
+	}, [data?.access])
+
+	return {
+		models,
+		isLoading,
+		isError,
+	}
+}
+
+
@@ -1,69 +1,35 @@
-import { useEffect, useMemo, useState } from 'react'
 import { Box, Collapse, Stack, Typography } from '@mui/material'
 import Head from 'next/head'
-import { useRouter } from 'next/router'
-import { useSession } from 'next-auth/react'
 
-import { ChatSelect } from '#/app/components/chat_select'
-import { ResetFilters } from '#/app/components/filters/reset_filters'
+import { ChatSelect } from '#/shared/ui/chat-select'
+import { ResetFilters } from '#/shared/ui/reset-filters'
 import BlockedSvg from '#/assets/svg/blocked.svg?react'
-import { useAIModel } from '#/entities/model-entity/model/use-ai-model'
 import BotParamsMap from '#/features/bot-params/bot-params-map'
-import { useMediaBotFilters } from '#/features/image-bot-filters'
-import { useMediaUniqInput } from '#/features/image-bot-input'
 import { ModelInput } from '#/features/model-input'
 import Title from '#/features/title/title'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { DrawerCustom, Loader } from '#/shared'
-import { useMediaStreaming } from '#/shared/api/models/endpoints'
-import { c, getDeviceType, getOs } from '#/shared/lib/helpers'
-import { useThemeAndDevice } from '#/shared/lib/hooks'
-import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { c } from '#/shared/lib/helpers'
 import { SvgIcon } from '#/shared/ui/svg'
 import { ImageMessagesList } from '#/widgets/messages'
 import { ModelApiView, StaticTabs } from '#/widgets/model-api-view'
+import { useImageModelPage } from '#/views/images/model/use-image-model-page'
 
 import styles from './image-model.module.scss'
 
 const ImageModelPage: NextPageWithLayout = () => {
-	const [scope, setScope] = useState<'playground' | 'api'>('playground')
-
-	const deviceType = getDeviceType()
-	const deviceOs = getOs()
-	
-	const { query } = useRouter()
-	const { desktop } = useThemeAndDevice(deviceType, deviceOs)
-	const { showMessage } = useShowDataStore()
-	const { data: session } = useSession()
-
-	const { aiModel, inferenceSettings, version, modelType, fetchModel, resetParams, setDefaultParams, setVersion, loading: modelLoading } = useAIModel(query.slug as string)
-	const { openFiltersMobile, setOpenFiltersMobile, params, setParams, includeParams } = useMediaBotFilters()
-	const { messages, sendMediaMessage, loading, getPagination } = useMediaStreaming(query.slug as string, showMessage, deviceType, 'images')
-	const { onCreateImage, onLoadImage, image, setImage } = useMediaUniqInput(version, includeParams, sendMediaMessage)
-
-	// Временная переменная для prompt (должна быть получена из хука или состояния)
-	const prompt = ''
-
-	useEffect(() => {
-		if (!session?.access || modelLoading) return
-		const onFetch = async () => {
-			await fetchModel()
-		}
-		onFetch()
-	}, [session?.access])
-	
-	
-	const input_types = useMemo(() => {
-		return inferenceSettings?.inputs || []
-	}, [inferenceSettings?.inputs])
-
-
-	const showFileExample = useMemo(() => {
-		if (!input_types) return false
-		
-		// Проверяем, есть ли типы кроме 'text'
-		return input_types.some(input => input.type !== 'text')
-	}, [input_types])
+	const {
+		inputViewModel,
+		sidebarViewModel,
+		messagesViewModel,
+		apiViewModel,
+		aiModel,
+		desktop,
+		deviceType,
+		scope,
+		openFiltersMobile,
+		setOpenFiltersMobile,
+	} = useImageModelPage()
 
 	return (
 		<>
@@ -80,9 +46,16 @@ const ImageModelPage: NextPageWithLayout = () => {
 							{aiModel &&
 								aiModel.tags.map((tag, index) => (
 									<div key={index} className={styles.tag}>
-										<SvgIcon width={23} height={23} url={typeof tag === 'string' ? '' : (tag as any).icon || ''} className={styles.tag__icon} />
+										<SvgIcon
+											width={23}
+											height={23}
+											url={typeof tag === 'string' ? '' : (tag as any).icon || ''}
+											className={styles.tag__icon}
+										/>
 
-										<span className={styles.tag__text}>{typeof tag === 'string' ? tag : (tag as any).title || tag}</span>
+										<span className={styles.tag__text}>
+											{typeof tag === 'string' ? tag : (tag as any).title || tag}
+										</span>
 									</div>
 								))}
 						</div>
@@ -120,16 +93,16 @@ const ImageModelPage: NextPageWithLayout = () => {
 							>
 								{aiModel && (
 									<ModelInput
-										styles={'images'}
-										input_types={input_types}
-										image={image}
-										desktop={desktop}
-										blocked={scope === 'playground' ? !aiModel.enabled : true}
-										loading={loading}
-										imageLoad={onLoadImage}
-										sendMessage={onCreateImage}
-										unpinImage={() => setImage(null)}
-										viewMobileSettings={() => setOpenFiltersMobile(true)}
+										styles={inputViewModel.styles}
+										input_types={inputViewModel.inputTypes}
+										image={inputViewModel.image}
+										desktop={inputViewModel.desktop}
+										blocked={inputViewModel.disabled}
+										loading={inputViewModel.loading}
+										imageLoad={inputViewModel.onLoadImage}
+										sendMessage={inputViewModel.onSend}
+										unpinImage={inputViewModel.onUnpinImage}
+										viewMobileSettings={inputViewModel.onOpenSettings}
 									/>
 								)}
 								{aiModel && !aiModel.enabled && (
@@ -148,21 +121,26 @@ const ImageModelPage: NextPageWithLayout = () => {
 							>
 							<Box sx={{ display: scope === 'playground' ? 'contents' : 'none' }}>
 								<ImageMessagesList
-									isComplete={loading}
-									device={deviceType}
-									images={messages || []}
-									getPagination={getPagination}
-									/>
+									isComplete={messagesViewModel.loading}
+									device={messagesViewModel.device}
+									images={messagesViewModel.messages || []}
+									getPagination={messagesViewModel.onLoadMore}
+								/>
 							</Box>
 
 							<Box sx={{ display: scope === 'api' ? 'contents' : 'none' }}>
-								<ModelApiView version={version || ''} slug={query.slug as string || ''} APIModel='image' showFileExample={showFileExample}/>
+								<ModelApiView
+									version={apiViewModel.version}
+									slug={apiViewModel.slug}
+									APIModel='image'
+									showFileExample={apiViewModel.showFileExample}
+								/>
 							</Box>
 							</Box>
 						</>
 					) : (
 						<Box className={'bg-color-block border-radius-main'} sx={{ position: 'relative' }}>
-							<div className={c(styles.container, loading && styles.container_active)}>
+							<div className={c(styles.container, messagesViewModel.loading && styles.container_active)}>
 								<div
 									style={{
 										position: 'absolute',
@@ -178,7 +156,9 @@ const ImageModelPage: NextPageWithLayout = () => {
 								<Box
 									sx={{
 										padding: '30px',
-										height: `calc(100dvh - 116px - 61px - 15px ${aiModel && !aiModel.enabled ? '- 17px' : '- 23.5px'})`,
+										height: `calc(100dvh - 116px - 61px - 15px ${
+											aiModel && !aiModel.enabled ? '- 17px' : '- 23.5px'
+										})`,
 										overflowY: 'scroll',
 										overflowX: 'hidden',
 										position: 'relative',
@@ -187,32 +167,36 @@ const ImageModelPage: NextPageWithLayout = () => {
 								>
 									<Box sx={{ display: scope === 'playground' ? 'contents' : 'none' }}>
 										<ImageMessagesList
-											isComplete={loading}
-											device={deviceType}
-											images={messages || []}
-											getPagination={getPagination}
-											/>
+											isComplete={messagesViewModel.loading}
+											device={messagesViewModel.device}
+											images={messagesViewModel.messages || []}
+											getPagination={messagesViewModel.onLoadMore}
+										/>
 									</Box>
 
 									<Box sx={{ display: scope === 'api' ? 'contents' : 'none' }}>
-										<ModelApiView version={version || ''} slug={query.slug as string || ''} APIModel='image' showFileExample={showFileExample}/>
+										<ModelApiView
+											version={apiViewModel.version}
+											slug={apiViewModel.slug}
+											APIModel='image'
+											showFileExample={apiViewModel.showFileExample}
+										/>
 									</Box>
 								</Box>
 
 								<Stack alignItems='center' sx={{ zIndex: 10, position: 'relative', margin: 1.25 }}>
 									{aiModel && (
 									<ModelInput
-										styles={'images'}
-										input_types={input_types}
-										image={image}
-										blocked={scope === 'playground' ? !aiModel.enabled : true}
-										value={prompt}
-										desktop={desktop}
-										loading={loading}
-										imageLoad={onLoadImage}
-										sendMessage={onCreateImage}
-										unpinImage={() => setImage(null)}
-										viewMobileSettings={() => setOpenFiltersMobile(true)}
+										styles={inputViewModel.styles}
+										input_types={inputViewModel.inputTypes}
+										image={inputViewModel.image}
+										blocked={inputViewModel.disabled}
+										desktop={inputViewModel.desktop}
+										loading={inputViewModel.loading}
+										imageLoad={inputViewModel.onLoadImage}
+										sendMessage={inputViewModel.onSend}
+										unpinImage={inputViewModel.onUnpinImage}
+										viewMobileSettings={inputViewModel.onOpenSettings}
 									/>
 									)}
 									{aiModel && !aiModel.enabled && (
@@ -228,14 +212,20 @@ const ImageModelPage: NextPageWithLayout = () => {
 				</Box>
 				<Stack spacing={2} sx={{ width: desktop ? '25.5%' : '100%', paddingBottom: desktop ? '' : '15px' }}>
 					<Stack
-						sx={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '15px', marginTop: desktop ? '0px' : '10px' }}
+						sx={{
+							display: 'flex',
+							alignItems: 'center',
+							width: '100%',
+							marginBottom: '15px',
+							marginTop: desktop ? '0px' : '10px',
+						}}
 					>
-						<StaticTabs scope={scope} setScope={setScope} />
+						<StaticTabs scope={sidebarViewModel.scope} setScope={sidebarViewModel.onScopeChange} />
 					</Stack>
 
 					{desktop && (
 						<Stack spacing={2} className='pd-30 bg-color-block border-radius-main' sx={{ height: 'auto' }}>
-							{aiModel?.inferences && aiModel.inferences.length !== 0 ? (
+							{sidebarViewModel.hasVersions && (
 								<>
 									<Typography
 										sx={{
@@ -248,24 +238,20 @@ const ImageModelPage: NextPageWithLayout = () => {
 										ВЕРСИИ
 									</Typography>
 									<ChatSelect
-										setDefaultParams={setDefaultParams}
-										value={version}
-										list={aiModel.inferences}
-										setValue={(value) => setVersion(typeof value === 'string' ? value : value(''))}
+										setDefaultParams={sidebarViewModel.onSetDefaultParams}
+										value={sidebarViewModel.currentVersion}
+										list={sidebarViewModel.versions}
+										setValue={(value) => sidebarViewModel.onVersionChange(typeof value === 'string' ? value : value(''))}
 									/>
 								</>
-							) : (
-								<></>
 							)}
-							{inferenceSettings && inferenceSettings.parameters && inferenceSettings.parameters.length > 0 && (
+							{sidebarViewModel.hasParameters && (
 								<Box
 									display={'flex'}
 									alignItems={'center'}
 									gap={'5px'}
 									sx={{ cursor: 'pointer' }}
-									onClick={() => {
-										setParams(!params)
-									}}
+									onClick={sidebarViewModel.onToggleParameters}
 								>
 									<Typography
 										sx={{
@@ -283,7 +269,7 @@ const ImageModelPage: NextPageWithLayout = () => {
 										viewBox='0 0 21 13'
 										fill='none'
 										xmlns='http://www.w3.org/2000/svg'
-										className={`${params ? 'rotate-180' : 'rotate-0'}`}
+										className={`${sidebarViewModel.parametersExpanded ? 'rotate-180' : 'rotate-0'}`}
 									>
 										<path
 											fillRule='evenodd'
@@ -295,10 +281,17 @@ const ImageModelPage: NextPageWithLayout = () => {
 								</Box>
 							)}
 
-							{inferenceSettings && inferenceSettings.parameters && inferenceSettings.parameters.length > 0 ? (
-								<Collapse in={params} orientation='vertical' collapsedSize={0} sx={{}}>
-									<BotParamsMap key={`${version}-${inferenceSettings?.name || 'default'}`} params={inferenceSettings?.parameters || []} />
-									<ResetFilters desktop={desktop} closeDrawer={() => setOpenFiltersMobile(false)} reset={resetParams} />
+							{sidebarViewModel.hasParameters ? (
+								<Collapse in={sidebarViewModel.parametersExpanded} orientation='vertical' collapsedSize={0} sx={{}}>
+									<BotParamsMap
+										key={sidebarViewModel.parametersKey}
+										params={sidebarViewModel.parameters}
+									/>
+									<ResetFilters
+										desktop={sidebarViewModel.desktop}
+										closeDrawer={sidebarViewModel.onCloseMobileDrawer}
+										reset={sidebarViewModel.onResetParameters}
+									/>
 								</Collapse>
 							) : (
 								<Typography
@@ -313,10 +306,10 @@ const ImageModelPage: NextPageWithLayout = () => {
 							)}
 						</Stack>
 					)}
-			</Stack>
-				<DrawerCustom open={openFiltersMobile} onClose={() => setOpenFiltersMobile(false)}>
+				</Stack>
+				<DrawerCustom open={openFiltersMobile} onClose={sidebarViewModel.onCloseMobileDrawer}>
 					<Stack spacing={1} padding={2.4}>
-						{aiModel?.inferences && aiModel.inferences.length !== 0 ? (
+						{sidebarViewModel.hasVersions && (
 							<>
 								<Typography
 									sx={{
@@ -330,16 +323,14 @@ const ImageModelPage: NextPageWithLayout = () => {
 									ВЕРСИИ
 								</Typography>
 								<ChatSelect
-									setDefaultParams={setDefaultParams}
-									value={version}
-									list={aiModel.inferences}
-									setValue={(value) => setVersion(typeof value === 'string' ? value : value(''))}
+									setDefaultParams={sidebarViewModel.onSetDefaultParams}
+									value={sidebarViewModel.currentVersion}
+									list={sidebarViewModel.versions}
+									setValue={(value) => sidebarViewModel.onVersionChange(typeof value === 'string' ? value : value(''))}
 								/>
 							</>
-						) : (
-							<></>
 						)}
-						{inferenceSettings && inferenceSettings.parameters && inferenceSettings.parameters.length > 0 ? (
+						{sidebarViewModel.hasParameters ? (
 							<>
 								<Typography
 									sx={{
@@ -352,8 +343,15 @@ const ImageModelPage: NextPageWithLayout = () => {
 								>
 									ПАРАМЕТРЫ
 								</Typography>
-								<BotParamsMap key={`${version}-${inferenceSettings?.name || 'default'}`} params={inferenceSettings?.parameters || []} />
-								<ResetFilters closeDrawer={() => setOpenFiltersMobile(false)} desktop={desktop} reset={resetParams} />
+								<BotParamsMap
+									key={sidebarViewModel.parametersKey}
+									params={sidebarViewModel.parameters}
+								/>
+								<ResetFilters
+									closeDrawer={sidebarViewModel.onCloseMobileDrawer}
+									desktop={sidebarViewModel.desktop}
+									reset={sidebarViewModel.onResetParameters}
+								/>
 							</>
 						) : (
 							<Typography
@@ -1,32 +1,17 @@
 import * as React from 'react'
-import { useEffect, useState } from 'react'
 import { Box, Typography } from '@mui/material'
 import CircularProgress from '@mui/material/CircularProgress'
-import { useSession } from 'next-auth/react'
 
 import { useAppSelector } from '#/app/store/store'
 import { ImageModelCard } from '#/entities/model-entity/ui/image-model-card'
-import { NextPageWithLayout } from '#/pages/_app'
-import { images } from '#/shared/api/models/api'
-import { ImageModel } from '#/shared/api/models/models'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
+import { useImageModels } from '#/views/images/model/use-image-models'
 
 import styles from './image-models.module.scss'
 
 export const ImageModelsPage: NextPageWithLayout = () => {
-	const [models, setModels] = useState<ImageModel[] | null>(null)
 	const payment_plan = useAppSelector((state) => state.user.payment_plan)
-	const { data } = useSession()
-
-	useEffect(() => {
-		if (!data) return
-
-		images.getImageModels(data.access).then((res) => {
-			setModels(res)
-		}).catch(() => {
-			// Ошибка загрузки моделей изображений
-			setModels([])
-		})
-	}, [data])
+	const { models, isLoading, isError } = useImageModels()
 
 	return (
 		<>
@@ -39,15 +24,7 @@ export const ImageModelsPage: NextPageWithLayout = () => {
 				<Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>Изображения</Typography>
 			</Box>
 			<div className={styles.cards}>
-				{models ? (
-					models.map((item) => (
-						<ImageModelCard
-							key={item.uid}
-							model={item}
-							accessed_models={payment_plan.plan.accessed_models}
-						/>
-					))
-				) : (
+				{isLoading && (
 					<CircularProgress
 						size={50}
 						thickness={3}
@@ -61,6 +38,28 @@ export const ImageModelsPage: NextPageWithLayout = () => {
 						}}
 					/>
 				)}
+
+				{!isLoading && isError && (
+					<Typography sx={{ marginTop: '25px', color: '#FF6B6B' }}>
+						Не удалось загрузить модели изображений
+					</Typography>
+				)}
+
+				{!isLoading && !isError && models && models.length > 0 && (
+					models.map((item) => (
+						<ImageModelCard
+							key={item.uid}
+							model={item}
+							accessed_models={payment_plan.plan.accessed_models}
+						/>
+					))
+				)}
+
+				{!isLoading && !isError && models && models.length === 0 && (
+					<Typography sx={{ marginTop: '25px', color: '#A4AAB5' }}>
+						Модели изображений не найдены
+					</Typography>
+				)}
 			</div>
 		</>
 	)
@@ -4,7 +4,7 @@ import { Box, Stack, Typography } from '@mui/material'
 
 import { useAppSelector } from '#/app/store/store'
 import styles from '#/app/styles/styles-pages/index-styles.module.scss'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { ReferralBlock } from '#/shared'
 import { getDeviceType } from '#/shared/lib/helpers/get-type-device'
 import { getCurrentTimeAndGreeting } from '#/shared/lib/helpers/getCurrentDateForMainScreen'
@@ -15,7 +15,7 @@ import OpenedEyeSvg from '#/assets/svg/opened-eye.svg?react'
 import { PasswordOptions } from '#/features/register-by-email/lib/constants'
 import { IEmailForms } from '#/features/register-by-email/model/types'
 import { YandexAuthButton } from '#/features/yandex-auth-button'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { ERROR_MAPPING, ERRROR_YANDEX_TRANSLATE_MAPPING } from '#/pages/api/auth/constants'
 import { emailOptions } from '#/shared'
 import { getDeviceType } from '#/shared/lib/helpers'
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useRouter } from 'next/router'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { InfoPageTemplate } from '#/shared/ui/info-page-template'
 
 export const NetworkError: NextPageWithLayout = () => {
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { useRouter } from 'next/router'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { InfoPageTemplate } from '#/shared/ui/info-page-template'
 
 const NotFoundPage: NextPageWithLayout = () => {
@@ -5,7 +5,7 @@ import CircularProgress from '@mui/material/CircularProgress'
 import { useRouter } from 'next/router'
 
 import { addReferral } from '#/entities/user-account/model/user-type-slice'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 
 export interface ReferralRegisterProps {
 	email: string
@@ -11,7 +11,7 @@ import { useAppSelector } from '#/app/store/store'
 import { addReferral } from '#/entities/user-account/model/user-type-slice'
 import { RegisterEmailForm } from '#/features/register-by-email'
 import { YandexAuthButton } from '#/features/yandex-auth-button'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { getDeviceType } from '#/shared/lib/helpers'
 
 import styles from './register.module.scss'
@@ -1,5 +1,5 @@
 import { Stepper } from '#/features/register-business'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 
 const Register: NextPageWithLayout = () => {
 	return <Stepper />
@@ -8,7 +8,7 @@ import PlusSvg from '#/assets/svg/plus.svg?react'
 import { useErrorReport } from '#/features/error-report/model/use-error-report'
 import { CompanyAutocomplete } from '#/features/register-business/api/company-autocomplete'
 import { companyNameOptions } from '#/features/register-business/lib/constatnts-step-legal-informative'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { c } from '#/shared'
 import { useBodyScrollLock } from '#/shared/lib/hooks/use-body-scroll-lock'
 import { CommonButton } from '#/shared/ui/button/ui'
@@ -3,8 +3,8 @@ import React from 'react'
 import AttachSvg from '#/assets/svg/attach.svg?react'
 import PlusSvg from '#/assets/svg/plus.svg?react'
 import { useErrorReport } from '#/features/error-report/model/use-error-report'
-import { NextPageWithLayout } from '#/pages/_app'
 import { c } from '#/shared'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { CommonButton } from '#/shared/ui/button/ui'
 import { CommonTextArea } from '#/shared/ui/common-textarea'
 
@@ -9,8 +9,8 @@ import { useAppSelector } from '#/app/store/store'
 import { Error, Input } from '#/shared'
 import { API_URL } from '#/shared/lib/constants/constants'
 import { getDeviceType, getRandomImage } from '#/shared/lib/helpers'
-import { NextPageWithLayout } from '#/pages/_app'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 
 const Reset: NextPageWithLayout = () => {
 	const device = getDeviceType()
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useRouter } from 'next/router'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { InfoPageTemplate } from '#/shared/ui/info-page-template'
 
 const ServiceUpdatePage: NextPageWithLayout = () => {
@@ -1,4 +1,4 @@
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import Image from 'next/image'
 import Link from 'next/link'
 import styles from './telegram-blocked.module.scss'
@@ -13,7 +13,7 @@ import { useMediaBotFilters } from '#/features/image-bot-filters'
 import { useMediaUniqInput } from '#/features/image-bot-input'
 import { ModelInput } from '#/features/model-input'
 import Title from '#/features/title/title'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { DrawerCustom, Loader } from '#/shared'
 import { useMediaStreaming } from '#/shared/api/models/endpoints'
 import { c, getDeviceType, getOs } from '#/shared/lib/helpers'
@@ -6,7 +6,7 @@ import { useSession } from 'next-auth/react'
 
 import { useAppSelector } from '#/app/store/store'
 import { VideoModelCard } from '#/entities/model-entity'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 import { videos } from '#/shared/api/models/api'
 import { VideoModel } from '#/shared/api/models/models'
 
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box } from '@mui/material'
 import { WhisperWidget } from '#/widgets/whisper'
-import { NextPageWithLayout } from '#/pages/_app'
+import { NextPageWithLayout } from '#/shared/lib/types/next-layout'
 
 const Whisper: NextPageWithLayout = () => {
 	return (