diff --git a/app/soapbox/features/chats/components/chat-window.tsx b/app/soapbox/features/chats/components/chat-window.tsx
index 7dfc0e509..356669917 100644
--- a/app/soapbox/features/chats/components/chat-window.tsx
+++ b/app/soapbox/features/chats/components/chat-window.tsx
@@ -8,7 +8,7 @@ import {
 import Avatar from 'soapbox/components/avatar';
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import IconButton from 'soapbox/components/icon_button';
-import { Counter } from 'soapbox/components/ui';
+import { HStack, Counter } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { makeGetChat } from 'soapbox/selectors';
 import { getAcct } from 'soapbox/utils/accounts';
@@ -91,7 +91,7 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
 
   return (
     <div className={`pane pane--${windowState}`} style={{ right: `${right}px` }}>
-      <div className='pane__header'>
+      <HStack space={2} className='pane__header'>
         {unreadCount > 0 ? unreadIcon : avatar }
         <button className='pane__title' onClick={handleChatToggle(chat.id)}>
           @{getAcct(account, displayFqn)}
@@ -99,7 +99,7 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
         <div className='pane__close'>
           <IconButton src={require('@tabler/icons/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
         </div>
-      </div>
+      </HStack>
       <div className='pane__content'>
         <ChatBox
           chatId={chat.id}