diff --git a/app/soapbox/features/chats/components/__tests__/chat-pane-header.test.tsx b/app/soapbox/features/chats/components/__tests__/chat-pane-header.test.tsx
index 32e5641ce4..aaf658c0a4 100644
--- a/app/soapbox/features/chats/components/__tests__/chat-pane-header.test.tsx
+++ b/app/soapbox/features/chats/components/__tests__/chat-pane-header.test.tsx
@@ -2,10 +2,10 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { render, screen } from '../../../../jest/test-helpers';
-import ChatPaneHeader from '../chat-pane-header';
+import ChatPaneHeader from '../chat-widget/chat-pane-header';
 
 describe('<ChatPaneHeader />', () => {
-  it('handles the onToggle prop', async() => {
+  it('handles the onToggle prop', async () => {
     const mockFn = jest.fn();
     render(<ChatPaneHeader title='title' onToggle={mockFn} isOpen />);
 
@@ -64,7 +64,7 @@ describe('<ChatPaneHeader />', () => {
   });
 
   describe('secondaryAction prop', () => {
-    it('handles the secondaryAction callback', async() => {
+    it('handles the secondaryAction callback', async () => {
       const mockFn = jest.fn();
       render(
         <ChatPaneHeader
diff --git a/app/soapbox/features/chats/components/__tests__/chat-widget.test.tsx b/app/soapbox/features/chats/components/__tests__/chat-widget.test.tsx
index 827d437ccb..c191d9b753 100644
--- a/app/soapbox/features/chats/components/__tests__/chat-widget.test.tsx
+++ b/app/soapbox/features/chats/components/__tests__/chat-widget.test.tsx
@@ -5,7 +5,7 @@ import { Route, Switch } from 'react-router-dom';
 import { normalizeAccount } from 'soapbox/normalizers';
 
 import { render, rootState } from '../../../../jest/test-helpers';
-import ChatWidget from '../chat-widget';
+import ChatWidget from '../chat-widget/chat-widget';
 
 const id = '1';
 const account = normalizeAccount({
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
index 99b49d0b15..a2b32723c7 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -113,15 +113,15 @@ const ChatPageMain = () => {
             children={null}
           />
 
-          <MenuList className='w-80 py-6'>
-            <Stack space={4} className='w-5/6 mx-auto'>
-              <Stack alignItems='center' space={2}>
-                <Avatar src={chat.account.avatar_static} size={75} />
+          <MenuList className='w-80'>
+            <Stack space={4} className='px-6 py-5'>
+              <HStack alignItems='center' space={3}>
+                <Avatar src={chat.account.avatar_static} size={50} />
                 <Stack>
-                  <Text size='lg' weight='semibold' align='center'>{chat.account.display_name}</Text>
-                  <Text theme='primary' align='center'>@{chat.account.acct}</Text>
+                  <Text weight='semibold'>{chat.account.display_name}</Text>
+                  <Text size='sm' theme='primary'>@{chat.account.acct}</Text>
                 </Stack>
-              </Stack>
+              </HStack>
 
               <Divider />
 
diff --git a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
index 5d4b8ff5ae..4ead19241e 100644
--- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
+++ b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
@@ -7,11 +7,11 @@ import { useDebounce, useFeatures } from 'soapbox/hooks';
 import { IChat, useChats } from 'soapbox/queries/chats';
 
 import ChatList from '../chat-list';
-import ChatPaneHeader from '../chat-pane-header';
+import ChatPaneHeader from '../chat-widget/chat-pane-header';
 import ChatSearchInput from '../chat-search-input';
 import ChatSearch from '../chat-search/chat-search';
 import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate';
-import ChatWindow from '../chat-window';
+import ChatWindow from '../chat-widget/chat-window';
 import { Pane } from '../ui';
 
 import Blankslate from './blankslate';
diff --git a/app/soapbox/features/chats/components/chat-search/chat-search.tsx b/app/soapbox/features/chats/components/chat-search/chat-search.tsx
index ed946f3c03..94135ae62c 100644
--- a/app/soapbox/features/chats/components/chat-search/chat-search.tsx
+++ b/app/soapbox/features/chats/components/chat-search/chat-search.tsx
@@ -12,7 +12,7 @@ import { queryClient } from 'soapbox/queries/client';
 import useAccountSearch from 'soapbox/queries/search';
 
 import { ChatKeys } from '../../../../queries/chats';
-import ChatPaneHeader from '../chat-pane-header';
+import ChatPaneHeader from '../chat-widget/chat-pane-header';
 import { Pane } from '../ui';
 
 import Blankslate from './blankslate';
diff --git a/app/soapbox/features/chats/components/chat-pane-header.tsx b/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
similarity index 100%
rename from app/soapbox/features/chats/components/chat-pane-header.tsx
rename to app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
diff --git a/app/soapbox/features/chats/components/chat-settings.tsx b/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
similarity index 93%
rename from app/soapbox/features/chats/components/chat-settings.tsx
rename to app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
index 372f0c15a7..6e363ba53c 100644
--- a/app/soapbox/features/chats/components/chat-settings.tsx
+++ b/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
@@ -92,13 +92,13 @@ const ChatSettings = () => {
       />
 
       <Stack space={4} className='w-5/6 mx-auto'>
-        <Stack alignItems='center' space={2}>
-          <Avatar src={chat.account.avatar_static} size={75} />
+        <HStack alignItems='center' space={3}>
+          <Avatar src={chat.account.avatar_static} size={50} />
           <Stack>
-            <Text size='lg' weight='semibold' align='center'>{chat.account.display_name}</Text>
-            <Text theme='primary' align='center'>@{chat.account.acct}</Text>
+            <Text weight='semibold'>{chat.account.display_name}</Text>
+            <Text size='sm' theme='primary'>@{chat.account.acct}</Text>
           </Stack>
-        </Stack>
+        </HStack>
 
         <Divider />
 
diff --git a/app/soapbox/features/chats/components/chat-widget.tsx b/app/soapbox/features/chats/components/chat-widget/chat-widget.tsx
similarity index 92%
rename from app/soapbox/features/chats/components/chat-widget.tsx
rename to app/soapbox/features/chats/components/chat-widget/chat-widget.tsx
index 9bc574a95f..a155abbaaf 100644
--- a/app/soapbox/features/chats/components/chat-widget.tsx
+++ b/app/soapbox/features/chats/components/chat-widget/chat-widget.tsx
@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { ChatProvider } from 'soapbox/contexts/chat-context';
 import { useOwnAccount } from 'soapbox/hooks';
 
-import ChatPane from './chat-pane/chat-pane';
+import ChatPane from '../chat-pane/chat-pane';
 
 const ChatWidget = () => {
   const account = useOwnAccount();
diff --git a/app/soapbox/features/chats/components/chat-window.tsx b/app/soapbox/features/chats/components/chat-widget/chat-window.tsx
similarity index 99%
rename from app/soapbox/features/chats/components/chat-window.tsx
rename to app/soapbox/features/chats/components/chat-widget/chat-window.tsx
index 63124c0496..f3bc845769 100644
--- a/app/soapbox/features/chats/components/chat-window.tsx
+++ b/app/soapbox/features/chats/components/chat-widget/chat-window.tsx
@@ -5,7 +5,8 @@ import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 
-import Chat from './chat';
+import Chat from '../chat';
+
 import ChatPaneHeader from './chat-pane-header';
 import ChatSettings from './chat-settings';
 
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 6ac5bfe453..9537ba7e4e 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -291,7 +291,7 @@ export function ChatIndex() {
 }
 
 export function ChatWidget() {
-  return import(/* webpackChunkName: "features/chats/components/chat-widget" */'../../chats/components/chat-widget');
+  return import(/* webpackChunkName: "features/chats/components/chat-widget" */'../../chats/components/chat-widget/chat-widget');
 }
 
 export function ServerInfo() {