@@ -1,5 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
-import { ImageWithState } from './types'
+import { Dispatch, SetStateAction, useEffect, useMemo } from 'react'
 import { Message } from '#/entities/message'
 
 export const useImagesLibrary = (
@@ -7,8 +6,6 @@ export const useImagesLibrary = (
 	current: string | null,
 	images: Message<string>[]
 ) => {
-	const [initialCount, setInitialCount] = useState(0)
-
 	const esc = (e: KeyboardEvent) => {
 		if (e.key === 'Escape') {
 			e.preventDefault()
@@ -18,7 +15,7 @@ export const useImagesLibrary = (
 
 	const currentIndex = useMemo(
 		() => images.findIndex((item) => item.file === current),
-		[current]
+		[current, images]
 	)
 
 	useEffect(() => {
@@ -27,8 +24,6 @@ export const useImagesLibrary = (
 	}, [])
 
 	return {
-		initialCount,
-		setInitialCount,
-    currentIndex,
+		currentIndex,
 	}
 }
@@ -1,7 +1,5 @@
-import { debounce } from 'lodash'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Swiper as SwiperCore } from 'swiper'
-import { ImageWithState } from './types'
 
 export const useLibrarySwiper = (onSlideFalse: ((...args: any) => any) | undefined, reverse: boolean) => {
 	const [swiper, setSwiper] = useState<SwiperCore | null>(null)
@@ -41,10 +39,6 @@ export const useLibrarySwiper = (onSlideFalse: ((...args: any) => any) | undefin
 		}
 	}, [swiper])
 
-	// useEffect(() => {
-	// 	swiper?.slideTo(currentImageIndex || 0)
-	// }, [currentImageIndex])
-
 	return {
 		swiper,
 		setSwiper,
@@ -0,0 +1,21 @@
+.overlay {
+	position: fixed;
+	z-index: 1201;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	display: none;
+}
+
+.overlayVisible {
+	display: block;
+}
+
+.backdrop {
+	position: absolute;
+	z-index: 101;
+	width: 100%;
+	height: 100%;
+	background-color: #000000;
+	opacity: 0.9;
+}
@@ -1,16 +1,15 @@
-import React, { Dispatch, SetStateAction, useEffect, useMemo, useRef, useState } from 'react'
-import Image from 'next/image'
+import { Dispatch, SetStateAction, useEffect, useRef } from 'react'
 
+import overlayStyles from './full-screen-modal-overlay.module.scss'
 import styles from './modal-styles.module.scss'
 import { ArrowDropDown } from '@mui/icons-material'
-import { c, Loader, TooltipCustom } from '#/shared'
+import { c } from '#/shared'
 import { useImagesLibrary } from '../model'
 
 import { Swiper, SwiperSlide } from 'swiper/react'
 import 'swiper/css'
 import { useLibrarySwiper } from '../model/use-swiper'
-import { ImageIcons, useImageIcons } from '#/widgets/messages'
-import { Typography } from '@mui/material'
+import { useImageIcons } from '#/widgets/messages'
 import { ModalImage } from './modal-image'
 import { Message } from '#/entities/message'
 
@@ -32,55 +31,63 @@ export default function FullScreenModal({
 	onSlideFalse,
 	reverse = false,
 }: IProps) {
-	const { initialCount, setInitialCount, currentIndex } = useImagesLibrary(
+	const { currentIndex } = useImagesLibrary(
 		setModal,
 		current,
 		images
 	)
 
-	const count = useRef(0)
+	const prevImagesLengthRef = useRef(0)
 
 	const { swiper, setSwiper, slideNext, slidePrev } = useLibrarySwiper(onSlideFalse, reverse)
 
 	const { downloadFile } = useImageIcons()
 
+
 	useEffect(() => {
-		// debugger
-		if (reverse)
-			setTimeout(() => {
-				swiper?.slideNext()
-				count.current = images.length
-			}, 400)
-		else
-			setTimeout(() => {
-				swiper?.slideTo(images.length - count.current - 1)
-				count.current = images.length
-			}, 400)
-	}, [images])
+		if (!modal) {
+			prevImagesLengthRef.current = 0
+			return
+		}
+		if (!swiper) return
+
+		const len = images.length
+		const prevLen = prevImagesLengthRef.current
+
+		if (prevLen === 0) {
+			prevImagesLengthRef.current = len
+			return
+		}
+
+		if (len === prevLen) return
+
+		if (len < prevLen) {
+			prevImagesLengthRef.current = len
+			return
+		}
+
+		const delta = len - prevLen
+
+		const id = window.setTimeout(() => {
+			if (reverse) {
+				swiper.update()
+			} else {
+				const nextIndex = swiper.activeIndex + delta
+				const clamped = Math.max(0, Math.min(nextIndex, len - 1))
+				swiper.slideTo(clamped, 0)
+			}
+			prevImagesLengthRef.current = len
+		}, 0)
+
+		return () => clearTimeout(id)
+	}, [modal, images.length, reverse, swiper])
 
 	return (
 		<div
-			style={{
-				position: 'fixed',
-				zIndex: 1201,
-				top: 0,
-				left: 0,
-				width: '100%',
-				height: '100%',
-				display: modal ? 'block' : 'none',
-			}}
+			className={c(overlayStyles.overlay, modal && overlayStyles.overlayVisible)}
 			onClick={() => setModal(false)}
 		>
-			<div
-				style={{
-					position: 'absolute',
-					zIndex: 101,
-					width: '100%',
-					height: '100%',
-					backgroundColor: '#000000',
-					opacity: 0.9,
-				}}
-			></div>
+			<div className={overlayStyles.backdrop} />
 			<div className={styles.actions}>
 				<div>
 					<svg