diff --git a/app/components/DialogsList/DialogsList.tsx b/app/components/DialogsList/DialogsList.tsx
index 275a1bc..97c8ab2 100644
--- a/app/components/DialogsList/DialogsList.tsx
+++ b/app/components/DialogsList/DialogsList.tsx
@@ -4,7 +4,7 @@ import animationData from './lottie.json';
 import { Box, Flex, Skeleton, Text } from "@mantine/core";
 import { useDialogsList } from "@/app/providers/DialogListProvider/useDialogsList";
 import { GroupDialog } from "../GroupDialog/GroupDialog";
-import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
 
 interface DialogsListProps {
 	mode: 'all' | 'requests';
@@ -13,6 +13,7 @@ interface DialogsListProps {
 
 export function DialogsList(props : DialogsListProps) {
 	const {dialogs, loadingDialogs} = useDialogsList();
+	const filteredDialogs = dialogs.filter(v => (v.is_request == (props.mode == 'requests')));
 
 	return (
 		<>
@@ -36,21 +37,30 @@ export function DialogsList(props : DialogsListProps) {
 					))}				
 				</>
 			)}
-			{loadingDialogs === 0 && dialogs.filter(v => (v.is_request == (props.mode == 'requests'))).map((dialog) => (
-				<React.Fragment key={dialog.dialog_id}>
-					{dialog.dialog_id.startsWith('#group:') ? (
-						<GroupDialog
-							onClickDialog={props.onSelectDialog}
-							{...dialog}
-						/>
-					) : (
-						<Dialog
-							onClickDialog={props.onSelectDialog}
-							{...dialog}
-						/>
-					)}
-				</React.Fragment>
-			))}
+            <motion.div style={{display: 'flex', flexDirection: 'column'}}>
+                <AnimatePresence mode="popLayout">
+                    {loadingDialogs === 0 && filteredDialogs.map((dialog) => (
+                        <motion.div
+                            key={dialog.dialog_id}
+                            layout
+                            initial={false}
+                            transition={{ duration: 0.1, ease: 'easeInOut' }}
+                        >
+                            {dialog.dialog_id.startsWith('#group:') ? (
+                                <GroupDialog
+                                    onClickDialog={props.onSelectDialog}
+                                    {...dialog}
+                                />
+                            ) : (
+                                <Dialog
+                                    onClickDialog={props.onSelectDialog}
+                                    {...dialog}
+                                />
+                            )}
+                        </motion.div>
+                    ))}
+                </AnimatePresence>
+            </motion.div>
 		</>
 	);
 }
\ No newline at end of file