@@ -86,6 +86,7 @@ function Chat<T>({
 					modelType={modelType}
 					deleteMessage={deleteMessage}
 					modelTitle={modelTitle}
+					loading={loading}
 				/>
 				<UniqInput
 					resendValue={resendValue}
@@ -94,7 +94,7 @@ const Page: React.FC<any> = ({ deviceType, deviceOs }) => {
 	const resetParams = () => {
 		if (botParams) {
 			dispatch(setParametres({}))
-			if (botParams.versions.length !== 0) {
+			if (botParams.versions?.length !== 0) {
 				setVersion(botParams.versions[0].slug)
 				dispatch(
 					setParametres(
@@ -209,7 +209,7 @@ const Page: React.FC<any> = ({ deviceType, deviceOs }) => {
 						/>
 						{desktop && (
 							<Stack className='pd-30 bg-color-block border-radius-main' spacing={2}>
-								{botParams?.versions && botParams.versions.length !== 0 && (
+								{botParams?.versions && botParams.versions?.length !== 0 && (
 									<>
 										<Typography sx={{ color: '#A4AAB5', fontWeight: '600', fontSize: '14px', letterSpacing: '0.1px' }}>
 											ВЕРСИИ
@@ -268,7 +268,7 @@ const Page: React.FC<any> = ({ deviceType, deviceOs }) => {
 						{!desktop && (
 							<DrawerCustom open={openFiltersMobile} onClose={hideMobileSettings}>
 								<Stack spacing={1} padding={2.4}>
-									{botParams?.versions && botParams.versions.length !== 0 && (
+									{botParams?.versions && botParams.versions?.length !== 0 && (
 										<>
 											<Typography
 												sx={{
@@ -23,6 +23,7 @@ import { IModel } from '@/src/shared/api/models/models'
 import { getTypeDevice } from '@/src/shared/lib/helpers'
 import { getDeviceOs } from '@/src/shared/lib/helpers/get-type-device'
 import { useShowData } from '@/src/shared/lib/hooks'
+import { ArrowDownScroll } from '@/src/shared/ui/icon-components/scroll-down-arrow'
 import { Setting } from '@/src/widgets/images/api/types'
 import { ImageMessagesList } from '@/src/widgets/messages/image-messages-list'
 
@@ -51,10 +52,16 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 	const [version, setVersion] = React.useState<string>('')
 	const [modelType, setModelType] = React.useState<string>('')
 	const [params, setParams] = React.useState<boolean>(false)
-	const refScroll = useRef(null)
 	const includeParams = useAppSelector((state) => state.params.params)
 	const dispatch = useDispatch()
 
+	const { messages, loading, createImage, isComplete, getMessagesPagination } = useModelImages<Setting>(showError, modelType, deviceType)
+
+	const [chatScrollHeight, setChatScrollHeight] = React.useState(0)
+	const [scrollBottom, setScrollBottom] = React.useState(0)
+	const refScrollMobile = useRef<any>()
+	const [isPaginating, setIsPaginating] = React.useState(false)
+
 	React.useEffect(() => {
 		model_api
 			.getBotParams(router.asPath.split('/')[2], data?.access)
@@ -79,7 +86,6 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 			.catch((err) => {})
 	}, [data?.access])
 
-	const { messages, loading, createImage, isComplete } = useModelImages<Setting>(showError, modelType, deviceType)
 	const onLoadImage = (event: React.ChangeEvent<HTMLInputElement>) => {
 		if (event.target.files) {
 			setImage(event.target.files[0])
@@ -171,7 +177,7 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 	React.useEffect(() => {
 		if (isComplete) {
 			if (!desktop) {
-				const block = refScroll.current
+				const block = refScrollMobile.current
 				if (block) {
 					//@ts-ignore
 					block.scrollTop = block.scrollHeight
@@ -182,18 +188,55 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 		}
 	}, [isComplete])
 
+	const handleMobileScroll = () => {
+		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)
+				}
+			}
+		}
+	}
+
+	const handleScroll = () => {
+		if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
+			setIsPaginating(true)
+			getMessagesPagination(deviceType)
+		}
+	}
+
 	React.useEffect(() => {
-		if (!desktop && messages !== null) {
-			const block = refScroll.current
+		window.addEventListener('scroll', handleScroll)
+		return () => {
+			window.removeEventListener('scroll', handleScroll)
+		}
+	}, [])
 
-			const time = setTimeout(() => {
-				if (block) {
+	React.useEffect(() => {
+		const block = deviceType === 'desktop' ? window : refScrollMobile.current
+		if (block) {
+			if (messages != undefined && !isPaginating) {
+				setChatScrollHeight(block.scrollHeight)
+				const time = setTimeout(() => {
 					//@ts-ignore
-					block.scrollTop = block.scrollHeight
-				}
-			}, 250)
-			return () => clearTimeout(time)
+					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)
+			}
 		}
+		setIsPaginating(false)
 	}, [messages])
 
 	return (
@@ -239,8 +282,32 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 						</>
 					) : (
 						<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={() => {
+										const block = refScrollMobile.current
+
+										block.scrollTo({
+											top: block.scrollHeight,
+											behavior: 'smooth', // добавляем плавную прокрутку
+										})
+									}}
+								>
+									<ArrowDownScroll />
+								</Box>
+							)}
 							<Box
-								ref={refScroll}
+								ref={refScrollMobile}
 								sx={{
 									padding: '30px',
 									height: ios
@@ -250,6 +317,7 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 									overflowX: 'hidden',
 								}}
 								className={'smallScroll'}
+								onScroll={handleMobileScroll}
 							>
 								<ImageMessagesList isComplete={isComplete} device={deviceType} images={messages} />
 							</Box>
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import axios, { AxiosError, AxiosResponse } from 'axios'
 import base64 from 'base64-encode-file'
 import { useSession } from 'next-auth/react'
@@ -23,7 +23,7 @@ const formDataHelper = (file: File, dataForSend: MessageSend<any>): FormData =>
 export const ModelsWithChatsEndpoints = {
 	getData: async (chatUid: string, offset: number, token?: string) => {
 		try {
-			const { data } = await axios.get<Message[]>(API_URL + `/chats/${chatUid}/messages/?limit=100&offset=${offset}`, {
+			const { data } = await axios.get<Message[]>(API_URL + `/chats/${chatUid}/messages/?limit=10&offset=${offset}`, {
 				headers: {
 					Authorization: `Bearer ${token}`,
 				},
@@ -77,12 +77,12 @@ export function useModel(
 			setMessages([])
 			;(async () => {
 				setLoading(true)
-				const answer = await ModelsWithChatsEndpoints.getData(currentChat, offset, data?.access)
+				const answer = await ModelsWithChatsEndpoints.getData(currentChat, 0, data?.access)
 				setLoading(false)
 
 				if (Array.isArray(answer)) {
 					setMessages(answer.reverse())
-					// setOffset((prev) => prev + 10)
+					setOffset(answer.length)
 				} else {
 					showError('Ошибка загрузки чата')
 					return
@@ -100,7 +100,7 @@ export function useModel(
 			if (Array.isArray(answer) && messages != null) {
 				const newMessages = answer.reverse()
 				setMessages([...newMessages, ...messages])
-				setOffset((prev) => prev + 10)
+				setOffset((prev) => prev + answer.length)
 			} else {
 				showError('Ошибка загрузки сообщений')
 				return
@@ -192,9 +192,9 @@ export function useModel(
 }
 
 export const ModelsWithImagesEndpoints = {
-	getData: async (type: string, token?: string) => {
+	getData: async (type: string, offset: number, token?: string) => {
 		try {
-			const { data } = await axios.get<Message[]>(API_URL + `/media/image/${type}?limit=100`, {
+			const { data } = await axios.get<Message[]>(API_URL + `/media/image/${type}?limit=10&offset=${offset}`, {
 				headers: {
 					Authorization: `Bearer ${token}`,
 				},
@@ -242,13 +242,33 @@ export function useModelImages<T>(showError: (message: string) => void, type: st
 
 	const [isComplete, setIsComplete] = useState<boolean>(false)
 
+	const [offset, setOffset] = useState<number>(0)
+
 	const dispatch = useAppDispatch()
 
+	const typeRef = useRef(type)
+	const dataRef = useRef(data)
+	const messagesRef = useRef(messages)
+	const offsetRef = useRef(offset)
+
+	useEffect(() => {
+		typeRef.current = type
+	}, [type])
+	useEffect(() => {
+		dataRef.current = data
+	}, [data])
+	useEffect(() => {
+		messagesRef.current = messages
+	}, [messages])
+	useEffect(() => {
+		offsetRef.current = offset
+	}, [offset])
+
 	useEffect(() => {
 		if (data?.access && type !== '' && type !== undefined) {
 			;(async () => {
 				setLoading(true)
-				const answer = await getData(type, data?.access)
+				const answer = await getData(type, offset, data?.access)
 				setLoading(false)
 				if ('error' in answer) {
 					showError('Ошибка загрузки чата')
@@ -258,14 +278,46 @@ export function useModelImages<T>(showError: (message: string) => void, type: st
 				if (Array.isArray(answer)) {
 					if (device === 'desktop') {
 						setMessages(answer)
+						setOffset(answer.length)
 					} else {
 						setMessages(answer.reverse())
+						setOffset(answer.length)
 					}
 				}
 			})()
 		}
 	}, [data?.access, type])
 
+	const getMessagesPagination = useCallback(
+		async (device: 'mobile' | 'desktop') => {
+			// console.log(dataRef.current?.access);
+			// console.log(typeRef.current);
+			// console.log(offsetRef.current);
+			// console.log(messagesRef.current);
+
+			if (dataRef.current?.access && typeRef.current !== '' && typeRef.current !== undefined) {
+				setLoading(true)
+				const answer = await getData(typeRef.current, offsetRef.current, dataRef.current?.access)
+				setLoading(false)
+
+				if (Array.isArray(answer) && messagesRef.current != null && device === 'mobile') {
+					const newMessages = answer.reverse()
+					setMessages([...newMessages, ...messagesRef.current])
+					setOffset((prev) => prev + answer.length)
+				} else if (Array.isArray(answer) && messagesRef.current != null && device === 'desktop') {
+					setMessages([...messagesRef.current, ...answer])
+					setOffset((prev) => prev + answer.length)
+				} else {
+					console.log('err')
+
+					showError('Ошибка загрузки сообщений')
+					return
+				}
+			}
+		},
+		[data?.access, type, offset, messages]
+	)
+
 	const createImage = async <T>(dataForSend: MessageSend<T>) => {
 		const { content, file } = dataForSend
 
@@ -301,7 +353,7 @@ export function useModelImages<T>(showError: (message: string) => void, type: st
 		setIsComplete(true)
 	}
 
-	return { messages, createImage, loading, isComplete }
+	return { messages, createImage, loading, isComplete, getMessagesPagination }
 }
 
 export const ModelsMediaApi = {
@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+export const ArrowDownScroll: React.FC<SVGProps<SVGSVGElement>> = ({ ...props }) => {
+	return (
+		<svg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'>
+			<rect width='36' height='36' rx='18' fill='#7F7DF3' />
+			<path d='M25 16L18 23L11 16' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' />
+		</svg>
+	)
+}
@@ -58,7 +58,8 @@ export function BotMessage(props: any) {
 			: {}
 
 	return (
-		<Slide direction='right' in={props.isNewMessage} mountOnEnter unmountOnExit>
+		// <Slide direction='right' in={props.isNewMessage} mountOnEnter unmountOnExit>
+		<Box>
 			<Box
 				sx={{
 					display: 'flex',
@@ -252,6 +253,6 @@ export function BotMessage(props: any) {
 					</Box>
 				</Box>
 			</Box>
-		</Slide>
+		</Box>
 	)
 }
@@ -67,7 +67,8 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 			{props.message.file && <FullScreenModal modal={modal} setModal={setModal} image={props.message.file.toString()} />}
 			<span className='tutorial-message'>
 				{!props.message.from_model ? (
-					<Slide className='tutorial-message-me' direction='left' in={props.isNewMessage} mountOnEnter unmountOnExit>
+					// <Slide className='tutorial-message-me' direction='left' in={props.isNewMessage} mountOnEnter unmountOnExit>
+					<Box>
 						<Box
 							className='smallScroll'
 							sx={{
@@ -492,7 +493,7 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 								)}
 							</Box>
 						</Box>
-					</Slide>
+					</Box>
 				) : (
 					<BotMessage
 						modelTitle={props.modelTitle}
@@ -1,8 +1,9 @@
 import React, { memo, useEffect } from 'react'
-import { Box } from '@mui/material'
+import { Box, CircularProgress } from '@mui/material'
 import { useSession } from 'next-auth/react'
 
 import { Message } from '@/src/shared/lib/types/model'
+import { ArrowDownScroll } from '@/src/shared/ui/icon-components/scroll-down-arrow'
 import { IsNextDay } from '@/src/widgets/messages/is-next-day'
 import { PreviewView } from '@/src/widgets/messages/message-components/preview-view'
 
@@ -17,32 +18,63 @@ interface IMessagesList {
 	modelTitle: string | undefined
 	setResendValue: (value: string) => void
 	onLoadImage?: (event: React.ChangeEvent<HTMLInputElement> | null, file?: File) => void
+	loading: boolean
 }
 
 export const ChatMessagesList: React.FC<IMessagesList> = memo(
-	({ messageResponse, onLoadImage, setResendValue, modelTitle, device, modelType, mode, getMessagesPagination, deleteMessage }) => {
+	({ messageResponse, onLoadImage, setResendValue, modelTitle, device, modelType, mode, getMessagesPagination, deleteMessage, loading }) => {
 		const paginationScroll = React.useRef<any>()
+		const [isPaginating, setIsPaginating] = React.useState(false)
+		const [chatScrollHeight, setChatScrollHeight] = React.useState(0)
+		const [scrollBottom, setScrollBottom] = React.useState(0)
+
 		const desktop = device === 'desktop'
 		const { status } = useSession()
 		const [isNewMessage, setIsNewMessage] = React.useState(false)
 
 		React.useEffect(() => {
-			if (messageResponse != undefined) {
-				const block = paginationScroll.current
+			const block = paginationScroll.current
+
+			if (messageResponse != undefined && !isPaginating) {
+				setChatScrollHeight(paginationScroll.current.scrollHeight)
 				const time = setTimeout(() => {
 					if (block) {
 						//@ts-ignore
-						block.scrollTop = block.scrollHeight
+						block.scrollTo({
+							top: block.scrollHeight,
+							behavior: 'smooth', // добавляем плавную прокрутку
+						})
 					}
 				}, 250)
 				return () => clearTimeout(time)
+			} else if (messageResponse != undefined && isPaginating) {
+				if (block) {
+					//@ts-ignore
+					block.scrollTop = block.scrollHeight - chatScrollHeight
+					setChatScrollHeight(paginationScroll.current.scrollHeight)
+				}
 			}
+			setIsPaginating(false)
 		}, [messageResponse])
 
 		useEffect(() => {
 			setIsNewMessage(true)
 		}, [messageResponse])
 
+		const handleScroll = () => {
+			setScrollBottom(paginationScroll.current?.scrollHeight - paginationScroll.current?.scrollTop - paginationScroll.current?.clientHeight)
+
+			if (paginationScroll.current && messageResponse?.length !== 0) {
+				const { scrollTop, scrollHeight, clientHeight } = paginationScroll.current
+				if (scrollTop === 0) {
+					if (getMessagesPagination) {
+						setIsPaginating(true)
+						getMessagesPagination()
+					}
+				}
+			}
+		}
+
 		return (
 			<Box
 				sx={{
@@ -55,7 +87,56 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(
 					paddingLeft: desktop ? 1 : 0,
 				}}
 				ref={paginationScroll}
+				onScroll={handleScroll}
 			>
+				{scrollBottom > 500 && (
+					<Box
+						sx={{
+							position: 'absolute',
+							left: 0,
+							right: 0,
+							width: 'fit-content',
+							cursor: 'pointer',
+							margin: '0 auto',
+							bottom: '100px',
+							zIndex: 10,
+						}}
+						onClick={() => {
+							//@ts-ignore
+							const block = paginationScroll.current
+
+							block.scrollTo({
+								top: block.scrollHeight,
+								behavior: 'smooth', // добавляем плавную прокрутку
+							})
+						}}
+					>
+						<ArrowDownScroll />
+					</Box>
+				)}
+
+				{loading && (
+					<Box
+						sx={{
+							position: 'absolute',
+							left: 0,
+							right: 0,
+							width: 'fit-content',
+							margin: '0 auto',
+							top: '10px',
+							zIndex: 10,
+						}}
+					>
+						<CircularProgress
+							size={18}
+							thickness={3}
+							sx={{
+								color: '#7F7DF3',
+							}}
+						/>
+					</Box>
+				)}
+
 				{messageResponse?.length === 0 && status === 'authenticated' ? (
 					<>{desktop && modelType !== 'deepl' && <PreviewView setValue={setResendValue} />}</>
 				) : (