diff --git a/frontend/src/libs/components/card/card.tsx b/frontend/src/libs/components/card/card.tsx
index e7b5c8d4d..e9ef14bca 100644
--- a/frontend/src/libs/components/card/card.tsx
+++ b/frontend/src/libs/components/card/card.tsx
@@ -1,7 +1,7 @@
 import { Button, Icon } from '#libs/components/components.js';
 import { type IconColor } from '#libs/enums/enums.js';
 import { getValidClassNames } from '#libs/helpers/helpers.js';
-import { useCallback } from '#libs/hooks/hooks.js';
+import { forwardRef, useCallback } from '#libs/hooks/hooks.js';
 import { type IconName, type ValueOf } from '#libs/types/types.js';
 
 import styles from './styles.module.scss';
@@ -19,18 +19,24 @@ type Properties = {
   onIconClick?: () => void;
 };
 
-const Card: React.FC<Properties> = ({
-  title,
-  imageUrl,
-  onClick,
-  isActive = false,
-  iconName,
-  iconRight,
-  iconWidth,
-  iconHeight,
-  onIconClick,
-  iconColor,
-}) => {
+const Card: React.ForwardRefRenderFunction<
+  HTMLDivElement | null,
+  Properties
+> = (
+  {
+    title,
+    imageUrl,
+    onClick,
+    isActive = false,
+    iconName,
+    iconRight,
+    iconWidth,
+    iconHeight,
+    onIconClick,
+    iconColor,
+  },
+  reference,
+) => {
   const hasNoImageOrIcon = !imageUrl && !iconName;
   const hasImage = Boolean(imageUrl);
   const hasIcon = Boolean(iconName);
@@ -45,7 +51,7 @@ const Card: React.FC<Properties> = ({
   );
 
   return (
-    <div className={styles['container']}>
+    <div ref={reference} className={styles['container']}>
       <button
         className={getValidClassNames(
           styles['item'],
@@ -97,4 +103,6 @@ const Card: React.FC<Properties> = ({
   );
 };
 
-export { Card };
+const ForwardedCard = forwardRef(Card);
+
+export { ForwardedCard as Card };
diff --git a/frontend/src/pages/chat/components/chat-sidebar/chat-sidebar.tsx b/frontend/src/pages/chat/components/chat-sidebar/chat-sidebar.tsx
index a446646af..f551f6580 100644
--- a/frontend/src/pages/chat/components/chat-sidebar/chat-sidebar.tsx
+++ b/frontend/src/pages/chat/components/chat-sidebar/chat-sidebar.tsx
@@ -8,7 +8,7 @@ import {
   SidebarBody,
   SidebarHeader,
 } from '#libs/components/components.js';
-import { AppRoute, IconColor } from '#libs/enums/enums.js';
+import { AppRoute, DataStatus, IconColor } from '#libs/enums/enums.js';
 import { getUrlWithQueryString } from '#libs/helpers/helpers.js';
 import {
   useAppDispatch,
@@ -41,11 +41,14 @@ const ChatSidebar: React.FC<Properties> = ({
   const { id } = useParams<{ id: string }>();
   const dispatch = useAppDispatch();
   const [chatToDelete, setChatToDelete] = useState<null | number>(null);
+  const [isChatsLoaded, setIsChatsLoaded] = useState(false);
   const dialogReference = useRef<HTMLDialogElement>(null);
+  const selectedChatReference = useRef<HTMLDivElement | null>(null);
 
-  const { chats } = useAppSelector(({ chats }) => {
+  const { chats, chatsDataStatus } = useAppSelector(({ chats }) => {
     return {
       chats: chats.chats,
+      chatsDataStatus: chats.chatsDataStatus,
     };
   });
 
@@ -57,6 +60,16 @@ const ChatSidebar: React.FC<Properties> = ({
     void dispatch(chatsActions.getAllChats(filter));
   }, [dispatch, filter]);
 
+  useEffect(() => {
+    if (chatsDataStatus === DataStatus.FULFILLED) {
+      setIsChatsLoaded(true);
+    }
+  }, [chatsDataStatus, setIsChatsLoaded]);
+
+  if (selectedChatReference.current && !isChatsLoaded) {
+    selectedChatReference.current.scrollIntoView({ behavior: 'instant' });
+  }
+
   const handleSelectChat = useCallback(() => {
     onSetIsSidebarShow(false);
   }, [onSetIsSidebarShow]);
@@ -109,6 +122,7 @@ const ChatSidebar: React.FC<Properties> = ({
                   to={getUrlWithQueryString(chatLink, { query: filter })}
                 >
                   <Card
+                    ref={String(chat.id) === id ? selectedChatReference : null}
                     title={chat.name}
                     imageUrl={chat.imageUrl ?? cardPlaceholder}
                     onClick={handleSelectChat}