diff --git a/src/pages/inbox/components/DirectMessageButton/DirectMessageButton.tsx b/src/pages/inbox/components/DirectMessageButton/DirectMessageButton.tsx
index 8fd610398c..0214838277 100644
--- a/src/pages/inbox/components/DirectMessageButton/DirectMessageButton.tsx
+++ b/src/pages/inbox/components/DirectMessageButton/DirectMessageButton.tsx
@@ -16,7 +16,7 @@ interface DirectMessageButtonProps {
 }
 
 /**
- * CHECK IF NEED TO DELETE
+ * CHECK IF NEED TO DELETE THIS FILE.
  */
 
 const DirectMessageButton: FC<DirectMessageButtonProps> = (props) => {
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..39a66234b8 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 {
@@ -20,7 +21,7 @@
   }
 
   .modalContent {
-    padding: 0;
+    //padding: 0;
   }
 
   .modalCloseWrapper {
@@ -31,6 +32,7 @@
   @include tablet {
     max-width: unset;
     max-height: unset;
+    height: 100%;
   }
 }
 
@@ -56,6 +58,28 @@
   align-items: center;
 }
 
+// .control {
+//   background-color: var(--secondaryBackground);
+//   color: var(--primaryText);
+// }
+
+// .menuList {
+//   background-color: var(--tertiaryFill);
+// }
+
+// .option {
+//   color: var(--primaryText);
+// }
+
+// .indicatorsContainer {
+//   display: none;
+// }
+
+// .singleValue {
+//   background-color: var(--secondaryBackground);
+//   color: var(--primaryText);
+// }
+
 .infoText {
   margin: 1rem 0;
   padding: 0 1rem;
@@ -82,3 +106,12 @@
 .userItem {
   padding: 0.375rem 1.75rem;
 }
+
+.optionWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.userAvatar {
+  margin-right: 0.75rem;
+}
diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx
index e0580fe58d..d50fce30b1 100644
--- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx
+++ b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx
@@ -8,14 +8,18 @@ import React, {
   useState,
 } from "react";
 import { useDispatch } from "react-redux";
-import { Modal } from "@/shared/components";
+import Select from "react-select";
+import { Modal, UserAvatar } from "@/shared/components";
 import { KeyboardKeys } from "@/shared/constants";
 import { useDMUserChatChannel } from "@/shared/hooks/useCases";
+import useThemeColor from "@/shared/hooks/useThemeColor";
+import { SearchIcon } from "@/shared/icons";
 import { DMUser } from "@/shared/interfaces";
-import { Loader } from "@/shared/ui-kit";
+import { Button, Loader } from "@/shared/ui-kit";
 import { emptyFunction } from "@/shared/utils";
 import { inboxActions } from "@/store/states";
 import { DirectMessageUserItem, SearchInput } from "./components";
+import { selectorStyles } from "./components/selectorStyles";
 import { useDMUsers } from "./hooks";
 import styles from "./DirectMessageModal.module.scss";
 
@@ -34,8 +38,9 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
     groupMessage = false,
   } = props;
   const dispatch = useDispatch();
+  const { getThemeColor } = useThemeColor();
   const listRef = useRef<HTMLUListElement>(null);
-  const [searchText, setSearchText] = useState("");
+  //const [searchText, setSearchText] = useState("");
   const [activeItemIndex, setActiveItemIndex] = useState<number | null>(null);
   const {
     loading: areDMUsersLoading,
@@ -50,48 +55,50 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
     resetDMUserChatChannel,
     error: isChannelLoadedWithError,
   } = useDMUserChatChannel();
-  const filteredDMUsers = useMemo(() => {
-    if (!searchText) {
-      return dmUsers;
-    }
 
-    const lowerCasedSearchText = searchText.toLowerCase();
+  // const filteredDMUsers = useMemo(() => {
+  //   if (!searchText) {
+  //     return dmUsers;
+  //   }
 
-    return dmUsers.filter((item) =>
-      item.userName.toLowerCase().startsWith(lowerCasedSearchText),
-    );
-  }, [dmUsers, searchText]);
-  const totalUsersAmount = filteredDMUsers.length;
+  //   const lowerCasedSearchText = searchText.toLowerCase();
 
-  const handleArrowUp = useCallback(() => {
-    setActiveItemIndex((currentIndex) => {
-      if (totalUsersAmount === 0) {
-        return null;
-      }
-      if (currentIndex === null) {
-        return totalUsersAmount - 1;
-      }
+  //   return dmUsers.filter((item) =>
+  //     item.userName.toLowerCase().startsWith(lowerCasedSearchText),
+  //   );
+  // }, [dmUsers, searchText]);
 
-      const nextIndex = currentIndex - 1;
+  //const totalUsersAmount = filteredDMUsers.length;
 
-      return nextIndex < 0 ? totalUsersAmount - 1 : nextIndex;
-    });
-  }, [totalUsersAmount]);
+  // const handleArrowUp = useCallback(() => {
+  //   setActiveItemIndex((currentIndex) => {
+  //     if (totalUsersAmount === 0) {
+  //       return null;
+  //     }
+  //     if (currentIndex === null) {
+  //       return totalUsersAmount - 1;
+  //     }
 
-  const handleArrowDown = useCallback(() => {
-    setActiveItemIndex((currentIndex) => {
-      if (totalUsersAmount === 0) {
-        return null;
-      }
-      if (currentIndex === null) {
-        return 0;
-      }
+  //     const nextIndex = currentIndex - 1;
+
+  //     return nextIndex < 0 ? totalUsersAmount - 1 : nextIndex;
+  //   });
+  // }, [totalUsersAmount]);
 
-      const nextIndex = currentIndex + 1;
+  // const handleArrowDown = useCallback(() => {
+  //   setActiveItemIndex((currentIndex) => {
+  //     if (totalUsersAmount === 0) {
+  //       return null;
+  //     }
+  //     if (currentIndex === null) {
+  //       return 0;
+  //     }
 
-      return nextIndex >= totalUsersAmount ? 0 : nextIndex;
-    });
-  }, [totalUsersAmount]);
+  //     const nextIndex = currentIndex + 1;
+
+  //     return nextIndex >= totalUsersAmount ? 0 : nextIndex;
+  //   });
+  // }, [totalUsersAmount]);
 
   const handleUserItemClick = (item: DMUser) => {
     fetchDMUserChatChannel(item.uid);
@@ -104,13 +111,13 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
     }
 
     setActiveItemIndex(null);
-    setSearchText("");
+    //setSearchText("");
     resetDMUserChatChannel();
   }, [isOpen]);
 
-  useEffect(() => {
-    setActiveItemIndex(null);
-  }, [searchText]);
+  // useEffect(() => {
+  //   setActiveItemIndex(null);
+  // }, [searchText]);
 
   useEffect(() => {
     if (activeItemIndex !== null) {
@@ -119,60 +126,60 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
     }
   }, [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 (!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) {
@@ -195,37 +202,75 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
       );
     }
 
-    if (totalUsersAmount === 0) {
+    if (dmUsers.length === 0) {
       return <p className={styles.infoText}>No users found</p>;
     }
 
+    const options = dmUsers.map((user) => ({
+      value: user.userName,
+      user: user,
+      label: (
+        <div className={styles.optionWrapper}>
+          <UserAvatar
+            className={styles.userAvatar}
+            photoURL={user.photoURL}
+            nameForRandomAvatar={user.userName}
+            userName={user.userName}
+          />
+          <span>{user.userName}</span>
+        </div>
+      ),
+    }));
+
     return (
-      <ul ref={listRef} className={styles.itemList}>
-        {filteredDMUsers.map((item, index) => {
-          const isActive = index === activeItemIndex;
-
-          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>
+      <>
+        <Select
+          onChange={(item) =>
+            !groupMessage && item && handleUserItemClick((item as any).user)
+          }
+          isMulti={groupMessage}
+          options={options}
+          placeholder="Search"
+          autoFocus
+          menuIsOpen
+          isSearchable
+          styles={selectorStyles(getThemeColor)}
+          components={{
+            DropdownIndicator: () => <SearchIcon />,
+            IndicatorSeparator: () => null,
+          }}
+        />
+        {groupMessage && <Button>Create</Button>}
+      </>
     );
+
+    // return (
+    //   <ul ref={listRef} className={styles.itemList}>
+    //     {filteredDMUsers.map((item, index) => {
+    //       const isActive = index === activeItemIndex;
+
+    //       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 (
@@ -235,15 +280,16 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
       onClose={isChannelLoading ? emptyFunction : onClose}
       title={
         <div className={styles.modalTitleWrapper}>
-          <h3 className={styles.modalTitle}>Direct message</h3>
-          {!isChannelLoading && (
+          <h3 className={styles.modalTitle}>
+            {groupMessage ? "Group message" : "Direct message"}
+          </h3>
+          {/* {!isChannelLoading && (
             <SearchInput
               value={searchText}
               onChange={setSearchText}
               autoFocus
-              multiple={groupMessage}
             />
-          )}
+          )} */}
         </div>
       }
       isHeaderSticky
diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.tsx b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.tsx
index c540f9cc88..9970a89b3b 100644
--- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.tsx
+++ b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.tsx
@@ -8,11 +8,10 @@ interface SearchInputProps {
   value: string;
   onChange: (text: string) => void;
   autoFocus?: boolean;
-  multiple?: boolean;
 }
 
 const SearchInput: FC<SearchInputProps> = (props) => {
-  const { className, value, onChange, autoFocus, multiple } = props;
+  const { className, value, onChange, autoFocus } = props;
 
   const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {
     onChange(event.target.value);
@@ -28,7 +27,6 @@ const SearchInput: FC<SearchInputProps> = (props) => {
           onChange={handleInputChange}
           placeholder="Search"
           autoFocus={autoFocus}
-          multiple={multiple}
         />
       </div>
     </div>
diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/selectorStyles.ts b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/selectorStyles.ts
new file mode 100644
index 0000000000..66ba2091f9
--- /dev/null
+++ b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/selectorStyles.ts
@@ -0,0 +1,54 @@
+import { ThemeColors } from "@/shared/constants";
+
+export const selectorStyles = (
+  getThemeColor: (color: ThemeColors) => string,
+) => {
+  return {
+    container: (provided) => ({ ...provided, width: "100%" }),
+    menu: (provided) => ({
+      ...provided,
+      zIndex: 10000,
+      boxShadow: "none",
+      marginTop: 0,
+    }),
+    menuPortal: (provided) => ({ ...provided, zIndex: 10000 }),
+    menuList: (provided) => ({
+      ...provided,
+      backgroundColor: getThemeColor(ThemeColors.tertiaryFill),
+    }),
+    control: (provided) => ({
+      ...provided,
+      height: "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,
+      backgroundColor: data.isDisabled
+        ? "transparent"
+        : getThemeColor(ThemeColors.tertiaryFill),
+      color: getThemeColor(ThemeColors.primaryText),
+      "&:hover": {
+        backgroundColor: data.isDisabled
+          ? ""
+          : 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),
+    }),
+  };
+};