diff --git a/src/common/component/styled/Checkbox.js b/src/common/component/styled/Checkbox.js
index 30f4bc82..71c3ad2b 100644
--- a/src/common/component/styled/Checkbox.js
+++ b/src/common/component/styled/Checkbox.js
@@ -30,10 +30,7 @@ const Styled = styled.input`
     }
   }
   &:disabled {
-    border-color: #ccc;
-    &::before {
-      box-shadow: inset 10px 10px #ccc;
-    }
+    opacity: 0.4;
   }
 `;
 export default function StyledCheckbox(props) {
diff --git a/src/common/component/styled/Input.js b/src/common/component/styled/Input.js
index de7d3f1c..f963946c 100644
--- a/src/common/component/styled/Input.js
+++ b/src/common/component/styled/Input.js
@@ -10,6 +10,11 @@ const StyledInput = styled.input`
   line-height: 20px;
   color: #333;
   padding: 8px;
+  &.none {
+    border: none;
+    background: none;
+    box-shadow: none;
+  }
   &:disabled {
     color: #78787c;
     background-color: #f9fafb;
diff --git a/src/routes/chat/ChannelChat/AddMemberModal.js b/src/routes/chat/ChannelChat/AddMemberModal.js
index 171ecb56..934754b6 100644
--- a/src/routes/chat/ChannelChat/AddMemberModal.js
+++ b/src/routes/chat/ChannelChat/AddMemberModal.js
@@ -1,113 +1,15 @@
 import { useState, useEffect } from "react";
-import styled from "styled-components";
 import { useSelector } from "react-redux";
 import Modal from "../../../common/component/Modal";
 import Button from "../../../common/component/styled/Button";
+import Input from "../../../common/component/styled/Input";
 import Contact from "../../../common/component/Contact";
 import StyledCheckbox from "../../../common/component/styled/Checkbox";
 import { useAddMembersMutation } from "../../../app/services/channel";
-import closeIcon from "../../../assets/icons/close.svg?url";
+import CloseIcon from "../../../assets/icons/close.svg";
 import toast from "react-hot-toast";
-// import useFilteredUsers from "../../../common/hook/useFilteredUsers";
-const Styled = styled.div`
-  padding: 16px;
-  filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
-  border-radius: 8px;
-  background-color: #fff;
-  min-width: 410px;
-  > .head {
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 28px;
-    color: #374151;
-    margin-bottom: 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .close {
-      width: 12px;
-      height: 12px;
-      cursor: pointer;
-    }
-  }
-  > .filter {
-    width: 376px;
-    height: 40px;
-    background: rgba(0, 0, 0, 0.08);
-    border-radius: 4px;
-    padding: 6px 8px;
-    display: flex;
-    align-items: center;
-    margin-bottom: 12px;
-    .selects {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      width: 100%;
-      overflow: scroll;
-
-      white-space: nowrap;
-      &::-webkit-scrollbar {
-        width: 0; /* Remove scrollbar space */
-        height: 0; /* Remove scrollbar space */
-        background: transparent; /* Optional: just make scrollbar invisible */
-      }
-      .select {
-        padding: 4px 6px;
-        background: #52edff;
-        border-radius: 4px;
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 20px;
-        color: #ffffff;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 5px;
-        .close {
-          cursor: pointer;
-          width: 12px;
-          height: 12px;
-          filter: invert(1);
-        }
-      }
-    }
-    /* .input{
-        background: none;
-        padding: ;
-    } */
-  }
-  .users {
-    display: flex;
-    flex-direction: column;
-    /* height: 260px; */
-    padding-bottom: 20px;
-    max-height: 364px;
-    overflow: scroll;
-    .user {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      padding: 4px 8px;
-      /* margin: 0 4px; */
-      width: -webkit-fill-available;
-      border-radius: 8px;
-      &:hover {
-        background: rgba(116, 127, 141, 0.1);
-      }
-      > div {
-        width: 100%;
-      }
-    }
-  }
-  > .btn {
-    width: 100%;
-    margin-top: 16px;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-  }
-`;
+import useFilteredUsers from "../../../common/hook/useFilteredUsers";
+import Styled from "./add.member.styled";
 
 export default function AddMemberModal({ uids = [], cid = null, closeModal }) {
   const [
@@ -115,10 +17,10 @@ export default function AddMemberModal({ uids = [], cid = null, closeModal }) {
     { isLoading: isAdding, isSuccess },
   ] = useAddMembersMutation();
   const [selects, setSelects] = useState([]);
-  const { channel, contactIds, contactData } = useSelector((store) => {
+  const { channel, contactData } = useSelector((store) => {
     return {
       channel: store.channels.byId[cid],
-      contactIds: store.contacts.ids,
+      // contactIds: store.contacts.ids,
       contactData: store.contacts.byId,
     };
   });
@@ -132,7 +34,7 @@ export default function AddMemberModal({ uids = [], cid = null, closeModal }) {
   const handleAddMembers = () => {
     addMembers({ id: cid, members: selects });
   };
-  //   const { input, updateInput, contacts } = useFilteredUsers();
+  const { input, updateInput, contacts = [] } = useFilteredUsers();
   const toggleCheckMember = ({ currentTarget }) => {
     const { uid } = currentTarget.dataset;
     if (selects.includes(+uid)) {
@@ -143,40 +45,43 @@ export default function AddMemberModal({ uids = [], cid = null, closeModal }) {
       setSelects([...selects, +uid]);
     }
   };
-  //   const handleFilterInput = (evt) => {
-  //     updateInput(evt.target.value);
-  //   };
+  const handleFilterInput = (evt) => {
+    updateInput(evt.target.value);
+  };
   if (!channel) return null;
+  const contactIds = contacts.map(({ uid }) => uid);
   console.log("selects", selects);
   return (
     <Modal>
       <Styled>
         <div className="head">
           Add friends to #{channel.name}{" "}
-          <img onClick={closeModal} className="close" src={closeIcon} />
+          <CloseIcon onClick={closeModal} className="close" />
         </div>
         <div className="filter">
+          {/* {selects && selects.length > 0 && ( */}
           <ul className="selects">
             {selects.map((uid) => {
               return (
                 <li className="select" key={uid}>
                   {contactData[uid].name}
-                  <img
+                  <CloseIcon
                     data-uid={uid}
                     onClick={toggleCheckMember}
                     className="close"
-                    src={closeIcon}
                   />
                 </li>
               );
             })}
+            <Input
+              autoFocus
+              type="text"
+              className="input none"
+              value={input}
+              onChange={handleFilterInput}
+            />
           </ul>
-          {/* <input
-            type="text"
-            className="input"
-            value={input}
-            onChange={handleFilterInput}
-          /> */}
+          {/* )} */}
         </div>
         <ul className="users">
           {contactIds.map((uid) => {
diff --git a/src/routes/chat/ChannelChat/add.member.styled.js b/src/routes/chat/ChannelChat/add.member.styled.js
new file mode 100644
index 00000000..215cabdb
--- /dev/null
+++ b/src/routes/chat/ChannelChat/add.member.styled.js
@@ -0,0 +1,109 @@
+import styled from "styled-components";
+
+const Styled = styled.div`
+  padding: 16px;
+  filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
+  border-radius: 8px;
+  background-color: #fff;
+  min-width: 410px;
+  > .head {
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 28px;
+    color: #374151;
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .close {
+      width: 12px;
+      height: 12px;
+      cursor: pointer;
+    }
+  }
+  > .filter {
+    width: 376px;
+    min-height: 40px;
+    padding: 6px 8px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
+    border-radius: 4px;
+    .selects {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 5px;
+      width: 100%;
+      overflow: scroll;
+
+      /* white-space: nowrap; */
+      &::-webkit-scrollbar {
+        width: 0; /* Remove scrollbar space */
+        height: 0; /* Remove scrollbar space */
+        background: transparent; /* Optional: just make scrollbar invisible */
+      }
+      .select {
+        padding: 4px 6px;
+        background: #52edff;
+        border-radius: 4px;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 20px;
+        color: #ffffff;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 5px;
+        .close {
+          cursor: pointer;
+          width: 12px;
+          height: 12px;
+          path {
+            fill: #fff;
+            fill-opacity: 1;
+          }
+          /* filter: invert(1); */
+        }
+      }
+      .input {
+        width: fit-content;
+      }
+    }
+  }
+  .users {
+    display: flex;
+    flex-direction: column;
+    /* height: 260px; */
+    padding-bottom: 20px;
+    max-height: 364px;
+    overflow: scroll;
+    .user {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding: 4px 8px;
+      /* margin: 0 4px; */
+      width: -webkit-fill-available;
+      border-radius: 8px;
+      &:hover {
+        background: rgba(116, 127, 141, 0.1);
+      }
+      > div {
+        width: 100%;
+      }
+    }
+  }
+  > .btn {
+    width: 100%;
+    margin-top: 16px;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+  }
+`;
+
+export default Styled;