diff --git a/web/chat/chat-message-list-container.react.js b/web/chat/chat-message-list-container.react.js
--- a/web/chat/chat-message-list-container.react.js
+++ b/web/chat/chat-message-list-container.react.js
@@ -13,7 +13,7 @@
 import css from './chat-message-list-container.css';
 import ChatMessageList from './chat-message-list.react.js';
 import ChatThreadComposer from './chat-thread-composer.react.js';
-import ThreadTopBar from './thread-top-bar.react.js';
+import PinnedMessagesBanner from './pinned-messages-banner.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import {
@@ -108,7 +108,6 @@
   }, [onPaste]);
 
   const content = React.useMemo(() => {
-    const topBar = <ThreadTopBar threadInfo={threadInfo} />;
     const messageListAndInput = (
       <>
         <ChatMessageList threadInfo={threadInfo} />
@@ -118,7 +117,7 @@
     if (!isChatCreation) {
       return (
         <>
-          {topBar}
+          <PinnedMessagesBanner threadInfo={threadInfo} />
           {messageListAndInput}
         </>
       );
@@ -137,7 +136,6 @@
     }
     return (
       <>
-        {topBar}
         {chatUserSelection}
         {messageListAndInput}
       </>
diff --git a/web/chat/chat.css b/web/chat/chat.css
--- a/web/chat/chat.css
+++ b/web/chat/chat.css
@@ -1,3 +1,7 @@
 .threadListPanel {
   width: 356px;
 }
+
+.messageListPanel {
+  flex: 1;
+}
diff --git a/web/chat/chat.react.js b/web/chat/chat.react.js
--- a/web/chat/chat.react.js
+++ b/web/chat/chat.react.js
@@ -1,21 +1,44 @@
 // @flow
 
+import invariant from 'invariant';
 import * as React from 'react';
 
 import ThreadDraftUpdater from 'lib/components/thread-draft-updater.react.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 
+import ChatMessageListContainer from './chat-message-list-container.react.js';
 import ChatTabs from './chat-tabs.react.js';
 import ChatThreadList from './chat-thread-list.react.js';
 import css from './chat.css';
 import { ThreadListProvider } from './thread-list-provider.js';
+import ThreadTopBar from './thread-top-bar.react.js';
 import Panel, { type PanelData } from '../components/panel.react.js';
 import { useSelector } from '../redux/redux-utils.js';
+import { useThreadInfoForPossiblyPendingThread } from '../utils/thread-utils.js';
 
 function Chat(): React.Node {
   const loggedIn = useSelector(isLoggedIn);
+  const activeChatThreadID = useSelector(
+    state => state.navInfo.activeChatThreadID,
+  );
+  const chatModeIsCreate = useSelector(
+    state => state.navInfo.chatMode === 'create',
+  );
+
+  const threadInfo = useThreadInfoForPossiblyPendingThread(activeChatThreadID);
+  invariant(threadInfo, 'threadInfo should be set');
 
   const chatList = React.useMemo(() => <ChatThreadList />, []);
+  const messageList = React.useMemo(() => {
+    if (!activeChatThreadID && !chatModeIsCreate) {
+      return null;
+    }
+    return (
+      <>
+        <ChatMessageListContainer activeChatThreadID={activeChatThreadID} />
+      </>
+    );
+  }, [activeChatThreadID, chatModeIsCreate]);
 
   let threadDraftUpdater = null;
   if (loggedIn) {
@@ -29,8 +52,13 @@
         body: chatList,
         classNameOveride: css.threadListPanel,
       },
+      {
+        header: <ThreadTopBar threadInfo={threadInfo} />,
+        body: messageList,
+        classNameOveride: css.messageListPanel,
+      },
     ],
-    [chatList],
+    [chatList, messageList, threadInfo],
   );
 
   const chatPanel = React.useMemo(