diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.react.js b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
--- a/web/modals/threads/gallery/thread-settings-media-gallery.react.js
+++ b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
@@ -14,12 +14,27 @@
 
 import GalleryItem from './thread-settings-media-gallery-item.react.js';
 import css from './thread-settings-media-gallery.css';
-import Tabs from '../../../components/tabs-legacy.react.js';
+import Tabs, { type TabData } from '../../../components/tabs.react.js';
 import MultimediaModal from '../../../media/multimedia-modal.react.js';
 import Modal from '../../modal.react.js';
 
 type MediaGalleryTab = 'All' | 'Images' | 'Videos';
 
+const tabsData: $ReadOnlyArray<TabData<MediaGalleryTab>> = [
+  {
+    id: 'All',
+    header: 'All',
+  },
+  {
+    id: 'Images',
+    header: 'Images',
+  },
+  {
+    id: 'Videos',
+    header: 'Videos',
+  },
+];
+
 type ThreadSettingsMediaGalleryModalProps = {
   +onClose: () => void,
   +parentThreadInfo: ThreadInfo,
@@ -39,6 +54,11 @@
   const [mediaInfos, setMediaInfos] = React.useState<$ReadOnlyArray<Media>>([]);
   const [tab, setTab] = React.useState<MediaGalleryTab>(activeTab);
 
+  const tabs = React.useMemo(
+    () => <Tabs tabItems={tabsData} activeTab={tab} setTab={setTab} />,
+    [tab],
+  );
+
   React.useEffect(() => {
     const fetchData = async () => {
       const result = await callFetchThreadMedia({
@@ -166,27 +186,26 @@
     [callFetchThreadMedia, threadID, limit, mediaInfos],
   );
 
-  return (
-    <Modal name={modalName} onClose={onClose} size="large">
-      <Tabs.Container activeTab={tab} setTab={setTab}>
-        <Tabs.Item id="All" header="All">
-          <div className={css.container} onScroll={handleScroll}>
-            {mediaGalleryItems}
-          </div>
-        </Tabs.Item>
-        <Tabs.Item id="Images" header="Images">
-          <div className={css.container} onScroll={handleScroll}>
-            {mediaGalleryItems}
-          </div>
-        </Tabs.Item>
-        <Tabs.Item id="Videos" header="Videos">
-          <div className={css.container} onScroll={handleScroll}>
-            {mediaGalleryItems}
-          </div>
-        </Tabs.Item>
-      </Tabs.Container>
-    </Modal>
+  const tabContent = React.useMemo(
+    () => (
+      <div className={css.container} onScroll={handleScroll}>
+        {mediaGalleryItems}
+      </div>
+    ),
+    [handleScroll, mediaGalleryItems],
   );
+
+  const threadSettingsMediaGalleryModal = React.useMemo(
+    () => (
+      <Modal name={modalName} onClose={onClose} size="large">
+        {tabs}
+        {tabContent}
+      </Modal>
+    ),
+    [onClose, tabContent, tabs],
+  );
+
+  return threadSettingsMediaGalleryModal;
 }
 
 export default ThreadSettingsMediaGalleryModal;