diff --git a/app/soapbox/features/chats/components/chat-page.tsx b/app/soapbox/features/chats/components/chat-page.tsx
new file mode 100644
index 000000000..86cc15f94
--- /dev/null
+++ b/app/soapbox/features/chats/components/chat-page.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+
+import { launchChat } from 'soapbox/actions/chats';
+import AccountSearch from 'soapbox/components/account_search';
+import { Card, CardTitle, Stack } from 'soapbox/components/ui';
+import { useChatContext } from 'soapbox/contexts/chat-context';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import Chat from './chat';
+import ChatList from './chat-list';
+import ChatListItem from './chat-list-item';
+
+
+const messages = defineMessages({
+  title: { id: 'column.chats', defaultMessage: 'Messages' },
+  searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
+});
+
+
+const ChatPage = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+
+  const { chat, setChat } = useChatContext();
+
+  const handleSuggestion = (accountId: string) => {
+    dispatch(launchChat(accountId, history, true));
+  };
+
+  const handleClickChat = (chat: any) => {
+    // history.push(`/chats/${chat.id}`);
+    setChat(chat);
+  };
+
+  return (
+    <Card className='p-0 h-[calc(100vh-176px)] overflow-hidden' variant='rounded'>
+      <div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
+        <Stack
+          className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset'
+          space={6}
+        >
+          <CardTitle title={intl.formatMessage(messages.title)} />
+
+          <AccountSearch
+            placeholder={intl.formatMessage(messages.searchPlaceholder)}
+            onSelected={handleSuggestion}
+          />
+
+          <Stack className='-mx-3 flex-grow h-full'>
+            <ChatList onClickChat={handleClickChat} />
+          </Stack>
+        </Stack>
+
+        <Stack className='col-span-6 h-full overflow-hidden'>
+          {chat && (
+            <Stack className='h-full overflow-hidden'>
+              <ChatListItem chat={chat} onClick={() => { }} />
+              <div className='h-full overflow-hidden'>
+                <Chat className='h-full overflow-hidden' chat={chat} />
+              </div>
+            </Stack>
+          )}
+        </Stack>
+      </div>
+    </Card>
+  );
+};
+
+export default ChatPage;
\ No newline at end of file
diff --git a/app/soapbox/features/chats/index.tsx b/app/soapbox/features/chats/index.tsx
index 12fc4ee3a..34cb94a67 100644
--- a/app/soapbox/features/chats/index.tsx
+++ b/app/soapbox/features/chats/index.tsx
@@ -1,70 +1,13 @@
-import React, { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import React from 'react';
 
-import { launchChat } from 'soapbox/actions/chats';
-import AccountSearch from 'soapbox/components/account_search';
+import { ChatProvider } from 'soapbox/contexts/chat-context';
 
-import { Card, CardTitle, Stack } from '../../components/ui';
+import ChatPage from './components/chat-page';
 
-import Chat from './components/chat';
-import ChatList from './components/chat-list';
-import ChatListItem from './components/chat-list-item';
-
-const messages = defineMessages({
-  title: { id: 'column.chats', defaultMessage: 'Messages' },
-  searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
-});
-
-const ChatIndex: React.FC = () => {
-  const intl = useIntl();
-  const dispatch = useDispatch();
-  const history = useHistory();
-
-  const [chat, setChat] = useState<any>(null);
-
-  const handleSuggestion = (accountId: string) => {
-    dispatch(launchChat(accountId, history, true));
-  };
-
-  const handleClickChat = (chat: any) => {
-    // history.push(`/chats/${chat.id}`);
-    setChat(chat);
-  };
-
-  return (
-    <Card className='p-0 h-[calc(100vh-176px)] overflow-hidden' variant='rounded'>
-      <div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
-        <Stack
-          className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset'
-          space={6}
-        >
-          <CardTitle title={intl.formatMessage(messages.title)} />
-
-          <AccountSearch
-            placeholder={intl.formatMessage(messages.searchPlaceholder)}
-            onSelected={handleSuggestion}
-          />
-
-          <Stack className='-mx-3 flex-grow h-full'>
-            <ChatList onClickChat={handleClickChat} />
-          </Stack>
-        </Stack>
-
-        <Stack className='col-span-6 h-full overflow-hidden'>
-          {chat && (
-            <Stack className='h-full overflow-hidden'>
-              <ChatListItem chat={chat} onClick={() => { }} />
-              <div className='h-full overflow-hidden'>
-                <Chat className='h-full overflow-hidden' chat={chat} />
-              </div>
-            </Stack>
-          )}
-        </Stack>
-      </div>
-    </Card>
-  );
-};
+const ChatIndex: React.FC = () => (
+  <ChatProvider>
+    <ChatPage />
+  </ChatProvider>
+);
 
 export default ChatIndex;