diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -59,6 +59,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';
@@ -187,14 +188,16 @@
             <MenuProvider>
               <WagmiConfig client={wagmiClient}>
                 <WagmiENSCacheProvider>
-                  <FocusHandler />
-                  <VisibilityHandler />
-                  <DeviceIDUpdater />
-                  <PolicyAcknowledgmentHandler />
-                  <PushNotificationsHandler />
-                  <InviteLinkHandler />
-                  <InviteLinksRefresher />
-                  {content}
+                  <MessageSearchStateProvider>
+                    <FocusHandler />
+                    <VisibilityHandler />
+                    <DeviceIDUpdater />
+                    <PolicyAcknowledgmentHandler />
+                    <PushNotificationsHandler />
+                    <InviteLinkHandler />
+                    <InviteLinksRefresher />
+                    {content}
+                  </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,
@@ -203,25 +206,49 @@
   const { threadInfo } = props;
   const { popModal } = useModalContext();
 
-  const renderModalContent = React.useCallback(
-    (searchText: string) => (
-      <MessageSearchModalContent threadInfo={threadInfo} query={searchText} />
-    ),
-    [threadInfo],
+  const { getQuery, setQuery, clearQuery } = useMessageSearchContext();
+
+  const query = React.useMemo(
+    () => getQuery(threadInfo.id),
+    [getQuery, threadInfo.id],
+  );
+
+  const [input, setInput] = React.useState(query);
+
+  const onPressSearch = React.useCallback(
+    () => setQuery(input, threadInfo.id),
+    [setQuery, input, threadInfo.id],
   );
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
   const searchPlaceholder = `Searching in ${uiName}`;
 
+  const clearQueryWrapper = React.useCallback(
+    () => clearQuery(threadInfo.id),
+    [clearQuery, threadInfo.id],
+  );
+
   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={clearQueryWrapper}
+          />
+          <Button
+            onClick={onPressSearch}
+            variant="filled"
+            className={css.button}
+          >
+            Search
+          </Button>
+        </div>
+        <MessageSearchModalContent threadInfo={threadInfo} query={query} />
+      </div>
+    </Modal>
   );
 }