diff --git a/web/chat/chat-thread-list-item-menu.react.js b/web/chat/chat-thread-list-item-menu.react.js
--- a/web/chat/chat-thread-list-item-menu.react.js
+++ b/web/chat/chat-thread-list-item-menu.react.js
@@ -19,9 +19,13 @@
   const { renderStyle = 'chat', threadInfo, mostRecentNonLocalMessage } = props;
   const active = useThreadIsActive(threadInfo.id);
   const [menuVisible, setMenuVisible] = React.useState(false);
-  const toggleMenu = React.useCallback(() => {
-    setMenuVisible(!menuVisible);
-  }, [menuVisible]);
+  const toggleMenu = React.useCallback(
+    event => {
+      event.stopPropagation();
+      setMenuVisible(!menuVisible);
+    },
+    [menuVisible],
+  );
 
   const hideMenu = React.useCallback(() => {
     setMenuVisible(false);
@@ -32,6 +36,15 @@
     mostRecentNonLocalMessage,
     hideMenu,
   );
+
+  const onToggleUnreadStatusClicked = React.useCallback(
+    event => {
+      event.stopPropagation();
+      toggleUnreadStatus();
+    },
+    [toggleUnreadStatus],
+  );
+
   const toggleUnreadStatusButtonText = `Mark as ${
     threadInfo.currentUser.unread ? 'read' : 'unread'
   }`;
@@ -50,7 +63,7 @@
         <SWMansionIcon icon="menu-vertical" size={menuIconSize} />
       </button>
       <div>
-        <button className={btnCls} onClick={toggleUnreadStatus}>
+        <button className={btnCls} onClick={onToggleUnreadStatusClicked}>
           <SWMansionIcon className={css.mailIcon} icon="mail" size={18} />
           {toggleUnreadStatusButtonText}
         </button>
diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -130,13 +130,13 @@
 
   return (
     <>
-      <div className={containerClassName}>
+      <div className={containerClassName} onClick={onClick}>
         <div className={css.colorContainer}>
           <div className={css.dotContainer}>{unreadDot}</div>
 
           <div className={css.colorSplotch} style={colorSplotchStyle} />
         </div>
-        <a className={css.threadButton} onClick={onClick}>
+        <div className={css.threadButton}>
           <p className={breadCrumbsClassName}>{ancestorPath}</p>
           <div className={css.threadRow}>
             <div className={titleClassName}>{threadInfo.uiName}</div>
@@ -147,7 +147,7 @@
               threadInfo={threadInfo}
             />
           </div>
-        </a>
+        </div>
         <div>
           <ChatThreadListItemMenu
             threadInfo={threadInfo}
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -1,6 +1,11 @@
 div.thread {
   display: flex;
   flex-direction: row;
+  align-items: flex-start;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-right: 10px;
+  cursor: pointer;
 }
 div.threadListSidebar {
   display: flex;
@@ -48,7 +53,7 @@
   color: var(--thread-color-read);
   line-height: var(--line-height-text);
 }
-a.threadButton {
+div.threadButton {
   flex: 1;
   cursor: pointer;
   overflow: hidden;