@@ -14,4 +14,5 @@ export interface Message {
 	is_favourite: boolean
 	is_sent: boolean
 	uid: string
+  model: string
 }
@@ -0,0 +1 @@
+export * from './use-image-bot-create'
\ No newline at end of file
@@ -0,0 +1,54 @@
+import { getUserBalance } from '@/src/entities/balance'
+import { Message, MessageSend, sendImage } from '@/src/entities/message'
+import { useAppDispatch } from '@/src/main/store/store'
+import { Device } from '@/src/shared/lib/types/entities'
+import { formDataHelper } from '@/src/widgets/messages'
+import { useSession } from 'next-auth/react'
+import { Dispatch, SetStateAction, useState } from 'react'
+
+export function useImageBotCreateImage(
+	showError: (message: string) => void,
+	type: string,
+	device: Device,
+	setLoading: (value: boolean) => void,
+	setMessages: Dispatch<SetStateAction<Message[]>>
+) {
+	const [isComplete, setIsComplete] = useState<boolean>(false)
+
+	const { data } = useSession()
+
+	const dispatch = useAppDispatch()
+
+	const createImage = async <T>(dataForSend: MessageSend<T>) => {
+		const { content, file } = dataForSend
+
+		setIsComplete(false)
+		setLoading(true)
+
+		const dataSending = file ? formDataHelper(file, dataForSend) : dataForSend
+
+		const response = await sendImage(type, dataSending, data?.access)
+
+		if (response.status >= 400) showError('Ошибка отправки сообщения')
+
+		setLoading(false)
+
+		dispatch(getUserBalance(data?.access))
+
+		setMessages((prev: Message[]) => {
+			if (!prev || !prev.length) return response.data
+
+			if (device === 'desktop') {
+				return [...response.data, ...prev]
+			}
+			return [...prev, ...response.data]
+		})
+
+		setIsComplete(true)
+	}
+
+  return {
+    createImage,
+    isComplete
+  }
+}
@@ -0,0 +1 @@
+export * from './model'
\ No newline at end of file
@@ -1,98 +1,85 @@
+import { Message } from '@/src/entities/message'
 import { useAppSelector } from '@/src/main/store/store'
+import { useShowData } from '@/src/shared'
 import { Device } from '@/src/shared/lib/types/entities'
-import { Message } from '@/src/shared/lib/types/model'
-import { useEffect, useRef, useState } from 'react'
-
-export function useImageBotPagination(
-	isComplete: boolean,
-	desktop: boolean,
-	messages: Message[] | null,
-	getMessagesPagination: (device: Device) => any,
-	deviceType: Device
-) {
-	const [chatScrollHeight, setChatScrollHeight] = useState(0)
-	const [scrollBottom, setScrollBottom] = useState(0)
-	const refScrollMobile = useRef<HTMLDivElement>()
-	const [isPaginating, setIsPaginating] = useState(false)
-
-	function handleMobileScroll() {
-		if (!refScrollMobile.current) return
-
-		setScrollBottom(
-			refScrollMobile.current.scrollHeight -
-				refScrollMobile.current.scrollTop -
-				refScrollMobile.current.clientHeight
-		)
-
-		if (refScrollMobile.current && messages?.length !== 0) {
-			const { scrollTop, scrollHeight, clientHeight } = refScrollMobile.current
-			if (scrollTop === 0) {
-				if (getMessagesPagination) {
-					setIsPaginating(true)
-					getMessagesPagination(deviceType)
-				}
-			}
-		}
-	}
+import { getImagesGalery } from '@/src/widgets/messages'
+import { useSession } from 'next-auth/react'
+import { useRef, useState } from 'react'
 
-	const handleScroll = () => {
-		if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
-			setIsPaginating(true)
-			getMessagesPagination(deviceType)
-		}
-	}
+export function useImageBotPagination(deviceType: Device) {
+	const refScrollMobile = useRef<HTMLDivElement | null>(null)
+	const refScrollDesktop = useRef<HTMLDivElement | null>(null)
+	const mobileScrollContainer = useRef<HTMLDivElement | null>(null)
+	const offset = useRef<number>(0)
 
-	useEffect(() => {
-		window.addEventListener('scroll', handleScroll)
-		return () => {
-			window.removeEventListener('scroll', handleScroll)
-		}
-	}, [])
-
-	useEffect(() => {
-		const block = deviceType === 'desktop' ? document.body : refScrollMobile.current
-
-		if (!block) return
-
-		if (messages != undefined && !isPaginating) {
-			setChatScrollHeight(block.scrollHeight)
-			const time = setTimeout(() => {
-				//@ts-ignore
-				block.scrollTo({
-					top: block.scrollHeight,
-					behavior: 'smooth', // добавляем плавную прокрутку
-				})
-			}, 350)
-			return () => clearTimeout(time)
-		} else if (messages != undefined && isPaginating) {
-			//@ts-ignore
-			block.scrollTop = block.scrollHeight - chatScrollHeight
-
-			setChatScrollHeight(block.scrollHeight)
-		}
+	const [messages, setMessages] = useState<Message[]>([])
 
-		setIsPaginating(false)
-	}, [messages])
+	const [loading, setLoading] = useState<boolean>(false)
 
-	function onIsComplete() {
-		if (!isComplete) return
+	const { showError } = useShowData()
 
-		if (!desktop) {
-			const block = refScrollMobile.current
-			if (block) {
-				block.scrollTop = block.scrollHeight
-			}
+	const { data } = useSession()
+
+	const fetchMessages = async () => {
+		if (!data) return
+
+		setLoading(true)
+		const { data: answer, ...response } = await getImagesGalery(data.access, offset.current)
+		setLoading(false)
+
+		if (response.status >= 400 || !Array.isArray(answer))
+			return showError('Ошибка загрузки чата')
+
+		if (deviceType === 'desktop') {
+			setMessages((prev) => [...prev, ...answer])
+			offset.current = offset.current + answer.length
 			return
 		}
 
-		window.scroll(0, 0)
+		setMessages((prev) => [...answer.reverse(), ...prev])
+		offset.current = offset.current + answer.length
+	}
+
+	const callback = async function (entries: IntersectionObserverEntry[]) {
+		if (!entries[0].isIntersecting) return
+
+		if (deviceType === 'desktop') return fetchMessages()
+
+		if (!mobileScrollContainer.current) return
+
+		const scrollBottom =
+			mobileScrollContainer.current.scrollHeight - mobileScrollContainer.current.scrollTop
+
+		await fetchMessages()
+
+		setTimeout(() => {
+			mobileScrollContainer.current!.scroll({
+				top: mobileScrollContainer.current!.scrollHeight - scrollBottom,
+				behavior: 'smooth',
+			})
+		}, 500)
 	}
 
-	useEffect(onIsComplete, [isComplete])
+	function onObserverMounted() {
+		const currentObserver =
+			deviceType === 'desktop' ? refScrollDesktop.current : refScrollMobile.current
+
+		if (!currentObserver) return
+
+		const observer = new IntersectionObserver(callback, { rootMargin: '400px' })
+
+		observer.observe(currentObserver!)
+	}
 
 	return {
-    refScrollMobile,
-    handleMobileScroll,
-    scrollBottom,
-  }
+		refScrollMobile,
+		refScrollDesktop,
+		onObserverMounted,
+		messages,
+		loading,
+		setLoading,
+		setMessages,
+    fetchMessages,
+		mobileScrollContainer,
+	}
 }
@@ -21,12 +21,16 @@ interface IProps {
 	images: string[]
 }
 
-export default function FullScreenModal({ modal, setModal, current, images, onSlideFalse, reverse = false }: IProps) {
-	const { imagesWithState, updateImageState, currentImageIndex, initialCount } = useImagesLibrary(
-		images,
-		current,
-		reverse
-	)
+export default function FullScreenModal({
+	modal,
+	setModal,
+	current,
+	images,
+	onSlideFalse,
+	reverse = false,
+}: IProps) {
+	const { imagesWithState, updateImageState, currentImageIndex, initialCount } =
+		useImagesLibrary(images, current, reverse)
 
 	const { swiper, setSwiper, slideNext, slidePrev } = useLibrarySwiper(onSlideFalse, reverse)
 
@@ -34,7 +38,7 @@ export default function FullScreenModal({ modal, setModal, current, images, onSl
 		if (!(initialCount < images.length && swiper)) return
 
 		if (reverse) {
-			setTimeout(() => swiper.slideTo(initialCount, 1000), 1000)
+			setTimeout(() => swiper.slideNext(), 1000)
 			return
 		}
 
@@ -65,7 +69,13 @@ export default function FullScreenModal({ modal, setModal, current, images, onSl
 				}}
 			></div>
 			<div className={styles.close_block} onClick={() => setModal(false)}>
-				<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+				<svg
+					width='20'
+					height='20'
+					viewBox='0 0 20 20'
+					fill='none'
+					xmlns='http://www.w3.org/2000/svg'
+				>
 					<path
 						fillRule='evenodd'
 						clipRule='evenodd'
@@ -33,6 +33,7 @@ import { useImagesBotFilters } from '@/src/features/image-bot-filters'
 import { useImageBotPagination } from '@/src/features/image-bot-pagination'
 import { useImagesPagination } from '@/src/widgets/messages'
 import { ImageModelsPopup } from '@/src/widgets/image-models-popup/ui'
+import { useImageBotCreateImage } from '@/src/features/image-bot-create-image'
 
 export async function getServerSideProps(context: any): Promise<{ props: any }> {
 	const deviceType = getTypeDevice(context)
@@ -71,8 +72,25 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 	const { openFiltersMobile, setOpenFiltersMobile, params, setParams, includeParams } =
 		useImagesBotFilters()
 
-	const { messages, loading, createImage, isComplete, getMessagesPagination } =
-		useImagesPagination(showError, modelType, deviceType)
+	const {
+		refScrollMobile,
+		refScrollDesktop,
+		mobileScrollContainer,
+		onObserverMounted,
+		setLoading,
+		setMessages,
+    fetchMessages,
+		loading,
+		messages,
+	} = useImageBotPagination(deviceType)
+
+	const { createImage, isComplete } = useImageBotCreateImage(
+		showError,
+		modelType,
+		deviceType,
+		setLoading,
+		setMessages
+	)
 
 	const { onCreateImage, onLoadImage, image, setImage } = useImagesUniqInput(
 		version,
@@ -80,20 +98,13 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 		createImage
 	)
 
-	const { refScrollMobile, handleMobileScroll, scrollBottom } = useImageBotPagination(
-		isComplete,
-		desktop,
-		messages,
-		getMessagesPagination,
-		deviceType
-	)
-
 	async function onFetch() {
 		await Promise.all([fetchBotParams()])
 	}
 
 	useEffect(() => {
 		onFetch()
+		onObserverMounted()
 	}, [session, router.query])
 
 	return (
@@ -146,44 +157,25 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 									/>
 								)}
 							</Stack>
-							<Box className={'bg-color-block border-radius-main'} sx={{ padding: '30px' }}>
+							<Box
+								className={'bg-color-block border-radius-main'}
+								sx={{ padding: '30px', position: 'relative' }}
+							>
 								<ImageMessagesList
-									getMessagesPagination={() => getMessagesPagination(deviceType)}
 									isComplete={isComplete}
 									device={deviceType}
 									images={messages}
+                  getMessagesPagination={fetchMessages}
 								/>
+								<div
+									style={{ position: 'absolute', bottom: 300 }}
+									ref={refScrollDesktop}
+								></div>
 							</Box>
 						</>
 					) : (
 						<Box className={'bg-color-block border-radius-main'}>
-							{scrollBottom > 500 && (
-								<Box
-									sx={{
-										position: 'absolute',
-										left: 0,
-										right: 0,
-										width: 'fit-content',
-										cursor: 'pointer',
-										margin: '0 auto',
-										bottom: '100px',
-										zIndex: 10,
-									}}
-									onClick={() => {
-										if (!refScrollMobile.current) return
-										const block = refScrollMobile.current
-
-										block.scrollTo({
-											top: block.scrollHeight,
-											behavior: 'smooth', // добавляем плавную прокрутку
-										})
-									}}
-								>
-									<ArrowDownScroll />
-								</Box>
-							)}
 							<Box
-								ref={refScrollMobile}
 								sx={{
 									padding: '30px',
 									height: ios
@@ -191,15 +183,20 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 										: 'calc(200px + (400 - 200) * ((100vh - 400px) / (600 - 400)))',
 									overflowY: 'scroll',
 									overflowX: 'hidden',
+									position: 'relative',
 								}}
+								ref={mobileScrollContainer}
 								className={'smallScroll'}
-								onScroll={handleMobileScroll}
 							>
+								<div
+									style={{ position: 'absolute', top: 300 }}
+									ref={refScrollMobile}
+								></div>
 								<ImageMessagesList
-									getMessagesPagination={() => getMessagesPagination(deviceType)}
 									isComplete={isComplete}
 									device={deviceType}
 									images={messages}
+                  getMessagesPagination={fetchMessages}
 								/>
 							</Box>
 							<Stack alignItems='center'>
@@ -1,3 +1,3 @@
-export const c = (...classes: Array<string | null | undefined>) => {
-	return classes.filter(Boolean).join(' ')
+export function c(...args: Array<string | null | undefined | boolean>) {
+  return args.filter(Boolean).join(" ")
 }
@@ -39,6 +39,7 @@ export const ImageModelsPopup = ({ model }: ImageModelsPopupProps) => {
 				<div className={c(styles.popup, popupOpen ? styles.popup_open : null)}>
 					{bots.map((item) => (
 						<ImagePopupModel
+							key={item.uid}
 							averageTokenCost={averageTokenCost}
 							active={model ? item.slug === model.slug : false}
 							setActive={(slug) => {
@@ -46,7 +47,6 @@ export const ImageModelsPopup = ({ model }: ImageModelsPopupProps) => {
 								push(`/images/${slug}`)
 							}}
 							{...item}
-							key={item.uid}
 						/>
 					))}
 				</div>
@@ -7,6 +7,11 @@
 	gap: 22px;
 	justify-content: space-between;
 	max-width: 500px;
+  transition: background-color 0.3s ease;
+
+  &:hover{
+    background-color: rgba($color: #a4aab5, $alpha: 0.1);
+  }
 
   @media (max-width: 768px) {
     // max-width: calc(100% - 100px) !important;
@@ -18,34 +18,16 @@ export function useImagesPagination(
 
 	const [loading, setLoading] = useState<boolean>(false)
 
-	const [isComplete, setIsComplete] = useState<boolean>(false)
-
 	const [offset, setOffset] = useState<number>(0)
 
 	const dispatch = useAppDispatch()
 
-	const dataRef = useRef(data)
-	const messagesRef = useRef(messages)
-	const offsetRef = useRef(offset)
-
-	useEffect(() => {
-		dataRef.current = data
-	}, [data])
-
-	useEffect(() => {
-		messagesRef.current = messages
-	}, [messages])
-
-	useEffect(() => {
-		offsetRef.current = offset
-	}, [offset])
-
 	async function onFetch() {
 		if (!data) return
 
 		setLoading(true)
-
-		const { data: answer, ...response } = await getImagesGalery(data?.access, offset)
+		console.log(offset)
+		const { data: answer, ...response } = await getImagesGalery(data.access, offset)
 		setLoading(false)
 
 		if (response.status >= 400) return showError('Ошибка загрузки чата')
@@ -65,61 +47,28 @@ export function useImagesPagination(
 		onFetch()
 	}, [data, type])
 
-	const getMessagesPagination = useCallback(
-		async (device: 'mobile' | 'desktop') => {
-			if (!dataRef.current || !dataRef.current.access) return
-
-			setLoading(true)
-			const { data: answer, ...response } = await getImagesGalery(
-				dataRef.current?.access,
-				offsetRef.current
-			)
-			setLoading(false)
-
-			if (response.status >= 400) return showError('Ошибка загрузки чата')
-
-			if (!Array.isArray(answer) || !messagesRef.current)
-				return showError('Ошибка загрузки сообщений')
-
-			if (device === 'mobile') {
-				const newMessages = answer.reverse()
-				setMessages([...newMessages, ...messagesRef.current])
-				return setOffset((prev) => prev + answer.length)
-			}
-
-			setMessages([...messagesRef.current, ...answer])
-			setOffset((prev) => prev + answer.length)
-		},
-		[data, type, offset, messages]
-	)
-
-	const createImage = async <T>(dataForSend: MessageSend<T>) => {
-		const { content, file } = dataForSend
+	const getMessagesPagination = async (device: 'mobile' | 'desktop') => {
+		if (!data) return
 
-		setIsComplete(false)
 		setLoading(true)
-
-		const dataSending = file ? formDataHelper(file, dataForSend) : dataForSend
-
-		const response = await sendImage(type, dataSending, data?.access)
-
-		if (response.status >= 400) showError('Ошибка отправки сообщения')
-
+		const { data: answer, ...response } = await getImagesGalery(data.access, offset)
 		setLoading(false)
 
-		dispatch(getUserBalance(data?.access))
+		if (response.status >= 400) return showError('Ошибка загрузки чата')
 
-		setMessages((prev) => {
-			if (!prev || !prev.length) return response.data
+		if (!Array.isArray(answer)) return showError('Ошибка загрузки сообщений')
 
-			if (device === 'desktop') {
-				return [...response.data, ...prev]
-			}
-			return [...prev, ...response.data]
-		})
+		debugger
+
+		if (device === 'mobile') {
+			const newMessages = answer.reverse()
+			setMessages([...newMessages, ...messages])
+			return setOffset((prev) => prev + answer.length)
+		}
 
-		setIsComplete(true)
+		setMessages([...messages, ...answer])
+		setOffset((prev) => prev + answer.length)
 	}
 
-	return { messages, createImage, loading, isComplete, getMessagesPagination }
+	return { messages, loading, getMessagesPagination }
 }
@@ -54,7 +54,9 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(
 			console.log(messageResponse)
 			return messageResponse
 				.map((item) => item.file)
-				.filter((item) => item !== null && !(item as string).includes('.zip')) as string[]
+				.filter(
+					(item) => item !== null && !(item as string).includes('.zip')
+				) as string[]
 		}, [messageResponse])
 
 		React.useEffect(() => {
@@ -111,7 +113,7 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(
 					{createPortal(
 						<ImageModal
 							modal={modal}
-							current={currentSrc}  
+							current={currentSrc}
 							setModal={setModal}
 							onSlideFalse={async () => {
 								getMessagesPagination && (await getMessagesPagination())
@@ -121,6 +123,7 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(
 						document.getElementById('modal-container')!
 					)}
 				</ClientOnly>
+
 				<Box
 					sx={{
 						overflowY: 'scroll',
@@ -183,7 +186,11 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(
 					)}
 
 					{messageResponse?.length === 0 && status === 'authenticated' ? (
-						<>{desktop && modelType !== 'deepl' && <PreviewView setValue={setResendValue} />}</>
+						<>
+							{desktop && modelType !== 'deepl' && (
+								<PreviewView setValue={setResendValue} />
+							)}
+						</>
 					) : (
 						messageResponse?.map((message, idx) => {
 							return (
@@ -1,36 +1,47 @@
+.model {
+	position: absolute;
+	top: 12px;
+	left: 12px;
+	z-index: 100;
+	background-color: rgba($color: #151518, $alpha: 0.5);
+	font-size: 13px;
+	padding: 2px 8px;
+	border-radius: 10px;
+  font-weight: 500;
+	color: #fff;
+}
 .wrap {
-  display: flex;
-  overflow: hidden;
-  width: 100%;
-  flex-wrap: wrap;
-  gap: 20px;
-  @media (max-width: 766px) {
-    height: 70vh;
-    width: 100%;
-    overflow-y: scroll;
-    text-align: center;
-    justify-content: center;
-  }
-  div {
-    margin-right: 10px;
-    @media (max-width: 766px) {
-      width: 100%;
-    }
+	display: flex;
+	overflow: hidden;
+	width: 100%;
+	flex-wrap: wrap;
+	gap: 20px;
+	@media (max-width: 766px) {
+		height: 70vh;
+		width: 100%;
+		overflow-y: scroll;
+		text-align: center;
+		justify-content: center;
+	}
+	div {
+		margin-right: 10px;
+		@media (max-width: 766px) {
+			width: 100%;
+		}
 
-      .image {
-        margin:10px auto;
-        width: 250px;
-        height: 250px;
-        border-radius: 15px !important;
-    }
+		.image {
+			margin: 10px auto;
+			width: 250px;
+			height: 250px;
+			border-radius: 15px !important;
+		}
 
-    @media (max-width: 1700px) {
+		@media (max-width: 1700px) {
+		}
 
-    }
-
-    @media (max-width: 766px) {
-      text-align: center;
-      width: 80%;
-    }
-  }
-}
\ No newline at end of file
+		@media (max-width: 766px) {
+			text-align: center;
+			width: 80%;
+		}
+	}
+}
@@ -8,11 +8,11 @@ import { ImageModal } from '@/src/features/image-modal'
 import { useAppSelector } from '@/src/main/store/store'
 import { ClientOnly, Success, TooltipCustom, useShowData } from '@/src/shared'
 import { useAutoScroll } from '@/src/shared/lib/hooks'
-import { Message } from '@/src/shared/lib/types/model'
 
 import styles from './image-messages-list.module.scss'
 import { createPortal } from 'react-dom'
 import { useMessages } from '../model/use-messages'
+import { Message } from '@/src/entities/message'
 
 interface MessagesList {
 	device: 'mobile' | 'desktop'
@@ -201,13 +201,13 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images,
 				>
 					{images?.length !== 0 &&
 						Array.isArray(images) &&
-						images.map((message) => {
+						images.map((message, index) => {
 							//@ts-ignore
 							const isZip = message.file && message.file.includes('.zip')
 							//@ts-ignore
 							const isSvg = message.file && message.file.includes('.svg')
 							return (
-								<Box key={message.uid} sx={{ position: 'relative' }}>
+								<Box key={index} sx={{ position: 'relative' }}>
 									{isZip ? (
 										<Box
 											display='flex'
@@ -260,6 +260,9 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images,
 													borderRadius: '15px',
 												}}
 											>
+												<span className={styles.model}>
+													{message.model}
+												</span>
 												{!isSvg ? (
 													<>
 														<Image
@@ -1,139 +0,0 @@
-import React, { memo } from 'react'
-import MenuIcon from '@mui/icons-material/Menu'
-import { Box, Button, Stack, Typography } from '@mui/material'
-import dynamic from 'next/dynamic'
-import Link from 'next/link'
-import Router, { useRouter } from 'next/router'
-import { useSession } from 'next-auth/react'
-
-import { useAppSelector } from '@/src/main/store/store'
-import { Balance } from '@/src/shared'
-import { NavigateTopBar } from '@/src/widgets/top-bar-model/ui/navigate-top-bar'
-import { NavigateTopBarMobile } from '@/src/widgets/top-bar-model/ui/navigate-top-bar-mobile'
-
-interface IModelTopBar {
-	device: 'mobile' | 'desktop'
-	favorites: any[] | []
-	token: string | null
-	title: string
-}
-
-export const ModelTopBar: React.FC<IModelTopBar> = memo(({ device, token, favorites, title }) => {
-	const theme = useAppSelector((state) => state.theme.theme)
-
-	const [anchorElModel, setAnchorElModel] = React.useState<HTMLElement | null>(null)
-
-	const desktop = device === 'desktop'
-
-	const { status } = useSession()
-
-	const { pathname } = useRouter()
-
-	const balance = useAppSelector((state) => state.balance.balance)
-
-	const closeMenuModel = () => setAnchorElModel(null)
-	const openMenuModel = (event: React.MouseEvent<HTMLButtonElement>) => {
-		setAnchorElModel(event.currentTarget)
-	}
-	const goToPayment = () => {
-		Router.push('/account')
-	}
-
-	const LazyTutorial = dynamic(() => import('@/src/features/tutorial-gpt').then((component) => component.Tutorial))
-
-	const LazyArrowIcon = dynamic(() => import('./arrow-up-or-down'))
-
-	return (
-		<Stack
-			direction='row'
-			justifyContent='space-between'
-			alignItems='center'
-			sx={{
-				backgroundColor: desktop
-					? theme === 'light'
-						? '#F8F8F8'
-						: '#4B4B4B'
-					: theme === 'light'
-					? '#F8F8F8'
-					: 'transparent',
-				borderRadius: desktop ? '15px' : '15px 15px',
-				marginTop: desktop ? 1 : 0,
-				marginBottom: desktop ? 2 : 1,
-				padding: desktop ? '8px 5px' : '4px 0',
-				boxShadow: desktop
-					? 'none'
-					: 'rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;',
-			}}
-		>
-			<Stack direction='row' alignItems='center'>
-				{desktop && (
-					<Button onClick={openMenuModel}>{desktop && <MenuIcon sx={{ color: '#7F7DF3' }} />}</Button>
-				)}
-				<Stack onClick={openMenuModel as any} direction='row' alignItems='center'>
-					<Typography
-						onClick={openMenuModel}
-						variant='body2'
-						sx={{
-							color: '#7F7DF3',
-							lineHeight: '26.6px',
-							fontSize: '19px',
-							fontWeight: '600px',
-							marginLeft: desktop ? 0 : 2,
-						}}
-					>
-						{title}
-					</Typography>
-					{!desktop && <LazyArrowIcon directionY={!!anchorElModel} />}
-				</Stack>
-
-				{desktop ? (
-					<NavigateTopBar favorites={favorites} closeMenu={closeMenuModel} anchorEl={anchorElModel} />
-				) : (
-					<NavigateTopBarMobile
-						anchorEl={anchorElModel}
-						closeMenu={closeMenuModel}
-						favorites={favorites}
-					/>
-				)}
-			</Stack>
-
-			<Box display='flex' alignItems='center'>
-				{desktop && status === 'authenticated' && pathname === '/chatgpt' && <LazyTutorial />}
-				<Stack
-					direction='row'
-					className='tutorial-balance'
-					sx={{
-						backgroundColor: theme === 'light' ? (desktop ? 'white' : 'transparent') : '#373737',
-						marginRight: 1.2,
-						padding: desktop ? '8px 15px' : '8px 0px',
-						borderRadius: '10px',
-						marginLeft: 3,
-					}}
-				>
-					{token && (
-						<Link href={'/account'}>
-							<Balance balance={balance} />
-						</Link>
-					)}
-					{desktop && (
-						<Typography
-							variant='body2'
-							sx={{
-								color: '#7F7DF3',
-								lineHeight: '21px',
-								fontSize: '15px',
-								marginLeft: token ? 3 : 0,
-								'&:hover': { cursor: 'pointer' },
-							}}
-							onClick={goToPayment}
-						>
-							Купить токены
-						</Typography>
-					)}
-				</Stack>
-			</Box>
-		</Stack>
-	)
-})
-
-ModelTopBar.displayName = 'ModelTopBar'