@@ -1,12 +1,26 @@
-import { MutableRefObject, useEffect, useRef, useState } from 'react'
+import { MutableRefObject } from 'react'
 
 export function useGenerallScroll(containerRef: MutableRefObject<HTMLDivElement | null>) {
-	function scrollToBottom() {
+	function scrollToBottomSmooth() {
 		if (!containerRef.current) return
-		containerRef.current.style.transform = `translateY(0px)`
-	}
+		const el = containerRef.current
+		const start = el.scrollTop
+		const end = el.scrollHeight - el.clientHeight
+		const duration = 1800
+		let startTime: number | null = null
 
-	return {
-		scrollToBottom,
+		function animateScroll(timestamp: number) {
+			if (!startTime) startTime = timestamp
+			const elapsed = timestamp - startTime
+			const progress = Math.min(elapsed / duration, 1)
+			el.scrollTop = start + (end - start) * progress
+			if (progress < 1) {
+				requestAnimationFrame(animateScroll)
+			} else {
+				el.scrollTop = end
+			}
+		}
+		requestAnimationFrame(animateScroll)
 	}
+	return { scrollToBottomSmooth }
 }
@@ -1,11 +1,12 @@
-import { AsyncQueue } from '#/shared/classes'
+// import { AsyncQueue } from '#/shared/classes'
 import {
+	MouseEvent,
 	MutableRefObject,
+	TouchEvent,
 	useCallback,
 	useEffect,
 	useRef,
 	useState,
-	TouchEvent,
 	WheelEventHandler,
 } from 'react'
 
@@ -21,9 +22,13 @@ export function useListenersWheel(
 	const velocityRef = useRef(0)
 	const animationFrameRef = useRef<number | null>(null)
 
-	const asyncQueue = new AsyncQueue()
-
 	const [draggbleHeight, setDraggbleHeight] = useState(100)
+	const isDraggingRef = useRef(false)
+	const startDragYRef = useRef(0)
+	const startTranslateYRef = useRef(0)
+
+	const targetTranslateYRef = useRef(0)
+	const animationFrameScrollRef = useRef<number | null>(null)
 
 	function defineDraggbleHeight() {
 		const container = containerRef.current
@@ -91,24 +96,45 @@ export function useListenersWheel(
 		step()
 	}, [applyTransform, clampTranslateY])
 
+	function animateToTarget() {
+		if (!containerRef.current || !scrollRef.current) return
+		clampTranslateY()
+		const diff = targetTranslateYRef.current - translateYRef.current
+		if (Math.abs(diff) < 1) {
+			translateYRef.current = targetTranslateYRef.current
+			applyTransform()
+			animationFrameScrollRef.current = null
+			return
+		}
+		translateYRef.current += diff * 0.015
+		clampTranslateY()
+		applyTransform()
+		animationFrameScrollRef.current = requestAnimationFrame(animateToTarget)
+	}
+
 	const onWheelCallback = useCallback<WheelEventHandler>(
-		(e) => {
+		async (e) => {
 			if (preventScroll.current) return
+			const scrollSpeed = 0.5
+			const deltaY = e.deltaY * scrollSpeed
 
-			for (const num of Array.from({ length: Math.abs(e.deltaY) }, (_, index) =>
-				e.deltaY > 0 ? index + 1 : -(index + 1)
-			)) {
-				asyncQueue.push(async () => {
-					requestAnimationFrame(async () => {
-						translateYRef.current -= num
-						onScrolling && onScrolling(translateYRef.current)
-						clampTranslateY()
-						applyTransform()
-						defineDraggbleHeight()
-						preventScroll.current = false
-					})
-				})
+			translateYRef.current -= deltaY
+			clampTranslateY()
+			applyTransform()
+
+			if (animationFrameScrollRef.current) {
+				cancelAnimationFrame(animationFrameScrollRef.current)
+				animationFrameScrollRef.current = null
+			}
+			if (animationFrameRef.current) {
+				cancelAnimationFrame(animationFrameRef.current)
+				animationFrameRef.current = null
 			}
+
+			defineDraggbleHeight()
+			targetTranslateYRef.current = translateYRef.current
+
+			onScrolling && onScrolling(translateYRef.current)
 		},
 		[clampTranslateY, applyTransform]
 	)
@@ -161,6 +187,96 @@ export function useListenersWheel(
 		// animateInertia()
 	}, [animateInertia])
 
+	const handleThumbnailClick = useCallback(
+		(e: MouseEvent<HTMLDivElement>) => {
+			if (isDraggingRef.current) return
+
+			const scroll = scrollRef.current
+			const draggable = draggbleRef.current
+			const container = containerRef.current
+
+			if (!scroll || !draggable || !container) return
+
+			const thumbnailRect = e.currentTarget.getBoundingClientRect()
+			const clickPosition = e.clientY - thumbnailRect.top
+			const thumbHeight = draggable.clientHeight
+
+			const newThumbPosition = Math.max(
+				0,
+				Math.min(clickPosition - thumbHeight / 2, scroll.clientHeight - thumbHeight)
+			)
+
+			const proportion = scroll.clientHeight / container.clientHeight
+			translateYRef.current = (scroll.clientHeight - newThumbPosition - thumbHeight) / proportion
+
+			clampTranslateY()
+			applyTransform()
+
+			onScrolling && onScrolling(translateYRef.current)
+		},
+		[clampTranslateY, applyTransform]
+	)
+
+	const handleThumbMouseDown = useCallback(
+		(e: MouseEvent<HTMLDivElement>) => {
+			e.preventDefault()
+			e.stopPropagation()
+
+			isDraggingRef.current = true
+			startDragYRef.current = e.clientY
+			startTranslateYRef.current = translateYRef.current
+
+			if (animationFrameScrollRef.current) {
+				cancelAnimationFrame(animationFrameScrollRef.current)
+				animationFrameScrollRef.current = null
+			}
+
+			const handleMouseMove = (moveEvent: MouseEvent) => {
+				if (!isDraggingRef.current) return
+
+				const scroll = scrollRef.current
+				const container = containerRef.current
+				if (!scroll || !container) return
+
+				const deltaY = moveEvent.clientY - startDragYRef.current
+				const proportion = scroll.clientHeight / container.clientHeight
+
+				translateYRef.current = startTranslateYRef.current - deltaY / proportion
+				clampTranslateY()
+				targetTranslateYRef.current = translateYRef.current
+				applyTransform()
+
+				onScrolling && onScrolling(translateYRef.current)
+			}
+
+			const handleMouseUp = () => {
+				isDraggingRef.current = false
+				document.removeEventListener('mousemove', handleMouseMove as any)
+				document.removeEventListener('mouseup', handleMouseUp)
+			}
+
+			document.addEventListener('mousemove', handleMouseMove as any)
+			document.addEventListener('mouseup', handleMouseUp)
+		},
+		[clampTranslateY, applyTransform]
+	)
+
+	function scrollToBottom() {
+		const container = containerRef.current
+		const scroll = scrollRef.current
+		if (!container || !scroll) return
+
+		const maxScroll = container.clientHeight - scroll.clientHeight
+		targetTranslateYRef.current = -maxScroll
+		if (targetTranslateYRef.current > 0) targetTranslateYRef.current = 0
+		clampTranslateY()
+		if (!animationFrameScrollRef.current) {
+			animationFrameScrollRef.current = requestAnimationFrame(animateToTarget)
+		}
+    
+		onScrolling && onScrolling(0)
+	}
+
 	return {
 		onWheelCallback,
 		preventScroll,
@@ -169,5 +285,9 @@ export function useListenersWheel(
 		handleTouchStart,
 		handleTouchMove,
 		handleTouchEnd,
+		handleThumbnailClick,
+		handleThumbMouseDown,
+		isDraggingRef,
+		scrollToBottom,
 	}
 }
@@ -1,50 +1,61 @@
-import React, {
-	Children,
-	MutableRefObject,
-	TouchEvent,
-	forwardRef,
-	useEffect,
-	useImperativeHandle,
-	useMemo,
-	useRef,
-} from 'react'
-import styles from './common-scrollbar.module.scss'
-import { c } from '#/shared/lib/helpers'
+import React, { forwardRef, useImperativeHandle, useMemo, useRef, useEffect } from 'react'
+
 import { useHovered, useListenersThumbnail, useListenersWheel } from '../model'
 import { useGenerallScroll } from '../model/use-generall-scroll'
 
+import styles from './common-scrollbar.module.scss'
+
+import { c } from '#/shared/lib/helpers'
+
 interface CommonScrollbarProps extends React.HTMLAttributes<HTMLDivElement> {
 	blockedScrollTop?: boolean
-	
+	onScrolling?: (y: number) => void
 }
 
 export interface CommonScrollbarRef extends HTMLDivElement {
 	scrollToBottom: () => void
-	getContainer: () => HTMLDivElement | null
 }
 
 export const CommonScrollbar = forwardRef<CommonScrollbarRef, CommonScrollbarProps>(
 	({ children, className, blockedScrollTop = false, onScrolling, ...props }, ref) => {
 		const containerRef = useRef<HTMLDivElement | null>(null)
-
 		const localRef = useRef<HTMLDivElement | null>(null)
 
-		const { scrollToBottom } = useGenerallScroll(containerRef)
-
 		const { draggbleRef } = useListenersThumbnail()
 
 		const { onMounseEnter, onMouseLeave, hovered } = useHovered()
 
-		const { onWheelCallback, draggbleHeight, handleTouchStart, handleTouchMove, translateYRef } =
-			useListenersWheel(containerRef, draggbleRef, localRef, onScrolling)
-
-		const translate = useMemo(() => translateYRef.current, [translateYRef])
+		const {
+			onWheelCallback,
+			draggbleHeight,
+			handleTouchStart,
+			handleTouchMove,
+			translateYRef,
+			handleThumbnailClick,
+			handleThumbMouseDown,
+			scrollToBottom,
+		} = useListenersWheel(containerRef, draggbleRef, localRef, onScrolling)
 
 		useImperativeHandle(ref, () => ({
 			...localRef.current!,
 			scrollToBottom,
 		}))
 
+		useEffect(() => {
+			const node = localRef.current
+			if (!node) return
+
+			function wheelHandler(e: WheelEvent) {
+				e.preventDefault()
+				onWheelCallback(e as any)
+			}
+			node.addEventListener('wheel', wheelHandler, { passive: false })
+
+			return () => {
+				node.removeEventListener('wheel', wheelHandler)
+			}
+		}, [onWheelCallback])
+
 		return (
 			<div
 				ref={localRef}
@@ -56,13 +67,17 @@ export const CommonScrollbar = forwardRef<CommonScrollbarRef, CommonScrollbarPro
 				className={c(styles.scroll, className)}
 				{...props}
 			>
-				<div className={c(styles.scroll__thumbnail, hovered && styles.scroll__thumbnail_visible)}>
+				<div
+					className={c(styles.scroll__thumbnail, hovered && styles.scroll__thumbnail_visible)}
+					onClick={handleThumbnailClick}
+				>
 					<div
 						ref={draggbleRef}
 						style={{
 							height: draggbleHeight + '%',
 						}}
 						className={styles.scroll__draggble}
+						onMouseDown={handleThumbMouseDown}
 					></div>
 				</div>
 				<div
@@ -19,8 +19,26 @@
 	padding-top: 30px;
 }
 
-.scrollDown_icon svg {
+.messages {
 	position: relative;
+	height: 100%;
+}
+
+.bottom {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--air-color);
+	border-radius: 100%;
+	width: 36px;
+	position: absolute;
+	bottom: 20px;
 	left: 50%;
-	bottom: 80px;
+	transform: translateY(-50%);
+	height: 36px;
+
+  svg{
+    position: relative;
+    top: 1px;
+  }
 }
@@ -16,6 +16,7 @@ import { ImageModal } from '#/features/image-modal'
 import { useChatMessageImage } from '../model/use-chat-message-image'
 import { useModelInputStore } from '#/features/model-input/model'
 import { useChatWindowContext } from '#/widgets/chat-window/model'
+import ArrowDownSvg from '#/assets/svg/arrow-down.svg?react'
 
 interface IMessagesList {
 	model: Model | null
@@ -58,7 +59,7 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(({ model }) => {
 	}
 
 	return (
-		<>
+		<div className={styles.messages}>
 			<ClientOnly>
 				{createPortal(
 					<ImageModal
@@ -120,18 +121,13 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(({ model }) => {
 				</CSSTransition>
 			</SwitchTransition>
 
-			<div className={styles.scrollDown_icon}>
-				<svg width='36' height='36' viewBox='0 0 36 36' fill='none'>
-					<rect width='36' height='36' rx='18' fill='#7F7DF3' />
-					<path
-						d='M25 16L18 23L11 16'
-						stroke='white'
-						strokeWidth='2'
-						strokeLinecap='round'
-						strokeLinejoin='round'
-					/>
-				</svg>
-			</div>
-		</>
+			<button
+				style={{ visibility: translate > 200 ? 'visible' : 'hidden' }}
+				onClick={() => sContainer.current?.scrollToBottom()}
+				className={styles.bottom}
+			>
+				<ArrowDownSvg color='white' width={15} height={15} />
+			</button>
+		</div>
 	)
 })