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
@@ -1,5 +1,6 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 
 import {
@@ -16,7 +17,6 @@
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
-import Button from '../components/button.react';
 import SWMansionIcon from '../SWMansionIcon.react';
 import css from './chat-thread-list.css';
 
@@ -74,22 +74,24 @@
   }`;
 
   const menuIconSize = renderStyle === 'chat' ? 24 : 16;
-
-  let btn;
-  if (menuVisible) {
-    btn = (
-      <Button variant="toggle_read" onClick={toggleUnreadStatus}>
-        {toggleUnreadStatusButtonText}
-      </Button>
-    );
-  }
-
   return (
     <div className={css.menu} onMouseLeave={hideMenu}>
       <button onClick={toggleMenu}>
         <SWMansionIcon icon="menu-vertical" size={menuIconSize} />
       </button>
-      <div>{btn}</div>
+      <div
+        className={classNames(css.menuContent, {
+          [css.menuContentVisible]: menuVisible,
+        })}
+      >
+        <ul>
+          <li>
+            <button onClick={toggleUnreadStatus}>
+              {toggleUnreadStatusButtonText}
+            </button>
+          </li>
+        </ul>
+      </div>
     </div>
   );
 }
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
@@ -161,7 +161,6 @@
 .menu {
   position: relative;
   display: flex;
-  padding: 5px;
   justify-content: flex-end;
 }
 .menu > button {
@@ -189,7 +188,16 @@
   border-radius: 5px;
   box-shadow: 1px 1px 5px 2px #00000022;
 }
-button.menuContent {
+.menuContentVisible {
+  display: block;
+}
+.menuContent ul {
+  list-style: none;
+}
+.menuContent li:not(:last-child) {
+  border-bottom: 1px solid #dddddd;
+}
+.menuContent button {
   border: none;
   cursor: pointer;
   padding: 10px;
diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -32,16 +32,3 @@
   border-radius: 50%;
   padding: 0;
 }
-
-.unread {
-  background: var(--unread-btn-bg);
-  color: var(--fg);
-  position: absolute;
-  z-index: 1;
-  font-size: var(--xs-font-12);
-  font-weight: var(--semi-bold);
-  top: 0;
-  right: 25px;
-  width: max-content;
-  padding: 10px;
-}
diff --git a/web/components/button.react.js b/web/components/button.react.js
--- a/web/components/button.react.js
+++ b/web/components/button.react.js
@@ -8,7 +8,7 @@
 type Props = {
   +onClick: (event: SyntheticEvent<HTMLButtonElement>) => void,
   +children: React.Node,
-  +variant?: 'primary' | 'secondary' | 'danger' | 'round' | 'toggle_read',
+  +variant?: 'primary' | 'secondary' | 'danger' | 'round',
   +type?: string,
   +disabled?: boolean,
   +className?: string,
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,6 +1,6 @@
 :root {
-  /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
-
+  /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below 
+     
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
@@ -101,5 +101,4 @@
   --thread-ancestor-keyserver-border: var(--shades-black-70);
   --thread-ancestor-color-light: var(--shades-white-70);
   --thread-ancestor-color-dark: var(--shades-black-100);
-  --unread-btn-bg: var(--shades-black-80);
 }