diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -82,24 +82,44 @@
   border-color: transparent transparent var(--tool-tip-bg) transparent;
 }
 
-div.messageActionLinks {
+div.messageActionActiveArea {
   position: absolute;
   display: flex;
   top: 0;
   bottom: 0;
   align-items: center;
-  color: gray;
-  padding: 0 6px;
+  padding: 0 12px;
 }
-div.viewerMessageActionLinks {
+
+div.viewerMessageActionActiveArea {
   right: 100%;
 }
-div.nonViewerMessageActionLinks {
+div.nonViewerMessageActiveArea {
   left: 100%;
 }
-div.messageActionLinks > div + div {
+div.messageActionActiveArea > div + div {
   margin-left: 4px;
 }
+
+div.messageActionContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding-left: 6px;
+  padding-right: 6px;
+  background-color: var(--message-action-tooltip-bg);
+  border-radius: 8px;
+}
+
+div.messageActionContainer svg {
+  padding: 10px 6px 6px;
+  color: var(--fg);
+}
+div.messageActionContainer svg:hover {
+  cursor: pointer;
+}
+
 div.messageActionLinkIcon:hover {
   cursor: pointer;
 }
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -166,24 +166,28 @@
       viewerActionLinks = (
         <div
           className={classNames(
-            css.messageActionLinks,
-            css.viewerMessageActionLinks,
+            css.messageActionActiveArea,
+            css.viewerMessageActionActiveArea,
           )}
         >
-          {messageActionButton}
-          {replyButton}
+          <div className={css.messageActionContainer}>
+            {messageActionButton}
+            {replyButton}
+          </div>
         </div>
       );
     } else if (replyButton || messageActionButton) {
       nonViewerActionLinks = (
         <div
           className={classNames(
-            css.messageActionLinks,
-            css.nonViewerMessageActionLinks,
+            css.messageActionActiveArea,
+            css.nonViewerMessageActiveArea,
           )}
         >
-          {replyButton}
-          {messageActionButton}
+          <div className={css.messageActionContainer}>
+            {replyButton}
+            {messageActionButton}
+          </div>
         </div>
       );
     }
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -102,4 +102,5 @@
   --thread-ancestor-color-light: var(--shades-white-70);
   --thread-ancestor-color-dark: var(--shades-black-100);
   --text-message-default-background: var(--shades-black-80);
+  --message-action-tooltip-bg: var(--shades-black-90);
 }