diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js
--- a/web/chat/chat-message-list.react.js
+++ b/web/chat/chat-message-list.react.js
@@ -37,6 +37,7 @@
 import { useSelector } from '../redux/redux-utils';
 import ChatInputBar from './chat-input-bar.react';
 import css from './chat-message-list.css';
+import ThreadTopBar from './chat-thread-top-bar.react';
 import { MessageListContext } from './message-list-types';
 import MessageTimestampTooltip from './message-timestamp-tooltip.react';
 import Message from './message.react';
@@ -277,6 +278,7 @@
     });
     return connectDropTarget(
       <div className={containerStyle} ref={this.containerRef}>
+        <ThreadTopBar threadInfo={threadInfo} />
         <div className={css.outerMessageContainer}>
           <div className={messageContainerStyle} ref={this.messageContainerRef}>
             {messages}
diff --git a/web/chat/chat-thread-top-bar.css b/web/chat/chat-thread-top-bar.css
new file mode 100644
--- /dev/null
+++ b/web/chat/chat-thread-top-bar.css
@@ -0,0 +1,34 @@
+div.topBarContainer {
+  display: flex;
+  background-color: var(--bg);
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  color: var(--thread-top-bar-color);
+  border-bottom: 1px solid var(--border);
+}
+
+div.topBarThreadInfo {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
+div.threadColorSquare {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+}
+
+div.threadTitle {
+  font-size: var(--m-font-16);
+  font-weight: var(--bold);
+}
+
+button.topBarMenu {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--thread-top-bar-menu-color);
+}
diff --git a/web/chat/chat-thread-top-bar.react.js b/web/chat/chat-thread-top-bar.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/chat-thread-top-bar.react.js
@@ -0,0 +1,37 @@
+// @flow
+import * as React from 'react';
+
+import type { ThreadInfo } from 'lib/types/thread-types';
+
+import SWMansionIcon from '../SWMansionIcon.react';
+import css from './chat-thread-top-bar.css';
+
+type threadTopBarProps = {
+  +threadInfo: ThreadInfo,
+};
+function ThreadTopBar(props: threadTopBarProps): React.Node {
+  const { threadInfo } = props;
+  const threadBackgroundColorStyle = React.useMemo(
+    () => ({
+      backgroundColor: `#${threadInfo.color}`,
+    }),
+    [threadInfo.color],
+  );
+
+  return (
+    <div className={css.topBarContainer}>
+      <div className={css.topBarThreadInfo}>
+        <div
+          className={css.threadColorSquare}
+          style={threadBackgroundColorStyle}
+        />
+        <div className={css.threadTitle}>{threadInfo.uiName}</div>
+      </div>
+      <button className={css.topBarMenu}>
+        <SWMansionIcon icon="menu-vertical" size={20} />
+      </button>
+    </div>
+  );
+}
+
+export default ThreadTopBar;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -81,4 +81,6 @@
   --help-color: var(--shades-black-60);
   --modal-bg: var(--shades-black-90);
   --breadcrumb-color: var(--shades-white-60);
+  --thread-top-bar-color: var(--shades-white-100);
+  --thread-top-bar-menu-color: var(--shades-white-70);
 }