diff --git a/client/src/components/History/CurrentHistory/HistoryNavigation.vue b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
index 7420c8f2e53..7084e2713bf 100644
--- a/client/src/components/History/CurrentHistory/HistoryNavigation.vue
+++ b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
@@ -71,7 +71,12 @@ const props = withDefaults(defineProps<Props>(), {
     minimal: false,
 });
 
+// modal refs
 const showSwitchModal = ref(false);
+const showDeleteModal = ref(false);
+const showPrivacyModal = ref(false);
+const showCopyModal = ref(false);
+
 const purgeHistory = ref(false);
 
 const userStore = useUserStore();
@@ -202,17 +207,17 @@ function userTitle(title: string) {
                     <BDropdownDivider />
 
                     <BDropdownItem
-                        v-b-modal:copy-current-history-modal
                         :disabled="isAnonymous"
-                        :title="userTitle('Copy History to a New History')">
+                        :title="userTitle('Copy History to a New History')"
+                        @click="showCopyModal = !showCopyModal">
                         <FontAwesomeIcon fixed-width :icon="faCopy" class="mr-1" />
                         <span v-localize>Copy this History</span>
                     </BDropdownItem>
 
                     <BDropdownItem
-                        v-b-modal:delete-history-modal
                         :disabled="!canEditHistory"
-                        :title="localize('Permanently Delete History')">
+                        :title="localize('Permanently Delete History')"
+                        @click="showDeleteModal = !showDeleteModal">
                         <FontAwesomeIcon fixed-width :icon="faTrash" class="mr-1" />
                         <span v-localize>Delete this History</span>
                     </BDropdownItem>
@@ -278,9 +283,9 @@ function userTitle(title: string) {
                     </BDropdownItem>
 
                     <BDropdownItem
-                        v-b-modal:history-privacy-modal
                         :disabled="isAnonymous || !canEditHistory"
-                        :title="userTitle('Make this History Private')">
+                        :title="userTitle('Make this History Private')"
+                        @click="showPrivacyModal = !showPrivacyModal">
                         <FontAwesomeIcon fixed-width :icon="faLock" class="mr-1" />
                         <span v-localize>Make Private</span>
                     </BDropdownItem>
@@ -297,13 +302,19 @@ function userTitle(title: string) {
             :show-modal.sync="showSwitchModal"
             @selectHistory="historyStore.setCurrentHistory($event.id)" />
 
-        <CopyModal id="copy-current-history-modal" :history="history" />
+        <CopyModal :history="history" :show-modal.sync="showCopyModal" />
 
         <BModal
-            id="history-privacy-modal"
+            v-model="showPrivacyModal"
             title="Make History Private"
             title-tag="h2"
             @ok="historyStore.secureHistory(history)">
+            <h4>
+                History:
+                <b
+                    ><i>{{ history.name }}</i></b
+                >
+            </h4>
             <p v-localize>
                 This will make all the data in this history private (excluding library datasets), and will set
                 permissions such that all new data is created as private. Any datasets within that are currently shared
@@ -312,7 +323,7 @@ function userTitle(title: string) {
         </BModal>
 
         <BModal
-            id="delete-history-modal"
+            v-model="showDeleteModal"
             title="Delete History?"
             title-tag="h2"
             @ok="onDelete"
diff --git a/client/src/components/History/Modals/CopyModal.vue b/client/src/components/History/Modals/CopyModal.vue
index 7f0f6423b0f..d31c4133267 100644
--- a/client/src/components/History/Modals/CopyModal.vue
+++ b/client/src/components/History/Modals/CopyModal.vue
@@ -20,9 +20,16 @@ import localize from "@/utils/localization";
 
 interface Props {
     history: HistorySummary;
+    showModal?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    showModal: false,
+});
+
+const emit = defineEmits<{
+    (e: "update:show-modal", value: boolean): void;
+}>();
 
 const userStore = useUserStore();
 const historyStore = useHistoryStore();
@@ -32,6 +39,7 @@ const { currentUser, isAnonymous } = storeToRefs(userStore);
 const name = ref("");
 const copyAll = ref(false);
 const loading = ref(false);
+const localShowModal = ref(props.showModal);
 
 const title = computed(() => {
     return `Copying History: ${props.history.name}`;
@@ -55,6 +63,18 @@ const formValid = computed(() => {
     return newNameValid.value;
 });
 
+watch(
+    () => props.showModal,
+    (newVal) => {
+        localShowModal.value = newVal;
+    }
+);
+watch(
+    () => localShowModal.value,
+    (newVal) => {
+        emit("update:show-modal", newVal);
+    }
+);
 watch(
     () => props.history,
     (newHistory) => {
@@ -74,7 +94,7 @@ async function copy(close: () => void) {
 </script>
 
 <template>
-    <BModal v-bind="$attrs" :title="title" title-tag="h2" v-on="$listeners">
+    <BModal v-model="localShowModal" v-bind="$attrs" :title="title" title-tag="h2" v-on="$listeners">
         <transition name="fade">
             <BAlert v-localize :show="isAnonymous" variant="warning">
                 As an anonymous user, unless you log in or register, you will lose your current history after copying