diff --git a/src/common/component/Message/Reaction.js b/src/common/component/Message/Reaction.js
index 054979d2..77a536bc 100644
--- a/src/common/component/Message/Reaction.js
+++ b/src/common/component/Message/Reaction.js
@@ -5,6 +5,7 @@ import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
 import Emoji from "../Emoji";
 import EmojiPicker from "./EmojiPicker";
+import Tooltip from "../Tooltip";
 import { useReactMessageMutation } from "../../../app/services/message";
 // import { Emojis } from "../../../app/config";
 import addEmojiIcon from "../../../assets/icons/add.emoji.svg?url";
@@ -99,14 +100,16 @@ export default function Reaction({ mid, reactions = null }) {
           </span>
         ) : null;
       })}
-      <Tippy
-        interactive
-        placement="right-start"
-        trigger="click"
-        content={<EmojiPicker mid={mid} hidePicker={hideAll} />}
-      >
-        <button className="add"></button>
-      </Tippy>
+      <Tooltip placement="top" tip="Add Reaction">
+        <Tippy
+          interactive
+          placement="right-start"
+          trigger="click"
+          content={<EmojiPicker mid={mid} hidePicker={hideAll} />}
+        >
+          <button className="add"></button>
+        </Tippy>
+      </Tooltip>
     </StyledWrapper>
   );
 }
diff --git a/src/common/component/Search.js b/src/common/component/Search.js
index 1826e5a8..b3345fce 100644
--- a/src/common/component/Search.js
+++ b/src/common/component/Search.js
@@ -7,6 +7,7 @@ import { hideAll } from "tippy.js";
 import searchIcon from "../../assets/icons/search.svg?url";
 import addIcon from "../../assets/icons/add.svg?url";
 import mailIcon from "../../assets/icons/mail.svg?url";
+import Tooltip from "../component/Tooltip";
 import ChannelIcon from "./ChannelIcon";
 import ChannelModal from "./ChannelModal";
 import ContactsModal from "./ContactsModal";
@@ -100,37 +101,39 @@ export default function Search() {
         <img src={searchIcon} />
         <input placeholder="Search..." className="input" />
       </div>
-      <Tippy
-        interactive
-        placement="bottom-end"
-        trigger="click"
-        content={
-          <ul className="popup">
-            {currentUser?.is_admin && (
+      <Tooltip tip="More" placement="bottom">
+        <Tippy
+          interactive
+          placement="bottom-end"
+          trigger="click"
+          content={
+            <ul className="popup">
+              {currentUser?.is_admin && (
+                <li
+                  className="item"
+                  onClick={handleOpenChannelModal.bind(null, false)}
+                >
+                  <ChannelIcon />
+                  New Channel
+                </li>
+              )}
               <li
                 className="item"
-                onClick={handleOpenChannelModal.bind(null, false)}
+                onClick={handleOpenChannelModal.bind(null, true)}
               >
-                <ChannelIcon />
-                New Channel
+                <ChannelIcon personal={true} />
+                New Private Channel
               </li>
-            )}
-            <li
-              className="item"
-              onClick={handleOpenChannelModal.bind(null, true)}
-            >
-              <ChannelIcon personal={true} />
-              New Private Channel
-            </li>
-            <li className="item" onClick={toggleContactsModalVisible}>
-              <img src={mailIcon} alt="icon mail" />
-              New Message
-            </li>
-          </ul>
-        }
-      >
-        <img src={addIcon} alt="add icon" className="add" />
-      </Tippy>
+              <li className="item" onClick={toggleContactsModalVisible}>
+                <img src={mailIcon} alt="icon mail" />
+                New Message
+              </li>
+            </ul>
+          }
+        >
+          <img src={addIcon} alt="add icon" className="add" />
+        </Tippy>
+      </Tooltip>
     </StyledWrapper>
   );
 }
diff --git a/src/common/component/Tooltip.js b/src/common/component/Tooltip.js
index bc7a8cc6..d02e4cf5 100644
--- a/src/common/component/Tooltip.js
+++ b/src/common/component/Tooltip.js
@@ -2,23 +2,49 @@
 import Tippy from "@tippyjs/react";
 import styled from "styled-components";
 const StyledTip = styled.div`
-  background-color: #000;
-  border-radius: 5px;
-  padding: 5px;
-  font-size: 10px;
-  color: #fff;
+  position: relative;
+  background: #fff;
+  padding: 8px 12px;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 18px;
+  color: #1d2939;
+  border-radius: var(--br);
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  &::after {
+    background-color: inherit;
+    position: absolute;
+    content: "";
+    width: 12px;
+    height: 12px;
+    border-radius: 1px;
+    transform-origin: center;
+  }
+  &.right::after {
+    left: 0;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0) rotate(45deg);
+  }
+  &.top::after {
+    left: 50%;
+    bottom: 0;
+    transform: translate3d(-50%, 50%, 0) rotate(45deg);
+  }
+  &.bottom::after {
+    top: 0;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0) rotate(45deg);
+  }
 `;
-export default function Tooltip({
-  tip = "",
-  placement = "right-start",
-  children,
-}) {
+export default function Tooltip({ tip = "", placement = "right", children }) {
   return (
     <Tippy
+      offset={[0, 18]}
       duration={0}
       delay={[0, 0]}
       placement={placement}
-      content={<StyledTip>{tip}</StyledTip>}
+      content={<StyledTip className={placement}>{tip}</StyledTip>}
     >
       {children}
     </Tippy>
diff --git a/src/routes/chat/ChannelChat/index.js b/src/routes/chat/ChannelChat/index.js
index f31839ec..ca993df2 100644
--- a/src/routes/chat/ChannelChat/index.js
+++ b/src/routes/chat/ChannelChat/index.js
@@ -4,6 +4,7 @@ import { useSelector } from "react-redux";
 import { useReadMessageMutation } from "../../../app/services/message";
 import useChatScroll from "../../../common/hook/useChatScroll";
 import ChannelIcon from "../../../common/component/ChannelIcon";
+import Tooltip from "../../../common/component/Tooltip";
 import Send from "../../../common/component/Send";
 import Contact from "../../../common/component/Contact";
 import Layout from "../Layout";
@@ -21,7 +22,6 @@ import {
 import AddMemberModal from "./AddMemberModal";
 
 export default function ChannelChat({ cid = "", dropFiles = [] }) {
-  // const containerRef = useRef(null);
   const [updateReadIndex] = useReadMessageMutation();
   const updateReadDebounced = useDebounce(updateReadIndex, 300);
   const [membersVisible, setMembersVisible] = useState(true);
@@ -54,6 +54,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
   const toggleAddVisible = () => {
     setAddMemberModalVisible((prev) => !prev);
   };
+
   const { name, description, is_public, members = [] } = data;
   const memberIds = members.length == 0 ? userIds : members;
   console.log("channel message list", msgIds);
@@ -81,13 +82,19 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
             </div>
             <ul className="opts">
               <li className="opt">
-                <img src={alertIcon} alt="opt icon" />
+                <Tooltip tip="Notifications" placement="bottom">
+                  <img src={alertIcon} alt="opt icon" />
+                </Tooltip>
               </li>
               <li className="opt">
-                <img src={pinIcon} alt="opt icon" />
+                <Tooltip tip="Pin" placement="bottom">
+                  <img src={pinIcon} alt="opt icon" />
+                </Tooltip>
               </li>
               <li className="opt" onClick={toggleMembersVisible}>
-                <img src={peopleIcon} alt="opt icon" />
+                <Tooltip tip="Channel Members" placement="bottom">
+                  <img src={peopleIcon} alt="opt icon" />
+                </Tooltip>
               </li>
             </ul>
           </StyledHeader>
@@ -103,7 +110,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   </div>
                 )}
                 {memberIds.map((uid) => {
-                  return <Contact key={uid} uid={uid} popover />;
+                  return <Contact key={uid} uid={uid} dm popover />;
                 })}
               </StyledContacts>
             </>
@@ -128,11 +135,13 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   .map((mid, idx) => {
                     const curr = messageData[mid];
                     if (!curr) return null;
+                    const isFirst = idx == 0;
                     const prev = idx == 0 ? null : messageData[msgIds[idx - 1]];
                     const read = curr?.from_uid == loginUid || mid <= readIndex;
                     return renderMessageFragment({
                       updateReadIndex: updateReadDebounced,
                       read,
+                      isFirst,
                       prev,
                       curr,
                       contextId: cid,
diff --git a/src/routes/chat/ChannelList/NavItem.js b/src/routes/chat/ChannelList/NavItem.js
index 6cc9f4f6..a9b29f1f 100644
--- a/src/routes/chat/ChannelList/NavItem.js
+++ b/src/routes/chat/ChannelList/NavItem.js
@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import Tippy from "@tippyjs/react";
 import useContextMenu from "../../../common/hook/useContextMenu";
 import ContextMenu from "../../../common/component/ContextMenu";
+import Tooltip from "../../../common/component/Tooltip";
 // import { useDebounce} from "rooks";
 import { useReadMessageMutation } from "../../../app/services/message";
 
@@ -118,7 +119,9 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
           <span className={`txt ${unreads == 0 ? "read" : ""}`}>{name}</span>
         </div>
         <div className="icons">
-          <i className="setting" onClick={handleChannelSetting}></i>
+          <Tooltip placement="bottom" tip="Channel Setting">
+            <i className="setting" onClick={handleChannelSetting}></i>
+          </Tooltip>
           {unreads > 0 && (
             <i className={`badge ${unreads > 99 ? "dot" : ""}`}>
               {unreads > 99 ? null : unreads}
diff --git a/src/routes/chat/index.js b/src/routes/chat/index.js
index 4337eaa2..e1a34b8d 100644
--- a/src/routes/chat/index.js
+++ b/src/routes/chat/index.js
@@ -3,11 +3,12 @@ import { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
 
-import { MdAdd } from "react-icons/md";
 import { AiOutlineCaretDown } from "react-icons/ai";
 
 import StyledWrapper from "./styled";
+import AddIcon from "../../assets/icons/add.svg";
 import Search from "../../common/component/Search";
+import Tooltip from "../../common/component/Tooltip";
 // import Contact from "../../common/component/Contact";
 import CurrentUser from "../../common/component/CurrentUser";
 import ChannelChat from "./ChannelChat";
@@ -63,11 +64,12 @@ export default function ChatPage() {
                 />
                 CHANNELS
               </span>
-              <MdAdd
-                onClick={toggleChannelModalVisible}
-                size={18}
-                color="#78787C"
-              />
+              <Tooltip tip="New Channel" placement="bottom">
+                <AddIcon
+                  className="add_icon"
+                  onClick={toggleChannelModalVisible}
+                />
+              </Tooltip>
             </h3>
             <nav className="nav">
               <ChannelList setDropFiles={setChannelDropFiles} />
@@ -83,11 +85,12 @@ export default function ChatPage() {
                 />
                 DIRECT MESSAGE
               </span>
-              <MdAdd
-                size={18}
-                color="#78787C"
-                onClick={toggleContactsModalVisible}
-              />
+              <Tooltip tip="New DM" placement="bottom">
+                <AddIcon
+                  className="add_icon"
+                  onClick={toggleContactsModalVisible}
+                />
+              </Tooltip>
             </h3>
             <nav className="nav">
               <DMList
diff --git a/src/routes/chat/styled.js b/src/routes/chat/styled.js
index e7f8b3cf..d95fcb8f 100644
--- a/src/routes/chat/styled.js
+++ b/src/routes/chat/styled.js
@@ -31,6 +31,10 @@ const StyledWrapper = styled.div`
           transition: transform 0.5s ease;
           transform-origin: center;
         }
+        .add_icon {
+          width: 18px;
+          height: 18px;
+        }
       }
       > .nav {
         display: flex;
diff --git a/src/routes/home/Menu.js b/src/routes/home/Menu.js
index 8f6159d4..855ae093 100644
--- a/src/routes/home/Menu.js
+++ b/src/routes/home/Menu.js
@@ -42,7 +42,7 @@ export default function Menu() {
   return (
     <StyledMenus>
       <li className="menu" onClick={handleSetting}>
-        <Tooltip placement="top" tip="Settings">
+        <Tooltip placement="right" tip="Settings">
           <img src={settingIcon} alt="setting icon" className="icon" />
         </Tooltip>
         {/* {expand && (