diff --git a/web/chat/chat.css b/web/chat/chat.css
--- a/web/chat/chat.css
+++ b/web/chat/chat.css
@@ -1,6 +1,3 @@
-div.chatComingSoon {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding-top: 10px;
+.threadListPanel {
+  width: 356px;
 }
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
@@ -5,42 +5,42 @@
 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 Panel, { type PanelData } from '../components/panel.react.js';
 import { useSelector } from '../redux/redux-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 chatList = React.useMemo(
-    () => (
-      <ThreadListProvider>
-        <ChatTabs />
-      </ThreadListProvider>
-    ),
-    [],
-  );
-  const messageList = React.useMemo(() => {
-    if (!activeChatThreadID && !chatModeIsCreate) {
-      return null;
-    }
-    return <ChatMessageListContainer activeChatThreadID={activeChatThreadID} />;
-  }, [activeChatThreadID, chatModeIsCreate]);
+
+  const chatList = React.useMemo(() => <ChatThreadList />, []);
 
   let threadDraftUpdater = null;
   if (loggedIn) {
     threadDraftUpdater = <ThreadDraftUpdater />;
   }
+
+  const panelData: $ReadOnlyArray<PanelData> = React.useMemo(
+    () => [
+      {
+        header: <ChatTabs />,
+        body: chatList,
+        classNameOveride: css.threadListPanel,
+      },
+    ],
+    [chatList],
+  );
+
+  const chatPanel = React.useMemo(
+    () => <Panel panelItems={panelData} />,
+    [panelData],
+  );
+
   return (
     <>
-      {chatList}
-      {messageList}
+      <ThreadListProvider>{chatPanel}</ThreadListProvider>
       {threadDraftUpdater}
     </>
   );