diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -57,6 +57,7 @@
 import { useSelector } from './redux/redux-utils.js';
 import VisibilityHandler from './redux/visibility-handler.react.js';
 import history from './router-history.js';
+import { MessageSearchStateProvider } from './search/message-search-state-provider.react.js';
 import AccountSettings from './settings/account-settings.react.js';
 import DangerZone from './settings/danger-zone.react.js';
 import CommunityPicker from './sidebar/community-picker.react.js';
@@ -173,14 +174,16 @@
             <MenuProvider>
               <WagmiConfig client={wagmiClient}>
                 <WagmiENSCacheProvider>
-                  <FocusHandler />
-                  <VisibilityHandler />
-                  <DeviceIDUpdater />
-                  <PolicyAcknowledgmentHandler />
-                  <PushNotificationsHandler />
-                  <InviteLinkHandler />
-                  {content}
-                  {this.props.modals}
+                  <MessageSearchStateProvider>
+                    <FocusHandler />
+                    <VisibilityHandler />
+                    <DeviceIDUpdater />
+                    <PolicyAcknowledgmentHandler />
+                    <PushNotificationsHandler />
+                    <InviteLinkHandler />
+                    {content}
+                    {this.props.modals}
+                  </MessageSearchStateProvider>
                 </WagmiENSCacheProvider>
               </WagmiConfig>
             </MenuProvider>
diff --git a/web/modals/search/message-search-modal.css b/web/modals/search/message-search-modal.css
--- a/web/modals/search/message-search-modal.css
+++ b/web/modals/search/message-search-modal.css
@@ -1,6 +1,13 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 .content {
   overflow-y: scroll;
-  padding: 0 10px;
+  border-top: 2px solid var(--border-color);
+  padding: 16px 26px;
 }
 
 .content > * {
@@ -20,3 +27,13 @@
   text-align: center;
   margin: 20px;
 }
+
+.header {
+  display: flex;
+  flex-direction: row;
+  margin: 16px;
+}
+
+.button {
+  margin: 10px 10px 10px 0;
+}
diff --git a/web/modals/search/message-search-modal.react.js b/web/modals/search/message-search-modal.react.js
--- a/web/modals/search/message-search-modal.react.js
+++ b/web/modals/search/message-search-modal.react.js
@@ -18,10 +18,13 @@
 
 import css from './message-search-modal.css';
 import { useTooltipContext } from '../../chat/tooltip-provider.js';
+import Button from '../../components/button.react.js';
 import MessageResult from '../../components/message-result.react.js';
+import Search from '../../components/search.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
-import SearchModal from '../search-modal.react.js';
+import { useMessageSearchContext } from '../../search/message-search-state-provider.react.js';
+import Modal from '../modal.react.js';
 
 type ContentProps = {
   +query: string,
@@ -202,25 +205,43 @@
   const { threadInfo } = props;
   const { popModal } = useModalContext();
 
-  const renderModalContent = React.useCallback(
-    (searchText: string) => (
-      <MessageSearchModalContent threadInfo={threadInfo} query={searchText} />
-    ),
-    [threadInfo],
+  const { query, setQuery, clearQuery } = useMessageSearchContext();
+
+  const [input, setInput] = React.useState(query);
+
+  const onClearText = React.useCallback(() => clearQuery(), [clearQuery]);
+
+  const onPressSearch = React.useCallback(
+    () => setQuery(input),
+    [setQuery, input],
   );
 
+  const button = React.useMemo(() => {
+    return (
+      <Button onClick={onPressSearch} variant="filled" className={css.button}>
+        Search
+      </Button>
+    );
+  }, [onPressSearch]);
+
   const { uiName } = useResolvedThreadInfo(threadInfo);
   const searchPlaceholder = `Searching in ${uiName}`;
 
   return (
-    <SearchModal
-      searchPlaceholder={searchPlaceholder}
-      name="Search Message"
-      onClose={popModal}
-      size="large"
-    >
-      {renderModalContent}
-    </SearchModal>
+    <Modal name="Search Message" onClose={popModal} size="large">
+      <div className={css.container}>
+        <div className={css.header}>
+          <Search
+            onChangeText={setInput}
+            searchText={input}
+            placeholder={searchPlaceholder}
+            onClearText={onClearText}
+          />
+          {button}
+        </div>
+        <MessageSearchModalContent threadInfo={threadInfo} query={query} />
+      </div>
+    </Modal>
   );
 }