diff --git a/ui/v2.5/src/components/Performers/PerformerMergeDialog.tsx b/ui/v2.5/src/components/Performers/PerformerMergeDialog.tsx
index 0c3c6d8fbb..16e330da27 100644
--- a/ui/v2.5/src/components/Performers/PerformerMergeDialog.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerMergeDialog.tsx
@@ -46,6 +46,7 @@ import {
 import { PerformerSelect } from "./PerformerSelect";
 import { uniq } from "lodash-es";
 import { StashIDsField } from "../Shared/StashID";
+import { PatchComponent } from "src/patch";
 
 type MergeOptions = {
   values: GQL.PerformerUpdateInput;
@@ -728,190 +729,186 @@ interface IPerformerMergeModalProps {
   performers: GQL.SelectPerformerDataFragment[];
 }
 
-export const PerformerMergeModal: React.FC<IPerformerMergeModalProps> = ({
-  show,
-  onClose,
-  performers,
-}) => {
-  const [sourcePerformers, setSourcePerformers] = useState<
-    GQL.SelectPerformerDataFragment[]
-  >([]);
-  const [destPerformer, setDestPerformer] = useState<
-    GQL.SelectPerformerDataFragment[]
-  >([]);
-
-  const [loadedSources, setLoadedSources] = useState<
-    GQL.PerformerDataFragment[]
-  >([]);
-  const [loadedDest, setLoadedDest] = useState<GQL.PerformerDataFragment>();
+export const PerformerMergeModal: React.FC<IPerformerMergeModalProps> =
+  PatchComponent("PerformerMergeModal", ({ show, onClose, performers }) => {
+    const [sourcePerformers, setSourcePerformers] = useState<
+      GQL.SelectPerformerDataFragment[]
+    >([]);
+    const [destPerformer, setDestPerformer] = useState<
+      GQL.SelectPerformerDataFragment[]
+    >([]);
+
+    const [loadedSources, setLoadedSources] = useState<
+      GQL.PerformerDataFragment[]
+    >([]);
+    const [loadedDest, setLoadedDest] = useState<GQL.PerformerDataFragment>();
+
+    const [running, setRunning] = useState(false);
+    const [secondStep, setSecondStep] = useState(false);
+
+    const intl = useIntl();
+    const Toast = useToast();
+
+    const title = intl.formatMessage({
+      id: "actions.merge",
+    });
+
+    const srcIDs = useMemo(
+      () => sourcePerformers.map((s) => s.id),
+      [sourcePerformers]
+    );
+    const destID = useMemo(
+      () => (destPerformer[0] ? [destPerformer[0].id] : []),
+      [destPerformer]
+    );
 
-  const [running, setRunning] = useState(false);
-  const [secondStep, setSecondStep] = useState(false);
+    useEffect(() => {
+      if (performers.length > 0) {
+        // set the first performer as the destination, others as source
+        setDestPerformer([performers[0]]);
 
-  const intl = useIntl();
-  const Toast = useToast();
+        if (performers.length > 1) {
+          setSourcePerformers(performers.slice(1));
+        }
+      }
+    }, [performers]);
 
-  const title = intl.formatMessage({
-    id: "actions.merge",
-  });
+    async function loadPerformers() {
+      const performerIDs = sourcePerformers.map((s) => parseInt(s.id, 10));
+      performerIDs.push(parseInt(destPerformer[0].id, 10));
+      const query = await queryFindPerformersByID(performerIDs);
+      const { performers: loadedPerformers } = query.data.findPerformers;
 
-  const srcIDs = useMemo(
-    () => sourcePerformers.map((s) => s.id),
-    [sourcePerformers]
-  );
-  const destID = useMemo(
-    () => (destPerformer[0] ? [destPerformer[0].id] : []),
-    [destPerformer]
-  );
-
-  useEffect(() => {
-    if (performers.length > 0) {
-      // set the first performer as the destination, others as source
-      setDestPerformer([performers[0]]);
+      setLoadedDest(loadedPerformers.find((s) => s.id === destPerformer[0].id));
+      setLoadedSources(
+        loadedPerformers.filter((s) => s.id !== destPerformer[0].id)
+      );
+      setSecondStep(true);
+    }
 
-      if (performers.length > 1) {
-        setSourcePerformers(performers.slice(1));
+    async function onMerge(options: MergeOptions) {
+      const { values } = options;
+      try {
+        setRunning(true);
+        const result = await mutatePerformerMerge(
+          destPerformer[0].id,
+          sourcePerformers.map((s) => s.id),
+          values
+        );
+        if (result.data?.performerMerge) {
+          Toast.success(intl.formatMessage({ id: "toast.merged_performers" }));
+          onClose(destPerformer[0].id);
+        }
+      } catch (e) {
+        Toast.error(e);
+      } finally {
+        setRunning(false);
       }
     }
-  }, [performers]);
-
-  async function loadPerformers() {
-    const performerIDs = sourcePerformers.map((s) => parseInt(s.id, 10));
-    performerIDs.push(parseInt(destPerformer[0].id, 10));
-    const query = await queryFindPerformersByID(performerIDs);
-    const { performers: loadedPerformers } = query.data.findPerformers;
 
-    setLoadedDest(loadedPerformers.find((s) => s.id === destPerformer[0].id));
-    setLoadedSources(
-      loadedPerformers.filter((s) => s.id !== destPerformer[0].id)
-    );
-    setSecondStep(true);
-  }
+    function canMerge() {
+      return sourcePerformers.length > 0 && destPerformer.length !== 0;
+    }
 
-  async function onMerge(options: MergeOptions) {
-    const { values } = options;
-    try {
-      setRunning(true);
-      const result = await mutatePerformerMerge(
-        destPerformer[0].id,
-        sourcePerformers.map((s) => s.id),
-        values
-      );
-      if (result.data?.performerMerge) {
-        Toast.success(intl.formatMessage({ id: "toast.merged_performers" }));
-        onClose(destPerformer[0].id);
+    function switchPerformers() {
+      if (sourcePerformers.length && destPerformer.length) {
+        const newDest = sourcePerformers[0];
+        setSourcePerformers([...sourcePerformers.slice(1), destPerformer[0]]);
+        setDestPerformer([newDest]);
       }
-      onClose();
-    } catch (e) {
-      Toast.error(e);
-    } finally {
-      setRunning(false);
     }
-  }
-
-  function canMerge() {
-    return sourcePerformers.length > 0 && destPerformer.length !== 0;
-  }
 
-  function switchPerformers() {
-    if (sourcePerformers.length && destPerformer.length) {
-      const newDest = sourcePerformers[0];
-      setSourcePerformers([...sourcePerformers.slice(1), destPerformer[0]]);
-      setDestPerformer([newDest]);
+    if (secondStep && destPerformer.length > 0) {
+      return (
+        <PerformerMergeDetails
+          sources={loadedSources}
+          dest={loadedDest!}
+          onClose={(values) => {
+            setSecondStep(false);
+            if (values) {
+              onMerge(values);
+            } else {
+              onClose();
+            }
+          }}
+        />
+      );
     }
-  }
 
-  if (secondStep && destPerformer.length > 0) {
     return (
-      <PerformerMergeDetails
-        sources={loadedSources}
-        dest={loadedDest!}
-        onClose={(values) => {
-          setSecondStep(false);
-          if (values) {
-            onMerge(values);
-          } else {
-            onClose();
-          }
+      <ModalComponent
+        dialogClassName="performer-merge-dialog"
+        show={show}
+        header={title}
+        icon={faSignInAlt}
+        accept={{
+          text: intl.formatMessage({ id: "actions.next_action" }),
+          onClick: () => loadPerformers(),
         }}
-      />
-    );
-  }
-
-  return (
-    <ModalComponent
-      dialogClassName="performer-merge-dialog"
-      show={show}
-      header={title}
-      icon={faSignInAlt}
-      accept={{
-        text: intl.formatMessage({ id: "actions.next_action" }),
-        onClick: () => loadPerformers(),
-      }}
-      disabled={!canMerge()}
-      cancel={{
-        variant: "secondary",
-        onClick: () => onClose(),
-      }}
-      isRunning={running}
-    >
-      <div className="form-container row px-3">
-        <div className="col-12 col-lg-6 col-xl-12">
-          <Form.Group controlId="source" as={Row}>
-            {FormUtils.renderLabel({
-              title: intl.formatMessage({ id: "dialogs.merge.source" }),
-              labelProps: {
-                column: true,
-                sm: 3,
-                xl: 12,
-              },
-            })}
-            <Col sm={9} xl={12}>
-              <PerformerSelect
-                isMulti
-                onSelect={(items) => setSourcePerformers(items)}
-                values={sourcePerformers}
-                menuPortalTarget={document.body}
-                excludeIds={destID}
-              />
-            </Col>
-          </Form.Group>
-          <Form.Group
-            controlId="switch"
-            as={Row}
-            className="justify-content-center"
-          >
-            <Button
-              variant="secondary"
-              onClick={() => switchPerformers()}
-              disabled={!sourcePerformers.length || !destPerformer.length}
-              title={intl.formatMessage({ id: "actions.swap" })}
+        disabled={!canMerge()}
+        cancel={{
+          variant: "secondary",
+          onClick: () => onClose(),
+        }}
+        isRunning={running}
+      >
+        <div className="form-container row px-3">
+          <div className="col-12 col-lg-6 col-xl-12">
+            <Form.Group controlId="source" as={Row}>
+              {FormUtils.renderLabel({
+                title: intl.formatMessage({ id: "dialogs.merge.source" }),
+                labelProps: {
+                  column: true,
+                  sm: 3,
+                  xl: 12,
+                },
+              })}
+              <Col sm={9} xl={12}>
+                <PerformerSelect
+                  isMulti
+                  onSelect={(items) => setSourcePerformers(items)}
+                  values={sourcePerformers}
+                  menuPortalTarget={document.body}
+                  excludeIds={destID}
+                />
+              </Col>
+            </Form.Group>
+            <Form.Group
+              controlId="switch"
+              as={Row}
+              className="justify-content-center"
             >
-              <Icon className="fa-fw" icon={faExchangeAlt} />
-            </Button>
-          </Form.Group>
-          <Form.Group controlId="destination" as={Row}>
-            {FormUtils.renderLabel({
-              title: intl.formatMessage({
-                id: "dialogs.merge.destination",
-              }),
-              labelProps: {
-                column: true,
-                sm: 3,
-                xl: 12,
-              },
-            })}
-            <Col sm={9} xl={12}>
-              <PerformerSelect
-                onSelect={(items) => setDestPerformer(items)}
-                values={destPerformer}
-                menuPortalTarget={document.body}
-                excludeIds={srcIDs}
-              />
-            </Col>
-          </Form.Group>
+              <Button
+                variant="secondary"
+                onClick={() => switchPerformers()}
+                disabled={!sourcePerformers.length || !destPerformer.length}
+                title={intl.formatMessage({ id: "actions.swap" })}
+              >
+                <Icon className="fa-fw" icon={faExchangeAlt} />
+              </Button>
+            </Form.Group>
+            <Form.Group controlId="destination" as={Row}>
+              {FormUtils.renderLabel({
+                title: intl.formatMessage({
+                  id: "dialogs.merge.destination",
+                }),
+                labelProps: {
+                  column: true,
+                  sm: 3,
+                  xl: 12,
+                },
+              })}
+              <Col sm={9} xl={12}>
+                <PerformerSelect
+                  onSelect={(items) => setDestPerformer(items)}
+                  values={destPerformer}
+                  menuPortalTarget={document.body}
+                  excludeIds={srcIDs}
+                />
+              </Col>
+            </Form.Group>
+          </div>
         </div>
-      </div>
-    </ModalComponent>
-  );
-};
+      </ModalComponent>
+    );
+  });
diff --git a/ui/v2.5/src/components/Scenes/SceneMergeDialog.tsx b/ui/v2.5/src/components/Scenes/SceneMergeDialog.tsx
index c1dfe512d1..ef781cddb6 100644
--- a/ui/v2.5/src/components/Scenes/SceneMergeDialog.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneMergeDialog.tsx
@@ -46,6 +46,7 @@ import {
 } from "../Shared/ScrapeDialog/ScrapedObjectsRow";
 import { Scene, SceneSelect } from "src/components/Scenes/SceneSelect";
 import { StashIDsField } from "../Shared/StashID";
+import { PatchComponent } from "src/patch";
 
 type MergeOptions = {
   values: GQL.SceneUpdateInput;
@@ -699,182 +700,180 @@ interface ISceneMergeModalProps {
   scenes: { id: string; title: string }[];
 }
 
-export const SceneMergeModal: React.FC<ISceneMergeModalProps> = ({
-  show,
-  onClose,
-  scenes,
-}) => {
-  const [sourceScenes, setSourceScenes] = useState<Scene[]>([]);
-  const [destScene, setDestScene] = useState<Scene[]>([]);
+export const SceneMergeModal: React.FC<ISceneMergeModalProps> = PatchComponent(
+  "SceneMergeModal",
+  ({ show, onClose, scenes }) => {
+    const [sourceScenes, setSourceScenes] = useState<Scene[]>([]);
+    const [destScene, setDestScene] = useState<Scene[]>([]);
 
-  const [loadedSources, setLoadedSources] = useState<GQL.SceneDataFragment[]>(
-    []
-  );
-  const [loadedDest, setLoadedDest] = useState<GQL.SceneDataFragment>();
+    const [loadedSources, setLoadedSources] = useState<GQL.SceneDataFragment[]>(
+      []
+    );
+    const [loadedDest, setLoadedDest] = useState<GQL.SceneDataFragment>();
 
-  const [running, setRunning] = useState(false);
-  const [secondStep, setSecondStep] = useState(false);
+    const [running, setRunning] = useState(false);
+    const [secondStep, setSecondStep] = useState(false);
 
-  const intl = useIntl();
-  const Toast = useToast();
+    const intl = useIntl();
+    const Toast = useToast();
 
-  const title = intl.formatMessage({
-    id: "actions.merge",
-  });
+    const title = intl.formatMessage({
+      id: "actions.merge",
+    });
 
-  const srcIDs = useMemo(() => sourceScenes.map((s) => s.id), [sourceScenes]);
-  const destID = useMemo(
-    () => (destScene[0] ? [destScene[0].id] : []),
-    [destScene]
-  );
+    const srcIDs = useMemo(() => sourceScenes.map((s) => s.id), [sourceScenes]);
+    const destID = useMemo(
+      () => (destScene[0] ? [destScene[0].id] : []),
+      [destScene]
+    );
 
-  useEffect(() => {
-    if (scenes.length > 0) {
-      // set the first scene as the destination, others as source
-      setDestScene([scenes[0]]);
+    useEffect(() => {
+      if (scenes.length > 0) {
+        // set the first scene as the destination, others as source
+        setDestScene([scenes[0]]);
 
-      if (scenes.length > 1) {
-        setSourceScenes(scenes.slice(1));
+        if (scenes.length > 1) {
+          setSourceScenes(scenes.slice(1));
+        }
       }
-    }
-  }, [scenes]);
+    }, [scenes]);
 
-  async function loadScenes() {
-    const sceneIDs = sourceScenes.map((s) => parseInt(s.id, 10));
-    sceneIDs.push(parseInt(destScene[0].id, 10));
-    const query = await queryFindFullScenesByID(sceneIDs);
-    const { scenes: loadedScenes } = query.data.findScenes;
+    async function loadScenes() {
+      const sceneIDs = sourceScenes.map((s) => parseInt(s.id, 10));
+      sceneIDs.push(parseInt(destScene[0].id, 10));
+      const query = await queryFindFullScenesByID(sceneIDs);
+      const { scenes: loadedScenes } = query.data.findScenes;
 
-    setLoadedDest(loadedScenes.find((s) => s.id === destScene[0].id));
-    setLoadedSources(loadedScenes.filter((s) => s.id !== destScene[0].id));
-    setSecondStep(true);
-  }
+      setLoadedDest(loadedScenes.find((s) => s.id === destScene[0].id));
+      setLoadedSources(loadedScenes.filter((s) => s.id !== destScene[0].id));
+      setSecondStep(true);
+    }
 
-  async function onMerge(options: MergeOptions) {
-    const { values, includeViewHistory, includeOHistory } = options;
-    try {
-      setRunning(true);
-      const result = await mutateSceneMerge(
-        destScene[0].id,
-        sourceScenes.map((s) => s.id),
-        values,
-        includeViewHistory,
-        includeOHistory
-      );
-      if (result.data?.sceneMerge) {
-        Toast.success(intl.formatMessage({ id: "toast.merged_scenes" }));
-        onClose(destScene[0].id);
+    async function onMerge(options: MergeOptions) {
+      const { values, includeViewHistory, includeOHistory } = options;
+      try {
+        setRunning(true);
+        const result = await mutateSceneMerge(
+          destScene[0].id,
+          sourceScenes.map((s) => s.id),
+          values,
+          includeViewHistory,
+          includeOHistory
+        );
+        if (result.data?.sceneMerge) {
+          Toast.success(intl.formatMessage({ id: "toast.merged_scenes" }));
+          onClose(destScene[0].id);
+        }
+      } catch (e) {
+        Toast.error(e);
+      } finally {
+        setRunning(false);
       }
-      onClose();
-    } catch (e) {
-      Toast.error(e);
-    } finally {
-      setRunning(false);
     }
-  }
 
-  function canMerge() {
-    return sourceScenes.length > 0 && destScene.length !== 0;
-  }
+    function canMerge() {
+      return sourceScenes.length > 0 && destScene.length !== 0;
+    }
 
-  function switchScenes() {
-    if (sourceScenes.length && destScene.length) {
-      const newDest = sourceScenes[0];
-      setSourceScenes([...sourceScenes.slice(1), destScene[0]]);
-      setDestScene([newDest]);
+    function switchScenes() {
+      if (sourceScenes.length && destScene.length) {
+        const newDest = sourceScenes[0];
+        setSourceScenes([...sourceScenes.slice(1), destScene[0]]);
+        setDestScene([newDest]);
+      }
+    }
+
+    if (secondStep && destScene.length > 0) {
+      return (
+        <SceneMergeDetails
+          sources={loadedSources}
+          dest={loadedDest!}
+          onClose={(values) => {
+            setSecondStep(false);
+            if (values) {
+              onMerge(values);
+            } else {
+              onClose();
+            }
+          }}
+        />
+      );
     }
-  }
 
-  if (secondStep && destScene.length > 0) {
     return (
-      <SceneMergeDetails
-        sources={loadedSources}
-        dest={loadedDest!}
-        onClose={(values) => {
-          setSecondStep(false);
-          if (values) {
-            onMerge(values);
-          } else {
-            onClose();
-          }
+      <ModalComponent
+        show={show}
+        header={title}
+        icon={faSignInAlt}
+        accept={{
+          text: intl.formatMessage({ id: "actions.next_action" }),
+          onClick: () => loadScenes(),
         }}
-      />
-    );
-  }
-
-  return (
-    <ModalComponent
-      show={show}
-      header={title}
-      icon={faSignInAlt}
-      accept={{
-        text: intl.formatMessage({ id: "actions.next_action" }),
-        onClick: () => loadScenes(),
-      }}
-      disabled={!canMerge()}
-      cancel={{
-        variant: "secondary",
-        onClick: () => onClose(),
-      }}
-      isRunning={running}
-    >
-      <div className="form-container row px-3">
-        <div className="col-12 col-lg-6 col-xl-12">
-          <Form.Group controlId="source" as={Row}>
-            {FormUtils.renderLabel({
-              title: intl.formatMessage({ id: "dialogs.merge.source" }),
-              labelProps: {
-                column: true,
-                sm: 3,
-                xl: 12,
-              },
-            })}
-            <Col sm={9} xl={12}>
-              <SceneSelect
-                isMulti
-                onSelect={(items) => setSourceScenes(items)}
-                values={sourceScenes}
-                menuPortalTarget={document.body}
-                excludeIds={destID}
-              />
-            </Col>
-          </Form.Group>
-          <Form.Group
-            controlId="switch"
-            as={Row}
-            className="justify-content-center"
-          >
-            <Button
-              variant="secondary"
-              onClick={() => switchScenes()}
-              disabled={!sourceScenes.length || !destScene.length}
-              title={intl.formatMessage({ id: "actions.swap" })}
+        disabled={!canMerge()}
+        cancel={{
+          variant: "secondary",
+          onClick: () => onClose(),
+        }}
+        isRunning={running}
+      >
+        <div className="form-container row px-3">
+          <div className="col-12 col-lg-6 col-xl-12">
+            <Form.Group controlId="source" as={Row}>
+              {FormUtils.renderLabel({
+                title: intl.formatMessage({ id: "dialogs.merge.source" }),
+                labelProps: {
+                  column: true,
+                  sm: 3,
+                  xl: 12,
+                },
+              })}
+              <Col sm={9} xl={12}>
+                <SceneSelect
+                  isMulti
+                  onSelect={(items) => setSourceScenes(items)}
+                  values={sourceScenes}
+                  menuPortalTarget={document.body}
+                  excludeIds={destID}
+                />
+              </Col>
+            </Form.Group>
+            <Form.Group
+              controlId="switch"
+              as={Row}
+              className="justify-content-center"
             >
-              <Icon className="fa-fw" icon={faExchangeAlt} />
-            </Button>
-          </Form.Group>
-          <Form.Group controlId="destination" as={Row}>
-            {FormUtils.renderLabel({
-              title: intl.formatMessage({
-                id: "dialogs.merge.destination",
-              }),
-              labelProps: {
-                column: true,
-                sm: 3,
-                xl: 12,
-              },
-            })}
-            <Col sm={9} xl={12}>
-              <SceneSelect
-                onSelect={(items) => setDestScene(items)}
-                values={destScene}
-                menuPortalTarget={document.body}
-                excludeIds={srcIDs}
-              />
-            </Col>
-          </Form.Group>
+              <Button
+                variant="secondary"
+                onClick={() => switchScenes()}
+                disabled={!sourceScenes.length || !destScene.length}
+                title={intl.formatMessage({ id: "actions.swap" })}
+              >
+                <Icon className="fa-fw" icon={faExchangeAlt} />
+              </Button>
+            </Form.Group>
+            <Form.Group controlId="destination" as={Row}>
+              {FormUtils.renderLabel({
+                title: intl.formatMessage({
+                  id: "dialogs.merge.destination",
+                }),
+                labelProps: {
+                  column: true,
+                  sm: 3,
+                  xl: 12,
+                },
+              })}
+              <Col sm={9} xl={12}>
+                <SceneSelect
+                  onSelect={(items) => setDestScene(items)}
+                  values={destScene}
+                  menuPortalTarget={document.body}
+                  excludeIds={srcIDs}
+                />
+              </Col>
+            </Form.Group>
+          </div>
         </div>
-      </div>
-    </ModalComponent>
-  );
-};
+      </ModalComponent>
+    );
+  }
+);
diff --git a/ui/v2.5/src/components/Tags/TagMergeDialog.tsx b/ui/v2.5/src/components/Tags/TagMergeDialog.tsx
index 41e6a04efd..6e3e3786f0 100644
--- a/ui/v2.5/src/components/Tags/TagMergeDialog.tsx
+++ b/ui/v2.5/src/components/Tags/TagMergeDialog.tsx
@@ -30,6 +30,7 @@ import {
 import { ScrapedTagsRow } from "../Shared/ScrapeDialog/ScrapedObjectsRow";
 import { ScrapeDialog } from "../Shared/ScrapeDialog/ScrapeDialog";
 import { StashIDsField } from "../Shared/StashID";
+import { PatchComponent } from "src/patch";
 
 interface ITagMergeDetailsProps {
   sources: GQL.TagDataFragment[];
@@ -406,187 +407,188 @@ interface ITagMergeModalProps {
   tags: Tag[];
 }
 
-export const TagMergeModal: React.FC<ITagMergeModalProps> = ({
-  show,
-  onClose,
-  tags,
-}) => {
-  const [src, setSrc] = useState<Tag[]>([]);
-  const [dest, setDest] = useState<Tag | null>(null);
+export const TagMergeModal: React.FC<ITagMergeModalProps> = PatchComponent(
+  "TagMergeModal",
+  ({ show, onClose, tags }) => {
+    const [src, setSrc] = useState<Tag[]>([]);
+    const [dest, setDest] = useState<Tag | null>(null);
 
-  const [loadedSources, setLoadedSources] = useState<GQL.TagDataFragment[]>([]);
-  const [loadedDest, setLoadedDest] = useState<GQL.TagDataFragment>();
+    const [loadedSources, setLoadedSources] = useState<GQL.TagDataFragment[]>(
+      []
+    );
+    const [loadedDest, setLoadedDest] = useState<GQL.TagDataFragment>();
 
-  const [secondStep, setSecondStep] = useState(false);
+    const [secondStep, setSecondStep] = useState(false);
 
-  const [running, setRunning] = useState(false);
+    const [running, setRunning] = useState(false);
 
-  const [mergeTags] = useTagsMerge();
+    const [mergeTags] = useTagsMerge();
 
-  const intl = useIntl();
-  const Toast = useToast();
+    const intl = useIntl();
+    const Toast = useToast();
 
-  const title = intl.formatMessage({
-    id: "actions.merge",
-  });
+    const title = intl.formatMessage({
+      id: "actions.merge",
+    });
 
-  const srcIDs = useMemo(() => src.map((s) => s.id), [src]);
-  const destID = useMemo(() => (dest ? [dest.id] : []), [dest]);
+    const srcIDs = useMemo(() => src.map((s) => s.id), [src]);
+    const destID = useMemo(() => (dest ? [dest.id] : []), [dest]);
 
-  useEffect(() => {
-    if (tags.length > 0) {
-      setDest(tags[0]);
-      setSrc(tags.slice(1));
-    }
-  }, [tags]);
-
-  async function loadTags() {
-    try {
-      const tagIDs = src.map((s) => s.id);
-      tagIDs.push(dest!.id);
-      const query = await queryFindTagsByID(tagIDs);
-      const { tags: loadedTags } = query.data.findTags;
-
-      setLoadedDest(loadedTags.find((s) => s.id === dest!.id));
-      setLoadedSources(loadedTags.filter((s) => s.id !== dest!.id));
-      setSecondStep(true);
-    } catch (e) {
-      Toast.error(e);
-      return;
+    useEffect(() => {
+      if (tags.length > 0) {
+        setDest(tags[0]);
+        setSrc(tags.slice(1));
+      }
+    }, [tags]);
+
+    async function loadTags() {
+      try {
+        const tagIDs = src.map((s) => s.id);
+        tagIDs.push(dest!.id);
+        const query = await queryFindTagsByID(tagIDs);
+        const { tags: loadedTags } = query.data.findTags;
+
+        setLoadedDest(loadedTags.find((s) => s.id === dest!.id));
+        setLoadedSources(loadedTags.filter((s) => s.id !== dest!.id));
+        setSecondStep(true);
+      } catch (e) {
+        Toast.error(e);
+        return;
+      }
     }
-  }
 
-  async function onMerge(values: GQL.TagUpdateInput) {
-    if (!dest) return;
-
-    const source = src.map((s) => s.id);
-    const destination = dest.id;
-
-    try {
-      setRunning(true);
-      const result = await mergeTags({
-        variables: {
-          source,
-          destination,
-          values,
-        },
-      });
-      if (result.data?.tagsMerge) {
-        Toast.success(intl.formatMessage({ id: "toast.merged_tags" }));
-        onClose(dest.id);
+    async function onMerge(values: GQL.TagUpdateInput) {
+      if (!dest) return;
+
+      const source = src.map((s) => s.id);
+      const destination = dest.id;
+
+      try {
+        setRunning(true);
+        const result = await mergeTags({
+          variables: {
+            source,
+            destination,
+            values,
+          },
+        });
+        if (result.data?.tagsMerge) {
+          Toast.success(intl.formatMessage({ id: "toast.merged_tags" }));
+          onClose(dest.id);
+        }
+      } catch (e) {
+        Toast.error(e);
+      } finally {
+        setRunning(false);
       }
-    } catch (e) {
-      Toast.error(e);
-    } finally {
-      setRunning(false);
     }
-  }
 
-  function canMerge() {
-    return src.length > 0 && dest !== null;
-  }
+    function canMerge() {
+      return src.length > 0 && dest !== null;
+    }
 
-  function switchTags() {
-    if (src.length && dest !== null) {
-      const newDest = src[0];
-      setSrc([...src.slice(1), dest]);
-      setDest(newDest);
+    function switchTags() {
+      if (src.length && dest !== null) {
+        const newDest = src[0];
+        setSrc([...src.slice(1), dest]);
+        setDest(newDest);
+      }
+    }
+
+    if (secondStep && dest) {
+      return (
+        <TagMergeDetails
+          sources={loadedSources}
+          dest={loadedDest!}
+          onClose={(values) => {
+            setSecondStep(false);
+            if (values) {
+              onMerge(values);
+            } else {
+              onClose();
+            }
+          }}
+        />
+      );
     }
-  }
 
-  if (secondStep && dest) {
     return (
-      <TagMergeDetails
-        sources={loadedSources}
-        dest={loadedDest!}
-        onClose={(values) => {
-          setSecondStep(false);
-          if (values) {
-            onMerge(values);
-          } else {
-            onClose();
-          }
+      <ModalComponent
+        show={show}
+        header={title}
+        icon={faSignInAlt}
+        accept={{
+          text: intl.formatMessage({ id: "actions.merge" }),
+          onClick: () => loadTags(),
         }}
-      />
-    );
-  }
-
-  return (
-    <ModalComponent
-      show={show}
-      header={title}
-      icon={faSignInAlt}
-      accept={{
-        text: intl.formatMessage({ id: "actions.merge" }),
-        onClick: () => loadTags(),
-      }}
-      disabled={!canMerge()}
-      cancel={{
-        variant: "secondary",
-        onClick: () => onClose(),
-      }}
-      isRunning={running}
-    >
-      <div className="form-container row px-3">
-        <div className="col-12 col-lg-6 col-xl-12">
-          <Form.Group controlId="source" as={Row}>
-            {FormUtils.renderLabel({
-              title: intl.formatMessage({ id: "dialogs.merge.source" }),
-              labelProps: {
-                column: true,
-                sm: 3,
-                xl: 12,
-              },
-            })}
-            <Col sm={9} xl={12}>
-              <TagSelect
-                isMulti
-                creatable={false}
-                onSelect={(items) => setSrc(items)}
-                values={src}
-                excludeIds={destID}
-                menuPortalTarget={document.body}
-              />
-            </Col>
-          </Form.Group>
-          <Form.Group
-            controlId="switch"
-            as={Row}
-            className="justify-content-center"
-          >
-            <Button
-              variant="secondary"
-              onClick={() => switchTags()}
-              disabled={!src.length || !dest}
-              title={intl.formatMessage({ id: "actions.swap" })}
+        disabled={!canMerge()}
+        cancel={{
+          variant: "secondary",
+          onClick: () => onClose(),
+        }}
+        isRunning={running}
+      >
+        <div className="form-container row px-3">
+          <div className="col-12 col-lg-6 col-xl-12">
+            <Form.Group controlId="source" as={Row}>
+              {FormUtils.renderLabel({
+                title: intl.formatMessage({ id: "dialogs.merge.source" }),
+                labelProps: {
+                  column: true,
+                  sm: 3,
+                  xl: 12,
+                },
+              })}
+              <Col sm={9} xl={12}>
+                <TagSelect
+                  isMulti
+                  creatable={false}
+                  onSelect={(items) => setSrc(items)}
+                  values={src}
+                  excludeIds={destID}
+                  menuPortalTarget={document.body}
+                />
+              </Col>
+            </Form.Group>
+            <Form.Group
+              controlId="switch"
+              as={Row}
+              className="justify-content-center"
             >
-              <Icon className="fa-fw" icon={faExchangeAlt} />
-            </Button>
-          </Form.Group>
-          <Form.Group controlId="destination" as={Row}>
-            {FormUtils.renderLabel({
-              title: intl.formatMessage({
-                id: "dialogs.merge.destination",
-              }),
-              labelProps: {
-                column: true,
-                sm: 3,
-                xl: 12,
-              },
-            })}
-            <Col sm={9} xl={12}>
-              <TagSelect
-                isMulti={false}
-                creatable={false}
-                onSelect={(items) => setDest(items[0])}
-                values={dest ? [dest] : undefined}
-                excludeIds={srcIDs}
-                menuPortalTarget={document.body}
-              />
-            </Col>
-          </Form.Group>
+              <Button
+                variant="secondary"
+                onClick={() => switchTags()}
+                disabled={!src.length || !dest}
+                title={intl.formatMessage({ id: "actions.swap" })}
+              >
+                <Icon className="fa-fw" icon={faExchangeAlt} />
+              </Button>
+            </Form.Group>
+            <Form.Group controlId="destination" as={Row}>
+              {FormUtils.renderLabel({
+                title: intl.formatMessage({
+                  id: "dialogs.merge.destination",
+                }),
+                labelProps: {
+                  column: true,
+                  sm: 3,
+                  xl: 12,
+                },
+              })}
+              <Col sm={9} xl={12}>
+                <TagSelect
+                  isMulti={false}
+                  creatable={false}
+                  onSelect={(items) => setDest(items[0])}
+                  values={dest ? [dest] : undefined}
+                  excludeIds={srcIDs}
+                  menuPortalTarget={document.body}
+                />
+              </Col>
+            </Form.Group>
+          </div>
         </div>
-      </div>
-    </ModalComponent>
-  );
-};
+      </ModalComponent>
+    );
+  }
+);
diff --git a/ui/v2.5/src/docs/en/Manual/UIPluginApi.md b/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
index 5a5e301a60..a711fde63f 100644
--- a/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
+++ b/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
@@ -299,6 +299,7 @@ Returns `void`.
 - `PerformerIDSelect`
 - `PerformerImagesPanel`
 - `PerformerList`
+- `PerformerMergeModal`
 - `PerformerPage`
 - `PerformerRecommendationRow`
 - `PerformerScenesPanel`
@@ -327,6 +328,7 @@ Returns `void`.
 - `SceneMarkerCardsGrid`
 - `SceneMarkerList`
 - `SceneMarkerRecommendationRow`
+- `SceneMergeModal`
 - `SceneList`
 - `ScenePage`
 - `ScenePage.TabContent`
@@ -362,6 +364,7 @@ Returns `void`.
 - `TagIDSelect`
 - `TagLink`
 - `TagList`
+- `TagMergeModal`
 - `TagPage`
 - `TagRecommendationRow`
 - `TagSelect`
diff --git a/ui/v2.5/src/pluginApi.d.ts b/ui/v2.5/src/pluginApi.d.ts
index ccc0a4c614..9ed0cabb95 100644
--- a/ui/v2.5/src/pluginApi.d.ts
+++ b/ui/v2.5/src/pluginApi.d.ts
@@ -727,6 +727,7 @@ declare namespace PluginApi {
     PerformerIDSelect: React.FC<any>;
     PerformerImagesPanel: React.FC<any>;
     PerformerList: React.FC<any>;
+    PerformerMergeModal: React.FC<any>;
     PerformerPage: React.FC<any>;
     PerformerRecommendationRow: React.FC<any>;
     PerformerScenesPanel: React.FC<any>;
@@ -758,6 +759,7 @@ declare namespace PluginApi {
     SceneMarkerCardGrid: React.FC<any>;
     SceneMarkerList: React.FC<any>;
     SceneMarkerRecommendationRow: React.FC<any>;
+    SceneMergeModal: React.FC<any>;
     SceneRecommendationRow: React.FC<any>;
     SelectSetting: React.FC<any>;
     Setting: React.FC<any>;
@@ -784,6 +786,7 @@ declare namespace PluginApi {
     TagCardGrid: React.FC<any>;
     TagLink: React.FC<any>;
     TagList: React.FC<any>;
+    TagMergeModal: React.FC<any>;
     TagPage: React.FC<any>;
     TagRecommendationRow: React.FC<any>;
     TagSelect: React.FC<any>;
diff --git a/ui/v2.5/src/pluginApi.tsx b/ui/v2.5/src/pluginApi.tsx
index bdb4d5ce2c..44626f9e5e 100644
--- a/ui/v2.5/src/pluginApi.tsx
+++ b/ui/v2.5/src/pluginApi.tsx
@@ -112,6 +112,10 @@ export const PluginApi = {
     GalleryViewer: () => import("src/components/Galleries/GalleryViewer"),
 
     DeleteScenesDialog: () => import("./components/Scenes/DeleteScenesDialog"),
+    SceneMergeDialog: () => import("./components/Scenes/SceneMergeDialog"),
+    PerformerMergeDialog: () =>
+      import("./components/Performers/PerformerMergeDialog"),
+    TagMergeDialog: () => import("./components/Tags/TagMergeDialog"),
     SceneList: () => import("./components/Scenes/SceneList"),
     SceneMarkerList: () => import("./components/Scenes/SceneMarkerList"),
     Scene: () => import("./components/Scenes/SceneDetails/Scene"),