diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js
index fdb2f42c9..5f755b915 100644
--- a/web/chat/chat-message-list.react.js
+++ b/web/chat/chat-message-list.react.js
@@ -1,494 +1,496 @@
 // @flow
 
 import classNames from 'classnames';
 import { detect as detectBrowser } from 'detect-browser';
 import invariant from 'invariant';
 import * as React from 'react';
 import { useDrop } from 'react-dnd';
 import { NativeTypes } from 'react-dnd-html5-backend';
 
 import {
   fetchMessagesBeforeCursorActionTypes,
   fetchMessagesBeforeCursor,
   fetchMostRecentMessagesActionTypes,
 } from 'lib/actions/message-actions';
 import { registerFetchKey } from 'lib/reducers/loading-reducer';
 import {
   type ChatMessageItem,
   useMessageListData,
 } from 'lib/selectors/chat-selectors';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors';
 import { messageKey } from 'lib/shared/message-utils';
 import {
   useWatchThread,
   useExistingThreadInfoFinder,
 } from 'lib/shared/thread-utils';
 import type { FetchMessageInfosPayload } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
 import { type InputState, InputStateContext } from '../input/input-state';
 import LoadingIndicator from '../loading-indicator.react';
 import { useTextMessageRulesFunc } from '../markdown/rules.react';
 import { useSelector } from '../redux/redux-utils';
 import ChatInputBar from './chat-input-bar.react';
 import css from './chat-message-list.css';
 import { MessageListContext } from './message-list-types';
 import MessageTimestampTooltip from './message-timestamp-tooltip.react';
 import Message from './message.react';
 import type {
   OnMessagePositionWithContainerInfo,
   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,
 };
 type PassedProps = {
   ...BaseProps,
   // Redux state
   +activeChatThreadID: ?string,
   +threadInfo: ?ThreadInfo,
   +messageListData: ?$ReadOnlyArray<ChatMessageItem>,
   +startReached: boolean,
   +timeZone: ?string,
   +supportsReverseFlex: boolean,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +fetchMessagesBeforeCursor: (
     threadID: string,
     beforeMessageID: string,
   ) => Promise<FetchMessageInfosPayload>,
   // withInputState
   +inputState: ?InputState,
 };
 type ReactDnDProps = {
   isActive: boolean,
   connectDropTarget: (node: React.Node) => React.Node,
 };
 type Props = {
   ...PassedProps,
   ...ReactDnDProps,
 };
 type State = {
   +mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
 };
 type Snapshot = {
   +scrollTop: number,
   +scrollHeight: number,
 };
 class ChatMessageList extends React.PureComponent<Props, State> {
   state: State = {
     mouseOverMessagePosition: null,
   };
   container: ?HTMLDivElement;
   messageContainer: ?HTMLDivElement;
   loadingFromScroll = false;
 
   componentDidMount() {
     this.scrollToBottom();
   }
 
   getSnapshotBeforeUpdate(prevProps: Props) {
     if (
       ChatMessageList.hasNewMessage(this.props, prevProps) &&
       this.messageContainer
     ) {
       const { scrollTop, scrollHeight } = this.messageContainer;
       return { scrollTop, scrollHeight };
     }
     return null;
   }
 
   static hasNewMessage(props: Props, prevProps: Props) {
     const { messageListData } = props;
     if (!messageListData || messageListData.length === 0) {
       return false;
     }
     const prevMessageListData = prevProps.messageListData;
     if (!prevMessageListData || prevMessageListData.length === 0) {
       return true;
     }
     return (
       ChatMessageList.keyExtractor(prevMessageListData[0]) !==
       ChatMessageList.keyExtractor(messageListData[0])
     );
   }
 
   componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) {
     const { messageListData } = this.props;
     const prevMessageListData = prevProps.messageListData;
 
     if (
       this.loadingFromScroll &&
       messageListData &&
       (!prevMessageListData ||
         messageListData.length > prevMessageListData.length ||
         this.props.startReached)
     ) {
       this.loadingFromScroll = false;
     }
 
     const { messageContainer } = this;
     if (messageContainer && prevMessageListData !== messageListData) {
       this.onScroll();
     }
 
     // We'll scroll to the bottom if the user was already scrolled to the bottom
     // before the new message, or if the new message was composed locally
     const hasNewMessage = ChatMessageList.hasNewMessage(this.props, prevProps);
     if (
       this.props.activeChatThreadID !== prevProps.activeChatThreadID ||
       (hasNewMessage &&
         messageListData &&
         messageListData[0].itemType === 'message' &&
         messageListData[0].messageInfo.localID) ||
       (hasNewMessage && snapshot && Math.abs(snapshot.scrollTop) <= 1)
     ) {
       this.scrollToBottom();
     } else if (hasNewMessage && messageContainer && snapshot) {
       const { scrollTop, scrollHeight } = messageContainer;
       if (
         scrollHeight > snapshot.scrollHeight &&
         scrollTop === snapshot.scrollTop
       ) {
         const newHeight = scrollHeight - snapshot.scrollHeight;
         const newScrollTop = Math.abs(scrollTop) + newHeight;
         if (this.props.supportsReverseFlex) {
           messageContainer.scrollTop = -1 * newScrollTop;
         } else {
           messageContainer.scrollTop = newScrollTop;
         }
       }
     }
   }
 
   scrollToBottom() {
     if (this.messageContainer) {
       this.messageContainer.scrollTop = 0;
     }
   }
 
   static keyExtractor(item: ChatMessageItem) {
     if (item.itemType === 'loader') {
       return 'loader';
     }
     return messageKey(item.messageInfo);
   }
 
   renderItem = item => {
     if (item.itemType === 'loader') {
       return (
         <div key="loader" className={css.loading}>
           <LoadingIndicator status="loading" size="large" color="black" />
         </div>
       );
     }
     const { threadInfo, setModal } = this.props;
     invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
     return (
       <Message
         item={item}
         threadInfo={threadInfo}
         setMouseOverMessagePosition={this.setMouseOverMessagePosition}
         mouseOverMessagePosition={this.state.mouseOverMessagePosition}
         setModal={setModal}
         timeZone={this.props.timeZone}
         key={ChatMessageList.keyExtractor(item)}
       />
     );
   };
 
   setMouseOverMessagePosition = (messagePositionInfo: MessagePositionInfo) => {
     if (!this.messageContainer) {
       return;
     }
     if (messagePositionInfo.type === 'off') {
       this.setState({ mouseOverMessagePosition: null });
       return;
     }
     const {
       top: containerTop,
       bottom: containerBottom,
       left: containerLeft,
       right: containerRight,
       height: containerHeight,
       width: containerWidth,
     } = this.messageContainer.getBoundingClientRect();
     const mouseOverMessagePosition = {
       ...messagePositionInfo,
       messagePosition: {
         ...messagePositionInfo.messagePosition,
         top: messagePositionInfo.messagePosition.top - containerTop,
         bottom: messagePositionInfo.messagePosition.bottom - containerTop,
         left: messagePositionInfo.messagePosition.left - containerLeft,
         right: messagePositionInfo.messagePosition.right - containerLeft,
       },
       containerPosition: {
         top: containerTop,
         bottom: containerBottom,
         left: containerLeft,
         right: containerRight,
         height: containerHeight,
         width: containerWidth,
       },
     };
     this.setState({ mouseOverMessagePosition });
   };
 
   render() {
     const {
       messageListData,
       threadInfo,
       inputState,
       connectDropTarget,
       isActive,
     } = this.props;
     if (!messageListData) {
       return <div className={css.container} />;
     }
     invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
     invariant(inputState, 'InputState should be set');
     const messages = messageListData.map(this.renderItem);
     const containerStyle = classNames({
       [css.container]: true,
       [css.activeContainer]: isActive,
     });
 
     let tooltip;
     if (this.state.mouseOverMessagePosition) {
       const messagePositionInfo = this.state.mouseOverMessagePosition;
       tooltip = (
         <MessageTimestampTooltip
           messagePositionInfo={messagePositionInfo}
           timeZone={this.props.timeZone}
         />
       );
     }
     let relationshipPrompt;
     if (this.props.threadInfo) {
       relationshipPrompt = (
         <RelationshipPrompt threadInfo={this.props.threadInfo} />
       );
     }
 
     const messageContainerStyle = classNames({
       [css.messageContainer]: true,
       [css.mirroredMessageContainer]: !this.props.supportsReverseFlex,
     });
     return connectDropTarget(
       <div className={containerStyle} ref={this.containerRef}>
+        <ThreadTopBar threadInfo={threadInfo} />
         <div className={css.outerMessageContainer}>
           {relationshipPrompt}
           <div className={messageContainerStyle} ref={this.messageContainerRef}>
             {messages}
           </div>
           {tooltip}
         </div>
         <ChatInputBar threadInfo={threadInfo} inputState={inputState} />
       </div>,
     );
   }
 
   containerRef = (container: ?HTMLDivElement) => {
     if (container) {
       container.addEventListener('paste', this.onPaste);
     }
     this.container = container;
   };
 
   onPaste = (e: ClipboardEvent) => {
     const { inputState } = this.props;
     if (!inputState) {
       return;
     }
     const { clipboardData } = e;
     if (!clipboardData) {
       return;
     }
     const { files } = clipboardData;
     if (files.length === 0) {
       return;
     }
     e.preventDefault();
     inputState.appendFiles([...files]);
   };
 
   messageContainerRef = (messageContainer: ?HTMLDivElement) => {
     this.messageContainer = messageContainer;
     // In case we already have all the most recent messages,
     // but they're not enough
     this.possiblyLoadMoreMessages();
     if (messageContainer) {
       messageContainer.addEventListener('scroll', this.onScroll);
     }
   };
 
   onScroll = () => {
     if (!this.messageContainer) {
       return;
     }
     if (this.state.mouseOverMessagePosition) {
       this.setState({ mouseOverMessagePosition: null });
     }
     this.possiblyLoadMoreMessages();
   };
 
   possiblyLoadMoreMessages() {
     if (!this.messageContainer) {
       return;
     }
     const { scrollTop, scrollHeight, clientHeight } = this.messageContainer;
     if (
       this.props.startReached ||
       Math.abs(scrollTop) + clientHeight + 55 < scrollHeight
     ) {
       return;
     }
     const oldestMessageServerID = this.oldestMessageServerID();
     if (!oldestMessageServerID) {
       return;
     }
     if (this.loadingFromScroll) {
       return;
     }
     this.loadingFromScroll = true;
     const threadID = this.props.activeChatThreadID;
     invariant(threadID, 'should be set');
     this.props.dispatchActionPromise(
       fetchMessagesBeforeCursorActionTypes,
       this.props.fetchMessagesBeforeCursor(threadID, oldestMessageServerID),
     );
   }
 
   oldestMessageServerID(): ?string {
     const data = this.props.messageListData;
     invariant(data, 'should be set');
     for (let i = data.length - 1; i >= 0; i--) {
       if (data[i].itemType === 'message' && data[i].messageInfo.id) {
         return data[i].messageInfo.id;
       }
     }
     return null;
   }
 }
 
 registerFetchKey(fetchMessagesBeforeCursorActionTypes);
 registerFetchKey(fetchMostRecentMessagesActionTypes);
 
 const ConnectedChatMessageList: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedChatMessageList(props) {
     const userAgent = useSelector(state => state.userAgent);
     const supportsReverseFlex = React.useMemo(() => {
       const browser = detectBrowser(userAgent);
       return (
         !browser ||
         browser.name !== 'firefox' ||
         parseInt(browser.version) >= 81
       );
     }, [userAgent]);
 
     const timeZone = useSelector(state => state.timeZone);
 
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
     const baseThreadInfo = useSelector(state => {
       const activeID = state.navInfo.activeChatThreadID;
       if (!activeID) {
         return null;
       }
       return threadInfoSelector(state)[activeID] ?? state.navInfo.pendingThread;
     });
     const existingThreadInfoFinder = useExistingThreadInfoFinder(
       baseThreadInfo,
     );
     const threadInfo = React.useMemo(
       () =>
         existingThreadInfoFinder({
           searching: false,
           userInfoInputArray: [],
         }),
       [existingThreadInfoFinder],
     );
 
     const messageListData = useMessageListData({
       threadInfo,
       searching: false,
       userInfoInputArray: [],
     });
 
     const startReached = useSelector(state => {
       const activeID = state.navInfo.activeChatThreadID;
       if (!activeID) {
         return null;
       }
 
       if (state.navInfo.pendingThread) {
         return true;
       }
 
       const threadMessageInfo = state.messageStore.threads[activeID];
       if (!threadMessageInfo) {
         return null;
       }
       return threadMessageInfo.startReached;
     });
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callFetchMessagesBeforeCursor = useServerCall(
       fetchMessagesBeforeCursor,
     );
 
     const inputState = React.useContext(InputStateContext);
     const [dndProps, connectDropTarget] = useDrop({
       accept: NativeTypes.FILE,
       drop: item => {
         const { files } = item;
         if (inputState && files.length > 0) {
           inputState.appendFiles(files);
         }
       },
       collect: monitor => ({
         isActive: monitor.isOver() && monitor.canDrop(),
       }),
     });
 
     const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo?.id);
     const messageListContext = React.useMemo(() => {
       if (!getTextMessageMarkdownRules) {
         return undefined;
       }
       return { getTextMessageMarkdownRules };
     }, [getTextMessageMarkdownRules]);
 
     useWatchThread(threadInfo);
 
     return (
       <MessageListContext.Provider value={messageListContext}>
         <ChatMessageList
           {...props}
           activeChatThreadID={activeChatThreadID}
           threadInfo={threadInfo}
           messageListData={messageListData}
           startReached={startReached}
           timeZone={timeZone}
           supportsReverseFlex={supportsReverseFlex}
           inputState={inputState}
           dispatchActionPromise={dispatchActionPromise}
           fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
           {...dndProps}
           connectDropTarget={connectDropTarget}
         />
       </MessageListContext.Provider>
     );
   },
 );
 
 export default ConnectedChatMessageList;
diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css
new file mode 100644
index 000000000..9238746cc
--- /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
index 000000000..8a096896d
--- /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
index 3b5a3ec6d..c835f9a20 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,99 +1,101 @@
 :root {
   /* 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.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-100: #0a0a0a;
   --shades-black-90: #1f1f1f;
   --shades-black-80: #404040;
   --shades-black-70: #666666;
   --shades-black-60: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --bg: var(--shades-black-100);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-60);
   --text-input-bg: var(--shades-black-80);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-80);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
   --btn-bg-primary: var(--violet-dark-100);
   --btn-bg-danger: var(--error-primary);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --selected-thread-bg: var(--shades-black-90);
   --chat-timestamp-color: var(--shades-black-60);
   --tool-tip-bg: var(--shades-black-80);
   --tool-tip-color: var(--shades-black-60);
   --border-color: var(--shades-black-60);
   --calendar-chevron: var(--shades-black-60);
   --calendar-day-bg: var(--shades-black-60);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-90);
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --modal-bg: var(--shades-black-90);
   --join-bg: var(--shades-black-90);
   --help-color: var(--shades-black-60);
   --modal-bg: var(--shades-black-90);
   --breadcrumb-color: var(--shades-black-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --join-bg: var(--shades-black-90);
   --btn-secondary-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-from-color-read: var(--shades-black-80);
   --thread-last-message-color-read: var(--shades-black-60);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
   --permission-color: var(--shades-white-60);
+  --thread-top-bar-color: var(--shades-white-100);
+  --thread-top-bar-menu-color: var(--shades-white-70);
 }