diff --git a/app/soapbox/components/account-search.tsx b/app/soapbox/components/account-search.tsx
index 8b3f50b20..c519b0243 100644
--- a/app/soapbox/components/account-search.tsx
+++ b/app/soapbox/components/account-search.tsx
@@ -5,7 +5,6 @@ import { defineMessages, useIntl } from 'react-intl';
 import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
 
 import SvgIcon from './ui/icon/svg-icon';
-import { InputThemes } from './ui/input/input';
 
 const messages = defineMessages({
   placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
@@ -16,20 +15,10 @@ interface IAccountSearch {
   onSelected: (accountId: string) => void,
   /** Override the default placeholder of the input. */
   placeholder?: string,
-  /** Position of results relative to the input. */
-  resultsPosition?: 'above' | 'below',
-  /** Optional class for the input */
-  className?: string,
-  autoFocus?: boolean,
-  hidePortal?: boolean,
-  theme?: InputThemes,
-  showButtons?: boolean,
-  /** Search only among people who follow you (TruthSocial). */
-  followers?: boolean,
 }
 
 /** Input to search for accounts. */
-const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, showButtons = true, ...rest }) => {
+const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
   const intl = useIntl();
 
   const [value, setValue] = useState('');
@@ -71,7 +60,7 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, showBu
 
       <div className='relative'>
         <AutosuggestAccountInput
-          className={classNames('rounded-full', className)}
+          className='rounded-full'
           placeholder={intl.formatMessage(messages.placeholder)}
           value={value}
           onChange={handleChange}
@@ -80,25 +69,23 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, showBu
           {...rest}
         />
 
-        {showButtons && (
-          <div
-            role='button'
-            tabIndex={0}
-            className='absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer'
-            onClick={handleClear}
-          >
-            <SvgIcon
-              src={require('@tabler/icons/search.svg')}
-              className={classNames('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
-            />
+        <div
+          role='button'
+          tabIndex={0}
+          className='absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer'
+          onClick={handleClear}
+        >
+          <SvgIcon
+            src={require('@tabler/icons/search.svg')}
+            className={classNames('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
+          />
 
-            <SvgIcon
-              src={require('@tabler/icons/x.svg')}
-              className={classNames('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
-              aria-label={intl.formatMessage(messages.placeholder)}
-            />
-          </div>
-        )}
+          <SvgIcon
+            src={require('@tabler/icons/x.svg')}
+            className={classNames('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
+            aria-label={intl.formatMessage(messages.placeholder)}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/app/soapbox/components/autosuggest-account-input.tsx b/app/soapbox/components/autosuggest-account-input.tsx
index 352be593b..b2a205e3c 100644
--- a/app/soapbox/components/autosuggest-account-input.tsx
+++ b/app/soapbox/components/autosuggest-account-input.tsx
@@ -22,8 +22,6 @@ interface IAutosuggestAccountInput {
   menu?: Menu,
   onKeyDown?: React.KeyboardEventHandler,
   theme?: InputThemes,
-  /** Search only among people who follow you (TruthSocial). */
-  followers?: boolean,
 }
 
 const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
@@ -31,7 +29,6 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
   onSelected,
   value = '',
   limit = 4,
-  followers = false,
   ...rest
 }) => {
   const dispatch = useAppDispatch();
@@ -48,7 +45,7 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
   };
 
   const handleAccountSearch = useCallback(throttle(q => {
-    const params = { q, limit, followers, resolve: false };
+    const params = { q, limit, resolve: false };
 
     dispatch(accountSearch(params, controller.current.signal))
       .then((accounts: { id: string }[]) => {
diff --git a/app/soapbox/components/autosuggest-input.tsx b/app/soapbox/components/autosuggest-input.tsx
index 87f1c41f5..35460131a 100644
--- a/app/soapbox/components/autosuggest-input.tsx
+++ b/app/soapbox/components/autosuggest-input.tsx
@@ -31,7 +31,6 @@ export interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputEl
   searchTokens: string[],
   maxLength?: number,
   menu?: Menu,
-  resultsPosition: string,
   renderSuggestion?: React.FC<{ id: string }>,
   hidePortal?: boolean,
   theme?: InputThemes,
@@ -43,7 +42,6 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
     autoFocus: false,
     autoSelect: true,
     searchTokens: ImmutableList(['@', ':', '#']),
-    resultsPosition: 'below',
   };
 
   getFirstIndex = () => {
@@ -260,19 +258,15 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
 
     const { top, height, left, width } = this.input.getBoundingClientRect();
 
-    if (this.props.resultsPosition === 'below') {
-      return { left, width, top: top + height };
-    }
-
-    return { left, width, top, transform: 'translate(0, -100%)' };
+    return { left, width, top: top + height };
   }
 
   render() {
-    const { hidePortal, value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
+    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
     const { suggestionsHidden } = this.state;
     const style: React.CSSProperties = { direction: 'ltr' };
 
-    const visible = !hidePortal && !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
+    const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
 
     if (isRtl(value)) {
       style.direction = 'rtl';
diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx
index 20db9636d..358fbb6f3 100644
--- a/app/soapbox/features/chats/components/chat-composer.tsx
+++ b/app/soapbox/features/chats/components/chat-composer.tsx
@@ -151,6 +151,9 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
 
   return (
     <div className='mt-auto px-4 shadow-3xl'>
+      {/* Spacer */}
+      <div className='h-5' />
+
       <HStack alignItems='stretch' justifyContent='between' space={4}>
         {features.chatsMedia && (
           <Stack justifyContent='end' alignItems='center' className='w-10 mb-1.5'>
diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index 72584e2df..6099955e7 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
 import RelativeTimestamp from 'soapbox/components/relative-timestamp';
-import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification-badge';
 import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
 import { useChatContext } from 'soapbox/contexts/chat-context';
@@ -115,12 +115,14 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
         <HStack alignItems='center' space={2}>
           {features.chatsDelete && (
             <div className='text-gray-600 hidden group-hover:block hover:text-gray-100'>
-              {/* TODO: fix nested buttons here */}
-              <DropdownMenuContainer
-                items={menu}
-                src={require('@tabler/icons/dots.svg')}
-                title='Settings'
-              />
+              <DropdownMenuContainer items={menu}>
+                <IconButton
+                  src={require('@tabler/icons/dots.svg')}
+                  title='Settings'
+                  className='text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
+                  iconClassName='w-4 h-4'
+                />
+              </DropdownMenuContainer>
             </div>
           )}
 
diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx
index 9de6d5c2d..65629ce14 100644
--- a/app/soapbox/features/chats/components/chat-list.tsx
+++ b/app/soapbox/features/chats/components/chat-list.tsx
@@ -63,8 +63,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
             <div className='px-2'>
               <ChatListItem chat={chat} onClick={onClickChat} />
             </div>
-          )
-          }
+          )}
           components={{
             ScrollSeekPlaceholder: () => <PlaceholderChat />,
             Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 1f6fd6adb..983a0d6f2 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -8,7 +8,7 @@ import { Components, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import { openModal } from 'soapbox/actions/modals';
 import { initReport } from 'soapbox/actions/reports';
-import { Avatar, Button, Divider, HStack, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, Button, Divider, HStack, Icon, IconButton, Spinner, Stack, Text } from 'soapbox/components/ui';
 import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
 import emojify from 'soapbox/features/emoji/emoji';
 import PlaceholderChatMessage from 'soapbox/features/placeholder/components/placeholder-chat-message';
@@ -286,11 +286,14 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                 })}
                 data-testid='chat-message-menu'
               >
-                <DropdownMenuContainer
-                  items={menu}
-                  src={require('@tabler/icons/dots.svg')}
-                  title={intl.formatMessage(messages.more)}
-                />
+                <DropdownMenuContainer items={menu}>
+                  <IconButton
+                    src={require('@tabler/icons/dots.svg')}
+                    title={intl.formatMessage(messages.more)}
+                    className='text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
+                    iconClassName='w-4 h-4'
+                  />
+                </DropdownMenuContainer>
               </div>
             )}
 
@@ -447,7 +450,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
 
   return (
     <div className='h-full flex flex-col flex-grow space-y-6'>
-      <div className='flex-grow flex flex-col justify-end pb-2'>
+      <div className='flex-grow flex flex-col justify-end'>
         <Virtuoso
           ref={node}
           alignToBottom
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 8950c4e3e..638a7fea1 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
@@ -183,11 +183,6 @@ const ChatPageMain = () => {
                     label={intl.formatMessage(messages.autoDeleteLabel)}
                     hint={intl.formatMessage(messages.autoDeleteHint)}
                   />
-                  <ListItem
-                    label={intl.formatMessage(messages.autoDelete2Minutes)}
-                    onSelect={() => handleUpdateChat(MessageExpirationValues.TWO_MINUTES)}
-                    isSelected={chat.message_expiration === MessageExpirationValues.TWO_MINUTES}
-                  />
                   <ListItem
                     label={intl.formatMessage(messages.autoDelete7Days)}
                     onSelect={() => handleUpdateChat(MessageExpirationValues.SEVEN)}
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx
index 5b441026e..c362a4159 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import AccountSearch from 'soapbox/components/account-search';
-import { CardTitle, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
-import { ChatKeys, useChats } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
+import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui';
+
+import ChatSearch from '../../chat-search/chat-search';
 
 interface IChatPageNew {
 }
@@ -13,17 +11,10 @@ interface IChatPageNew {
 /** New message form to create a chat. */
 const ChatPageNew: React.FC<IChatPageNew> = () => {
   const history = useHistory();
-  const { getOrCreateChatByAccountId } = useChats();
-
-  const handleAccountSelected = async (accountId: string) => {
-    const { data } = await getOrCreateChatByAccountId(accountId);
-    history.push(`/chats/${data.id}`);
-    queryClient.invalidateQueries(ChatKeys.chatSearch());
-  };
 
   return (
-    <Stack className='h-full'>
-      <Stack className='flex-grow py-6 px-4 sm:p-6 space-y-4'>
+    <Stack className='h-full space-y-4'>
+      <Stack className='flex-grow pt-6 px-4 sm:px-6'>
         <HStack alignItems='center'>
           <IconButton
             src={require('@tabler/icons/arrow-left.svg')}
@@ -33,26 +24,9 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
 
           <CardTitle title='New Message' />
         </HStack>
-
-        <HStack space={2} alignItems='center'>
-          <Text>
-            <FormattedMessage
-              id='chats.new.to'
-              defaultMessage='To:'
-            />
-          </Text>
-
-          <AccountSearch
-            onSelected={handleAccountSelected}
-            placeholder='Type a name'
-            theme='search'
-            showButtons={false}
-            autoFocus
-            className='mb-0.5'
-            followers
-          />
-        </HStack>
       </Stack>
+
+      <ChatSearch isMainPage />
     </Stack>
   );
 };
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 ad0dd8e9e..59953b54c 100644
--- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
+++ b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
@@ -13,6 +13,7 @@ import ChatSearch from '../chat-search/chat-search';
 import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate';
 import ChatPaneHeader from '../chat-widget/chat-pane-header';
 import ChatWindow from '../chat-widget/chat-window';
+import ChatSearchHeader from '../chat-widget/headers/chat-search-header';
 import { Pane } from '../ui';
 
 import Blankslate from './blankslate';
@@ -86,7 +87,13 @@ const ChatPane = () => {
   }
 
   if (screen === ChatWidgetScreens.SEARCH) {
-    return <ChatSearch />;
+    return (
+      <Pane isOpen={isOpen} index={0} main>
+        <ChatSearchHeader />
+
+        {isOpen ? <ChatSearch /> : null}
+      </Pane>
+    );
   }
 
   return (
diff --git a/app/soapbox/features/chats/components/chat-search-input.tsx b/app/soapbox/features/chats/components/chat-search-input.tsx
index 2474ac6cb..bc8644aab 100644
--- a/app/soapbox/features/chats/components/chat-search-input.tsx
+++ b/app/soapbox/features/chats/components/chat-search-input.tsx
@@ -29,6 +29,7 @@ const ChatSearchInput: React.FC<IChatSearchInput> = ({ value, onChange, onClear
       className='rounded-full'
       value={value}
       onChange={onChange}
+      outerClassName='mt-0'
       theme='search'
       append={
         <button onClick={onClear}>
diff --git a/app/soapbox/features/chats/components/chat-search/__tests__/chat-search.test.tsx b/app/soapbox/features/chats/components/chat-search/__tests__/chat-search.test.tsx
index 5a628054e..e7ea8d739 100644
--- a/app/soapbox/features/chats/components/chat-search/__tests__/chat-search.test.tsx
+++ b/app/soapbox/features/chats/components/chat-search/__tests__/chat-search.test.tsx
@@ -1,5 +1,6 @@
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { VirtuosoMockContext } from 'react-virtuoso';
 
 import { __stub } from 'soapbox/api';
 import { ChatProvider } from 'soapbox/contexts/chat-context';
@@ -8,36 +9,24 @@ import { render, screen, waitFor } from '../../../../../jest/test-helpers';
 import ChatSearch from '../chat-search';
 
 const renderComponent = () => render(
-  <ChatProvider>
-    <ChatSearch />
-  </ChatProvider>,
+  <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
+    <ChatProvider>
+      <ChatSearch />
+    </ChatProvider>,
+  </VirtuosoMockContext.Provider>,
 );
 
 describe('<ChatSearch />', () => {
-  it('renders correctly', () => {
+  beforeEach(async() => {
     renderComponent();
-
-    expect(screen.getByTestId('pane-header')).toHaveTextContent('Messages');
   });
 
-  describe('when the pane is closed', () => {
-    it('does not render the search input', () => {
-      renderComponent();
-      expect(screen.queryAllByTestId('search')).toHaveLength(0);
-    });
+  it('renders the search input', () => {
+    expect(screen.getByTestId('search')).toBeInTheDocument();
   });
 
-  describe('when the pane is open', () => {
-    beforeEach(async() => {
-      renderComponent();
-      await userEvent.click(screen.getByTestId('icon-button'));
-    });
-
-    it('renders the search input', () => {
-      expect(screen.getByTestId('search')).toBeInTheDocument();
-    });
-
-    describe('when searching', () => {
+  describe('when searching', () => {
+    describe('with results', () => {
       beforeEach(() => {
         __stub((mock) => {
           mock.onGet('/api/v1/accounts/search').reply(200, [{
@@ -51,8 +40,6 @@ describe('<ChatSearch />', () => {
       });
 
       it('renders accounts', async() => {
-        renderComponent();
-
         const user = userEvent.setup();
         await user.type(screen.getByTestId('search'), 'ste');
 
@@ -61,5 +48,22 @@ describe('<ChatSearch />', () => {
         });
       });
     });
+
+    describe('without results', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v1/accounts/search').reply(200, []);
+        });
+      });
+
+      it('renders accounts', async() => {
+        const user = userEvent.setup();
+        await user.type(screen.getByTestId('search'), 'ste');
+
+        await waitFor(() => {
+          expect(screen.getByTestId('no-results')).toBeInTheDocument();
+        });
+      });
+    });
   });
 });
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 c3ee19982..03ff9ba2a 100644
--- a/app/soapbox/features/chats/components/chat-search/chat-search.tsx
+++ b/app/soapbox/features/chats/components/chat-search/chat-search.tsx
@@ -1,10 +1,10 @@
 import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import React, { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 
 import snackbar from 'soapbox/actions/snackbar';
-import { HStack, Icon, Input, Stack, Text } from 'soapbox/components/ui';
+import { Icon, Input, Stack } from 'soapbox/components/ui';
 import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
 import { useAppDispatch, useDebounce } from 'soapbox/hooks';
 import { useChats } from 'soapbox/queries/chats';
@@ -12,29 +12,30 @@ import { queryClient } from 'soapbox/queries/client';
 import useAccountSearch from 'soapbox/queries/search';
 
 import { ChatKeys } from '../../../../queries/chats';
-import ChatPaneHeader from '../chat-widget/chat-pane-header';
-import { Pane } from '../ui';
 
 import Blankslate from './blankslate';
 import EmptyResultsBlankslate from './empty-results-blankslate';
 import Results from './results';
 
-const messages = defineMessages({
-  title: { id: 'chat_search.title', defaultMessage: 'Messages' },
-});
+interface IChatSearch {
+  isMainPage?: boolean
+}
+
+const ChatSearch = (props: IChatSearch) => {
+  const { isMainPage = false } = props;
 
-const ChatSearch = () => {
   const debounce = useDebounce;
   const dispatch = useAppDispatch();
-  const intl = useIntl();
+  const history = useHistory();
 
-  const { isOpen, changeScreen, toggleChatPane } = useChatContext();
+  const { changeScreen } = useChatContext();
   const { getOrCreateChatByAccountId } = useChats();
 
   const [value, setValue] = useState<string>('');
   const debouncedValue = debounce(value as string, 300);
 
-  const { data: accounts, isFetching } = useAccountSearch(debouncedValue);
+  const accountSearchResult = useAccountSearch(debouncedValue);
+  const { data: accounts, isFetching } = accountSearchResult;
 
   const hasSearchValue = debouncedValue && debouncedValue.length > 0;
   const hasSearchResults = (accounts || []).length > 0;
@@ -47,7 +48,12 @@ const ChatSearch = () => {
       dispatch(snackbar.error(data?.error));
     },
     onSuccess: (response) => {
-      changeScreen(ChatWidgetScreens.CHAT, response.data.id);
+      if (isMainPage) {
+        history.push(`/chats/${response.data.id}`);
+      } else {
+        changeScreen(ChatWidgetScreens.CHAT, response.data.id);
+      }
+
       queryClient.invalidateQueries(ChatKeys.chatSearch());
     },
   });
@@ -56,7 +62,7 @@ const ChatSearch = () => {
     if (hasSearchResults) {
       return (
         <Results
-          accounts={accounts}
+          accountSearchResult={accountSearchResult}
           onSelect={(id) => {
             handleClickOnSearchResult.mutate(id);
             clearValue();
@@ -77,62 +83,33 @@ const ChatSearch = () => {
   };
 
   return (
-    <Pane isOpen={isOpen} index={0} main>
-      <ChatPaneHeader
-        data-testid='pane-header'
-        title={
-          <HStack alignItems='center' space={2}>
-            <button
-              onClick={() => {
-                changeScreen(ChatWidgetScreens.INBOX);
-              }}
-            >
+    <Stack space={4} className='flex-grow h-full'>
+      <div className='px-4'>
+        <Input
+          data-testid='search'
+          type='text'
+          autoFocus
+          placeholder='Type a name'
+          value={value || ''}
+          onChange={(event) => setValue(event.target.value)}
+          outerClassName='mt-0'
+          theme='search'
+          append={
+            <button onClick={clearValue}>
               <Icon
-                src={require('@tabler/icons/arrow-left.svg')}
-                className='h-6 w-6 text-gray-600 dark:text-gray-400'
+                src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
+                className='h-4 w-4 text-gray-700 dark:text-gray-600'
+                aria-hidden='true'
               />
             </button>
+          }
+        />
+      </div>
 
-            <Text size='sm' weight='bold' truncate>
-              {intl.formatMessage(messages.title)}
-            </Text>
-          </HStack>
-        }
-        isOpen={isOpen}
-        isToggleable={false}
-        onToggle={toggleChatPane}
-      />
-
-      {isOpen ? (
-        <Stack space={4} className='flex-grow h-full'>
-          <div className='px-4'>
-            <Input
-              data-testid='search'
-              type='text'
-              autoFocus
-              placeholder='Type a name'
-              className='rounded-full'
-              value={value || ''}
-              onChange={(event) => setValue(event.target.value)}
-              theme='search'
-              append={
-                <button onClick={clearValue}>
-                  <Icon
-                    src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
-                    className='h-4 w-4 text-gray-700 dark:text-gray-600'
-                    aria-hidden='true'
-                  />
-                </button>
-              }
-            />
-          </div>
-
-          <Stack className='overflow-y-scroll flex-grow h-full' space={2}>
-            {renderBody()}
-          </Stack>
-        </Stack>
-      ) : null}
-    </Pane>
+      <Stack className='flex-grow'>
+        {renderBody()}
+      </Stack>
+    </Stack>
   );
 };
 
diff --git a/app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx b/app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx
index 15daef888..3e360347e 100644
--- a/app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx
+++ b/app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx
@@ -13,7 +13,7 @@ const EmptyResultsBlankslate = () => {
 
   return (
     <Stack justifyContent='center' alignItems='center' space={2} className='h-full w-2/3 mx-auto'>
-      <Text weight='bold' size='lg' align='center'>
+      <Text weight='bold' size='lg' align='center' data-testid='no-results'>
         {intl.formatMessage(messages.title)}
       </Text>
 
diff --git a/app/soapbox/features/chats/components/chat-search/results.tsx b/app/soapbox/features/chats/components/chat-search/results.tsx
index 26127a20b..48909f67e 100644
--- a/app/soapbox/features/chats/components/chat-search/results.tsx
+++ b/app/soapbox/features/chats/components/chat-search/results.tsx
@@ -1,43 +1,80 @@
-import React from 'react';
+import classNames from 'clsx';
+import React, { useCallback, useState } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 
 import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification-badge';
+import useAccountSearch from 'soapbox/queries/search';
 
 interface IResults {
-  accounts: {
-    display_name: string
-    acct: string
-    id: string
-    avatar: string
-    verified: boolean
-  }[]
+  accountSearchResult: ReturnType<typeof useAccountSearch>
   onSelect(id: string): void
 }
 
-const Results = ({ accounts, onSelect }: IResults) => (
-  <>
-    {(accounts || []).map((account: any) => (
-      <button
-        key={account.id}
-        type='button'
-        className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800'
-        onClick={() => onSelect(account.id)}
-        data-testid='account'
-      >
-        <HStack alignItems='center' space={2}>
-          <Avatar src={account.avatar} size={40} />
+const Results = ({ accountSearchResult, onSelect }: IResults) => {
+  const { data: accounts, isFetching, hasNextPage, fetchNextPage } = accountSearchResult;
 
-          <Stack alignItems='start'>
-            <div className='flex items-center space-x-1 flex-grow'>
-              <Text weight='bold' size='sm' truncate>{account.display_name}</Text>
-              {account.verified && <VerificationBadge />}
-            </div>
-            <Text size='sm' weight='medium' theme='muted' truncate>@{account.acct}</Text>
-          </Stack>
-        </HStack>
-      </button>
-    ))}
-  </>
-);
+  const [isNearBottom, setNearBottom] = useState<boolean>(false);
+  const [isNearTop, setNearTop] = useState<boolean>(true);
 
-export default Results;
\ No newline at end of file
+  const handleLoadMore = () => {
+    if (hasNextPage && !isFetching) {
+      fetchNextPage();
+    }
+  };
+
+  const renderAccount = useCallback((_index, account) => (
+    <button
+      key={account.id}
+      type='button'
+      className='px-2 py-3 w-full rounded-lg flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800'
+      onClick={() => onSelect(account.id)}
+      data-testid='account'
+    >
+      <HStack alignItems='center' space={2}>
+        <Avatar src={account.avatar} size={40} />
+
+        <Stack alignItems='start'>
+          <div className='flex items-center space-x-1 flex-grow'>
+            <Text weight='bold' size='sm' truncate>{account.display_name}</Text>
+            {account.verified && <VerificationBadge />}
+          </div>
+          <Text size='sm' weight='medium' theme='muted' truncate>@{account.acct}</Text>
+        </Stack>
+      </HStack>
+    </button>
+  ), []);
+
+  return (
+    <div className='relative flex-grow'>
+      <Virtuoso
+        data={accounts}
+        itemContent={(index, chat) => (
+          <div className='px-2'>
+            {renderAccount(index, chat)}
+          </div>
+        )}
+        endReached={handleLoadMore}
+        atTopStateChange={(atTop) => setNearTop(atTop)}
+        atBottomStateChange={(atBottom) => setNearBottom(atBottom)}
+      />
+
+      <>
+        <div
+          className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white to-transparent pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+            'opacity-0': isNearTop,
+            'opacity-100': !isNearTop,
+          })}
+        />
+        <div
+          className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white to-transparent pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+            'opacity-0': isNearBottom,
+            'opacity-100': !isNearBottom,
+          })}
+        />
+      </>
+    </div>
+  );
+};
+
+export default Results;
diff --git a/app/soapbox/features/chats/components/chat-widget/headers/chat-search-header.tsx b/app/soapbox/features/chats/components/chat-widget/headers/chat-search-header.tsx
new file mode 100644
index 000000000..d0fd40921
--- /dev/null
+++ b/app/soapbox/features/chats/components/chat-widget/headers/chat-search-header.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { HStack, Icon, Text } from 'soapbox/components/ui';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
+
+import ChatPaneHeader from '../chat-pane-header';
+
+const messages = defineMessages({
+  title: { id: 'chat_search.title', defaultMessage: 'Messages' },
+});
+
+const ChatSearchHeader = () => {
+  const intl = useIntl();
+
+  const { changeScreen, isOpen, toggleChatPane } = useChatContext();
+
+  return (
+    <ChatPaneHeader
+      data-testid='pane-header'
+      title={
+        <HStack alignItems='center' space={2}>
+          <button
+            onClick={() => {
+              changeScreen(ChatWidgetScreens.INBOX);
+            }}
+          >
+            <Icon
+              src={require('@tabler/icons/arrow-left.svg')}
+              className='h-6 w-6 text-gray-600 dark:text-gray-400'
+            />
+          </button>
+
+          <Text size='sm' weight='bold' truncate>
+            {intl.formatMessage(messages.title)}
+          </Text>
+        </HStack>
+      }
+      isOpen={isOpen}
+      isToggleable={false}
+      onToggle={toggleChatPane}
+    />
+  );
+};
+
+export default ChatSearchHeader;
\ No newline at end of file
diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index 68fa7fc21..9a119f5f1 100644
--- a/app/soapbox/queries/chats.ts
+++ b/app/soapbox/queries/chats.ts
@@ -15,14 +15,13 @@ import { useFetchRelationships } from './relationships';
 
 import type { IAccount } from './accounts';
 
-export const messageExpirationOptions = [120, 604800, 1209600, 2592000, 7776000];
+export const messageExpirationOptions = [604800, 1209600, 2592000, 7776000];
 
 export enum MessageExpirationValues {
-  'TWO_MINUTES' = messageExpirationOptions[0],
-  'SEVEN' = messageExpirationOptions[1],
-  'FOURTEEN' = messageExpirationOptions[2],
-  'THIRTY' = messageExpirationOptions[3],
-  'NINETY' = messageExpirationOptions[4]
+  'SEVEN' = messageExpirationOptions[0],
+  'FOURTEEN' = messageExpirationOptions[1],
+  'THIRTY' = messageExpirationOptions[2],
+  'NINETY' = messageExpirationOptions[3]
 }
 
 export interface IChat {
diff --git a/app/soapbox/queries/search.ts b/app/soapbox/queries/search.ts
index 2b3fd1e70..41c4b7fb3 100644
--- a/app/soapbox/queries/search.ts
+++ b/app/soapbox/queries/search.ts
@@ -1,27 +1,51 @@
-import { useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 
+import { getNextLink } from 'soapbox/api';
 import { useApi } from 'soapbox/hooks';
+import { Account } from 'soapbox/types/entities';
+import { flattenPages, PaginatedResult } from 'soapbox/utils/queries';
 
 export default function useAccountSearch(q: string) {
   const api = useApi();
 
-  const getAccountSearch = async(q: string) => {
-    if (typeof q === 'undefined') {
-      return null;
-    }
+  const getAccountSearch = async(q: string, pageParam: { link?: string }): Promise<PaginatedResult<Account>> => {
+    const nextPageLink = pageParam?.link;
+    const uri = nextPageLink || '/api/v1/accounts/search';
 
-    const { data } = await api.get('/api/v1/accounts/search', {
+    const response = await api.get(uri, {
       params: {
         q,
+        limit: 10,
         followers: true,
       },
     });
+    const { data } = response;
 
-    return data;
+    const link = getNextLink(response);
+    const hasMore = !!link;
+
+    return {
+      result: data,
+      link,
+      hasMore,
+    };
   };
 
-  return useQuery(['search', 'accounts', q], () => getAccountSearch(q), {
+  const queryInfo = useInfiniteQuery(['search', 'accounts', q], ({ pageParam }) => getAccountSearch(q, pageParam), {
     keepPreviousData: true,
-    placeholderData: [],
+    getNextPageParam: (config) => {
+      if (config.hasMore) {
+        return { link: config.link };
+      }
+
+      return undefined;
+    },
   });
+
+  const data = flattenPages(queryInfo.data);
+
+  return {
+    ...queryInfo,
+    data,
+  };
 }