diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx
index 89cec35481..4a57238d09 100644
--- a/src/pages/common/components/ChatComponent/ChatComponent.tsx
+++ b/src/pages/common/components/ChatComponent/ChatComponent.tsx
@@ -688,6 +688,7 @@ export default function ChatComponent({
           shouldReinitializeEditor={shouldReinitializeEditor}
           onClearFinished={onClearFinished}
           scrollSelectionIntoView={emptyFunction}
+          groupChat={chatChannel && chatChannel?.participants.length > 2}
         />
         <button
           className={styles.sendIcon}
diff --git a/src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts b/src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts
index d3250725db..b95786e0bb 100644
--- a/src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts
+++ b/src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts
@@ -39,7 +39,10 @@ export const useDiscussionChatAdapter = (options: Options): Return => {
   const userId = user?.uid;
   const { data: commonMembers, fetchCommonMembers } = useCommonMembers();
 
-  const allUsers = useMemo(() => commonMembers.map(({ user }) => user), [commonMembers]);
+  const allUsers = useMemo(
+    () => commonMembers.map(({ user }) => user),
+    [commonMembers],
+  );
 
   const discussionUsers = useMemo(
     () => allUsers.filter((user) => user.uid !== userId),
diff --git a/src/pages/common/components/FeedItem/context.ts b/src/pages/common/components/FeedItem/context.ts
index bc4db7e5c2..0f4ee81c2e 100644
--- a/src/pages/common/components/FeedItem/context.ts
+++ b/src/pages/common/components/FeedItem/context.ts
@@ -44,9 +44,12 @@ export interface FeedItemBaseContentProps {
   hasImages?: boolean;
   isLoading?: boolean;
   shouldHideBottomContent?: boolean;
-  dmUserId?: string;
+  dmUserIds?: string[];
   hasUnseenMention?: boolean;
   notion?: CommonNotion;
+  isGroupMessage?: boolean;
+  createdBy?: string;
+  hoverTitle?: string;
 }
 
 export interface GetLastMessageOptions {
diff --git a/src/pages/commonFeed/components/FeedLayout/components/ProfileContent/ProfileContent.tsx b/src/pages/commonFeed/components/FeedLayout/components/ProfileContent/ProfileContent.tsx
index 99b64f0d26..75cdeaaceb 100644
--- a/src/pages/commonFeed/components/FeedLayout/components/ProfileContent/ProfileContent.tsx
+++ b/src/pages/commonFeed/components/FeedLayout/components/ProfileContent/ProfileContent.tsx
@@ -83,7 +83,7 @@ const ProfileContent: FC<ProfileContentProps> = (props) => {
     if (onDMClick) {
       onDMClick();
     } else {
-      fetchDMUserChatChannel(userId);
+      fetchDMUserChatChannel([userId]);
     }
   };
 
diff --git a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx b/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx
index 9d9880c345..0ea4493747 100644
--- a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx
+++ b/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx
@@ -1,15 +1,19 @@
-import React, { FC, useCallback, useEffect } from "react";
+import React, { FC, useCallback, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { useChatContext } from "@/pages/common/components/ChatComponent";
 import { UserAvatar } from "@/shared/components";
 import { LastSeenEntity } from "@/shared/constants";
 import { ChatChannelToDiscussionConverter } from "@/shared/converters";
-import { useChatChannelUserStatus, useUserById } from "@/shared/hooks/useCases";
+import {
+  useChatChannelUserStatus,
+  useUsersByIds,
+} from "@/shared/hooks/useCases";
 import { useIsTabletView } from "@/shared/hooks/viewport";
+import { GroupChatIcon } from "@/shared/icons";
 import { ChatChannelFeedLayoutItemProps } from "@/shared/interfaces";
 import { ChatChannel } from "@/shared/models";
-import { getUserName } from "@/shared/utils";
+import { getUserName, joinWithLast } from "@/shared/utils";
 import { inboxActions } from "@/store/states";
 import { FeedItemBaseContent } from "../FeedItemBaseContent";
 import { useChatChannelSubscription, useMenuItems } from "./hooks";
@@ -19,7 +23,7 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
   const { chatChannel, isActive, onActiveItemDataChange } = props;
   const dispatch = useDispatch();
   const isTabletView = useIsTabletView();
-  const { fetchUser: fetchDMUser, data: dmUser } = useUserById();
+  const { fetchUsers: fetchDMUsers, data: dmUsers } = useUsersByIds();
   const {
     data: chatChannelUserStatus,
     fetched: isChatChannelUserStatusFetched,
@@ -30,14 +34,23 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
     useChatContext();
   const user = useSelector(selectUser());
   const userId = user?.uid;
-  const dmUserId =
-    chatChannel.participants.length === 1
-      ? chatChannel.participants[0]
-      : chatChannel.participants.filter(
-          (participant) => participant !== userId,
-        )[0];
-  const dmUserName = getUserName(dmUser);
-  const finalTitle = dmUserName;
+
+  const isGroupMessage = chatChannel.participants.length > 2;
+  const dmUserIds = useMemo(
+    () =>
+      chatChannel.participants.filter((participant) => participant !== userId),
+    [],
+  );
+
+  const dmUsersNames = dmUsers?.map((user) => getUserName(user));
+  const dmFirstNames = dmUsers?.map((user) => user.firstName);
+  const finalTitle = joinWithLast(isGroupMessage ? dmFirstNames : dmUsersNames);
+  const hoverTitle = isGroupMessage ? joinWithLast(dmUsersNames) : finalTitle;
+  const groupChatCreatorName = getUserName(
+    chatChannel.createdBy === user?.uid
+      ? user
+      : dmUsers?.find((user) => user.uid === chatChannel.createdBy),
+  );
 
   const handleOpenChat = useCallback(() => {
     setChatItem({
@@ -70,20 +83,23 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
     [dispatch],
   );
 
-  const renderImage = (className?: string) => (
-    <UserAvatar
-      className={className}
-      photoURL={dmUser?.photoURL}
-      nameForRandomAvatar={dmUserName}
-      userName={dmUserName}
-    />
-  );
+  const renderImage = (className?: string) =>
+    isGroupMessage ? (
+      <GroupChatIcon className={className} />
+    ) : (
+      <UserAvatar
+        className={className}
+        photoURL={dmUsers?.[0]?.photoURL}
+        nameForRandomAvatar={dmUsersNames?.[0]}
+        userName={dmUsersNames?.[0]}
+      />
+    );
 
   useChatChannelSubscription(chatChannel.id, userId, handleChatChannelUpdate);
 
   useEffect(() => {
-    fetchDMUser(dmUserId);
-  }, [dmUserId]);
+    fetchDMUsers(dmUserIds); // dm users not including the current user.
+  }, [dmUserIds]);
 
   useEffect(() => {
     fetchChatChannelUserStatus({
@@ -104,14 +120,14 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
   }, [isChatChannelUserStatusFetched, shouldAllowChatAutoOpen]);
 
   useEffect(() => {
-    if (isActive && finalTitle) {
+    if (isActive && finalTitle && dmUsersNames) {
       onActiveItemDataChange?.({
         itemId: chatChannel.id,
-        title: finalTitle,
-        image: dmUser?.photoURL,
+        title: dmUsersNames?.[0],
+        image: dmUsers?.[0]?.photoURL,
       });
     }
-  }, [isActive, finalTitle, dmUser?.photoURL]);
+  }, [isActive, finalTitle, dmUsers?.[0]?.photoURL, dmUsersNames?.[0]]);
 
   return (
     <FeedItemBaseContent
@@ -129,7 +145,10 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
       ownerId={userId}
       renderImage={renderImage}
       isImageRounded
-      dmUserId={dmUserId}
+      dmUserIds={dmUserIds}
+      isGroupMessage={isGroupMessage}
+      createdBy={groupChatCreatorName}
+      hoverTitle={hoverTitle}
     />
   );
 };
diff --git a/src/pages/inbox/components/DirectMessageButton/DirectMessageButton.module.scss b/src/pages/inbox/components/DirectMessageButton/DirectMessageButton.module.scss
deleted file mode 100644
index 9ab56607c3..0000000000
--- a/src/pages/inbox/components/DirectMessageButton/DirectMessageButton.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.icon {
-  width: 1rem;
-  height: 1rem;
-}
diff --git a/src/pages/inbox/components/DirectMessageButton/DirectMessageButton.tsx b/src/pages/inbox/components/DirectMessageButton/DirectMessageButton.tsx
deleted file mode 100644
index 60d165e98c..0000000000
--- a/src/pages/inbox/components/DirectMessageButton/DirectMessageButton.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { ComponentType, FC } from "react";
-import { useModal } from "@/shared/hooks";
-import { Message2Icon } from "@/shared/icons";
-import { Button, ButtonIcon, ButtonSize, ButtonVariant } from "@/shared/ui-kit";
-import { DirectMessageModal } from "./components";
-import styles from "./DirectMessageButton.module.scss";
-
-interface DirectMessageButtonProps {
-  className?: string;
-  isMobileVersion?: boolean;
-  ButtonComponent?: ComponentType<{
-    className?: string;
-    isMobileVersion?: boolean;
-    onClick?: () => void;
-  }>;
-}
-
-const DirectMessageButton: FC<DirectMessageButtonProps> = (props) => {
-  const { className, isMobileVersion = false, ButtonComponent } = props;
-  const {
-    isShowing: isDirectMessageModalOpen,
-    onOpen: onDirectMessageModalOpen,
-    onClose: onDirectMessageModalClose,
-  } = useModal(false);
-  const buttonVariant = ButtonVariant.OutlineDarkPink;
-  const iconEl = <Message2Icon className={styles.icon} />;
-  const buttonEl =
-    (ButtonComponent && (
-      <ButtonComponent
-        className={className}
-        isMobileVersion={isMobileVersion}
-        onClick={onDirectMessageModalOpen}
-      />
-    )) ||
-    (isMobileVersion ? (
-      <ButtonIcon
-        className={className}
-        variant={buttonVariant}
-        onClick={onDirectMessageModalOpen}
-      >
-        {iconEl}
-      </ButtonIcon>
-    ) : (
-      <Button
-        className={className}
-        variant={buttonVariant}
-        size={ButtonSize.Xsmall}
-        leftIcon={iconEl}
-        onClick={onDirectMessageModalOpen}
-      >
-        Direct message
-      </Button>
-    ));
-
-  return (
-    <>
-      {buttonEl}
-      <DirectMessageModal
-        isOpen={isDirectMessageModalOpen}
-        onClose={onDirectMessageModalClose}
-        isMobileVersion={isMobileVersion}
-      />
-    </>
-  );
-};
-
-export default DirectMessageButton;
diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss
index 43be3e5158..9b167783f2 100644
--- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss
+++ b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss
@@ -7,6 +7,7 @@
   max-height: 29.25rem;
   border-radius: 0;
   box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
+  height: 37rem;
 
   :global(.modal__header-wrapper--with-modal-padding) {
     .modalHeader {
@@ -19,10 +20,6 @@
     padding: 0 1.5rem;
   }
 
-  .modalContent {
-    padding: 0;
-  }
-
   .modalCloseWrapper {
     top: 0.5rem;
     margin: 0;
@@ -31,6 +28,7 @@
   @include tablet {
     max-width: unset;
     max-height: unset;
+    height: 100%;
   }
 }
 
@@ -82,3 +80,22 @@
 .userItem {
   padding: 0.375rem 1.75rem;
 }
+
+.optionWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.userAvatar {
+  margin-right: 0.75rem;
+}
+
+.searchIcon {
+  margin-right: 0.5rem;
+}
+
+.createGroupChatButton {
+  margin-left: auto;
+  margin-top: 1rem;
+  width: 10rem;
+}
diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx
index 9222d8c96f..8aee666fce 100644
--- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx
+++ b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx
@@ -1,36 +1,42 @@
-import React, {
-  FC,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { FC, ReactElement, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
-import { Modal } from "@/shared/components";
-import { KeyboardKeys } from "@/shared/constants";
+import Select, { components } from "react-select";
+import { Modal, UserAvatar } from "@/shared/components";
 import { useDMUserChatChannel } from "@/shared/hooks/useCases";
-import { DMUser } from "@/shared/interfaces";
-import { Loader, SearchInput } from "@/shared/ui-kit";
+import useThemeColor from "@/shared/hooks/useThemeColor";
+import { useIsTabletView } from "@/shared/hooks/viewport";
+import { SearchIcon } from "@/shared/icons";
+import { Button, ButtonVariant, Loader } from "@/shared/ui-kit";
 import { emptyFunction } from "@/shared/utils";
 import { inboxActions } from "@/store/states";
-import { DirectMessageUserItem } from "./components";
 import { useDMUsers } from "./hooks";
+import { selectorStyles } from "./selectorStyles";
 import styles from "./DirectMessageModal.module.scss";
 
 interface DirectMessageModalProps {
   isOpen: boolean;
   onClose: () => void;
   isMobileVersion?: boolean;
+  isGroupMessage?: boolean;
+}
+
+interface SelectOption {
+  value: string;
+  label: JSX.Element;
+  shortLabel: string;
+  uid: string;
 }
 
 const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
-  const { isOpen, onClose, isMobileVersion = false } = props;
+  const {
+    isOpen,
+    onClose,
+    isMobileVersion = false,
+    isGroupMessage = false,
+  } = props;
   const dispatch = useDispatch();
-  const listRef = useRef<HTMLUListElement>(null);
-  const [searchText, setSearchText] = useState("");
-  const [activeItemIndex, setActiveItemIndex] = useState<number | null>(null);
+  const { getThemeColor } = useThemeColor();
+  const isTabletView = useIsTabletView();
   const {
     loading: areDMUsersLoading,
     dmUsers,
@@ -44,51 +50,10 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
     resetDMUserChatChannel,
     error: isChannelLoadedWithError,
   } = useDMUserChatChannel();
-  const filteredDMUsers = useMemo(() => {
-    if (!searchText) {
-      return dmUsers;
-    }
-
-    const lowerCasedSearchText = searchText.toLowerCase();
-
-    return dmUsers.filter((item) =>
-      item.userName.toLowerCase().startsWith(lowerCasedSearchText),
-    );
-  }, [dmUsers, searchText]);
-  const totalUsersAmount = filteredDMUsers.length;
+  const [groupUids, setGroupUids] = useState<string[]>([]);
 
-  const handleArrowUp = useCallback(() => {
-    setActiveItemIndex((currentIndex) => {
-      if (totalUsersAmount === 0) {
-        return null;
-      }
-      if (currentIndex === null) {
-        return totalUsersAmount - 1;
-      }
-
-      const nextIndex = currentIndex - 1;
-
-      return nextIndex < 0 ? totalUsersAmount - 1 : nextIndex;
-    });
-  }, [totalUsersAmount]);
-
-  const handleArrowDown = useCallback(() => {
-    setActiveItemIndex((currentIndex) => {
-      if (totalUsersAmount === 0) {
-        return null;
-      }
-      if (currentIndex === null) {
-        return 0;
-      }
-
-      const nextIndex = currentIndex + 1;
-
-      return nextIndex >= totalUsersAmount ? 0 : nextIndex;
-    });
-  }, [totalUsersAmount]);
-
-  const handleUserItemClick = (item: DMUser) => {
-    fetchDMUserChatChannel(item.uid);
+  const handleChatCreate = (uids: string[]) => {
+    fetchDMUserChatChannel(uids);
   };
 
   useEffect(() => {
@@ -97,77 +62,9 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
       return;
     }
 
-    setActiveItemIndex(null);
-    setSearchText("");
     resetDMUserChatChannel();
   }, [isOpen]);
 
-  useEffect(() => {
-    setActiveItemIndex(null);
-  }, [searchText]);
-
-  useEffect(() => {
-    if (activeItemIndex !== null) {
-      const listElement = listRef.current?.children.item(activeItemIndex);
-      listElement?.scrollIntoView(false);
-    }
-  }, [activeItemIndex]);
-
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-
-    const handler = (event: KeyboardEvent) => {
-      const key = event.key as KeyboardKeys;
-
-      switch (key) {
-        case KeyboardKeys.ArrowUp:
-          handleArrowUp();
-          break;
-        case KeyboardKeys.ArrowDown:
-          handleArrowDown();
-          break;
-        default:
-          break;
-      }
-    };
-
-    window.addEventListener("keyup", handler);
-
-    return () => {
-      window.removeEventListener("keyup", handler);
-    };
-  }, [isOpen, handleArrowUp, handleArrowDown]);
-
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-
-    const handler = (event: KeyboardEvent) => {
-      const key = event.key as KeyboardKeys;
-
-      if (key !== KeyboardKeys.Enter) {
-        return;
-      }
-
-      const item = filteredDMUsers.find(
-        (dmUser, index) => index === activeItemIndex,
-      );
-
-      if (item) {
-        handleUserItemClick(item);
-      }
-    };
-
-    window.addEventListener("keyup", handler);
-
-    return () => {
-      window.removeEventListener("keyup", handler);
-    };
-  }, [isOpen, activeItemIndex, filteredDMUsers]);
-
   useEffect(() => {
     if (dmUserChatChannel) {
       dispatch(inboxActions.addChatChannelItem(dmUserChatChannel));
@@ -189,36 +86,70 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
       );
     }
 
-    if (totalUsersAmount === 0) {
+    if (dmUsers.length === 0) {
       return <p className={styles.infoText}>No users found</p>;
     }
 
-    return (
-      <ul ref={listRef} className={styles.itemList}>
-        {filteredDMUsers.map((item, index) => {
-          const isActive = index === activeItemIndex;
+    const options: SelectOption[] = dmUsers.map((user) => ({
+      value: user.userName,
+      label: (
+        <div className={styles.optionWrapper}>
+          <UserAvatar
+            className={styles.userAvatar}
+            photoURL={user.photoURL}
+            nameForRandomAvatar={user.userName}
+            userName={user.userName}
+          />
+          <span>{user.userName}</span>
+        </div>
+      ),
+      shortLabel: user.userName,
+      uid: user.uid,
+    }));
+
+    const handleItemClick = (selectedItems) => {
+      if (!isGroupMessage) {
+        handleChatCreate([selectedItems.uid]);
+      } else {
+        const uids = selectedItems.map((item) => item.uid);
+        setGroupUids(uids);
+      }
+    };
 
-          return (
-            <li
-              key={item.uid}
-              className={styles.item}
-              tabIndex={0}
-              role="button"
-              aria-pressed={isActive}
-              onFocus={() => setActiveItemIndex(index)}
-              onMouseDown={(event) => event.preventDefault()}
-              onClick={() => handleUserItemClick(item)}
-            >
-              <DirectMessageUserItem
-                className={styles.userItem}
-                image={item.photoURL}
-                name={item.userName}
-                isActive={isActive}
-              />
-            </li>
-          );
-        })}
-      </ul>
+    return (
+      <>
+        <Select
+          onChange={handleItemClick}
+          isMulti={isGroupMessage}
+          options={options}
+          placeholder="Search"
+          autoFocus
+          menuIsOpen
+          isSearchable
+          styles={selectorStyles(getThemeColor, isTabletView)}
+          components={{
+            DropdownIndicator: () => (
+              <SearchIcon className={styles.searchIcon} />
+            ),
+            IndicatorSeparator: () => null,
+            MultiValue: (props) => (
+              <components.MultiValue {...props}>
+                {props.data.shortLabel}
+              </components.MultiValue>
+            ),
+          }}
+        />
+        {isGroupMessage && (
+          <Button
+            onClick={() => handleChatCreate(groupUids)}
+            variant={ButtonVariant.PrimaryPink}
+            disabled={!groupUids.length}
+            className={styles.createGroupChatButton}
+          >
+            Create
+          </Button>
+        )}
+      </>
     );
   };
 
@@ -229,14 +160,9 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
       onClose={isChannelLoading ? emptyFunction : onClose}
       title={
         <div className={styles.modalTitleWrapper}>
-          <h3 className={styles.modalTitle}>Direct message</h3>
-          {!isChannelLoading && (
-            <SearchInput
-              value={searchText}
-              onChange={setSearchText}
-              autoFocus
-            />
-          )}
+          <h3 className={styles.modalTitle}>
+            {isGroupMessage ? "Group message" : "Direct message"}
+          </h3>
         </div>
       }
       isHeaderSticky
@@ -246,7 +172,6 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
         modalOverlay: styles.modalOverlay,
         headerWrapper: styles.modalHeaderWrapper,
         header: styles.modalHeader,
-        content: styles.modalContent,
         closeWrapper: styles.modalCloseWrapper,
       }}
     >
diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/DirectMessageUserItem.module.scss b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/DirectMessageUserItem.module.scss
deleted file mode 100644
index 63711d8b9b..0000000000
--- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/DirectMessageUserItem.module.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@import "../../../../../../../../constants";
-
-.container {
-  display: flex;
-  justify-content: space-between;
-  background-color: var(--primary-background);
-
-  &:hover {
-    background-color: var(--hover-fill);
-    cursor: pointer;
-  }
-}
-.containerActive {
-  background-color: $c-pink-active-btn;
-}
-
-.left,
-.right {
-  display: flex;
-  align-items: center;
-}
-
-.image {
-  width: 2.5rem;
-  height: 2.5rem;
-  margin-right: 0.5rem;
-  border-radius: 50%;
-  object-fit: cover;
-  box-sizing: border-box;
-}
-
-.name {
-  font-weight: 500;
-  font-size: $mobile-title;
-  color: var(--primary-text);
-}
-
-.lastActivity {
-  margin-right: 0.75rem;
-  font-size: $mobile-title;
-  line-height: 143%;
-  letter-spacing: 0.02em;
-  color: $c-gray-40;
-}
-
-.notificationsAmount {
-  padding: 0.125rem 0.375rem;
-  font-weight: 600;
-  font-size: $xxsmall-2;
-  color: $c-light-gray;
-  background-color: $c-pink-mention;
-  border-radius: 0.625rem;
-}
diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/DirectMessageUserItem.tsx b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/DirectMessageUserItem.tsx
deleted file mode 100644
index 7b94099291..0000000000
--- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/DirectMessageUserItem.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { FC } from "react";
-import classNames from "classnames";
-import { UserAvatar } from "@/shared/components";
-import { TimeAgo } from "@/shared/ui-kit";
-import styles from "./DirectMessageUserItem.module.scss";
-
-interface DirectMessageUserItemProps {
-  className?: string;
-  image: string;
-  name: string;
-  lastActivity?: number;
-  notificationsAmount?: number;
-  isActive?: boolean;
-}
-
-const DirectMessageUserItem: FC<DirectMessageUserItemProps> = (props) => {
-  const {
-    className,
-    image,
-    name,
-    lastActivity,
-    notificationsAmount,
-    isActive = false,
-  } = props;
-  const hasRightContent = Boolean(lastActivity || notificationsAmount);
-
-  return (
-    <div
-      className={classNames(styles.container, className, {
-        [styles.containerActive]: isActive,
-      })}
-    >
-      <div className={styles.left}>
-        <UserAvatar
-          className={styles.image}
-          photoURL={image}
-          nameForRandomAvatar={name}
-          userName={name}
-        />
-        <span className={styles.name}>{name}</span>
-      </div>
-      {hasRightContent && (
-        <div className={styles.right}>
-          {lastActivity && (
-            <span className={styles.lastActivity}>
-              Last activity: {<TimeAgo milliseconds={lastActivity} />}
-            </span>
-          )}
-          {Boolean(notificationsAmount) && (
-            <span className={styles.notificationsAmount}>
-              {notificationsAmount}
-            </span>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DirectMessageUserItem;
diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/index.ts b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/index.ts
deleted file mode 100644
index 7499a1ce38..0000000000
--- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DirectMessageUserItem } from "./DirectMessageUserItem";
diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/index.ts b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/index.ts
deleted file mode 100644
index 17634d24b9..0000000000
--- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./DirectMessageUserItem";
diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/selectorStyles.ts b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/selectorStyles.ts
new file mode 100644
index 0000000000..39587ac06f
--- /dev/null
+++ b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/selectorStyles.ts
@@ -0,0 +1,68 @@
+import { ThemeColors } from "@/shared/constants";
+
+export const selectorStyles = (
+  getThemeColor: (color: ThemeColors) => string,
+  isTabletView: boolean,
+) => {
+  return {
+    container: (provided) => ({ ...provided, width: "100%" }),
+    menu: (provided) => ({
+      ...provided,
+      boxShadow: "none",
+      marginTop: 0,
+      backgroundColor: "transparent",
+      position: "relative",
+    }),
+    menuPortal: (provided) => ({ ...provided, zIndex: 10000 }),
+    menuList: (provided) => ({
+      ...provided,
+      maxHeight: isTabletView ? "calc(100vh - 15rem)" : "15rem", // TODO: temporary - need to handle the height better.
+    }),
+    control: (provided) => ({
+      ...provided,
+      minHeight: "3rem",
+      width: "100%",
+      backgroundColor: getThemeColor(ThemeColors.secondaryBackground),
+      color: getThemeColor(ThemeColors.primaryText),
+      borderColor: "rgba(255, 255, 255, 0)",
+      boxShadow: "rgba(255, 255, 255, 0)",
+      "&:hover": {
+        boxShadow: "rgba(255, 255, 255, 0)",
+      },
+    }),
+    option: (provided, data) => ({
+      ...provided,
+      color: getThemeColor(ThemeColors.primaryText),
+      backgroundColor: ThemeColors.primaryBackground,
+      "&:hover": {
+        backgroundColor: getThemeColor(ThemeColors.secondaryBackground),
+      },
+      cursor: data.isDisabled ? "not-allowed" : "default",
+    }),
+    indicatorsContainer: (provided) => ({
+      ...provided,
+      color: getThemeColor(ThemeColors.primaryText),
+    }),
+    singleValue: (provided) => ({
+      ...provided,
+      backgroundColor: getThemeColor(ThemeColors.secondaryBackground),
+      color: getThemeColor(ThemeColors.primaryText),
+    }),
+    multiValue: (provided) => ({
+      ...provided,
+      backgroundColor: getThemeColor(ThemeColors.quaternaryFill),
+      color: getThemeColor(ThemeColors.primaryText),
+    }),
+    multiValueGeneric: (provided) => ({
+      ...provided,
+      color: "unset",
+    }),
+    multiValueRemove: (provided) => ({
+      ...provided,
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: getThemeColor(ThemeColors.hoverFill),
+      },
+    }),
+  };
+};
diff --git a/src/pages/inbox/components/DirectMessageButton/index.ts b/src/pages/inbox/components/DirectMessageButton/index.ts
deleted file mode 100644
index 965f34492f..0000000000
--- a/src/pages/inbox/components/DirectMessageButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DirectMessageButton } from "./DirectMessageButton";
diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx
index b7fde41312..3515ffcdcf 100644
--- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx
+++ b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx
@@ -46,9 +46,12 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
     isImageRounded,
     isProject,
     discussionPredefinedType,
-    dmUserId,
+    dmUserIds,
     commonId,
     hasUnseenMention,
+    isGroupMessage,
+    createdBy,
+    hoverTitle,
     notion,
   } = props;
   const history = useHistory();
@@ -115,13 +118,17 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
   };
 
   const handleAvatarClick = () => {
-    if (onUserSelect && dmUserId) {
-      onUserSelect(dmUserId);
+    if (onUserSelect && dmUserIds && !isGroupMessage) {
+      onUserSelect(dmUserIds[0]);
     } else if (commonId) {
       history.push(getCommonPagePath(commonId));
     }
   };
 
+  const lastMessageClassName = classNames(styles.text, styles.lastMessage, {
+    [styles.lastMessageActive]: isActive || (isExpanded && isMobileView),
+  });
+
   return (
     <div
       className={classNames(styles.container, {
@@ -150,7 +157,11 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
               [styles.titleActive]: isActive,
             })}
           >
-            <span>{finalTitle || "Loading..."}</span>
+            <span
+              title={typeof hoverTitle === "string" ? hoverTitle : undefined}
+            >
+              {finalTitle || "Loading..."}
+            </span>
             {Boolean(notion) && (
               <Tooltip placement="top-start">
                 <TooltipTrigger asChild>
@@ -178,10 +189,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
           {lastMessage && !checkIsTextEditorValueEmpty(lastMessage) ? (
             <TextEditor
               className={styles.lastMessageContainer}
-              editorClassName={classNames(styles.text, styles.lastMessage, {
-                [styles.lastMessageActive]:
-                  isActive || (isExpanded && isMobileView),
-              })}
+              editorClassName={lastMessageClassName}
               value={lastMessage}
               elementStyles={{
                 mention: isActive ? styles.mentionText : "",
@@ -189,7 +197,12 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
               readOnly
             />
           ) : (
-            <div />
+            isGroupMessage &&
+            createdBy && (
+              <span className={lastMessageClassName}>
+                {`${createdBy} created this group chat`}
+              </span>
+            )
           )}
           <div className={styles.bottomContentRight}>
             <FeedCardTags
diff --git a/src/pages/inbox/components/HeaderContent/HeaderContent.tsx b/src/pages/inbox/components/HeaderContent/HeaderContent.tsx
index e1a87f985c..9c74dc3047 100644
--- a/src/pages/inbox/components/HeaderContent/HeaderContent.tsx
+++ b/src/pages/inbox/components/HeaderContent/HeaderContent.tsx
@@ -1,13 +1,9 @@
 import React, { FC } from "react";
 import classNames from "classnames";
-import { useSearchFeedItems } from "@/pages/commonFeed/components/HeaderContent/hooks";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { InboxIcon } from "@/shared/icons";
-import { SearchButton, SearchInput } from "@/shared/ui-kit";
-import { DirectMessageButton } from "../DirectMessageButton";
 import { HeaderContent_v04 } from "../HeaderContent_v04";
-import { InboxFilterButton } from "../InboxFilterButton";
-import { PlusButton } from "./components";
+import NewDirectMessageButton from "../NewDirectMessageButton/NewDirectMessageButton";
 import styles from "./HeaderContent.module.scss";
 
 interface HeaderContentProps {
@@ -50,10 +46,7 @@ const HeaderContent: FC<HeaderContentProps> = (props) => {
         {/* {!searchInputToggle.isToggledOn && (
           <SearchButton onClick={searchInputToggle.setToggleOn} />
         )} */}
-        <DirectMessageButton
-          isMobileVersion={isMobileVersion}
-          ButtonComponent={PlusButton}
-        />
+        <NewDirectMessageButton isMobileVersion={isMobileVersion} />
       </div>
     </div>
   );
diff --git a/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx b/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx
index 59769ba529..81a860f881 100644
--- a/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx
+++ b/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx
@@ -3,9 +3,7 @@ import classNames from "classnames";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { InboxIcon } from "@/shared/icons";
 import { getPluralEnding } from "@/shared/utils";
-import { DirectMessageButton } from "../DirectMessageButton";
-import { PlusButton } from "../HeaderContent/components";
-import { InboxFilterButton } from "../InboxFilterButton";
+import NewDirectMessageButton from "../NewDirectMessageButton/NewDirectMessageButton";
 import styles from "./HeaderContent_v04.module.scss";
 
 interface HeaderContentProps {
@@ -33,11 +31,7 @@ const HeaderContent_v04: FC<HeaderContentProps> = (props) => {
       </div>
       <div className={styles.actionButtonsWrapper}>
         {/* <InboxFilterButton /> */}
-        <DirectMessageButton
-          className={styles.directMessageButton}
-          isMobileVersion={isMobileVersion}
-          ButtonComponent={PlusButton}
-        />
+        <NewDirectMessageButton isMobileVersion={isMobileVersion} />
       </div>
     </div>
   );
diff --git a/src/pages/inbox/components/NewDirectMessageButton/NewDirectMessageButton.tsx b/src/pages/inbox/components/NewDirectMessageButton/NewDirectMessageButton.tsx
new file mode 100644
index 0000000000..fc759b31a1
--- /dev/null
+++ b/src/pages/inbox/components/NewDirectMessageButton/NewDirectMessageButton.tsx
@@ -0,0 +1,66 @@
+import React, { FC, useMemo, useState } from "react";
+import { InboxAction } from "@/shared/constants";
+import { useModal } from "@/shared/hooks";
+import { MenuItem as Item } from "@/shared/interfaces";
+import { DesktopMenu, MobileMenu } from "@/shared/ui-kit";
+import { DirectMessageModal } from "../DirectMessageButton/components";
+import { PlusButton } from "../HeaderContent/components";
+
+interface NewDirectMessageButton {
+  isMobileVersion?: boolean;
+  className?: string;
+}
+
+const NewDirectMessageButton: FC<NewDirectMessageButton> = (props) => {
+  const { isMobileVersion, className } = props;
+  const {
+    isShowing: isDirectMessageModalOpen,
+    onOpen: onDirectMessageModalOpen,
+    onClose: onDirectMessageModalClose,
+  } = useModal(false);
+  const [isGroupMessage, setIsGroupMessage] = useState(false);
+
+  const items: Item[] = useMemo(
+    () => [
+      {
+        id: InboxAction.NewDirectMessage,
+        text: "Direct message",
+        onClick: () => {
+          setIsGroupMessage(false);
+          onDirectMessageModalOpen();
+        },
+      },
+      {
+        id: InboxAction.NewGroupMessage,
+        text: "Group message",
+        onClick: () => {
+          setIsGroupMessage(true);
+          onDirectMessageModalOpen();
+        },
+      },
+    ],
+    [isGroupMessage],
+  );
+
+  const triggerEl = <PlusButton />;
+  const menuProps = {
+    className,
+    triggerEl,
+    items,
+  };
+  const Menu = isMobileVersion ? MobileMenu : DesktopMenu;
+
+  return (
+    <>
+      <Menu {...menuProps} />
+      <DirectMessageModal
+        isOpen={isDirectMessageModalOpen}
+        onClose={onDirectMessageModalClose}
+        isMobileVersion={isMobileVersion}
+        isGroupMessage={isGroupMessage}
+      />
+    </>
+  );
+};
+
+export default NewDirectMessageButton;
diff --git a/src/services/Chat.ts b/src/services/Chat.ts
index df9b37ee8b..12ff1b80a1 100644
--- a/src/services/Chat.ts
+++ b/src/services/Chat.ts
@@ -79,9 +79,10 @@ class ChatService {
 
   public getDMUserChatChannel = async (
     currentUserId: string,
-    dmUserId: string,
+    dmUserIds: string[],
   ): Promise<ChatChannel | null> => {
-    if (currentUserId === dmUserId) {
+    // What is it? Looks like this condition is never fulfilled because dmUserIds never includes the currrent user.
+    if (currentUserId === dmUserIds[0]) {
       return this.getUserOwnChatChannel(currentUserId);
     }
 
@@ -91,7 +92,19 @@ class ChatService {
     const docSnapshot = snapshot.docs.find((doc) => {
       const { participants } = doc.data();
 
-      return participants.length === 2 && participants.includes(dmUserId);
+      // dmUserIds - never includes the currrent user.
+      // participants - includes the currrent user.
+
+      if (dmUserIds.length === 1) {
+        // Regular 1 on 1 chat
+        return participants.length === 2 && participants.includes(dmUserIds[0]);
+      } else if (dmUserIds.length > 1) {
+        // Group chat
+        return (
+          participants.length === dmUserIds.length + 1 &&
+          dmUserIds.every((participant) => participants.includes(participant))
+        );
+      }
     });
 
     if (!docSnapshot) {
diff --git a/src/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils/parseMessageLink.ts b/src/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils/parseMessageLink.ts
index 5454df7109..e43e4a43fd 100644
--- a/src/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils/parseMessageLink.ts
+++ b/src/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils/parseMessageLink.ts
@@ -7,7 +7,7 @@ export interface ParseMessageLinkData {
   params: Record<string, string>;
 }
 
-export const parseMessageLink = (url: string): ParseMessageLinkData | null => {
+export const parseMessageLink = (url?: string): ParseMessageLinkData | null => {
   if (!url) {
     return null;
   }
diff --git a/src/shared/constants/inboxAction.ts b/src/shared/constants/inboxAction.ts
new file mode 100644
index 0000000000..f51bae8b60
--- /dev/null
+++ b/src/shared/constants/inboxAction.ts
@@ -0,0 +1,4 @@
+export enum InboxAction {
+  NewDirectMessage = "new-direct-message",
+  NewGroupMessage = "new-group-message",
+}
diff --git a/src/shared/constants/index.tsx b/src/shared/constants/index.tsx
index 98461b9ac9..d810d285c7 100755
--- a/src/shared/constants/index.tsx
+++ b/src/shared/constants/index.tsx
@@ -32,3 +32,4 @@ export * from "./systemDiscussionMessage";
 export * from "./theme";
 export * from "./docChange";
 export * from "./files";
+export * from "./inboxAction";
diff --git a/src/shared/hooks/useCases/index.ts b/src/shared/hooks/useCases/index.ts
index 1fda0b1ab5..7e71b5e958 100644
--- a/src/shared/hooks/useCases/index.ts
+++ b/src/shared/hooks/useCases/index.ts
@@ -25,6 +25,7 @@ export { useSubCommons } from "./useSubCommons";
 export { useSupportersData } from "./useSupportersData";
 export { useLastVisitedCommon } from "./useLastVisitedCommon";
 export { useUserById } from "./useUserById";
+export { useUsersByIds } from "./useUsersByIds";
 export { default as useUserCards } from "./useUserCards";
 export { useUserCommonIds } from "./useUserCommonIds";
 export { default as useUserContributions } from "./useUserContributions";
diff --git a/src/shared/hooks/useCases/useDMUserChatChannel.ts b/src/shared/hooks/useCases/useDMUserChatChannel.ts
index 51fd6d923a..8875442ee6 100644
--- a/src/shared/hooks/useCases/useDMUserChatChannel.ts
+++ b/src/shared/hooks/useCases/useDMUserChatChannel.ts
@@ -8,7 +8,7 @@ import { ChatChannel } from "@/shared/models";
 interface Return {
   loading: boolean;
   dmUserChatChannel: ChatChannel | null;
-  fetchDMUserChatChannel: (dmUserId: string) => void;
+  fetchDMUserChatChannel: (dmUserIds: string[]) => void;
   resetDMUserChatChannel: () => void;
   error?: boolean;
 }
@@ -21,7 +21,7 @@ export const useDMUserChatChannel = (): Return => {
   const userId = user?.uid;
 
   const fetchDMUserChatChannel = useCallback(
-    async (dmUserId: string) => {
+    async (dmUserIds: string[]) => {
       if (!userId) {
         return;
       }
@@ -37,13 +37,13 @@ export const useDMUserChatChannel = (): Return => {
       try {
         dmUserChatChannel = await ChatService.getDMUserChatChannel(
           userId,
-          dmUserId,
+          dmUserIds,
         );
 
         if (!dmUserChatChannel) {
           dmUserChatChannel = await ChatService.createChatChannel([
             userId,
-            dmUserId,
+            ...dmUserIds,
           ]);
         }
       } catch (error) {
diff --git a/src/shared/hooks/useCases/useDiscussionMessagesById.ts b/src/shared/hooks/useCases/useDiscussionMessagesById.ts
index ccd903c696..3e2f701dac 100644
--- a/src/shared/hooks/useCases/useDiscussionMessagesById.ts
+++ b/src/shared/hooks/useCases/useDiscussionMessagesById.ts
@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useUpdateEffect } from "react-use";
-import classNames from 'classnames';
-import firebase from "@/shared/utils/firebase";
+import classNames from "classnames";
 import { DiscussionMessageService } from "@/services";
+import { getTextFromTextEditorString } from "@/shared/components/Chat/ChatMessage/utils";
+import { useRoutesContext } from "@/shared/contexts";
 import { LoadingState } from "@/shared/interfaces";
 import { ModerationFlags } from "@/shared/interfaces/Moderation";
 import {
@@ -14,19 +15,21 @@ import {
   DiscussionMessageWithParsedText,
   User,
 } from "@/shared/models";
+import {
+  countTextEditorEmojiElements,
+  parseStringToTextEditorValue,
+} from "@/shared/ui-kit";
+import firebase from "@/shared/utils/firebase";
 import {
   cacheActions,
   selectDiscussionMessagesStateByDiscussionId,
 } from "@/store/states";
-import { countTextEditorEmojiElements, parseStringToTextEditorValue } from "@/shared/ui-kit";
-import { getTextFromTextEditorString } from "@/shared/components/Chat/ChatMessage/utils";
-import { useRoutesContext } from "@/shared/contexts";
 
 export type TextStyles = {
   mentionTextCurrentUser: string;
   singleEmojiText: string;
   multipleEmojiText: string;
-}
+};
 
 interface Options {
   hasPermissionToHide: boolean;
@@ -63,18 +66,19 @@ export const useDiscussionMessagesById = ({
   onUserClick,
   onFeedItemClick,
   users,
-  textStyles
+  textStyles,
 }: Options): Return => {
   const dispatch = useDispatch();
   const { getCommonPagePath, getCommonPageAboutTabPath } = useRoutesContext();
   const [defaultState, setDefaultState] = useState({ ...DEFAULT_STATE });
-  const [lastVisible, setLastVisible] = useState<Record<string, firebase.firestore.QueryDocumentSnapshot<DiscussionMessage>>>({});
+  const [lastVisible, setLastVisible] = useState<
+    Record<string, firebase.firestore.QueryDocumentSnapshot<DiscussionMessage>>
+  >({});
   const [isEndOfList, setIsEndOfList] = useState<Record<string, boolean>>({});
   const [isLoading, setIsLoading] = useState(true);
   const state =
-    useSelector(
-      selectDiscussionMessagesStateByDiscussionId(discussionId),
-    ) || defaultState;
+    useSelector(selectDiscussionMessagesStateByDiscussionId(discussionId)) ||
+    defaultState;
   const [discussionMessagesWithOwners, setDiscussionMessagesWithOwners] =
     useState<any>();
 
@@ -82,13 +86,11 @@ export const useDiscussionMessagesById = ({
     if (discussionId) {
       setDiscussionMessagesWithOwners([]);
     }
-
-  }, [discussionId])
+  }, [discussionId]);
 
   const addDiscussionMessage = async (
     discussionMessage: DiscussionMessage,
   ): Promise<void> => {
-
     const emojiCount = countTextEditorEmojiElements(
       parseStringToTextEditorValue(discussionMessage.text),
     );
@@ -119,49 +121,63 @@ export const useDiscussionMessagesById = ({
     );
   };
 
-  const fetchRepliedMessages = async (messageId: string, endDate: Date): Promise<void> => {
+  const fetchRepliedMessages = async (
+    messageId: string,
+    endDate: Date,
+  ): Promise<void> => {
     if (state.data?.find((item) => item.id === discussionId)) {
       return Promise.resolve();
     }
 
-    const { data: updatedDiscussionMessages, lastVisibleSnapshot } = await DiscussionMessageService.getDiscussionMessagesByEndDate(discussionId, lastVisible && lastVisible[discussionId], endDate);
-
-    setLastVisible((prevVisible) => ({ ...prevVisible, [discussionId]: lastVisibleSnapshot }));
-    const discussionsWithText = await Promise.all((updatedDiscussionMessages.map(async (discussionMessage) => {
-      const emojiCount = countTextEditorEmojiElements(
-        parseStringToTextEditorValue(discussionMessage.text),
+    const { data: updatedDiscussionMessages, lastVisibleSnapshot } =
+      await DiscussionMessageService.getDiscussionMessagesByEndDate(
+        discussionId,
+        lastVisible && lastVisible[discussionId],
+        endDate,
       );
 
-      const isUserDiscussionMessage =
-        checkIsUserDiscussionMessage(discussionMessage);
-      const isSystemMessage = checkIsSystemDiscussionMessage(discussionMessage);
+    setLastVisible((prevVisible) => ({
+      ...prevVisible,
+      [discussionId]: lastVisibleSnapshot,
+    }));
+    const discussionsWithText = await Promise.all(
+      updatedDiscussionMessages.map(async (discussionMessage) => {
+        const emojiCount = countTextEditorEmojiElements(
+          parseStringToTextEditorValue(discussionMessage.text),
+        );
 
-      const isNotCurrentUserMessage =
-        !isUserDiscussionMessage || userId !== discussionMessage.ownerId;
-      const parsedText = await getTextFromTextEditorString({
-        textEditorString: discussionMessage.text,
-        users,
-        mentionTextClassName: !isNotCurrentUserMessage
-          ? textStyles.mentionTextCurrentUser
-          : "",
-        emojiTextClassName: classNames({
-          [textStyles.singleEmojiText]: emojiCount.isSingleEmoji,
-          [textStyles.multipleEmojiText]: emojiCount.isMultipleEmoji,
-        }),
-        commonId: discussionMessage.commonId,
-        systemMessage: isSystemMessage ? discussionMessage : undefined,
-        getCommonPagePath,
-        getCommonPageAboutTabPath,
-        directParent,
-        onUserClick,
-        onFeedItemClick,
-      });
+        const isUserDiscussionMessage =
+          checkIsUserDiscussionMessage(discussionMessage);
+        const isSystemMessage =
+          checkIsSystemDiscussionMessage(discussionMessage);
 
-      return {
-        ...discussionMessage,
-        parsedText,
-      }
-    })))
+        const isNotCurrentUserMessage =
+          !isUserDiscussionMessage || userId !== discussionMessage.ownerId;
+        const parsedText = await getTextFromTextEditorString({
+          textEditorString: discussionMessage.text,
+          users,
+          mentionTextClassName: !isNotCurrentUserMessage
+            ? textStyles.mentionTextCurrentUser
+            : "",
+          emojiTextClassName: classNames({
+            [textStyles.singleEmojiText]: emojiCount.isSingleEmoji,
+            [textStyles.multipleEmojiText]: emojiCount.isMultipleEmoji,
+          }),
+          commonId: discussionMessage.commonId,
+          systemMessage: isSystemMessage ? discussionMessage : undefined,
+          getCommonPagePath,
+          getCommonPageAboutTabPath,
+          directParent,
+          onUserClick,
+          onFeedItemClick,
+        });
+
+        return {
+          ...discussionMessage,
+          parsedText,
+        };
+      }),
+    );
     dispatch(
       cacheActions.updateDiscussionMessagesStateByDiscussionId({
         discussionId,
@@ -171,14 +187,11 @@ export const useDiscussionMessagesById = ({
           data: discussionsWithText as any,
         },
       }),
-    )
-  }
+    );
+  };
 
   const fetchDiscussionMessages = () => {
-    if (
-      !discussionId ||
-      isEndOfList[discussionId]
-    ) {
+    if (!discussionId || isEndOfList[discussionId]) {
       return null;
     }
 
@@ -190,46 +203,54 @@ export const useDiscussionMessagesById = ({
       discussionId,
       lastVisible && lastVisible[discussionId],
       async (snapshot, updatedDiscussionMessages) => {
-        const lastVisibleDocument = snapshot.docs[updatedDiscussionMessages.length - 1];
+        const lastVisibleDocument =
+          snapshot.docs[updatedDiscussionMessages.length - 1];
 
-        setLastVisible((prevVisible) => ({ ...prevVisible, [discussionId]: lastVisibleDocument }));
+        setLastVisible((prevVisible) => ({
+          ...prevVisible,
+          [discussionId]: lastVisibleDocument,
+        }));
 
         const hasLastVisibleDocument = !!lastVisibleDocument?.data();
 
-        const discussionsWithText = await Promise.all((updatedDiscussionMessages.map(async (discussionMessage) => {
-          const emojiCount = countTextEditorEmojiElements(
-            parseStringToTextEditorValue(discussionMessage.text),
-          );
+        const discussionsWithText = await Promise.all(
+          updatedDiscussionMessages.map(async (discussionMessage) => {
+            const emojiCount = countTextEditorEmojiElements(
+              parseStringToTextEditorValue(discussionMessage.text),
+            );
 
-          const isUserDiscussionMessage = checkIsUserDiscussionMessage(discussionMessage);
-          const isSystemMessage = checkIsSystemDiscussionMessage(discussionMessage);
+            const isUserDiscussionMessage =
+              checkIsUserDiscussionMessage(discussionMessage);
+            const isSystemMessage =
+              checkIsSystemDiscussionMessage(discussionMessage);
 
-          const isNotCurrentUserMessage =
-            !isUserDiscussionMessage || userId !== discussionMessage.ownerId;
-          const parsedText = await getTextFromTextEditorString({
-            textEditorString: discussionMessage.text,
-            users,
-            mentionTextClassName: !isNotCurrentUserMessage
-              ? textStyles.mentionTextCurrentUser
-              : "",
-            emojiTextClassName: classNames({
-              [textStyles.singleEmojiText]: emojiCount.isSingleEmoji,
-              [textStyles.multipleEmojiText]: emojiCount.isMultipleEmoji,
-            }),
-            commonId: discussionMessage.commonId,
-            systemMessage: isSystemMessage ? discussionMessage : undefined,
-            getCommonPagePath,
-            getCommonPageAboutTabPath,
-            directParent,
-            onUserClick,
-            onFeedItemClick,
-          });
+            const isNotCurrentUserMessage =
+              !isUserDiscussionMessage || userId !== discussionMessage.ownerId;
+            const parsedText = await getTextFromTextEditorString({
+              textEditorString: discussionMessage.text,
+              users,
+              mentionTextClassName: !isNotCurrentUserMessage
+                ? textStyles.mentionTextCurrentUser
+                : "",
+              emojiTextClassName: classNames({
+                [textStyles.singleEmojiText]: emojiCount.isSingleEmoji,
+                [textStyles.multipleEmojiText]: emojiCount.isMultipleEmoji,
+              }),
+              commonId: discussionMessage.commonId,
+              systemMessage: isSystemMessage ? discussionMessage : undefined,
+              getCommonPagePath,
+              getCommonPageAboutTabPath,
+              directParent,
+              onUserClick,
+              onFeedItemClick,
+            });
 
-          return {
-            ...discussionMessage,
-            parsedText,
-          }
-        })));
+            return {
+              ...discussionMessage,
+              parsedText,
+            };
+          }),
+        );
         dispatch(
           cacheActions.updateDiscussionMessagesStateByDiscussionId({
             discussionId,
@@ -239,22 +260,21 @@ export const useDiscussionMessagesById = ({
               data: discussionsWithText as any,
             },
           }),
-        )
+        );
 
-        if (
-          discussionsWithText.length < 15 &&
-          !hasLastVisibleDocument
-        ) {
-          setIsEndOfList((prevIsEndOfList) => ({ ...prevIsEndOfList, [discussionId]: true }));
+        if (discussionsWithText.length < 15 && !hasLastVisibleDocument) {
+          setIsEndOfList((prevIsEndOfList) => ({
+            ...prevIsEndOfList,
+            [discussionId]: true,
+          }));
         }
       },
     );
   };
 
-
   useEffect(() => {
     (async () => {
-      if(discussionMessagesWithOwners?.length === 0) {
+      if (discussionMessagesWithOwners?.length === 0) {
         setIsLoading(true);
       }
       const discussionMessages = [...(state.data || [])];
@@ -275,17 +295,17 @@ export const useDiscussionMessagesById = ({
         }
         newDiscussionMessage.parentMessage = parentMessage
           ? {
-            id: parentMessage.id,
-            text: parentMessage.text,
-            ownerName: parentMessage?.ownerName,
-            ...(checkIsUserDiscussionMessage(parentMessage) && {
-              ownerId: parentMessage.ownerId,
-            }),
-            moderation: parentMessage?.moderation,
-            images: parentMessage?.images,
-            files: parentMessage?.files,
-            createdAt: parentMessage.createdAt
-          }
+              id: parentMessage.id,
+              text: parentMessage.text,
+              ownerName: parentMessage?.ownerName,
+              ...(checkIsUserDiscussionMessage(parentMessage) && {
+                ownerId: parentMessage.ownerId,
+              }),
+              moderation: parentMessage?.moderation,
+              images: parentMessage?.images,
+              files: parentMessage?.files,
+              createdAt: parentMessage.createdAt,
+            }
           : null;
         return newDiscussionMessage;
       });
diff --git a/src/shared/hooks/useCases/useUsersByIds.ts b/src/shared/hooks/useCases/useUsersByIds.ts
new file mode 100644
index 0000000000..f46fad0333
--- /dev/null
+++ b/src/shared/hooks/useCases/useUsersByIds.ts
@@ -0,0 +1,40 @@
+import { useCallback, useState } from "react";
+import { UserService } from "@/services";
+import { LoadingState } from "@/shared/interfaces";
+import { User } from "@/shared/models";
+
+type State = LoadingState<User[] | null>;
+
+interface Return extends State {
+  fetchUsers: (uids: string[]) => void;
+}
+
+const DEFAULT_STATE: State = {
+  loading: false,
+  fetched: false,
+  data: null,
+};
+
+export const useUsersByIds = (): Return => {
+  const [state, setState] = useState({ ...DEFAULT_STATE });
+
+  const fetchUsers = useCallback(async (uids: string[]) => {
+    setState((nextState) => ({
+      ...nextState,
+      loading: true,
+    }));
+
+    const users = await UserService.getCachedUsersById(uids);
+
+    setState({
+      loading: false,
+      fetched: true,
+      data: users,
+    });
+  }, []);
+
+  return {
+    ...state,
+    fetchUsers,
+  };
+};
diff --git a/src/shared/hooks/useInternalLink.ts b/src/shared/hooks/useInternalLink.ts
new file mode 100644
index 0000000000..aab763f524
--- /dev/null
+++ b/src/shared/hooks/useInternalLink.ts
@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import { useHistory } from "react-router-dom";
+import { InternalLinkData } from "../components";
+import { QueryParamKey, ROUTE_PATHS } from "../constants";
+import { useRoutesContext } from "../contexts";
+import { getParamsFromOneOfRoutes } from "../utils";
+
+const useInternalLink = () => {
+  const { getCommonPagePath } = useRoutesContext();
+  const history = useHistory();
+
+  const onInternalLinkClick = useCallback((data: InternalLinkData) => {
+    const feedPageParams = getParamsFromOneOfRoutes<{ id: string }>(
+      data.pathname,
+      [ROUTE_PATHS.COMMON, ROUTE_PATHS.V04_COMMON],
+    );
+
+    if (!feedPageParams) {
+      return;
+    }
+
+    const itemId = data.params[QueryParamKey.Item];
+    const messageId = data.params[QueryParamKey.Message];
+
+    history.push(
+      getCommonPagePath(feedPageParams.id, {
+        item: itemId,
+        message: messageId,
+      }),
+    );
+  }, []);
+
+  return { onInternalLinkClick };
+};
+
+export default useInternalLink;
diff --git a/src/shared/icons/group-chat.icon.tsx b/src/shared/icons/group-chat.icon.tsx
new file mode 100644
index 0000000000..6f65eadfc4
--- /dev/null
+++ b/src/shared/icons/group-chat.icon.tsx
@@ -0,0 +1,56 @@
+import React, { FC } from "react";
+
+interface GroupChatIconProps {
+  className?: string;
+}
+
+const GroupChatIcon: FC<GroupChatIconProps> = ({ className }) => (
+  <svg
+    className={className}
+    width="32"
+    height="32"
+    viewBox="0 0 25 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Layer_1" clip-path="url(#clip0_11827_31255)">
+      <path
+        id="Vector"
+        d="M12.4725 8.84766C8.9225 8.84766 6.03516 12.2649 6.03516 14.4519C6.03516 16.6389 8.91856 17.9824 12.4725 17.9824C16.0265 17.9824 18.9138 16.6389 18.9138 14.4675C18.9138 12.2961 16.0501 8.84766 12.4725 8.84766Z"
+        fill="#525876"
+      />
+      <path
+        id="Vector_2"
+        d="M12.4761 8.22478C14.4541 8.22478 16.0577 6.3836 16.0577 4.11239C16.0577 1.84118 14.4541 0 12.4761 0C10.4981 0 8.89453 1.84118 8.89453 4.11239C8.89453 6.3836 10.4981 8.22478 12.4761 8.22478Z"
+        fill="#525876"
+      />
+      <path
+        id="Vector_3"
+        d="M20.2311 8.54297C19.1982 8.56446 18.2013 8.92275 17.395 9.56228C19.1227 10.9175 20.2311 12.8389 20.2311 14.2878C20.2304 14.6417 20.1593 14.9921 20.022 15.3188H20.2311C22.866 15.3188 24.9999 14.3112 24.9999 12.6905C24.9999 11.0698 22.866 8.54297 20.2311 8.54297Z"
+        fill="#525876"
+      />
+      <path
+        id="Vector_4"
+        d="M20.2352 8.08852C21.7013 8.08852 22.8898 6.72469 22.8898 5.04231C22.8898 3.35993 21.7013 1.99609 20.2352 1.99609C18.7691 1.99609 17.5806 3.35993 17.5806 5.04231C17.5806 6.72469 18.7691 8.08852 20.2352 8.08852Z"
+        fill="#525876"
+      />
+      <path
+        id="Vector_5"
+        d="M7.60492 9.56228C6.79862 8.92275 5.80175 8.56446 4.76885 8.54297C2.13395 8.54297 0 11.0737 0 12.6944C0 14.3152 2.13395 15.3227 4.76885 15.3227H4.97791C4.84023 14.9975 4.76917 14.6483 4.76885 14.2956C4.76885 12.8389 5.87725 10.9175 7.60492 9.56228Z"
+        fill="#525876"
+      />
+      <path
+        id="Vector_6"
+        d="M4.76888 8.08852C6.23499 8.08852 7.4235 6.72469 7.4235 5.04231C7.4235 3.35993 6.23499 1.99609 4.76888 1.99609C3.30277 1.99609 2.11426 3.35993 2.11426 5.04231C2.11426 6.72469 3.30277 8.08852 4.76888 8.08852Z"
+        fill="#525876"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_11827_31255">
+        <rect width="25" height="18" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default GroupChatIcon;
diff --git a/src/shared/icons/index.ts b/src/shared/icons/index.ts
index 893baa9de1..73368cf0a2 100644
--- a/src/shared/icons/index.ts
+++ b/src/shared/icons/index.ts
@@ -71,4 +71,5 @@ export { default as ReplyIcon } from "./reply.icon";
 export { default as CopyIcon } from "./copy.icon";
 export { default as HideIcon } from "./hide.icon";
 export { default as InboxFilterIcon } from "./inboxFilter.icon";
+export { default as GroupChatIcon } from "./group-chat.icon";
 export { default as NotificationsIcon } from "./notifications.icon";
diff --git a/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx b/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx
index befe96cbe9..baadfea968 100644
--- a/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx
+++ b/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx
@@ -63,6 +63,7 @@ export interface TextEditorProps {
   onClearFinished: () => void;
   scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void;
   elementStyles?: EditorElementStyles;
+  groupChat?: boolean;
 }
 
 const INITIAL_SEARCH_VALUE = {
@@ -97,6 +98,7 @@ const BaseTextEditor: FC<TextEditorProps> = (props) => {
     onClearFinished,
     scrollSelectionIntoView,
     elementStyles,
+    groupChat,
   } = props;
   const editor = useMemo(
     () =>
@@ -276,7 +278,9 @@ const BaseTextEditor: FC<TextEditorProps> = (props) => {
           }}
         />
 
-        {target && chars.length > 0 && (
+        {/* For now, we don't support the ability to mention in a group chat.
+          See https://github.com/daostack/common-web/issues/2380 */}
+        {!groupChat && target && chars.length > 0 && (
           <MentionDropdown
             shouldFocusTarget={shouldFocusTarget}
             onClick={(user: User) => {
diff --git a/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss b/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss
index 54b9200185..aab31db135 100644
--- a/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss
+++ b/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss
@@ -2,4 +2,6 @@
 
 .link {
   color: var(--primary-fill);
+  cursor: pointer;
+  text-decoration: underline;
 }
diff --git a/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.tsx b/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.tsx
index 2a28326665..0c38eb9fe4 100644
--- a/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.tsx
+++ b/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.tsx
@@ -1,5 +1,7 @@
 import React, { FC } from "react";
 import classNames from "classnames";
+import { parseMessageLink } from "@/shared/components/Chat/ChatMessage/components/ChatMessageLinkify/utils";
+import useInternalLink from "@/shared/hooks/useInternalLink";
 import { LinkElement } from "../../../../types";
 import { ElementAttributes } from "../../types";
 import { InlineChromiumBugfix } from "../InlineChromiumBugfix";
@@ -12,6 +14,22 @@ interface LinkProps {
 
 const Link: FC<LinkProps> = (props) => {
   const { attributes, element, children } = props;
+  const { onInternalLinkClick } = useInternalLink();
+  const internalLink = parseMessageLink(element.url);
+
+  if (internalLink) {
+    return (
+      <a
+        {...attributes}
+        className={classNames(styles.link, attributes.className)}
+        onClick={() => onInternalLinkClick(internalLink)}
+      >
+        <InlineChromiumBugfix />
+        {children}
+        <InlineChromiumBugfix />
+      </a>
+    );
+  }
 
   return (
     <a
diff --git a/src/shared/utils/index.tsx b/src/shared/utils/index.tsx
index 4f86cf5c49..043c202f7d 100755
--- a/src/shared/utils/index.tsx
+++ b/src/shared/utils/index.tsx
@@ -38,3 +38,4 @@ export * from "./getProjectCircleDefinition";
 export * from "./generateStaticShareLink";
 export * from "./getTheme";
 export * from "./pluralizeWord";
+export * from "./joinWithLast";
diff --git a/src/shared/utils/joinWithLast.ts b/src/shared/utils/joinWithLast.ts
new file mode 100644
index 0000000000..0c211fdde3
--- /dev/null
+++ b/src/shared/utils/joinWithLast.ts
@@ -0,0 +1,16 @@
+/**
+ * Returns the string array values, separated by a specified separator and lastSeperator for the last item.
+ */
+export const joinWithLast = (
+  arr?: string[],
+  seperator = ", ",
+  lastSeperator = " & ",
+): string => {
+  if (!arr) {
+    return "";
+  }
+  if (arr.length === 1) {
+    return arr[0];
+  }
+  return arr.slice(0, -1).join(seperator) + lastSeperator + arr.slice(-1);
+};