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
@@ -45,6 +45,7 @@
   MessagePositionInfo,
 } from './position-types';
 import RelationshipPrompt from './relationship-prompt/relationship-prompt';
+import ThreadTopBar from './thread-top-bar.react';
 
 type BaseProps = {
   +setModal: (modal: ?React.Node) => void,
@@ -284,6 +285,7 @@
     });
     return connectDropTarget(
       <div className={containerStyle} ref={this.containerRef}>
+        <ThreadTopBar threadInfo={threadInfo} />
         <div className={css.outerMessageContainer}>
           {relationshipPrompt}
           <div className={messageContainerStyle} ref={this.messageContainerRef}>
diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css
new file mode 100644
--- /dev/null
+++ b/web/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;
+}
+
+p.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/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/thread-top-bar.react.js
@@ -0,0 +1,38 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ThreadInfo } from 'lib/types/thread-types';
+
+import SWMansionIcon from '../SWMansionIcon.react';
+import css from './thread-top-bar.css';
+
+type threadTopBarProps = {
+  +threadInfo: ThreadInfo,
+};
+function ThreadTopBar(props: threadTopBarProps): React.Node {
+  const { threadInfo } = props;
+  const threadBackgroundColorStyle = React.useMemo(
+    () => ({
+      background: `#${threadInfo.color}`,
+    }),
+    [threadInfo.color],
+  );
+
+  return (
+    <div className={css.topBarContainer}>
+      <div className={css.topBarThreadInfo}>
+        <div
+          className={css.threadColorSquare}
+          style={threadBackgroundColorStyle}
+        />
+        <p className={css.threadTitle}>{threadInfo.uiName}</p>
+      </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
@@ -95,4 +95,6 @@
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
+  --thread-top-bar-color: var(--shades-white-100);
+  --thread-top-bar-menu-color: var(--shades-white-70);
 }