@@ -3,6 +3,7 @@ import { useAppSelector } from '@/src/main/store/store'
 import { useShowData } from '@/src/shared'
 import { Device } from '@/src/shared/lib/types/entities'
 import { getImagesGalery } from '@/src/widgets/messages'
+import { useMediaQuery } from '@mui/material'
 import { useSession } from 'next-auth/react'
 import { useRef, useState } from 'react'
 
@@ -12,6 +13,8 @@ export function useImageBotPagination(deviceType: Device) {
 	const mobileScrollContainer = useRef<HTMLDivElement | null>(null)
 	const offset = useRef<number>(0)
 
+	const query = useMediaQuery('(min-height: 600px)')
+
 	const [messages, setMessages] = useState<Message[]>([])
 
 	const [loading, setLoading] = useState<boolean>(false)
@@ -20,11 +23,15 @@ export function useImageBotPagination(deviceType: Device) {
 
 	const { data } = useSession()
 
-	const fetchMessages = async () => {
+	const fetchMessages = async (count?: number) => {
 		if (!data) return
 
 		setLoading(true)
-		const { data: answer, ...response } = await getImagesGalery(data.access, offset.current)
+		const { data: answer, ...response } = await getImagesGalery(
+			data.access,
+			offset.current,
+			count || 10
+		)
 		setLoading(false)
 
 		if (response.status >= 400 || !Array.isArray(answer))
@@ -43,7 +50,11 @@ export function useImageBotPagination(deviceType: Device) {
 	const callback = async function (entries: IntersectionObserverEntry[]) {
 		if (!entries[0].isIntersecting) return
 
-		if (deviceType === 'desktop') return fetchMessages()
+		if (deviceType === 'desktop') {
+			if (query && offset.current === 0) return fetchMessages(20)
+
+			fetchMessages()
+		}
 
 		if (!mobileScrollContainer.current) return
 
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { Collapse, Typography } from '@mui/material'
+import { Collapse, Typography, useMediaQuery } from '@mui/material'
 import Box from '@mui/material/Box'
 import Stack from '@mui/material/Stack'
 import { useRouter } from 'next/router'
@@ -167,10 +167,14 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 									images={messages}
                   getMessagesPagination={fetchMessages}
 								/>
-								<div
-									style={{ position: 'absolute', bottom: 300 }}
+								<Box
+									sx={{
+										position: 'absolute',
+										bottom: '20%',
+										width: '100%',
+									}}
 									ref={refScrollDesktop}
-								></div>
+								></Box>
 							</Box>
 						</>
 					) : (
@@ -3,8 +3,8 @@ import { API_URL } from '@/src/shared/lib/constants'
 import { IMessageRequest } from '@/src/shared/lib/types/types-gpt'
 import axios, { AxiosError, AxiosResponse } from 'axios'
 
-export async function getImagesGalery(token?: string, offset?: number) {
-	return await axios.get<Message>(API_URL + `/media/gallery/images?limit=10&offset=${offset}`, {
+export async function getImagesGalery(token?: string, offset?: number, limit = 10) {
+	return await axios.get<Message>(API_URL + `/media/gallery/images?limit=${limit}&offset=${offset}`, {
 		headers: {
 			Authorization: `Bearer ${token}`,
 		},
@@ -58,8 +58,6 @@ export function useImagesPagination(
 
 		if (!Array.isArray(answer)) return showError('Ошибка загрузки сообщений')
 
-		debugger
-
 		if (device === 'mobile') {
 			const newMessages = answer.reverse()
 			setMessages([...newMessages, ...messages])