diff --git a/src/assets/icons/mute.svg b/src/assets/icons/mute.svg
new file mode 100644
index 00000000..daf1036a
--- /dev/null
+++ b/src/assets/icons/mute.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="#D2D1D1" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.02618 13.4991V9.01525C3.02618 4.06024 7.04347 0.0427975 11.9998 0.0427975C13.5448 0.0518677 15.063 0.462697 16.401 1.23953L2.88215 14.7543C2.97517 14.3433 3.02321 13.9234 3.02618 13.5006V13.4991ZM23.5176 2.61634L20.3328 5.79838C20.7454 6.82118 20.963 7.91295 20.9674 9.01525V13.4991C20.9614 15.3857 21.8495 17.1612 23.36 18.2859C23.8761 18.6729 24.0861 19.3477 23.8807 19.9597C23.6751 20.5715 23.1005 20.9823 22.4555 20.9793H14.9745C14.9745 22.629 13.6349 23.9682 11.9817 23.9682C10.3287 23.9682 8.98911 22.6304 8.98911 20.9793H5.14434L2.60166 23.5288C2.22366 23.9276 1.66113 24.0895 1.13159 23.9516C0.599032 23.8137 0.1835 23.3967 0.046977 22.8673C-0.0880248 22.3365 0.0724881 21.7726 0.470035 21.3978L21.3874 0.482303C21.7625 0.0774777 22.3296 -0.0904547 22.865 0.047466C23.4006 0.182452 23.8176 0.602218 23.9542 1.13629C24.0891 1.6701 23.9211 2.23699 23.5161 2.61341L23.5176 2.61634Z" />
+</svg>
diff --git a/src/routes/chat/SessionList/Session.tsx b/src/routes/chat/SessionList/Session.tsx
index fc99695c..f9c263c1 100644
--- a/src/routes/chat/SessionList/Session.tsx
+++ b/src/routes/chat/SessionList/Session.tsx
@@ -9,6 +9,7 @@ import getUnreadCount, { renderPreviewMessage } from "../utils";
 import User from "../../../common/component/User";
 import Avatar from "../../../common/component/Avatar";
 import IconLock from "../../../assets/icons/lock.svg";
+import IconMute from "../../../assets/icons/mute.svg";
 import IconVoicing from "../../../assets/icons/voicing.svg";
 import useContextMenu from "../../../common/hook/useContextMenu";
 import useUploadFile from "../../../common/hook/useUploadFile";
@@ -106,6 +107,8 @@ const Session: FC<IProps> = ({
   const isVoicing = type == "channel" ? voiceList.some((item) => {
     return item.context == type && item.id === id;
   }) : (id == callingFrom || id == callingTo);
+  console.log("unreads", unreads, isCurrentPath);
+
   return (
     <li className="session">
       <ContextMenu
@@ -152,11 +155,9 @@ const Session: FC<IProps> = ({
             </div>
             <div className="flex items-center justify-between">
               <span className={clsx("text-xs text-gray-500 dark:text-gray-400  truncate", unreads > 0 ? `w-36` : ``)}>{renderPreviewMessage(previewMsg)}</span>
-              {unreads > 0 && !isCurrentPath && (
-                <strong className={clsx(`text-white px-1.5 py-[3px] bg-primary-400 font-bold text-[10px] leading-[10px] rounded-[10px]`, muted && "bg-gray-500")}>
-                  {unreads > 99 ? "99+" : unreads}
-                </strong>
-              )}
+              {(unreads > 0 && !isCurrentPath) ? <strong className={clsx(`text-white px-1.5 py-[3px] font-bold text-[10px] leading-[10px] rounded-[10px]`, muted ? "bg-black/10 dark:bg-gray-500" : "bg-primary-400")}>
+                {unreads > 99 ? "99+" : unreads}
+              </strong> : (muted && <IconMute className="w-3 h-3 fill-black/10 dark:fill-gray-500" />)}
             </div>
           </div>
         </NavLink>