diff --git a/client/src/api/datatypes.ts b/client/src/api/datatypes.ts
new file mode 100644
index 000000000000..0b6d30a71c60
--- /dev/null
+++ b/client/src/api/datatypes.ts
@@ -0,0 +1,3 @@
+import { type components } from "@/api";
+
+export type CompositeFileInfo = components["schemas"]["CompositeFileInfo"];
diff --git a/client/src/api/histories.ts b/client/src/api/histories.ts
new file mode 100644
index 000000000000..ed10bb8efb1f
--- /dev/null
+++ b/client/src/api/histories.ts
@@ -0,0 +1,3 @@
+import { type components } from "@/api";
+
+export type HistoryContentsResult = components["schemas"]["HistoryContentsResult"];
diff --git a/client/src/components/Collections/CollectionCreatorModal.vue b/client/src/components/Collections/CollectionCreatorModal.vue
new file mode 100644
index 000000000000..4d809234332f
--- /dev/null
+++ b/client/src/components/Collections/CollectionCreatorModal.vue
@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { faCheckCircle, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BLink, BModal } from "bootstrap-vue";
+import { computed, ref, watch } from "vue";
+
+import type { HDASummary, HistoryItemSummary, HistorySummary } from "@/api";
+import { createDatasetCollection } from "@/components/History/model/queries";
+import { useCollectionBuilderItemsStore } from "@/stores/collectionBuilderItemsStore";
+import { useHistoryStore } from "@/stores/historyStore";
+import localize from "@/utils/localization";
+import { orList } from "@/utils/strings";
+
+import type { CollectionType, DatasetPair } from "../History/adapters/buildCollectionModal";
+
+import ListCollectionCreator from "./ListCollectionCreator.vue";
+import PairCollectionCreator from "./PairCollectionCreator.vue";
+import PairedListCollectionCreator from "./PairedListCollectionCreator.vue";
+import Heading from "@/components/Common/Heading.vue";
+import GenericItem from "@/components/History/Content/GenericItem.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+interface Props {
+    historyId: string;
+    showModal: boolean;
+    collectionType: CollectionType;
+    selectedItems?: HistoryItemSummary[];
+    defaultHideSourceItems?: boolean;
+    extensions?: string[];
+    fromRulesInput?: boolean;
+    hideModalOnCreate?: boolean;
+    filterText?: string;
+}
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "created-collection", collection: any): void;
+    (e: "update:show-modal", showModal: boolean): void;
+}>();
+
+/** Computed toggle that handles opening and closing the modal */
+const localShowToggle = computed({
+    get: () => props.showModal,
+    set: (value: boolean) => {
+        emit("update:show-modal", value);
+    },
+});
+
+// Create Collection refs
+const creatingCollection = ref(false);
+const createCollectionError = ref<string | null>(null);
+const createdCollection = ref<any>(null);
+
+// History items variables
+const historyItemsError = ref<string | null>(null);
+const collectionItemsStore = useCollectionBuilderItemsStore();
+const historyStore = useHistoryStore();
+const history = computed(() => historyStore.getHistoryById(props.historyId));
+const historyId = computed(() => props.historyId);
+const localFilterText = computed(() => props.filterText || "");
+const historyUpdateTime = computed(() => history.value?.update_time);
+const isFetchingItems = computed(() => collectionItemsStore.isFetching[localFilterText.value]);
+const historyDatasets = computed(() => {
+    if (collectionItemsStore.cachedDatasetsForFilterText) {
+        return collectionItemsStore.cachedDatasetsForFilterText[localFilterText.value] || [];
+    } else {
+        return [];
+    }
+});
+
+/** Flag for the initial fetch of history items */
+const initialFetch = ref(false);
+
+/** Whether a list of items was selected to create a collection from */
+const fromSelection = computed(() => !!props.selectedItems?.length);
+
+/** Items to create the collection from */
+const creatorItems = computed(() => (fromSelection.value ? props.selectedItems : historyDatasets.value));
+
+watch(
+    () => localShowToggle.value,
+    async (show) => {
+        if (show) {
+            await fetchHistoryDatasets();
+            if (!initialFetch.value) {
+                initialFetch.value = true;
+            }
+        }
+    },
+    { immediate: true }
+);
+
+// Fetch items when history ID or update time changes, only if localShowToggle is true
+watch([historyId, historyUpdateTime, localFilterText], async () => {
+    if (localShowToggle.value) {
+        await fetchHistoryDatasets();
+    }
+});
+
+// If there is a change in `historyDatasets`, but we have selected items, we should update the selected items
+watch(
+    () => historyDatasets.value,
+    (newDatasets) => {
+        if (fromSelection.value) {
+            // find each selected item in the new datasets, and update it
+            props.selectedItems?.forEach((selectedItem) => {
+                const newDataset = newDatasets.find((dataset) => dataset.id === selectedItem.id);
+                if (newDataset) {
+                    Object.assign(selectedItem, newDataset);
+                }
+            });
+        }
+    }
+);
+
+const modalTitle = computed(() => {
+    if (props.collectionType === "list") {
+        return localize(
+            `Create a collection from a list of ${fromSelection.value ? "selected" : ""} ${
+                props.extensions?.length ? orList(props.extensions) : ""
+            } datasets`
+        );
+    } else if (props.collectionType === "list:paired") {
+        return localize(
+            `Create a collection of ${fromSelection.value ? "selected" : ""} ${
+                props.extensions?.length ? orList(props.extensions) : ""
+            } dataset pairs`
+        );
+    } else if (props.collectionType === "paired") {
+        return localize(
+            `Create a ${props.extensions?.length ? orList(props.extensions) : ""} dataset pair collection ${
+                fromSelection.value ? "from selected items" : ""
+            }`
+        );
+    } else {
+        return localize("Create a collection");
+    }
+});
+
+// Methods
+function createListCollection(elements: HDASummary[], name: string, hideSourceItems: boolean) {
+    const returnedElems = elements.map((element) => ({
+        id: element.id,
+        name: element.name,
+        //TODO: this allows for list:list even if the implementation does not - reconcile
+        src: "src" in element ? element.src : element.history_content_type == "dataset" ? "hda" : "hdca",
+    }));
+    return createHDCA(returnedElems, "list", name, hideSourceItems);
+}
+
+function createListPairedCollection(elements: DatasetPair[], name: string, hideSourceItems: boolean) {
+    const returnedElems = elements.map((pair) => ({
+        collection_type: "paired",
+        src: "new_collection",
+        name: pair.name,
+        element_identifiers: [
+            {
+                name: "forward",
+                id: pair.forward.id,
+                src: "src" in pair.forward ? pair.forward.src : "hda",
+            },
+            {
+                name: "reverse",
+                id: pair.reverse.id,
+                src: "src" in pair.reverse ? pair.reverse.src : "hda",
+            },
+        ],
+    }));
+    return createHDCA(returnedElems, "list:paired", name, hideSourceItems);
+}
+
+function createPairedCollection(elements: DatasetPair, name: string, hideSourceItems: boolean) {
+    const { forward, reverse } = elements;
+    const returnedElems = [
+        { name: "forward", src: "src" in forward ? forward.src : "hda", id: forward.id },
+        { name: "reverse", src: "src" in reverse ? reverse.src : "hda", id: reverse.id },
+    ];
+    return createHDCA(returnedElems, "paired", name, hideSourceItems);
+}
+
+async function createHDCA(
+    element_identifiers: any[],
+    collection_type: CollectionType,
+    name: string,
+    hide_source_items: boolean,
+    options = {}
+) {
+    try {
+        creatingCollection.value = true;
+        const collection = await createDatasetCollection(history.value as HistorySummary, {
+            collection_type,
+            name,
+            hide_source_items,
+            element_identifiers,
+            options,
+        });
+
+        emit("created-collection", collection);
+        createdCollection.value = collection;
+
+        if (props.hideModalOnCreate) {
+            hideModal();
+        }
+    } catch (error) {
+        createCollectionError.value = error as string;
+    } finally {
+        creatingCollection.value = false;
+    }
+}
+
+async function fetchHistoryDatasets() {
+    const { error } = await collectionItemsStore.fetchDatasetsForFiltertext(
+        historyId.value,
+        historyUpdateTime.value,
+        localFilterText.value
+    );
+    if (error) {
+        historyItemsError.value = error;
+        console.error("Error fetching history items:", historyItemsError.value);
+    } else {
+        historyItemsError.value = null;
+    }
+}
+
+function hideModal() {
+    localShowToggle.value = false;
+}
+
+function resetModal() {
+    createCollectionError.value = null;
+    createdCollection.value = null;
+}
+</script>
+
+<template>
+    <BModal
+        id="collection-creator-modal"
+        v-model="localShowToggle"
+        :busy="(fromSelection && isFetchingItems) || creatingCollection"
+        modal-class="ui-modal collection-creator-modal"
+        :hide-footer="!createdCollection && !createCollectionError"
+        :ok-disabled="!!createdCollection || !!createCollectionError"
+        :cancel-title="localize('Exit')"
+        footer-class="d-flex justify-content-between"
+        :ok-title="localize('Create Collection')"
+        @hidden="resetModal">
+        <template v-slot:modal-header>
+            <Heading class="w-100" size="sm">
+                <div class="d-flex justify-content-between unselectable w-100">
+                    <div>{{ modalTitle }}</div>
+                    <div v-if="!!history">
+                        From history: <b>{{ history.name }}</b>
+                    </div>
+                </div>
+            </Heading>
+        </template>
+        <BAlert v-if="isFetchingItems && !initialFetch" variant="info" show>
+            <LoadingSpan :message="localize('Loading items')" />
+        </BAlert>
+        <BAlert v-else-if="!fromSelection && historyItemsError" variant="danger" show>
+            {{ historyItemsError }}
+        </BAlert>
+        <BAlert v-else-if="!creatorItems?.length" variant="info" show>
+            {{ localize("No items available to create a collection.") }}
+        </BAlert>
+        <BAlert v-else-if="creatingCollection" variant="info" show>
+            <LoadingSpan :message="localize('Creating collection')" />
+        </BAlert>
+        <BAlert v-else-if="createCollectionError" variant="danger" show>
+            {{ createCollectionError }}
+            <BLink class="text-decoration-none" @click.stop.prevent="resetModal">
+                <FontAwesomeIcon :icon="faUndo" fixed-width />
+                {{ localize("Try again") }}
+            </BLink>
+        </BAlert>
+        <div v-else-if="createdCollection">
+            <BAlert variant="success" show>
+                <FontAwesomeIcon :icon="faCheckCircle" class="text-success" fixed-width />
+                {{ localize("Collection created successfully.") }}
+                <BLink class="text-decoration-none" @click.stop.prevent="resetModal">
+                    <FontAwesomeIcon :icon="faUndo" fixed-width />
+                    {{ localize("Create another collection") }}
+                </BLink>
+            </BAlert>
+
+            <!-- TODO: This is a bit shady, better if we confirm it is a collection type -->
+            <GenericItem :item-id="createdCollection.id" item-src="hdca" />
+        </div>
+        <ListCollectionCreator
+            v-else-if="props.collectionType === 'list'"
+            :history-id="props.historyId"
+            :initial-elements="creatorItems"
+            :default-hide-source-items="props.defaultHideSourceItems"
+            :from-selection="fromSelection"
+            :extensions="props.extensions"
+            @clicked-create="createListCollection"
+            @on-cancel="hideModal" />
+        <PairedListCollectionCreator
+            v-else-if="props.collectionType === 'list:paired'"
+            :history-id="props.historyId"
+            :initial-elements="creatorItems"
+            :default-hide-source-items="props.defaultHideSourceItems"
+            :from-selection="fromSelection"
+            :extensions="props.extensions"
+            @clicked-create="createListPairedCollection"
+            @on-cancel="hideModal" />
+        <PairCollectionCreator
+            v-else-if="props.collectionType === 'paired'"
+            :history-id="props.historyId"
+            :initial-elements="creatorItems"
+            :default-hide-source-items="props.defaultHideSourceItems"
+            :from-selection="fromSelection"
+            :extensions="props.extensions"
+            @clicked-create="createPairedCollection"
+            @on-cancel="hideModal" />
+    </BModal>
+</template>
+
+<style lang="scss">
+/** NOTE: Not using `<style scoped> here because these classes are
+`BModal` `body-class` and `content-class` and don't seem to work
+with scoped */
+.collection-creator-modal {
+    .modal-dialog {
+        width: 85%;
+        max-width: 100%;
+    }
+}
+</style>
diff --git a/client/src/components/Collections/ListCollectionCreator.vue b/client/src/components/Collections/ListCollectionCreator.vue
index 5798187943f2..b1b94e8d70a5 100644
--- a/client/src/components/Collections/ListCollectionCreator.vue
+++ b/client/src/components/Collections/ListCollectionCreator.vue
@@ -1,41 +1,45 @@
 <script setup lang="ts">
 import "ui/hoverhighlight";
 
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSortAlphaDown, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import { faMinus, faSortAlphaDown, faTimes, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton } from "bootstrap-vue";
-import { computed, onMounted, ref } from "vue";
+import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
+import { computed, ref, watch } from "vue";
 import draggable from "vuedraggable";
 
-import type { HDCADetailed, HistoryItemSummary } from "@/api";
+import type { HDASummary, HistoryItemSummary } from "@/api";
+import { Toast } from "@/composables/toast";
 import STATES from "@/mvc/dataset/states";
+import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
 import localize from "@/utils/localization";
 
+import FormSelectMany from "../Form/Elements/FormSelectMany/FormSelectMany.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
 import DatasetCollectionElementView from "@/components/Collections/ListDatasetCollectionElementView.vue";
 
-library.add(faSortAlphaDown, faUndo);
+const NOT_VALID_ELEMENT_MSG: string = localize("is not a valid element for this collection");
 
 interface Props {
-    initialElements: Array<any>;
-    oncancel: () => void;
-    oncreate: () => void;
-    creationFn: (workingElements: any, collectionName: string, hideSourceItems: boolean) => any;
+    historyId: string;
+    initialElements: HistoryItemSummary[];
     defaultHideSourceItems?: boolean;
+    fromSelection?: boolean;
+    extensions?: string[];
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "clicked-create", workingElements: any, collectionName: string, hideSourceItems: boolean): void;
+    (e: "clicked-create", workingElements: HDASummary[], collectionName: string, hideSourceItems: boolean): void;
+    (e: "on-cancel"): void;
 }>();
 
 const state = ref("build");
 const originalNamedElements = ref([]);
 const duplicateNames = ref<string[]>([]);
 const invalidElements = ref<string[]>([]);
-const workingElements = ref<HDCADetailed[]>([]);
+const workingElements = ref<HDASummary[]>([]);
 const selectedDatasetElements = ref<string[]>([]);
 const hideSourceItems = ref(props.defaultHideSourceItems || false);
 
@@ -54,7 +58,7 @@ const returnInvalidElementsLength = computed(() => {
 const returnInvalidElements = computed(() => {
     return invalidElements.value;
 });
-const noElementsSelected = computed(() => {
+const noInitialElements = computed(() => {
     return props.initialElements.length == 0;
 });
 const showDuplicateError = computed(() => {
@@ -64,6 +68,16 @@ const allElementsAreInvalid = computed(() => {
     return props.initialElements.length == invalidElements.value.length;
 });
 
+/** If not `fromSelection`, the list of elements that will become the collection */
+const inListElements = ref<HDASummary[]>([]);
+
+// variables for datatype mapping and then filtering
+const datatypesMapperStore = useDatatypesMapperStore();
+const datatypesMapper = computed(() => datatypesMapperStore.datatypesMapper);
+
+/** Are we filtering by datatype? */
+const filterExtensions = computed(() => !!datatypesMapper.value && !!props.extensions?.length);
+
 /** set up instance vars function */
 function _instanceSetUp() {
     /** Ids of elements that have been selected by the user - to preserve over renders */
@@ -84,21 +98,44 @@ function _elementsSetUp() {
     // copy initial list, sort, add ids if needed
     workingElements.value = JSON.parse(JSON.stringify(props.initialElements.slice(0)));
 
-    _ensureElementIds();
+    // reverse the order of the elements to emulate what we have in the history panel
+    workingElements.value.reverse();
+
+    // for inListElements, reset their values (in order) to datasets from workingElements
+    const inListElementsPrev = inListElements.value;
+    inListElements.value = [];
+    inListElementsPrev.forEach((prevElem) => {
+        const element = workingElements.value.find((e) => e.id === prevElem.id);
+        const problem = _isElementInvalid(prevElem);
+
+        if (element) {
+            inListElements.value.push(element);
+        } else if (problem) {
+            const invalidMsg = `${prevElem.hid}: ${prevElem.name} ${problem} and ${NOT_VALID_ELEMENT_MSG}`;
+            invalidElements.value.push(invalidMsg);
+            Toast.error(invalidMsg, localize("Invalid element"));
+        } else {
+            const invalidMsg = `${prevElem.hid}: ${prevElem.name} ${localize("has been removed from the collection")}`;
+            invalidElements.value.push(invalidMsg);
+            Toast.error(invalidMsg, localize("Invalid element"));
+        }
+    });
+
+    // _ensureElementIds();
     _validateElements();
     _mangleDuplicateNames();
 }
 
-/** add ids to dataset objs in initial list if none */
-function _ensureElementIds() {
-    workingElements.value.forEach((element) => {
-        if (!Object.prototype.hasOwnProperty.call(element, "id")) {
-            console.warn("Element missing id", element);
-        }
-    });
+// TODO: not sure if this is needed
+// function _ensureElementIds() {
+//     workingElements.value.forEach((element) => {
+//         if (!Object.prototype.hasOwnProperty.call(element, "id")) {
+//             console.warn("Element missing id", element);
+//         }
+//     });
 
-    return workingElements.value;
-}
+//     return workingElements.value;
+// }
 
 // /** separate working list into valid and invalid elements for this collection */
 function _validateElements() {
@@ -116,7 +153,7 @@ function _validateElements() {
 }
 
 /** describe what is wrong with a particular element if anything */
-function _isElementInvalid(element: HistoryItemSummary) {
+function _isElementInvalid(element: HistoryItemSummary): string | null {
     if (element.history_content_type === "dataset_collection") {
         return localize("is a collection, this is not allowed");
     }
@@ -131,6 +168,14 @@ function _isElementInvalid(element: HistoryItemSummary) {
         return localize("has been deleted or purged");
     }
 
+    // is the element's extension not a subtype of any of the required extensions?
+    if (
+        filterExtensions.value &&
+        element.extension &&
+        !datatypesMapper.value?.isSubTypeOfAny(element.extension, props.extensions!)
+    ) {
+        return localize(`has an invalid extension: ${element.extension}`);
+    }
     return null;
 }
 
@@ -152,6 +197,10 @@ function _mangleDuplicateNames() {
     });
 }
 
+function changeDatatypeFilter(newFilter: "all" | "datatype" | "ext") {
+    _elementsSetUp();
+}
+
 function saveOriginalNames() {
     // Deep copy elements
     originalNamedElements.value = JSON.parse(JSON.stringify(workingElements.value));
@@ -162,7 +211,7 @@ function getOriginalNames() {
     workingElements.value = JSON.parse(JSON.stringify(originalNamedElements.value));
 }
 
-function elementSelected(e: HDCADetailed) {
+function elementSelected(e: HDASummary) {
     if (!selectedDatasetElements.value.includes(e.id)) {
         selectedDatasetElements.value.push(e.id);
     } else {
@@ -170,8 +219,11 @@ function elementSelected(e: HDCADetailed) {
     }
 }
 
-function elementDiscarded(e: HDCADetailed) {
+function elementDiscarded(e: HDASummary) {
     workingElements.value.splice(workingElements.value.indexOf(e), 1);
+    selectedDatasetElements.value = selectedDatasetElements.value.filter((element) => {
+        return element !== e.id;
+    });
 
     return workingElements.value;
 }
@@ -180,18 +232,27 @@ function clickClearAll() {
     selectedDatasetElements.value = [];
 }
 
+function clickRemoveSelected() {
+    workingElements.value = workingElements.value.filter((element) => {
+        return !selectedDatasetElements.value.includes(element.id);
+    });
+
+    selectedDatasetElements.value = [];
+}
+
+function clickSelectAll() {
+    selectedDatasetElements.value = workingElements.value.map((element) => {
+        return element.id;
+    });
+}
+
 function clickedCreate(collectionName: string) {
     checkForDuplicates();
 
+    const returnedElements = props.fromSelection ? workingElements.value : inListElements.value;
+
     if (state.value !== "error") {
-        emit("clicked-create", workingElements.value, collectionName, hideSourceItems.value);
-
-        return props
-            .creationFn(workingElements.value, collectionName, hideSourceItems.value)
-            .done(props.oncreate)
-            .fail(() => {
-                state.value = "error";
-            });
+        emit("clicked-create", returnedElements, collectionName, hideSourceItems.value);
     }
 }
 
@@ -223,7 +284,7 @@ function sortByName() {
     workingElements.value.sort(compareNames);
 }
 
-function compareNames(a: HDCADetailed, b: HDCADetailed) {
+function compareNames(a: HDASummary, b: HDASummary) {
     if (a.name && b.name && a.name < b.name) {
         return -1;
     }
@@ -238,11 +299,58 @@ function onUpdateHideSourceItems(newHideSourceItems: boolean) {
     hideSourceItems.value = newHideSourceItems;
 }
 
-onMounted(() => {
-    _instanceSetUp();
-    _elementsSetUp();
-    saveOriginalNames();
-});
+_instanceSetUp();
+saveOriginalNames();
+
+watch(
+    () => props.initialElements,
+    () => {
+        // for any new/removed elements, add them to working elements
+        _elementsSetUp();
+    },
+    { immediate: true }
+);
+
+watch(
+    () => datatypesMapper.value,
+    async (mapper) => {
+        if (props.extensions?.length && !mapper) {
+            await datatypesMapperStore.createMapper();
+        }
+    },
+    { immediate: true }
+);
+
+function addUploadedFiles(files: HDASummary[]) {
+    const returnedElements = props.fromSelection ? workingElements : inListElements;
+    files.forEach((f) => {
+        const file = props.fromSelection ? f : workingElements.value.find((e) => e.id === f.id);
+        const problem = _isElementInvalid(f);
+        if (file && !returnedElements.value.find((e) => e.id === file.id)) {
+            returnedElements.value.push(file);
+        } else if (problem) {
+            invalidElements.value.push("Uploaded item: " + f.name + "  " + problem);
+            Toast.error(
+                localize(`Dataset ${f.hid}: ${f.name} ${problem} and is an invalid element for this collection`),
+                localize("Uploaded item is invalid")
+            );
+        } else {
+            invalidElements.value.push("Uploaded item: " + f.name + " could not be added to the collection");
+            Toast.error(
+                localize(`Dataset ${f.hid}: ${f.name} could not be added to the collection`),
+                localize("Uploaded item is invalid")
+            );
+        }
+    });
+}
+
+/** find the element in the workingElements array and update its name */
+function renameElement(element: any, name: string) {
+    element = workingElements.value.find((e) => e.id === element.id);
+    if (element) {
+        element.name = name;
+    }
+}
 
 //TODO: issue #9497
 // const removeExtensions = ref(true);
@@ -265,30 +373,45 @@ onMounted(() => {
 
 <template>
     <div class="list-collection-creator">
-        <div v-if="state == 'error'">
+        <div v-if="!showDuplicateError && state == 'error'">
             <BAlert show variant="danger">
-                {{ localize("Galaxy could not be reached and may be updating.  Try again in a few minutes.") }}
+                {{ localize("There was a problem creating the collection.") }}
             </BAlert>
         </div>
         <div v-else>
-            <div v-if="noElementsSelected">
+            <div v-if="noInitialElements">
                 <BAlert show variant="warning" dismissible>
                     {{ localize("No datasets were selected") }}
                     {{ localize("At least one element is needed for the collection. You may need to") }}
-                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                         {{ localize("cancel") }}
                     </a>
                     {{ localize("and reselect new elements.") }}
                 </BAlert>
 
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
                         {{ localize("Cancel") }}
                     </button>
                 </div>
             </div>
             <div v-else-if="allElementsAreInvalid">
-                <BAlert show variant="warning" dismissible>
+                <BAlert v-if="!fromSelection" show variant="warning">
+                    {{
+                        localize(
+                            "No elements in your history are valid for this list. You may need to switch to a different history."
+                        )
+                    }}
+                    <span v-if="extensions?.length">
+                        {{ localize("The following extensions are required for this list: ") }}
+                        <ul>
+                            <li v-for="extension in extensions" :key="extension">
+                                {{ extension }}
+                            </li>
+                        </ul>
+                    </span>
+                </BAlert>
+                <BAlert v-else show variant="warning" dismissible>
                     {{ localize("The following selections could not be included due to problems:") }}
                     <ul>
                         <li v-for="problem in returnInvalidElements" :key="problem">
@@ -296,20 +419,20 @@ onMounted(() => {
                         </li>
                     </ul>
                     {{ localize("At least one element is needed for the collection. You may need to") }}
-                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                         {{ localize("cancel") }}
                     </a>
                     {{ localize("and reselect new elements.") }}
                 </BAlert>
 
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
                         {{ localize("Cancel") }}
                     </button>
                 </div>
             </div>
             <div v-else>
-                <div v-if="returnInvalidElementsLength">
+                <div v-if="fromSelection && returnInvalidElementsLength">
                     <BAlert show variant="warning" dismissible>
                         {{ localize("The following selections could not be included due to problems:") }}
                         <ul>
@@ -335,11 +458,16 @@ onMounted(() => {
                 </div>
 
                 <CollectionCreator
-                    :oncancel="oncancel"
+                    :oncancel="() => emit('on-cancel')"
+                    :history-id="props.historyId"
                     :hide-source-items="hideSourceItems"
+                    :extensions="extensions"
+                    @add-uploaded-files="addUploadedFiles"
+                    @on-update-datatype-toggle="changeDatatypeFilter"
                     @onUpdateHideSourceItems="onUpdateHideSourceItems"
                     @clicked-create="clickedCreate">
                     <template v-slot:help-content>
+                        <!-- TODO: Update help content for case where `fromSelection` is false -->
                         <p>
                             {{
                                 localize(
@@ -430,33 +558,67 @@ onMounted(() => {
                     </template>
 
                     <template v-slot:middle-content>
-                        <div class="collection-elements-controls">
-                            <BButton class="reset" :title="localize('Undo all reordering and discards')" @click="reset">
-                                <FontAwesomeIcon :icon="faUndo" />
-                            </BButton>
-
-                            <BButton class="sort-items" :title="localize('Sort datasets by name')" @click="sortByName">
-                                <FontAwesomeIcon :icon="faSortAlphaDown" />
-                            </BButton>
-
-                            <a
-                                v-if="atLeastOneDatasetIsSelected"
-                                class="clear-selected"
-                                href="javascript:void(0);"
-                                role="button"
-                                :title="localize('De-select all selected datasets')"
-                                @click="clickClearAll">
-                                {{ localize("Clear selected") }}
-                            </a>
-                        </div>
+                        <div v-if="fromSelection">
+                            <div class="collection-elements-controls">
+                                <div>
+                                    <BButton
+                                        class="reset"
+                                        :title="localize('Reset to original state')"
+                                        size="sm"
+                                        @click="reset">
+                                        <FontAwesomeIcon :icon="faUndo" fixed-width />
+                                        {{ localize("Reset") }}
+                                    </BButton>
+                                    <BButton
+                                        class="sort-items"
+                                        :title="localize('Sort datasets by name')"
+                                        size="sm"
+                                        @click="sortByName">
+                                        <FontAwesomeIcon :icon="faSortAlphaDown" />
+                                    </BButton>
+                                </div>
+
+                                <div class="center-text">
+                                    <u>{{ workingElements.length }}</u> {{ localize("elements in list") }}
+                                </div>
+
+                                <div>
+                                    <span v-if="atLeastOneDatasetIsSelected"
+                                        >{{ localize("For selection") }} ({{ selectedDatasetElements.length }}):</span
+                                    >
+                                    <BButtonGroup class="" size="sm">
+                                        <BButton
+                                            v-if="atLeastOneDatasetIsSelected"
+                                            :title="localize('Remove selected datasets from the list')"
+                                            @click="clickRemoveSelected">
+                                            <FontAwesomeIcon :icon="faMinus" fixed-width />
+                                            {{ localize("Remove") }}
+                                        </BButton>
+                                        <BButton
+                                            v-if="
+                                                !atLeastOneDatasetIsSelected ||
+                                                selectedDatasetElements.length < workingElements.length
+                                            "
+                                            :title="localize('Select all datasets')"
+                                            size="sm"
+                                            @click="clickSelectAll">
+                                            <FontAwesomeIcon :icon="faSquare" fixed-width />
+                                            {{ localize("Select all") }}
+                                        </BButton>
+                                        <BButton
+                                            v-if="atLeastOneDatasetIsSelected"
+                                            class="clear-selected"
+                                            :title="localize('De-select all selected datasets')"
+                                            @click="clickClearAll">
+                                            <FontAwesomeIcon :icon="faTimes" fixed-width />
+                                            {{ localize("Clear") }}
+                                        </BButton>
+                                    </BButtonGroup>
+                                </div>
+                            </div>
 
-                        <draggable
-                            v-model="workingElements"
-                            class="collection-elements scroll-container flex-row drop-zone"
-                            @start="drag = true"
-                            @end="drag = false">
                             <div v-if="noMoreValidDatasets">
-                                <BAlert show variant="warning" dismissible>
+                                <BAlert show variant="warning">
                                     {{ localize("No elements left. Would you like to") }}
                                     <a class="reset-text" href="javascript:void(0)" role="button" @click="reset">
                                         {{ localize("start over") }}
@@ -465,16 +627,36 @@ onMounted(() => {
                                 </BAlert>
                             </div>
 
-                            <DatasetCollectionElementView
-                                v-for="element in workingElements"
-                                v-else
-                                :key="element.id"
-                                :class="{ selected: getSelectedDatasetElements.includes(element.id) }"
-                                :element="element"
-                                @element-is-selected="elementSelected"
-                                @element-is-discarded="elementDiscarded"
-                                @onRename="(name) => (element.name = name)" />
-                        </draggable>
+                            <draggable
+                                v-model="workingElements"
+                                class="collection-elements scroll-container flex-row drop-zone"
+                                chosen-class="bg-secondary">
+                                <DatasetCollectionElementView
+                                    v-for="element in workingElements"
+                                    :key="element.id"
+                                    :class="{ selected: getSelectedDatasetElements.includes(element.id) }"
+                                    :element="element"
+                                    has-actions
+                                    :selected="getSelectedDatasetElements.includes(element.id)"
+                                    @element-is-selected="elementSelected"
+                                    @element-is-discarded="elementDiscarded"
+                                    @onRename="(name) => (element.name = name)" />
+                            </draggable>
+                        </div>
+
+                        <FormSelectMany
+                            v-else
+                            v-model="inListElements"
+                            maintain-selection-order
+                            :placeholder="localize('Filter datasets by name')"
+                            :options="workingElements.map((e) => ({ label: e.name || '', value: e }))">
+                            <template v-slot:label-area="{ value }">
+                                <DatasetCollectionElementView
+                                    class="w-100"
+                                    :element="value"
+                                    @onRename="(name) => renameElement(value, name)" />
+                            </template>
+                        </FormSelectMany>
                     </template>
                 </CollectionCreator>
             </div>
@@ -483,6 +665,9 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
+@import "base.scss";
+@import "theme/blue.scss";
+
 .list-collection-creator {
     .footer {
         margin-top: 8px;
@@ -494,9 +679,15 @@ onMounted(() => {
 
     .collection-elements-controls {
         margin-bottom: 8px;
-
-        .clear-selected {
-            float: right !important;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+
+        .center-text {
+            position: absolute;
+            transform: translateX(-50%);
+            left: 50%;
         }
     }
 
@@ -510,21 +701,28 @@ onMounted(() => {
     // TODO: taken from .dataset above - swap these out
     .collection-element {
         height: 32px;
-        margin: 2px 4px 0px 4px;
         opacity: 1;
-        border: 1px solid lightgrey;
-        border-radius: 3px;
         padding: 0 8px 0 8px;
         line-height: 28px;
         cursor: pointer;
         overflow: hidden;
+        border: 1px solid lightgrey;
+        border-radius: 3px;
 
-        &:last-of-type {
-            margin-bottom: 2px;
+        &.with-actions {
+            margin: 2px 4px 0px 4px;
+            &:hover {
+                border-color: black;
+            }
+        }
+        &:not(.with-actions) {
+            &:hover {
+                border: none;
+            }
         }
 
-        &:hover {
-            border-color: black;
+        &:last-of-type {
+            margin-bottom: 2px;
         }
 
         &.selected {
@@ -535,20 +733,6 @@ onMounted(() => {
                 color: white;
             }
         }
-
-        .name {
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-
-        button {
-            margin-top: 3px;
-        }
-
-        .discard {
-            @extend .float-right !optional;
-        }
     }
 
     .empty-message {
diff --git a/client/src/components/Collections/ListCollectionCreatorModal.js b/client/src/components/Collections/ListCollectionCreatorModal.js
deleted file mode 100644
index 9993f240aa0a..000000000000
--- a/client/src/components/Collections/ListCollectionCreatorModal.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import _l from "utils/localization";
-import Vue from "vue";
-
-import { collectionCreatorModalSetup } from "./common/modal";
-
-function listCollectionCreatorModal(elements, options) {
-    options = options || {};
-    options.title = _l("Create a collection from a list of datasets");
-    const { promise, showEl } = collectionCreatorModalSetup(options);
-    return import(/* webpackChunkName: "ListCollectionCreator" */ "./ListCollectionCreator.vue").then((module) => {
-        const listCollectionCreatorInstance = Vue.extend(module.default);
-        const vm = document.createElement("div");
-        showEl(vm);
-        new listCollectionCreatorInstance({
-            propsData: {
-                initialElements: elements,
-                creationFn: options.creationFn,
-                oncancel: options.oncancel,
-                oncreate: options.oncreate,
-                defaultHideSourceItems: options.defaultHideSourceItems,
-            },
-        }).$mount(vm);
-        return promise;
-    });
-}
-
-/** Use a modal to create a list collection, then add it to the given history contents.
- *  @returns {Promise} resolved when the collection is added to the history.
- */
-function createListCollection(contents, defaultHideSourceItems = true) {
-    const elements = contents.toJSON();
-    const promise = listCollectionCreatorModal(elements, {
-        defaultHideSourceItems: defaultHideSourceItems,
-        creationFn: function (elements, name, hideSourceItems) {
-            elements = elements.map((element) => ({
-                id: element.id,
-                name: element.name,
-                //TODO: this allows for list:list even if the filter above does not - reconcile
-                src: element.src || (element.history_content_type == "dataset" ? "hda" : "hdca"),
-            }));
-            return contents.createHDCA(elements, "list", name, hideSourceItems);
-        },
-    });
-    return promise;
-}
-export default {
-    listCollectionCreatorModal: listCollectionCreatorModal,
-    createListCollection: createListCollection,
-};
diff --git a/client/src/components/Collections/ListDatasetCollectionElementView.vue b/client/src/components/Collections/ListDatasetCollectionElementView.vue
index e7b41e4158de..cc8a30e19bf3 100644
--- a/client/src/components/Collections/ListDatasetCollectionElementView.vue
+++ b/client/src/components/Collections/ListDatasetCollectionElementView.vue
@@ -1,12 +1,18 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { faCheck, faMinus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { ref, watch } from "vue";
 
+import type { HDASummary } from "@/api";
 import localize from "@/utils/localization";
 
 import ClickToEdit from "@/components/Collections/common/ClickToEdit.vue";
 
 interface Props {
-    element: any;
+    element: HDASummary;
+    selected?: boolean;
+    hasActions?: boolean;
+    notEditable?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -17,7 +23,7 @@ const emit = defineEmits<{
     (event: "element-is-discarded", element: any): void;
 }>();
 
-const elementName = ref("");
+const elementName = ref(props.element.name || "...");
 
 watch(elementName, () => {
     emit("onRename", elementName.value);
@@ -26,28 +32,40 @@ watch(elementName, () => {
 function clickDiscard() {
     emit("element-is-discarded", props.element);
 }
-
-onMounted(() => {
-    elementName.value = props.element.name;
-});
 </script>
 
 <template>
-    <div class="collection-element" @click="emit('element-is-selected', element)">
-        <ClickToEdit v-model="elementName" :title="localize('Click to rename')" />
+    <div
+        class="collection-element d-flex justify-content-between"
+        :class="{ 'with-actions': hasActions }"
+        role="button"
+        tabindex="0"
+        @keyup.enter="emit('element-is-selected', element)"
+        @click="emit('element-is-selected', element)">
+        <span class="d-flex flex-gapx-1">
+            {{ element.hid }}:
+            <strong>
+                <ClickToEdit v-if="!notEditable" v-model="elementName" :title="localize('Click to rename')" />
+                <span v-else>{{ elementName }}</span>
+            </strong>
+            <i v-if="element.extension"> ({{ element.extension }}) </i>
+        </span>
 
-        <button class="discard-btn btn-sm" :title="localize('Remove this dataset from the list')" @click="clickDiscard">
-            {{ localize("Discard") }}
-        </button>
+        <div v-if="hasActions" class="float-right">
+            <i v-if="!selected" class="mr-2">
+                <FontAwesomeIcon :icon="faCheck" class="text-success" /> Added to collection
+            </i>
+            <i v-else class="text-secondary">Selected</i>
+            <button class="btn-sm" :title="localize('Remove this dataset from the list')" @click="clickDiscard">
+                <FontAwesomeIcon :icon="faMinus" fixed-width />
+                {{ localize("Remove") }}
+            </button>
+        </div>
     </div>
 </template>
 
 <style scoped lang="scss">
 .collection-element {
     height: auto;
-
-    .discard-btn {
-        float: right;
-    }
 }
 </style>
diff --git a/client/src/components/Collections/PairCollectionCreator.vue b/client/src/components/Collections/PairCollectionCreator.vue
index 2520a3a022f8..f7a9ab5f6d5a 100644
--- a/client/src/components/Collections/PairCollectionCreator.vue
+++ b/client/src/components/Collections/PairCollectionCreator.vue
@@ -1,32 +1,50 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
-import { computed, onMounted, ref } from "vue";
+import { faArrowsAltV } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton } from "bootstrap-vue";
+import { computed, ref, watch } from "vue";
 
-import type { HDCADetailed, HistoryItemSummary } from "@/api";
+import type { HDASummary, HistoryItemSummary } from "@/api";
+import { Toast } from "@/composables/toast";
 import STATES from "@/mvc/dataset/states";
+import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
 import localize from "@/utils/localization";
 
+import type { DatasetPair } from "../History/adapters/buildCollectionModal";
+
+import DatasetCollectionElementView from "./ListDatasetCollectionElementView.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
 
+const NOT_VALID_ELEMENT_MSG: string = localize("is not a valid element for this collection");
+
+interface SelectedDatasetPair {
+    forward: HDASummary | undefined;
+    reverse: HDASummary | undefined;
+}
+
 interface Props {
-    initialElements: Array<any>;
-    oncancel: () => void;
-    oncreate: () => void;
-    creationFn: (workingElements: HDCADetailed[], collectionName: string, hideSourceItems: boolean) => any;
+    historyId: string;
+    initialElements: HistoryItemSummary[];
     defaultHideSourceItems?: boolean;
+    fromSelection?: boolean;
+    extensions?: string[];
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (event: "clicked-create", workingElements: HDCADetailed[], collectionName: string, hideSourceItems: boolean): void;
+    (event: "clicked-create", selectedPair: DatasetPair, collectionName: string, hideSourceItems: boolean): void;
+    (event: "on-cancel"): void;
 }>();
 
 const state = ref("build");
 const removeExtensions = ref(true);
 const initialSuggestedName = ref("");
 const invalidElements = ref<string[]>([]);
-const workingElements = ref<HDCADetailed[]>([]);
+const workingElements = ref<HDASummary[]>([]);
+
+/** If not `fromSelection`, the manually added elements that will become the pair */
+const inListElements = ref<SelectedDatasetPair>({ forward: undefined, reverse: undefined });
 
 const allElementsAreInvalid = computed(() => {
     return props.initialElements.length == invalidElements.value.length;
@@ -35,9 +53,44 @@ const noElementsSelected = computed(() => {
     return props.initialElements.length == 0;
 });
 const exactlyTwoValidElements = computed(() => {
-    return workingElements.value.length == 2;
+    return pairElements.value.forward && pairElements.value.reverse;
 });
 const hideSourceItems = ref(props.defaultHideSourceItems || false);
+const pairElements = computed<SelectedDatasetPair>(() => {
+    if (props.fromSelection) {
+        return {
+            forward: workingElements.value[0],
+            reverse: workingElements.value[1],
+        };
+    } else {
+        return inListElements.value;
+    }
+});
+
+// variables for datatype mapping and then filtering
+const datatypesMapperStore = useDatatypesMapperStore();
+const datatypesMapper = computed(() => datatypesMapperStore.datatypesMapper);
+
+/** Are we filtering by datatype? */
+const filterExtensions = computed(() => !!datatypesMapper.value && !!props.extensions?.length);
+
+watch(
+    () => props.initialElements,
+    () => {
+        // initialize; and then for any new/removed elements, sync working elements
+        _elementsSetUp();
+
+        // TODO: fix this, now either of those will almost always be empty
+        if (props.fromSelection && !initialSuggestedName.value) {
+            initialSuggestedName.value = _guessNameForPair(
+                workingElements.value[0] as HDASummary,
+                workingElements.value[1] as HDASummary,
+                removeExtensions.value
+            );
+        }
+    },
+    { immediate: true }
+);
 
 function _elementsSetUp() {
     /** a list of invalid elements and the reasons they aren't valid */
@@ -50,6 +103,38 @@ function _elementsSetUp() {
     // copy initial list, sort, add ids if needed
     workingElements.value = JSON.parse(JSON.stringify(props.initialElements.slice(0)));
 
+    // reverse the order of the elements to emulate what we have in the history panel
+    workingElements.value.reverse();
+
+    // for inListElements, reset their values (in order) to datasets from workingElements
+    const inListElementsPrev = inListElements.value;
+    inListElements.value = { forward: undefined, reverse: undefined };
+
+    for (const key of ["forward", "reverse"]) {
+        const prevElem = inListElementsPrev[key as keyof SelectedDatasetPair];
+        if (!prevElem) {
+            continue;
+        }
+        const element = workingElements.value.find(
+            (e) => e.id === inListElementsPrev[key as keyof SelectedDatasetPair]?.id
+        );
+        const problem = _isElementInvalid(prevElem);
+        if (element) {
+            inListElements.value[key as keyof SelectedDatasetPair] = element;
+        } else if (problem) {
+            const invalidMsg = `${prevElem.hid}: ${prevElem.name} ${problem} and ${NOT_VALID_ELEMENT_MSG}`;
+            invalidElements.value.push(invalidMsg);
+            Toast.error(invalidMsg, localize("Invalid element"));
+        } else {
+            const invalidMsg = `${prevElem.hid}: ${prevElem.name} ${localize("has been removed from the collection")}`;
+            invalidElements.value.push(invalidMsg);
+            Toast.error(invalidMsg, localize("Invalid element"));
+        }
+    }
+
+    // TODO: Next thing to add is: If the user adds an uploaded file, that is eventually nuked from workingElements
+    //       because it is invalid, Toast an error for that file by keeping track of uploaded ids in a separate list
+
     _ensureElementIds();
     _validateElements();
 }
@@ -96,23 +181,74 @@ function _isElementInvalid(element: HistoryItemSummary) {
         return localize("has been deleted or purged");
     }
 
+    // is the element's extension not a subtype of any of the required extensions?
+    if (
+        filterExtensions.value &&
+        element.extension &&
+        !datatypesMapper.value?.isSubTypeOfAny(element.extension, props.extensions!)
+    ) {
+        return localize(`has an invalid extension: ${element.extension}`);
+    }
     return null;
 }
 
+function getPairElement(key: string) {
+    return pairElements.value[key as "forward" | "reverse"];
+}
+
+function removeElement(key: string) {
+    pairElements.value[key as "forward" | "reverse"] = undefined;
+}
+
+function selectElement(element: HDASummary) {
+    if (pairElements.value.forward?.id === element.id) {
+        pairElements.value.forward = undefined;
+    } else if (pairElements.value.reverse?.id === element.id) {
+        pairElements.value.reverse = undefined;
+    } else if (pairElements.value.forward === undefined) {
+        pairElements.value.forward = element;
+    } else if (pairElements.value.reverse === undefined) {
+        pairElements.value.reverse = element;
+    }
+}
+
 function swapButton() {
-    workingElements.value = [workingElements.value[1], workingElements.value[0]] as HDCADetailed[];
+    if (!exactlyTwoValidElements.value) {
+        return;
+    }
+    if (props.fromSelection) {
+        workingElements.value = [workingElements.value[1], workingElements.value[0]] as HDASummary[];
+    } else {
+        inListElements.value = {
+            forward: inListElements.value.reverse,
+            reverse: inListElements.value.forward,
+        };
+    }
+}
+
+function addUploadedFiles(files: HDASummary[]) {
+    // Any added files are added to workingElements in _elementsSetUp
+    // The user will have to manually select the files to add them to the pair
+
+    // Check for validity of uploads
+    files.forEach((file) => {
+        const problem = _isElementInvalid(file);
+        if (problem) {
+            const invalidMsg = `${file.hid}: ${file.name} ${problem} and ${NOT_VALID_ELEMENT_MSG}`;
+            invalidElements.value.push(invalidMsg);
+            Toast.error(invalidMsg, localize("Uploaded item invalid for pair"));
+        }
+    });
 }
 
 function clickedCreate(collectionName: string) {
-    if (state.value !== "error") {
-        emit("clicked-create", workingElements.value, collectionName, hideSourceItems.value);
-
-        return props
-            .creationFn(workingElements.value, collectionName, hideSourceItems.value)
-            .done(props.oncreate)
-            .fail(() => {
-                state.value = "error";
-            });
+    if (state.value !== "error" && exactlyTwoValidElements.value) {
+        const returnedPair = {
+            forward: pairElements.value.forward as HDASummary,
+            reverse: pairElements.value.reverse as HDASummary,
+            name: collectionName,
+        };
+        emit("clicked-create", returnedPair, collectionName, hideSourceItems.value);
     }
 }
 
@@ -120,13 +256,13 @@ function removeExtensionsToggle() {
     removeExtensions.value = !removeExtensions.value;
 
     initialSuggestedName.value = _guessNameForPair(
-        workingElements.value[0] as HDCADetailed,
-        workingElements.value[1] as HDCADetailed,
+        workingElements.value[0] as HDASummary,
+        workingElements.value[1] as HDASummary,
         removeExtensions.value
     );
 }
 
-function _guessNameForPair(fwd: HDCADetailed, rev: HDCADetailed, removeExtensions: boolean) {
+function _guessNameForPair(fwd: HDASummary, rev: HDASummary, removeExtensions: boolean) {
     removeExtensions = removeExtensions ? removeExtensions : removeExtensions;
 
     var fwdName = fwd.name ?? "";
@@ -199,16 +335,6 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
 
     return fwdLCS + revLCS;
 }
-
-onMounted(() => {
-    _elementsSetUp();
-
-    initialSuggestedName.value = _guessNameForPair(
-        workingElements.value[0] as HDCADetailed,
-        workingElements.value[1] as HDCADetailed,
-        removeExtensions.value
-    );
-});
 </script>
 
 <template>
@@ -223,20 +349,35 @@ onMounted(() => {
                 <BAlert show variant="warning" dismissible>
                     {{ localize("No datasets were selected.") }}
                     {{ localize("Exactly two elements needed for the collection. You may need to") }}
-                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                         {{ localize("cancel") }}
                     </a>
                     {{ localize("and reselect new elements.") }}
                 </BAlert>
 
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
                         {{ localize("Cancel") }}
                     </button>
                 </div>
             </div>
             <div v-else-if="allElementsAreInvalid">
-                <BAlert show variant="warning" dismissible>
+                <BAlert v-if="!fromSelection" show variant="warning">
+                    {{
+                        localize(
+                            "No elements in your history are valid for this pair. You may need to switch to a different history."
+                        )
+                    }}
+                    <span v-if="extensions?.length">
+                        {{ localize("The following extensions are required for this pair: ") }}
+                        <ul>
+                            <li v-for="extension in extensions" :key="extension">
+                                {{ extension }}
+                            </li>
+                        </ul>
+                    </span>
+                </BAlert>
+                <BAlert v-else show variant="warning" dismissible>
                     {{ localize("The following selections could not be included due to problems:") }}
                     <ul>
                         <li v-for="problem in invalidElements" :key="problem">
@@ -244,20 +385,20 @@ onMounted(() => {
                         </li>
                     </ul>
                     {{ localize("Exactly two elements needed for the collection. You may need to") }}
-                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                         {{ localize("cancel") }}
                     </a>
                     {{ localize("and reselect new elements.") }}
                 </BAlert>
 
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
                         {{ localize("Cancel") }}
                     </button>
                 </div>
             </div>
-            <div v-else-if="!exactlyTwoValidElements">
-                <div v-if="invalidElements.length">
+            <div v-else>
+                <div v-if="fromSelection && invalidElements.length">
                     <BAlert show variant="warning" dismissible>
                         {{ localize("The following selections could not be included due to problems:") }}
                         <ul>
@@ -267,41 +408,37 @@ onMounted(() => {
                         </ul>
                     </BAlert>
                 </div>
-
-                <BAlert show variant="warning" dismissible>
-                    {{ localize("Two (and only two) elements are needed for the pair. You may need to ") }}
-                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                        {{ localize("cancel") }}
-                    </a>
-                    {{ localize("and reselect new elements.") }}
-                </BAlert>
-
-                <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ localize("Cancel") }}
-                    </button>
-                </div>
-            </div>
-            <div v-else>
-                <div v-if="invalidElements.length">
+                <div v-if="!exactlyTwoValidElements">
                     <BAlert show variant="warning" dismissible>
-                        {{ localize("The following selections could not be included due to problems:") }}
-                        <ul>
-                            <li v-for="problem in invalidElements" :key="problem">
-                                {{ problem }}
-                            </li>
-                        </ul>
+                        {{ localize("Exactly two elements are needed for the pair.") }}
+                        <span v-if="fromSelection">
+                            <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
+                                {{ localize("Cancel") }}
+                            </a>
+                            {{ localize("and reselect new elements.") }}
+                        </span>
                     </BAlert>
+
+                    <div v-if="fromSelection" class="float-left">
+                        <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
+                            {{ localize("Cancel") }}
+                        </button>
+                    </div>
                 </div>
 
                 <CollectionCreator
-                    :oncancel="oncancel"
+                    :oncancel="() => emit('on-cancel')"
+                    :history-id="props.historyId"
                     :hide-source-items="hideSourceItems"
                     :suggested-name="initialSuggestedName"
+                    :extensions="props.extensions"
+                    :extensions-toggle="removeExtensions"
+                    @add-uploaded-files="addUploadedFiles"
                     @onUpdateHideSourceItems="onUpdateHideSourceItems"
                     @clicked-create="clickedCreate"
                     @remove-extensions-toggle="removeExtensionsToggle">
                     <template v-slot:help-content>
+                        <!-- TODO: Update help content for case where `fromSelection` is false -->
                         <p>
                             {{
                                 localize(
@@ -352,21 +489,46 @@ onMounted(() => {
 
                     <template v-slot:middle-content>
                         <div class="collection-elements-controls">
-                            <a
+                            <BButton
                                 class="swap"
-                                href="javascript:void(0);"
-                                title="l('Swap forward and reverse datasets')"
+                                size="sm"
+                                :disabled="!exactlyTwoValidElements"
+                                :title="localize('Swap forward and reverse datasets')"
                                 @click="swapButton">
+                                <FontAwesomeIcon :icon="faArrowsAltV" fixed-width />
                                 {{ localize("Swap") }}
-                            </a>
+                            </BButton>
                         </div>
 
-                        <div class="collection-elements scroll-container flex-row">
-                            <div
-                                v-for="(element, index) in workingElements"
-                                :key="element.id"
-                                class="collection-element">
-                                {{ index == 0 ? localize("forward") : localize("reverse") }}: {{ element.name }}
+                        <div class="collection-elements flex-row mb-3">
+                            <div v-for="dataset in ['forward', 'reverse']" :key="dataset">
+                                {{ localize(dataset) }}:
+                                <DatasetCollectionElementView
+                                    v-if="getPairElement(dataset)"
+                                    :key="getPairElement(dataset)?.id"
+                                    :element="getPairElement(dataset)"
+                                    has-actions
+                                    @element-is-discarded="removeElement(dataset)" />
+                                <div v-else class="collection-element alert-info">
+                                    <i>{{ localize("No dataset selected") }}</i>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div v-if="!fromSelection">
+                            {{ localize("Manually select a forward and reverse dataset to create a pair collection:") }}
+                            <div class="collection-elements">
+                                <DatasetCollectionElementView
+                                    v-for="element in workingElements"
+                                    :key="element.id"
+                                    :class="{
+                                        selected: [pairElements.forward, pairElements.reverse].includes(element),
+                                    }"
+                                    :element="element"
+                                    not-editable
+                                    :selected="[pairElements.forward, pairElements.reverse].includes(element)"
+                                    @element-is-selected="selectElement"
+                                    @onRename="(name) => (element.name = name)" />
                             </div>
                         </div>
                     </template>
@@ -382,10 +544,6 @@ onMounted(() => {
         margin-top: 8px;
     }
 
-    .main-help {
-        cursor: pointer;
-    }
-
     .collection-elements-controls {
         margin-bottom: 8px;
     }
@@ -433,6 +591,15 @@ onMounted(() => {
                 text-decoration: none;
             }
         }
+
+        &.selected {
+            border-color: black;
+            background: rgb(118, 119, 131);
+            color: white;
+            a {
+                color: white;
+            }
+        }
     }
 
     .empty-message {
diff --git a/client/src/components/Collections/PairCollectionCreatorModal.js b/client/src/components/Collections/PairCollectionCreatorModal.js
deleted file mode 100644
index 1cfa2a64dc71..000000000000
--- a/client/src/components/Collections/PairCollectionCreatorModal.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import _l from "utils/localization";
-import Vue from "vue";
-
-import { collectionCreatorModalSetup } from "./common/modal";
-
-function pairCollectionCreatorModal(elements, options) {
-    options = options || {};
-    options.title = _l("Create a collection from a pair of datasets");
-    const { promise, showEl } = collectionCreatorModalSetup(options);
-    return import(/* webpackChunkName: "PairCollectionCreator" */ "./PairCollectionCreator.vue").then((module) => {
-        var pairCollectionCreatorInstance = Vue.extend(module.default);
-        var vm = document.createElement("div");
-        showEl(vm);
-        new pairCollectionCreatorInstance({
-            propsData: {
-                initialElements: elements,
-                creationFn: options.creationFn,
-                oncancel: options.oncancel,
-                oncreate: options.oncreate,
-                defaultHideSourceItems: options.defaultHideSourceItems,
-            },
-        }).$mount(vm);
-        return promise;
-    });
-}
-function createPairCollection(contents, defaultHideSourceItems = true) {
-    var elements = contents.toJSON();
-    var promise = pairCollectionCreatorModal(elements, {
-        defaultHideSourceItems: defaultHideSourceItems,
-        creationFn: function (elements, name, hideSourceItems) {
-            elements = [
-                { name: "forward", src: elements[0].src || "hda", id: elements[0].id },
-                { name: "reverse", src: elements[1].src || "hda", id: elements[1].id },
-            ];
-            return contents.createHDCA(elements, "paired", name, hideSourceItems);
-        },
-    });
-    return promise;
-}
-export default {
-    pairCollectionCreatorModal: pairCollectionCreatorModal,
-    createPairCollection: createPairCollection,
-};
diff --git a/client/src/components/Collections/PairedElementView.vue b/client/src/components/Collections/PairedElementView.vue
index 364832a22db2..42cd1d9e8af0 100644
--- a/client/src/components/Collections/PairedElementView.vue
+++ b/client/src/components/Collections/PairedElementView.vue
@@ -1,69 +1,58 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faUnlink } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft, faArrowRight, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { onMounted, ref, watch } from "vue";
+import { BButton } from "bootstrap-vue";
+import { ref, watch } from "vue";
 
+import type { HDASummary } from "@/api";
 import localize from "@/utils/localization";
 
 import ClickToEdit from "@/components/Collections/common/ClickToEdit.vue";
 
-library.add(faUnlink);
-
 interface Props {
-    // TODO: Define the type of the pair prop
     pair: {
         name: string;
-        forward: { name: string };
-        reverse: { name: string };
+        forward: HDASummary;
+        reverse: HDASummary;
     };
-    unlinkFn: () => void;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
     (event: "onPairRename", name: string): void;
+    (event: "onUnpair"): void;
 }>();
 
-const name = ref("");
-
-watch(
-    () => props.pair,
-    () => {
-        name.value = props.pair.name;
-    }
-);
-
-watch(name, () => {
-    emit("onPairRename", name.value);
-});
+const elementName = ref(props.pair.name);
 
-onMounted(() => {
-    name.value = props.pair.name;
+watch(elementName, () => {
+    emit("onPairRename", elementName.value);
 });
 </script>
 
 <template>
-    <div>
-        <li class="dataset paired">
+    <li class="d-flex align-items-center justify-content-between">
+        <div class="dataset paired w-100">
             <span class="forward-dataset-name flex-column">
                 {{ pair.forward.name }}
+                <FontAwesomeIcon :icon="faArrowRight" fixed-width />
             </span>
 
             <span class="pair-name-column flex-column">
                 <span class="pair-name">
-                    <ClickToEdit v-model="name" :title="localize('Click to rename')" />
+                    <ClickToEdit v-model="elementName" :title="localize('Click to rename')" />
                 </span>
             </span>
 
             <span class="reverse-dataset-name flex-column">
+                <FontAwesomeIcon :icon="faArrowLeft" fixed-width />
                 {{ pair.reverse.name }}
             </span>
-        </li>
+        </div>
 
-        <button class="unpair-btn" @click="unlinkFn">
+        <BButton class="unpair-btn" variant="link" @click="emit('onUnpair')">
             <FontAwesomeIcon :icon="faUnlink" :title="localize('Unpair')" />
-        </button>
-    </div>
+        </BButton>
+    </li>
 </template>
diff --git a/client/src/components/Collections/PairedListCollectionCreator.test.js b/client/src/components/Collections/PairedListCollectionCreator.test.js
index a798ba2f8f17..d62270b04335 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.test.js
+++ b/client/src/components/Collections/PairedListCollectionCreator.test.js
@@ -1,48 +1,69 @@
+import { createTestingPinia } from "@pinia/testing";
 import DATA from "@tests/test-data/paired-collection-creator.data.js";
 import { mount, shallowMount } from "@vue/test-utils";
 import PairedListCollectionCreator from "components/Collections/PairedListCollectionCreator";
+import flushPromises from "flush-promises";
+import Vue from "vue";
+
+import { useServerMock } from "@/api/client/__mocks__";
+
+// Mock the localize directive
+// (otherwise we get: [Vue warn]: Failed to resolve directive: localize)
+Vue.directive("localize", {
+    bind(el, binding) {
+        el.textContent = binding.value;
+    },
+});
+
+const { server, http } = useServerMock();
 
 describe("PairedListCollectionCreator", () => {
     let wrapper;
+    const pinia = createTestingPinia();
+
+    beforeEach(() => {
+        server.use(
+            http.get("/api/configuration", ({ response }) => {
+                return response(200).json({
+                    chunk_upload_size: 100,
+                    file_sources_configured: true,
+                });
+            })
+        );
+    });
+
+    it("performs an autopair on startup if we have a selection", async () => {
+        // Kind of deprecated because we are never using `props.fromSelection: true` anywhere
 
-    it("autopairs the dataset", async () => {
         wrapper = shallowMount(PairedListCollectionCreator, {
             propsData: {
+                historyId: "history_id",
                 initialElements: DATA._1,
-                creationFn: () => {
-                    return;
-                },
-                oncreate: () => {
-                    return;
-                },
-                oncancel: () => {
-                    return;
-                },
-                hideSourceItems: false,
+                fromSelection: true,
             },
+            pinia,
         });
-        await wrapper.vm.$nextTick();
+
+        await flushPromises();
         // Autopair is called on startup
-        expect(wrapper.findAll("li.dataset unpaired").length == 0).toBeTruthy();
+        const pairsCountDisplay = wrapper.find('[data-description="number of pairs"]');
+        expect(pairsCountDisplay.text()).toContain(`${DATA._1.length / 2} pairs`);
     });
 
-    it("selects the correct name for an auotpair", async () => {
+    it("selects the correct name for an autopair", async () => {
         wrapper = mount(PairedListCollectionCreator, {
             propsData: {
+                historyId: "history_id",
                 initialElements: DATA._2,
-                creationFn: () => {
-                    return;
-                },
-                oncreate: () => {
-                    return;
-                },
-                oncancel: () => {
-                    return;
-                },
-                hideSourceItems: false,
+            },
+            pinia,
+            stubs: {
+                FontAwesomeIcon: true,
+                BPopover: true,
             },
         });
-        await wrapper.vm.$nextTick();
+
+        await flushPromises();
         //change filter to .1.fastq/.2.fastq
         await wrapper.find("div.forward-unpaired-filter > div.input-group-append > button").trigger("click");
         await wrapper
@@ -56,7 +77,7 @@ describe("PairedListCollectionCreator", () => {
         const reverseFilter = wrapper.find("div.reverse-unpaired-filter > input").element.value;
         expect(reverseFilter).toBe(".2.fastq");
         // click Autopair
-        await wrapper.find("a.autopair-link").trigger("click");
+        await wrapper.find(".autopair-link").trigger("click");
         //assert pair-name longer name
         const pairname = wrapper.find("span.pair-name");
         expect(pairname.text()).toBe("DP134_1_FS_PSII_FSB_42C_A10");
@@ -65,20 +86,17 @@ describe("PairedListCollectionCreator", () => {
     it("removes the period from autopair name", async () => {
         wrapper = mount(PairedListCollectionCreator, {
             propsData: {
+                historyId: "history_id",
                 initialElements: DATA._3,
-                creationFn: () => {
-                    return;
-                },
-                oncreate: () => {
-                    return;
-                },
-                oncancel: () => {
-                    return;
-                },
-                hideSourceItems: false,
+            },
+            pinia,
+            stubs: {
+                FontAwesomeIcon: true,
+                BPopover: true,
             },
         });
-        await wrapper.vm.$nextTick();
+
+        await flushPromises();
         //change filter to .1.fastq/.2.fastq
         await wrapper.find("div.forward-unpaired-filter > div.input-group-append > button").trigger("click");
         await wrapper
@@ -92,7 +110,7 @@ describe("PairedListCollectionCreator", () => {
         const reverseFilter = wrapper.find("div.reverse-unpaired-filter > input").element.value;
         expect(reverseFilter).toBe(".2.fastq");
         // click Autopair
-        await wrapper.find("a.autopair-link").trigger("click");
+        await wrapper.find(".autopair-link").trigger("click");
         //assert pair-name longer name
         const pairname = wrapper.find("span.pair-name");
         expect(pairname.text()).toBe("UII_moo_1");
@@ -101,20 +119,17 @@ describe("PairedListCollectionCreator", () => {
     it("autopairs correctly when filters are typed in", async () => {
         wrapper = mount(PairedListCollectionCreator, {
             propsData: {
+                historyId: "history_id",
                 initialElements: DATA._4,
-                creationFn: () => {
-                    return;
-                },
-                oncreate: () => {
-                    return;
-                },
-                oncancel: () => {
-                    return;
-                },
-                hideSourceItems: false,
+            },
+            pinia,
+            stubs: {
+                FontAwesomeIcon: true,
+                BPopover: true,
             },
         });
-        await wrapper.vm.$nextTick();
+
+        await flushPromises();
         //change filter to _R1/_R2
         await wrapper.find("div.forward-unpaired-filter > input").setValue("_R1");
         await wrapper.find("div.reverse-unpaired-filter > input").setValue("_R2");
@@ -125,7 +140,7 @@ describe("PairedListCollectionCreator", () => {
         const reverseFilter = wrapper.find("div.reverse-unpaired-filter > input").element.value;
         expect(reverseFilter).toBe("_R2");
         // click Autopair
-        await wrapper.find("a.autopair-link").trigger("click");
+        await wrapper.find(".autopair-link").trigger("click");
         //assert all pairs matched
         expect(wrapper.findAll("li.dataset unpaired").length == 0).toBeTruthy();
     });
diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index c699c0de7077..d6e0f385aecb 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -1,114 +1,951 @@
+<script setup lang="ts">
+import {
+    faAngleDown,
+    faAngleUp,
+    faExclamationCircle,
+    faLink,
+    faTimes,
+    faUnlink,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BButtonGroup, BCard, BCardBody, BCardHeader } from "bootstrap-vue";
+import { computed, ref, watch } from "vue";
+import draggable from "vuedraggable";
+
+import type { HDASummary, HistoryItemSummary } from "@/api";
+import { Toast } from "@/composables/toast";
+import STATES from "@/mvc/dataset/states";
+import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
+// import levenshteinDistance from '@/utils/levenshtein';
+import localize from "@/utils/localization";
+import { naturalSort } from "@/utils/naturalSort";
+
+import type { DatasetPair } from "../History/adapters/buildCollectionModal";
+
+import Heading from "../Common/Heading.vue";
+import PairedElementView from "./PairedElementView.vue";
+import UnpairedDatasetElementView from "./UnpairedDatasetElementView.vue";
+import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
+
+const NOT_VALID_ELEMENT_MSG: string = localize("is not a valid element for this collection");
+const COMMON_FILTERS = {
+    illumina: ["_1", "_2"],
+    Rs: ["_R1", "_R2"],
+    dot12s: [".1.fastq", ".2.fastq"],
+};
+const DEFAULT_FILTER: keyof typeof COMMON_FILTERS = "illumina";
+const MATCH_PERCENTAGE = 0.99;
+
+// Titles and help text
+const CHOOSE_FILTER_TITLE = localize("Choose from common filters");
+const FILTER_TEXT_PLACEHOLDER = localize("Filter text");
+const FILTER_TEXT_TITLE = localize("Use this box to filter elements, using simple matching or regular expressions.");
+const ERROR_TEXT = localize("There was a problem creating the collection.");
+const INVALID_HEADER = localize("The following selections could not be included due to problems:");
+const ALL_INVALID_ELEMENTS_PART_ONE = localize("At least two elements are needed for the collection. You may need to");
+const CANCEL_TEXT = localize("Cancel");
+
+interface Props {
+    historyId: string;
+    initialElements: HistoryItemSummary[];
+    defaultHideSourceItems?: boolean;
+    fromSelection?: boolean;
+    extensions?: string[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "clicked-create", workingElements: DatasetPair[], collectionName: string, hideSourceItems: boolean): void;
+    (e: "on-cancel"): void;
+}>();
+
+// Titles and help text computed
+const noElementsHeader = props.fromSelection ? localize("No elements selected") : localize("No elements available");
+const allInvalidElementsPartTwo = props.fromSelection
+    ? localize("and reselect new elements.")
+    : localize("and change your current history or add valid datasets for this collection.");
+
+// Flags
+const state = ref<"build" | "error" | "duplicates">("build");
+const hideSourceItems = ref(props.defaultHideSourceItems || false);
+const autoPairsPossible = ref(true);
+const twoPassAutoPairing = ref(true);
+const removeExtensions = ref(true);
+const firstAutoPairDone = ref(false);
+const showPairingSection = ref(true);
+
+// Elements
+const workingElements = ref<HDASummary[]>([]);
+const invalidElements = ref<string[]>([]);
+const generatedPairs = ref<DatasetPair[]>([]);
+const selectedForwardElement = ref<HDASummary | null>(null);
+const selectedReverseElement = ref<HDASummary | null>(null);
+
+// Filters
+const forwardFilter = ref(COMMON_FILTERS[DEFAULT_FILTER][0] || "");
+const reverseFilter = ref(COMMON_FILTERS[DEFAULT_FILTER][1] || "");
+const hasFilter = computed(() => forwardFilter.value || reverseFilter.value);
+
+// Autopairing
+const strategy = ref(autoPairLCS);
+const duplicatePairNames = ref<string[]>([]);
+
+const forwardElements = computed<HDASummary[]>(() => {
+    return filterElements(workingElements.value, forwardFilter.value);
+});
+const reverseElements = computed<HDASummary[]>(() => {
+    return filterElements(workingElements.value, reverseFilter.value);
+});
+const pairableElements = computed(() => {
+    const pairable: DatasetPair[] = [];
+    forwardElements.value.forEach((forwardElement, index) => {
+        const reverseElement = reverseElements.value[index];
+        if (!!reverseElement && !!forwardElement && forwardElement.id != reverseElement.id) {
+            pairable.push({
+                forward: forwardElement,
+                reverse: reverseElement,
+                name: _guessNameForPair(forwardElement, reverseElement),
+            });
+        }
+    });
+    return pairable;
+});
+const autoPairButton = computed(() => {
+    let variant;
+    let icon;
+    let text;
+    if (!firstAutoPairDone.value && pairableElements.value.length > 0) {
+        variant = "primary";
+        icon = faExclamationCircle;
+        text = localize("Click to auto-pair datasets based on the current filters");
+    } else if (pairableElements.value.length > 0) {
+        variant = "secondary";
+        icon = faLink;
+        text = localize("Auto-pair possible based on current filters");
+    } else {
+        variant = "secondary";
+        icon = faLink;
+        text = localize("Click to attempt auto-pairing datasets");
+    }
+    return { variant, icon, text };
+});
+const numOfUnpairedForwardElements = computed(() => {
+    return forwardElements.value.length;
+});
+const numOfFilteredOutForwardElements = computed(() => {
+    return workingElements.value.length - numOfUnpairedForwardElements.value;
+});
+const numOfUnpairedReverseElements = computed(() => {
+    return reverseElements.value.length;
+});
+const numOfFilteredOutReverseElements = computed(() => {
+    return workingElements.value.length - numOfUnpairedReverseElements.value;
+});
+const numOfPairs = computed(() => {
+    return generatedPairs.value.length;
+});
+const returnInvalidElementsLength = computed(() => {
+    return invalidElements.value.length > 0;
+});
+const returnInvalidElements = computed(() => {
+    return invalidElements.value;
+});
+const allElementsAreInvalid = computed(() => {
+    return props.initialElements.length === invalidElements.value.length;
+});
+const noElementsSelected = computed(() => {
+    return props.initialElements.length === 0;
+});
+const tooFewElementsSelected = computed(() => {
+    return workingElements.value.length < 2 && generatedPairs.value.length === 0;
+});
+// TODO: Include in the template
+// const showDuplicateError = computed(() => {
+//     return duplicatePairNames.value.length > 0;
+// });
+
+const noUnpairedElementsDisplayed = computed(() => {
+    return numOfUnpairedForwardElements.value + numOfUnpairedReverseElements.value === 0;
+});
+
+// variables for datatype mapping and then filtering
+const datatypesMapperStore = useDatatypesMapperStore();
+const datatypesMapper = computed(() => datatypesMapperStore.datatypesMapper);
+
+/** Are we filtering by datatype? */
+const filterExtensions = computed(() => !!datatypesMapper.value && !!props.extensions?.length);
+
+function removeExtensionsToggle() {
+    removeExtensions.value = !removeExtensions.value;
+    generatedPairs.value.forEach((pair, index) => {
+        pair.name = _guessNameForPair(pair.forward, pair.reverse, removeExtensions.value);
+    });
+}
+
+watch(
+    () => props.initialElements,
+    () => {
+        // initialize; and then for any new/removed elements, sync working elements
+        _elementsSetUp();
+    },
+    { immediate: true }
+);
+
+/** Set up main data */
+function _elementsSetUp() {
+    // a list of invalid elements and the reasons they aren't valid
+    invalidElements.value = [];
+    //TODO: handle fundamental problem of syncing DOM, views, and list here
+    // data for list in progress
+    workingElements.value = [];
+    //TODO: this should maybe be in it's own method as it will get called everytime selected array has two elements and dumps again.
+    // selectedDatasetElems = [];
+    initialFiltersSet();
+    // copy initial list, sort, // TODO: add ids if needed
+    // copy initial list, sort, add ids if needed
+    workingElements.value = JSON.parse(JSON.stringify(props.initialElements.slice(0)));
+
+    // TODO: Here, we do what we do in other 2 creators; we check the already built pairs
+    //       and sync them with the workingElements, ensuring that there aren't any elements
+    //       in built pairs that no longer exist in workingElements
+
+    // _ensureElementIds();
+    _validateElements();
+    _sortInitialList();
+    // attempt to autopair
+    if (props.fromSelection) {
+        autoPair();
+    }
+}
+
+function initialFiltersSet() {
+    let illumina = 0;
+    let dot12s = 0;
+    let Rs = 0;
+    //should we limit the forEach? What if there are 1000s of elements?
+    props.initialElements.forEach((element) => {
+        if (element.name?.includes(".1.fastq") || element.name?.includes(".2.fastq")) {
+            dot12s++;
+        } else if (element.name?.includes("_R1") || element.name?.includes("_R2")) {
+            Rs++;
+        } else if (element.name?.includes("_1") || element.name?.includes("_2")) {
+            illumina++;
+        }
+    });
+
+    if (illumina > dot12s && illumina > Rs) {
+        changeFilters("illumina");
+    } else if (dot12s > illumina && dot12s > Rs) {
+        changeFilters("dot12s");
+    } else if (Rs > illumina && Rs > dot12s) {
+        changeFilters("Rs");
+    } else {
+        changeFilters("illumina");
+    }
+}
+
+// TODO: Don't know if this is really necessary
+// function _ensureElementIds() {
+//     workingElements.value.forEach((element) => {
+//         if (!Object.prototype.hasOwnProperty.call(element, "id")) {
+//             console.warn("Element missing id", element);
+//         }
+//     });
+
+//     return workingElements.value;
+// }
+
+function _validateElements() {
+    workingElements.value = workingElements.value.filter((element) => {
+        var problem = _isElementInvalid(element);
+
+        if (problem) {
+            invalidElements.value.push(element.name + "  " + problem);
+        }
+
+        return !problem;
+    });
+    return workingElements.value;
+}
+
+function _isElementInvalid(element: HistoryItemSummary) {
+    if (element.history_content_type === "dataset_collection") {
+        return localize("is a collection, this is not allowed");
+    }
+    var validState = element.state === STATES.OK || STATES.NOT_READY_STATES.includes(element.state as string);
+    if (!validState) {
+        return localize("has errored, is paused, or is not accessible");
+    }
+    if (element.deleted || element.purged) {
+        return localize("has been deleted or purged");
+    }
+
+    // is the element's extension not a subtype of any of the required extensions?
+    if (
+        filterExtensions.value &&
+        element.extension &&
+        !datatypesMapper.value?.isSubTypeOfAny(element.extension, props.extensions!)
+    ) {
+        return localize(`has an invalid extension: ${element.extension}`);
+    }
+    return null;
+}
+
+function _sortInitialList() {
+    workingElements.value.sort((a, b) => naturalSort(a.name || "", b.name || ""));
+}
+
+function filterElements(elements: HDASummary[], filterText: string) {
+    return elements.filter((e) => filterElement(e, filterText));
+}
+
+function filterElement(element: HDASummary, filterText: string) {
+    return filterText == "" || new RegExp(filterText).test(element.name || "");
+}
+
+function forwardElementSelected(e: HDASummary) {
+    if (selectedForwardElement.value == null || selectedForwardElement.value.id != e.id) {
+        selectedForwardElement.value = e;
+    } else {
+        selectedForwardElement.value = null;
+    }
+    if (
+        selectedForwardElement.value &&
+        selectedReverseElement.value &&
+        selectedReverseElement.value != selectedForwardElement.value
+    ) {
+        _pair(selectedForwardElement.value, selectedReverseElement.value);
+    }
+}
+
+function reverseElementSelected(e: HDASummary) {
+    if (selectedReverseElement.value == null || selectedReverseElement.value.id != e.id) {
+        selectedReverseElement.value = e;
+    } else {
+        selectedReverseElement.value = null;
+    }
+    if (
+        selectedForwardElement.value &&
+        selectedReverseElement.value &&
+        selectedReverseElement.value != selectedForwardElement.value
+    ) {
+        _pair(selectedForwardElement.value, selectedReverseElement.value);
+    }
+}
+
+// ------------------------------------------------------- pairing / unpairing
+/**
+ * Create a pair from fwd and rev, removing them from unpaired,
+ * and placing the new pair in paired
+ */
+function _pair(fwd: HDASummary, rev: HDASummary, options: { name?: string } = {}) {
+    const pair = _createPair(fwd, rev, options.name);
+    generatedPairs.value.push(pair);
+    removePairFromUnpaired(fwd, rev);
+    // if (!options.silent) {
+    //     emit("pair:new", pair);
+    // }
+    return pair;
+}
+
+function removePairFromUnpaired(fwd: HDASummary, rev: HDASummary) {
+    workingElements.value.splice(workingElements.value.indexOf(rev), 1);
+    workingElements.value.splice(workingElements.value.indexOf(fwd), 1);
+    selectedForwardElement.value = null;
+    selectedReverseElement.value = null;
+}
+
+/**
+ * Create a pair Object from fwd and rev, adding the name attribute
+ * (will guess if not given)
+ */
+function _createPair(fwd: HDASummary, rev: HDASummary, name?: string) {
+    // ensure existance and don't pair something with itself
+    if (!(fwd && rev) || fwd === rev) {
+        throw new Error(`Bad pairing: ${[JSON.stringify(fwd), JSON.stringify(rev)]}`);
+    }
+    name = name || _guessNameForPair(fwd, rev);
+    return { forward: fwd, name: name, reverse: rev };
+}
+
+/** Try to find a good pair name for the given fwd and rev datasets */
+function _guessNameForPair(fwd: HDASummary, rev: HDASummary, willRemoveExtensions?: boolean) {
+    willRemoveExtensions = willRemoveExtensions ? willRemoveExtensions : removeExtensions.value;
+    let fwdName = fwd.name;
+    let revName = rev.name;
+    const fwdNameFilter = fwdName?.replace(new RegExp(forwardFilter.value || ""), "");
+    const revNameFilter = revName?.replace(new RegExp(reverseFilter.value || ""), "");
+    if (!fwdNameFilter || !revNameFilter || !fwdName || !revName) {
+        return `${fwdName} & ${revName}`;
+    }
+    let lcs = _naiveStartingAndEndingLCS(fwdNameFilter, revNameFilter);
+    // remove url prefix if files were uploaded by url
+    const lastSlashIndex = lcs.lastIndexOf("/");
+    if (lastSlashIndex > 0) {
+        const urlprefix = lcs.slice(0, lastSlashIndex + 1);
+        lcs = lcs.replace(urlprefix, "");
+    }
+
+    if (willRemoveExtensions) {
+        const lastDotIndex = lcs.lastIndexOf(".");
+        if (lastDotIndex > 0) {
+            const extension = lcs.slice(lastDotIndex, lcs.length);
+            lcs = lcs.replace(extension, "");
+            fwdName = fwdName.replace(extension, "");
+            revName = revName.replace(extension, "");
+        }
+    }
+    if (lcs.endsWith(".") || lcs.endsWith("_")) {
+        lcs = lcs.substring(0, lcs.length - 1);
+    }
+    return lcs || `${fwdName} & ${revName}`;
+}
+
+function clickAutopair() {
+    // Unselect any selected elements
+    selectedForwardElement.value = null;
+    selectedReverseElement.value = null;
+    autoPair();
+
+    workingElements.value = workingElements.value.filter((e) => {
+        return !generatedPairs.value.some((pair) => pair.forward.id === e.id || pair.reverse.id === e.id);
+    });
+}
+
+function clickUnpair(pair: DatasetPair) {
+    return _unpair(pair);
+}
+
+function clickClearFilters() {
+    forwardFilter.value = "";
+    reverseFilter.value = "";
+}
+
+function splitByFilter() {
+    const filters = [new RegExp(forwardFilter.value), new RegExp(reverseFilter.value)];
+    const split: [HDASummary[], HDASummary[]] = [[], []];
+    workingElements.value.forEach((e) => {
+        filters.forEach((filter, i) => {
+            if (e.name && filter.test(e.name)) {
+                split[i]?.push(e);
+            }
+        });
+    });
+    return split;
+}
+// ===========================================================================
+
+// -------------------------------------------------------------- auto pairing
+/** Autopair by exact match */
+function autoPairSimple(params: { listA: HDASummary[]; listB: HDASummary[] }) {
+    return autoPairFnBuilder({
+        match: (params) => {
+            params = params || {};
+            if (params.matchTo === params.possible) {
+                return {
+                    index: params.index,
+                    score: 1.0,
+                };
+            }
+            return params.bestMatch;
+        },
+        scoreThreshold: 0.6,
+    })(params);
+}
+
+// TODO: Currently unused?
+/** Autopair by levenstein distance */
+// function autoPairLevenshtein(params: { listA: HDASummary[]; listB: HDASummary[] }) {
+//     return autoPairFnBuilder({
+//         match: (params) => {
+//             params = params || {};
+//             const distance = levenshteinDistance(params.matchTo, params.possible);
+//             const score = 1.0 - distance / Math.max(params.matchTo.length, params.possible.length);
+//             if (score > params.bestMatch.score) {
+//                 return {
+//                     index: params.index,
+//                     score: score,
+//                 };
+//             }
+//             return params.bestMatch;
+//         },
+//         scoreThreshold: MATCH_PERCENTAGE,
+//     })(params);
+// }
+
+/** Autopair by longest common substrings scoring */
+function autoPairLCS(params: { listA: HDASummary[]; listB: HDASummary[] }) {
+    return autoPairFnBuilder({
+        match: (params) => {
+            params = params || {};
+            const match = _naiveStartingAndEndingLCS(params.matchTo, params.possible).length;
+            const score = match / Math.max(params.matchTo.length, params.possible.length);
+            if (score > params.bestMatch.score) {
+                return {
+                    index: params.index,
+                    score: score,
+                };
+            }
+            return params.bestMatch;
+        },
+        scoreThreshold: MATCH_PERCENTAGE,
+    })(params);
+}
+
+/**
+ * Two passes to automatically create pairs:
+ * use both simpleAutoPair, then the fn mentioned in strategy
+ */
+function autoPair(localStrategy?: (params: { listA: HDASummary[]; listB: HDASummary[] }) => DatasetPair[]) {
+    let split = splitByFilter();
+    let paired: DatasetPair[] = [];
+    if (twoPassAutoPairing.value) {
+        const simplePaired = autoPairSimple({
+            listA: split[0],
+            listB: split[1],
+        });
+        paired = simplePaired ? simplePaired : paired;
+        split = splitByFilter();
+    }
+
+    // then try the remainder with something less strict
+    localStrategy = localStrategy || strategy.value;
+    split = splitByFilter();
+    const pairedStrategy = localStrategy({
+        listA: split[0],
+        listB: split[1],
+    });
+    paired = pairedStrategy ? paired.concat(pairedStrategy) : paired;
+    autoPairsPossible.value = paired.length > 0;
+    firstAutoPairDone.value = true;
+    return paired;
+}
+
+/** Add a dataset to the unpaired list in it's proper order */
+function _addToUnpaired(dataset: HDASummary) {
+    /** Currently, unpaired is natural sorted by name, use binary search to find insertion point */
+    function binSearchSortedIndex(low: number, hi: number) {
+        if (low === hi) {
+            return low;
+        }
+
+        let mid = Math.floor((hi - low) / 2) + low;
+
+        const elementAtPoint = workingElements.value[mid];
+
+        const compared = naturalSort(dataset.name || "", elementAtPoint?.name || "");
+
+        if (compared < 0) {
+            return binSearchSortedIndex(low, mid);
+        } else if (compared > 0) {
+            return binSearchSortedIndex(mid + 1, hi);
+        } else if (!elementAtPoint) {
+            return mid;
+        }
+        // walk the equal to find the last // TODO: Investigate this, is this correct?
+        if (elementAtPoint?.name === dataset.name) {
+            mid++;
+        }
+        return mid;
+    }
+
+    workingElements.value.splice(binSearchSortedIndex(0, workingElements.value.length), 0, dataset);
+}
+// /** add a dataset to the unpaired list in it's proper order */
+// _addToUnpaired: function (dataset) {
+//     // currently, unpaired is natural sorted by name, use binary search to find insertion point
+//     var binSearchSortedIndex = (low, hi) => {
+//         if (low === hi) {
+//             return low;
+//         }
+
+//         var mid = Math.floor((hi - low) / 2) + low;
+
+//         var compared = naturalSort(dataset.name, this.workingElements[mid].name);
+
+//         if (compared < 0) {
+//             return binSearchSortedIndex(low, mid);
+//         } else if (compared > 0) {
+//             return binSearchSortedIndex(mid + 1, hi);
+//         }
+//         // walk the equal to find the last
+//         while (this.workingElements[mid] && this.workingElements[mid].name === dataset.name) {
+//             mid++;
+//         }
+//         return mid;
+//     };
+
+//     this.workingElements.splice(binSearchSortedIndex(0, this.workingElements.length), 0, dataset);
+// },
+
+/**
+ * Unpair a pair, removing it from paired, and adding the fwd,rev
+ * datasets back into unpaired
+ */
+function _unpair(pair: DatasetPair) {
+    if (!pair) {
+        throw new Error(`Bad pair: ${JSON.stringify(pair)}`);
+    }
+    generatedPairs.value.splice(generatedPairs.value.indexOf(pair), 1);
+    _addToUnpaired(pair.forward);
+    _addToUnpaired(pair.reverse);
+
+    return pair;
+}
+
+/** Unpair all paired datasets */
+function unpairAll() {
+    const pairs = [];
+    while (generatedPairs.value.length) {
+        if (generatedPairs.value[0]) {
+            pairs.push(_unpair(generatedPairs.value[0]));
+        }
+
+        // pairs.push(_unpair(this.generatedPairs[0], { silent: true }));
+    }
+}
+// ===========================================================================
+
+/** Returns an autopair function that uses the provided options.match function */
+function autoPairFnBuilder(options: {
+    match: (params: {
+        matchTo: string;
+        possible: string;
+        index: number;
+        bestMatch: { score: number; index: number };
+    }) => { score: number; index: number };
+    createPair?: (params: {
+        listA: HDASummary[];
+        indexA: number;
+        listB: HDASummary[];
+        indexB: number;
+    }) => DatasetPair | undefined;
+    preprocessMatch?: (params: {
+        matchTo: HDASummary;
+        possible: HDASummary;
+        index: number;
+        bestMatch: { score: number; index: number };
+    }) => { matchTo: string; possible: string; index: number; bestMatch: { score: number; index: number } };
+    scoreThreshold?: number;
+}) {
+    options = options || {};
+    options.createPair =
+        options.createPair ||
+        function _defaultCreatePair(params) {
+            params = params || {};
+            const a = params.listA.splice(params.indexA, 1)[0];
+            const b = params.listB.splice(params.indexB, 1)[0];
+            if (!a || !b) {
+                return undefined;
+            }
+            const aInBIndex = params.listB.indexOf(a);
+            const bInAIndex = params.listA.indexOf(b);
+            if (aInBIndex !== -1) {
+                params.listB.splice(aInBIndex, 1);
+            }
+            if (bInAIndex !== -1) {
+                params.listA.splice(bInAIndex, 1);
+            }
+            // return _pair(a, b, { silent: true });
+            return _pair(a, b);
+        };
+    // compile these here outside of the loop
+    let _regexps: RegExp[] = [];
+    function getRegExps() {
+        if (!_regexps.length) {
+            _regexps = [new RegExp(forwardFilter.value), new RegExp(reverseFilter.value)];
+        }
+        return _regexps;
+    }
+    // mangle params as needed
+    options.preprocessMatch =
+        options.preprocessMatch ||
+        function _defaultPreprocessMatch(params) {
+            const regexps = getRegExps();
+            return Object.assign(params, {
+                matchTo: params.matchTo.name?.replace(regexps[0] || "", ""),
+                possible: params.possible.name?.replace(regexps[1] || "", ""),
+                index: params.index,
+                bestMatch: params.bestMatch,
+            });
+        };
+
+    return function _strategy(params: { listA: HDASummary[]; listB: HDASummary[] }) {
+        params = params || {};
+        const listA = params.listA;
+        const listB = params.listB;
+        let indexA = 0;
+        let indexB;
+
+        let bestMatch = {
+            score: 0.0,
+            index: -1,
+        };
+
+        const paired = [];
+        while (indexA < listA.length) {
+            const matchTo = listA[indexA];
+            bestMatch.score = 0.0;
+
+            if (!matchTo) {
+                continue;
+            }
+            for (indexB = 0; indexB < listB.length; indexB++) {
+                const possible = listB[indexB] as HDASummary;
+                if (listA[indexA] !== listB[indexB]) {
+                    bestMatch = options.match(
+                        options.preprocessMatch!({
+                            matchTo: matchTo,
+                            possible: possible,
+                            index: indexB,
+                            bestMatch: bestMatch,
+                        })
+                    );
+                    if (bestMatch.score === 1.0) {
+                        break;
+                    }
+                }
+            }
+            const scoreThreshold = options.scoreThreshold ? options.scoreThreshold : MATCH_PERCENTAGE;
+            if (bestMatch.score >= scoreThreshold) {
+                const createdPair = options.createPair!({
+                    listA: listA,
+                    indexA: indexA,
+                    listB: listB,
+                    indexB: bestMatch.index,
+                });
+                if (createdPair) {
+                    paired.push(createdPair);
+                }
+            } else {
+                indexA += 1;
+            }
+            if (!listA.length || !listB.length) {
+                return paired;
+            }
+        }
+        return paired;
+    };
+}
+
+function changeFilters(filter: keyof typeof COMMON_FILTERS) {
+    forwardFilter.value = COMMON_FILTERS[filter][0] as string;
+    reverseFilter.value = COMMON_FILTERS[filter][1] as string;
+}
+
+function addUploadedFiles(files: HDASummary[]) {
+    // Any uploaded files are added to workingElements in _elementsSetUp
+    // The user will have to manually select the files to add them to the pair
+
+    // Check for validity of uploads
+    files.forEach((file) => {
+        const problem = _isElementInvalid(file);
+        if (problem) {
+            const invalidMsg = `${file.hid}: ${file.name} ${problem} and ${NOT_VALID_ELEMENT_MSG}`;
+            invalidElements.value.push(invalidMsg);
+            Toast.error(invalidMsg, localize("Uploaded item invalid for pair"));
+        }
+    });
+}
+
+async function clickedCreate(collectionName: string) {
+    checkForDuplicates();
+    if (state.value == "build") {
+        emit("clicked-create", generatedPairs.value, collectionName, hideSourceItems.value);
+    }
+}
+
+function checkForDuplicates() {
+    const existingPairNames: Record<string, boolean> = {};
+    duplicatePairNames.value = [];
+    let valid = true;
+    generatedPairs.value.forEach((pair) => {
+        if (Object.prototype.hasOwnProperty.call(existingPairNames, pair.name)) {
+            valid = false;
+            duplicatePairNames.value.push(pair.name);
+        }
+        existingPairNames[pair.name] = true;
+    });
+    state.value = valid ? "build" : "duplicates";
+}
+
+// TODO: Where is this being used?
+// function stripExtension(name: string) {
+//     return name.includes(".") ? name.substring(0, name.lastIndexOf(".")) : name;
+// }
+
+/** Return the concat'd longest common prefix and suffix from two strings */
+function _naiveStartingAndEndingLCS(s1: string, s2: string) {
+    var fwdLCS = "";
+    var revLCS = "";
+    var i = 0;
+    var j = 0;
+    while (i < s1.length && i < s2.length) {
+        if (s1[i] !== s2[i]) {
+            break;
+        }
+        fwdLCS += s1[i];
+        i += 1;
+    }
+    if (i === s1.length) {
+        return s1;
+    }
+    if (i === s2.length) {
+        return s2;
+    }
+
+    i = s1.length - 1;
+    j = s2.length - 1;
+    while (i >= 0 && j >= 0) {
+        if (s1[i] !== s2[j]) {
+            break;
+        }
+        revLCS = [s1[i], revLCS].join("");
+        i -= 1;
+        j -= 1;
+    }
+    return fwdLCS + revLCS;
+}
+</script>
+
 <template>
     <div class="paired-list-collection-creator">
         <div v-if="state == 'error'">
-            <b-alert show variant="danger">
-                {{ errorText }}
-            </b-alert>
+            <BAlert show variant="danger">
+                {{ ERROR_TEXT }}
+            </BAlert>
         </div>
         <div v-else>
             <div v-if="noElementsSelected">
-                <b-alert show variant="warning" dismissible>
+                <BAlert show variant="warning" dismissible>
                     {{ noElementsHeader }}
-                    {{ allInvalidElementsPartOne }}
-                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                        {{ cancelText }}
+                    {{ ALL_INVALID_ELEMENTS_PART_ONE }}
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
+                        {{ CANCEL_TEXT }}
                     </a>
                     {{ allInvalidElementsPartTwo }}
-                </b-alert>
+                </BAlert>
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ l("Cancel") }}
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
+                        {{ CANCEL_TEXT }}
                     </button>
                 </div>
             </div>
             <div v-else-if="allElementsAreInvalid">
-                <b-alert show variant="warning" dismissible>
-                    {{ invalidHeader }}
+                <BAlert v-if="!fromSelection" show variant="warning">
+                    {{
+                        localize(
+                            "No elements in your history are valid for this collection. You may need to switch to a different history."
+                        )
+                    }}
+                    <span v-if="extensions?.length">
+                        {{ localize("The following extensions are required for this collection: ") }}
+                        <ul>
+                            <li v-for="extension in extensions" :key="extension">
+                                {{ extension }}
+                            </li>
+                        </ul>
+                    </span>
+                </BAlert>
+                <BAlert v-else show variant="warning" dismissible>
+                    {{ INVALID_HEADER }}
                     <ul>
                         <li v-for="problem in returnInvalidElements" :key="problem">
                             {{ problem }}
                         </li>
                     </ul>
-                    {{ allInvalidElementsPartOne }}
-                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                        {{ cancelText }}
+                    {{ ALL_INVALID_ELEMENTS_PART_ONE }}
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
+                        {{ CANCEL_TEXT }}
                     </a>
                     {{ allInvalidElementsPartTwo }}
-                </b-alert>
+                </BAlert>
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ l("Cancel") }}
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
+                        {{ CANCEL_TEXT }}
                     </button>
                 </div>
             </div>
             <div v-else-if="tooFewElementsSelected">
                 <div v-if="returnInvalidElementsLength">
-                    <b-alert show variant="warning" dismissible>
-                        {{ invalidHeader }}
+                    <BAlert show variant="warning" dismissible>
+                        {{ INVALID_HEADER }}
                         <ul>
                             <li v-for="problem in returnInvalidElements" :key="problem">
                                 {{ problem }}
                             </li>
                         </ul>
-                    </b-alert>
+                    </BAlert>
                 </div>
-                <b-alert show variant="warning" dismissible>
-                    {{ allInvalidElementsPartOne }}
-                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                        {{ cancelText }}
+                <BAlert show variant="warning" dismissible>
+                    {{ ALL_INVALID_ELEMENTS_PART_ONE }}
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
+                        {{ CANCEL_TEXT }}
                     </a>
                     {{ allInvalidElementsPartTwo }}
-                </b-alert>
+                </BAlert>
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ l("Cancel") }}
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
+                        {{ CANCEL_TEXT }}
                     </button>
                 </div>
             </div>
             <div v-else>
-                <div v-if="returnInvalidElementsLength">
-                    <b-alert show variant="warning" dismissible>
-                        {{ invalidHeader }}
+                <div v-if="fromSelection && returnInvalidElementsLength">
+                    <BAlert show variant="warning" dismissible>
+                        {{ INVALID_HEADER }}
                         <ul>
                             <li v-for="problem in returnInvalidElements" :key="problem">
                                 {{ problem }}
                             </li>
                         </ul>
-                    </b-alert>
+                    </BAlert>
                 </div>
-                <div v-if="!initialPairsPossible">
-                    <b-alert show variant="danger" dismissible>
+                <div v-if="!autoPairsPossible">
+                    <BAlert show variant="danger" dismissible @dismissed="autoPairsPossible = true">
                         {{
-                            l(
+                            localize(
                                 "Could not automatically create any pairs from the given dataset names. You may want to choose or enter different filters and try auto-pairing again."
                             )
                         }}
-                        <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                            {{ cancelText }}
-                        </a>
-                        {{ allInvalidElementsPartTwo }}
-                    </b-alert>
+                        <span v-if="fromSelection">
+                            <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
+                                {{ CANCEL_TEXT }}
+                            </a>
+                            {{ allInvalidElementsPartTwo }}
+                        </span>
+                    </BAlert>
                 </div>
                 <div v-if="state == 'duplicates'">
-                    <b-alert show variant="danger">
-                        {{ l("Collections cannot have duplicated names. The following list names are duplicated: ") }}
+                    <BAlert show variant="danger">
+                        {{
+                            localize(
+                                "Collections cannot have duplicated names. The following list names are duplicated: "
+                            )
+                        }}
                         <ul>
                             <li v-for="name in duplicatePairNames" :key="name">{{ name }}</li>
                         </ul>
-                        {{ l("Please fix these duplicates and try again.") }}
-                    </b-alert>
+                        {{ localize("Please fix these duplicates and try again.") }}
+                    </BAlert>
                 </div>
-                <collection-creator
-                    :oncancel="oncancel"
+                <CollectionCreator
+                    :oncancel="() => emit('on-cancel')"
+                    :history-id="props.historyId"
                     :hide-source-items="hideSourceItems"
-                    :render-extensions-toggle="true"
-                    @onUpdateHideSourceItems="onUpdateHideSourceItems"
+                    render-extensions-toggle
+                    :extensions-toggle="removeExtensions"
+                    :extensions="extensions"
+                    @add-uploaded-files="addUploadedFiles"
+                    @onUpdateHideSourceItems="hideSourceItems = $event"
                     @clicked-create="clickedCreate"
                     @remove-extensions-toggle="removeExtensionsToggle">
                     <template v-slot:help-content>
+                        <!-- TODO: Update help content for case where `fromSelection` is false -->
                         <p>
                             {{
-                                l(
+                                localize(
                                     [
                                         "Collections of paired datasets are ordered lists of dataset pairs (often forward and reverse reads). ",
                                         "These collections can be passed to tools and workflows in order to have analyses done on each member of ",
@@ -119,920 +956,365 @@
                             }}
                         </p>
                         <p>
-                            {{ l("Unpaired datasets are shown in the") }}
+                            {{ localize("Unpaired datasets are shown in the") }}
                             <i data-target=".unpaired-columns">
-                                {{ l("unpaired section") }}
+                                {{ localize("unpaired section") }}
                             </i>
                             {{ "." }}
-                            {{ l("Paired datasets are shown in the") }}
+                            {{ localize("Paired datasets are shown in the") }}
                             <i data-target=".paired-columns">
-                                {{ l("paired section") }}
+                                {{ localize("paired section") }}
                             </i>
                             {{ "." }}
                         </p>
                         <ul>
                             {{
-                                l("To pair datasets, you can:")
+                                localize("To pair datasets, you can:")
                             }}
                             <li>
-                                {{ l("Click a dataset in the") }}
+                                {{ localize("Click a dataset in the") }}
                                 <i data-target=".forward-column">
-                                    {{ l("forward column") }}
+                                    {{ localize("forward column") }}
                                 </i>
-                                {{ l("to select it then click a dataset in the") }}
+                                {{ localize("to select it then click a dataset in the") }}
                                 <i data-target=".reverse-column">
-                                    {{ l("reverse column") }}
+                                    {{ localize("reverse column") }}
                                 </i>
                             </li>
                             <li>
                                 {{
-                                    l(
+                                    localize(
                                         "Click one of the Pair these datasets buttons in the middle column to pair the datasets in a particular row."
                                     )
                                 }}
                             </li>
                             <li>
-                                {{ l("Click") }}
+                                {{ localize("Click") }}
                                 <i data-target=".autopair-link">
-                                    {{ l("Auto-pair") }}
+                                    {{ localize("Auto-pair") }}
                                 </i>
-                                {{ l("to have your datasets automatically paired based on name.") }}
+                                {{ localize("to have your datasets automatically paired based on name.") }}
                             </li>
                         </ul>
                         <ul>
                             {{
-                                l("You can filter what is shown in the unpaired sections by:")
+                                localize("You can filter what is shown in the unpaired sections by:")
                             }}
                             <li>
-                                {{ l("Entering partial dataset names in either the ") }}
+                                {{ localize("Entering partial dataset names in either the ") }}
                                 <i data-target=".forward-unpaired-filter input">
-                                    {{ l("forward filter") }}
+                                    {{ localize("forward filter") }}
                                 </i>
-                                {{ l("or ") }}
+                                {{ localize("or ") }}
                                 <i data-target=".reverse-unpaired-filter input">
-                                    {{ l("reverse filter") }}
+                                    {{ localize("reverse filter") }}
                                 </i>
                                 {{ "." }}
                             </li>
                             <li>
                                 {{
-                                    l(
+                                    localize(
                                         "Choosing from a list of preset filters by clicking the arrow beside the filter input."
                                     )
                                 }}
                             </li>
                             <li>
-                                {{ l("Entering regular expressions to match dataset names. See:") }}
+                                {{ localize("Entering regular expressions to match dataset names. See:") }}
                                 <a
                                     href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions"
                                     target="_blank">
-                                    {{ l("MDN's JavaScript Regular Expression Tutorial") }}</a
+                                    {{ localize("MDN's JavaScript Regular Expression Tutorial") }}</a
                                 >
-                                {{ l("Note: forward slashes (\\) are not needed.") }}
+                                {{ localize("Note: forward slashes (\\) are not needed.") }}
                             </li>
                             <li>
-                                {{ l("Clearing the filters by clicking the ") }}
+                                {{ localize("Clearing the filters by clicking the ") }}
                                 <i data-target=".clear-filters-link">
-                                    {{ l("Clear filters link") }}
+                                    {{ localize("Clear filters link") }}
                                 </i>
                                 {{ "." }}
                             </li>
                         </ul>
                         <p>
-                            {{ l("To unpair individual dataset pairs, click the ") }}
+                            {{ localize("To unpair individual dataset pairs, click the ") }}
                             <i data-target=".unpair-btn">
-                                {{ l("unpair buttons (") }}
+                                {{ localize("unpair buttons (") }}
                                 <span class="fa fa-unlink"></span>
                                 {{ ")" }}
                             </i>
-                            {{ l("Click the") }}
+                            {{ localize("Click the") }}
                             <i data-target=".unpair-all-link">
-                                {{ l("Unpair all") }}
+                                {{ localize("Unpair all") }}
                             </i>
-                            {{ l("link to unpair all pairs.") }}
+                            {{ localize("link to unpair all pairs.") }}
                         </p>
                         <p>
                             {{
-                                l(
+                                localize(
                                     'You can include or remove the file extensions (e.g. ".fastq") from your pair names by toggling the'
                                 )
                             }}
                             <i data-target=".remove-extensions-prompt">
-                                {{ l("Remove file extensions from pair names?") }}
+                                {{ localize("Remove file extensions from pair names?") }}
                             </i>
-                            {{ l("control.") }}
+                            {{ localize("control.") }}
                         </p>
                         <p>
-                            {{ l("Once your collection is complete, enter a") }}
+                            {{ localize("Once your collection is complete, enter a") }}
                             <i data-target=".collection-name">
-                                {{ l("name") }}
+                                {{ localize("name") }}
                             </i>
-                            {{ l("and click ") }}
+                            {{ localize("and click ") }}
                             <i data-target=".create-collection">
-                                {{ l("Create list") }}
+                                {{ localize("Create list") }}
                             </i>
-                            {{ l(". (Note: you do not have to pair all unpaired datasets to finish.)") }}
+                            {{ localize(". (Note: you do not have to pair all unpaired datasets to finish.)") }}
                         </p>
                     </template>
                     <template v-slot:middle-content>
-                        <div class="column-headers vertically-spaced flex-column-container">
-                            <div class="forward-column flex-column column">
-                                <div class="column-header">
-                                    <div class="column-title">
-                                        <span class="title">
-                                            {{ numOfUnpairedForwardElements }}
-                                            {{ l("unpaired forward") }}
-                                        </span>
-                                        <span class="title-info unpaired-info">
-                                            {{ numOfFilteredOutForwardElements }} {{ l("filtered out") }}
-                                        </span>
-                                    </div>
-                                    <div
-                                        class="unpaired-filter forward-unpaired-filter float-left search-input search-query input-group">
-                                        <input
-                                            v-model="forwardFilter"
-                                            type="text"
-                                            :placeholder="filterTextPlaceholder"
-                                            title="filterTextTitle" />
-                                        <div class="input-group-append" :title="chooseFilterTitle">
-                                            <button
-                                                class="btn btn-outline-secondary dropdown-toggle"
-                                                type="button"
-                                                data-toggle="dropdown"
-                                                aria-haspopup="true"
-                                                aria-expanded="false"></button>
-                                            <div class="dropdown-menu">
-                                                <a class="dropdown-item" @click="changeFilters('illumina')">_1</a>
-                                                <a class="dropdown-item" @click="changeFilters('Rs')">_R1</a>
-                                                <a class="dropdown-item" @click="changeFilters('dot12s')">.1.fastq</a>
+                        <BCard no-body class="mb-2">
+                            <BCardHeader
+                                class="d-flex justify-content-between align-items-center unselectable"
+                                role="button"
+                                @click="showPairingSection = !showPairingSection">
+                                <Heading size="sm">Pairing</Heading>
+                                <i class="text-muted">
+                                    {{ localize("Click to hide/show datasets to pair") }}
+                                    <FontAwesomeIcon
+                                        :icon="showPairingSection ? faAngleUp : faAngleDown"
+                                        size="lg"
+                                        fixed-width />
+                                </i>
+                            </BCardHeader>
+                            <BCardBody v-show="showPairingSection" class="pairing-split-parent">
+                                <div class="column-headers vertically-spaced flex-column-container">
+                                    <div class="forward-column flex-column column">
+                                        <div class="column-header">
+                                            <div class="column-title">
+                                                <span class="title">
+                                                    {{ numOfUnpairedForwardElements }}
+                                                    {{ localize("unpaired forward") }}
+                                                </span>
+                                                <span class="title-info unpaired-info">
+                                                    {{ numOfFilteredOutForwardElements }} {{ localize("filtered out") }}
+                                                </span>
+                                            </div>
+                                            <div
+                                                class="unpaired-filter forward-unpaired-filter search-input search-query input-group">
+                                                <label for="forward-filter" class="sr-only">{{
+                                                    FILTER_TEXT_TITLE
+                                                }}</label>
+                                                <input
+                                                    id="foward-filter"
+                                                    v-model="forwardFilter"
+                                                    type="text"
+                                                    :placeholder="FILTER_TEXT_PLACEHOLDER"
+                                                    :title="FILTER_TEXT_TITLE" />
+                                                <div class="input-group-append" :title="CHOOSE_FILTER_TITLE">
+                                                    <button
+                                                        class="btn btn-outline-secondary dropdown-toggle"
+                                                        type="button"
+                                                        data-toggle="dropdown"
+                                                        aria-haspopup="true"
+                                                        aria-expanded="false"></button>
+                                                    <div class="dropdown-menu">
+                                                        <a
+                                                            class="dropdown-item"
+                                                            href="javascript:void(0);"
+                                                            @click="changeFilters('illumina')">
+                                                            _1
+                                                        </a>
+                                                        <a
+                                                            class="dropdown-item"
+                                                            href="javascript:void(0);"
+                                                            @click="changeFilters('Rs')">
+                                                            _R1
+                                                        </a>
+                                                        <a
+                                                            class="dropdown-item"
+                                                            href="javascript:void(0);"
+                                                            @click="changeFilters('dot12s')">
+                                                            .1.fastq
+                                                        </a>
+                                                    </div>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div class="paired-column flex-column no-flex column">
-                                <div class="column-header">
-                                    <a
-                                        class="clear-filters-link"
-                                        href="javascript:void(0);"
-                                        role="button"
-                                        @click="clickClearFilters">
-                                        {{ l("Clear Filters") }}
-                                    </a>
-                                    <br />
-                                    <a
-                                        class="autopair-link"
-                                        href="javascript:void(0);"
-                                        role="button"
-                                        @click="clickAutopair">
-                                        {{ l("Auto-pair") }}
-                                    </a>
-                                </div>
-                            </div>
-                            <div class="reverse-column flex-column column">
-                                <div class="column-header">
-                                    <div class="column-title">
-                                        <span class="title">
-                                            {{ numOfUnpairedReverseElements }}
-                                            {{ l("unpaired reverse") }}
-                                        </span>
-                                        <span class="title-info unpaired-info">
-                                            {{ numOfFilteredOutReverseElements }} {{ l("filtered out") }}</span
-                                        >
+                                    <div class="paired-column flex-column no-flex column">
+                                        <BButtonGroup vertical>
+                                            <BButton
+                                                class="clear-filters-link"
+                                                size="sm"
+                                                :variant="hasFilter ? 'danger' : 'secondary'"
+                                                @click="clickClearFilters">
+                                                <FontAwesomeIcon :icon="faTimes" fixed-width />
+                                                {{ localize("Clear Filters") }}
+                                            </BButton>
+                                            <BButton
+                                                class="autopair-link"
+                                                size="sm"
+                                                :title="autoPairButton.text"
+                                                :variant="autoPairButton.variant"
+                                                @click="clickAutopair">
+                                                <FontAwesomeIcon :icon="autoPairButton.icon" fixed-width />
+                                                {{ localize("Auto-pair") }}
+                                            </BButton>
+                                        </BButtonGroup>
                                     </div>
-                                    <div
-                                        class="unpaired-filter reverse-unpaired-filter float-left search-input search-query input-group">
-                                        <input
-                                            v-model="reverseFilter"
-                                            type="text"
-                                            :placeholder="filterTextPlaceholder"
-                                            title="filterTextTitle" />
-                                        <div class="input-group-append" :title="chooseFilterTitle">
-                                            <button
-                                                class="btn btn-outline-secondary dropdown-toggle"
-                                                type="button"
-                                                data-toggle="dropdown"
-                                                aria-haspopup="true"
-                                                aria-expanded="false"></button>
-                                            <div class="dropdown-menu">
-                                                <a class="dropdown-item" @click="changeFilters('illumina')">_2</a>
-                                                <a class="dropdown-item" @click="changeFilters('Rs')">_R2</a>
-                                                <a class="dropdown-item" @click="changeFilters('dot12s')">.2.fastq</a>
+                                    <div class="reverse-column flex-column column">
+                                        <div class="column-header">
+                                            <div class="column-title">
+                                                <span class="title">
+                                                    {{ numOfUnpairedReverseElements }}
+                                                    {{ localize("unpaired reverse") }}
+                                                </span>
+                                                <span class="title-info unpaired-info">
+                                                    {{ numOfFilteredOutReverseElements }}
+                                                    {{ localize("filtered out") }}</span
+                                                >
+                                            </div>
+                                            <div
+                                                class="unpaired-filter reverse-unpaired-filter justify-content-end search-input search-query input-group">
+                                                <label for="reverse-filter" class="sr-only">{{
+                                                    FILTER_TEXT_TITLE
+                                                }}</label>
+                                                <input
+                                                    id="reverse-filter"
+                                                    v-model="reverseFilter"
+                                                    type="text"
+                                                    :placeholder="FILTER_TEXT_PLACEHOLDER"
+                                                    :title="FILTER_TEXT_TITLE" />
+                                                <div class="input-group-append" :title="CHOOSE_FILTER_TITLE">
+                                                    <button
+                                                        class="btn btn-outline-secondary dropdown-toggle"
+                                                        type="button"
+                                                        data-toggle="dropdown"
+                                                        aria-haspopup="true"
+                                                        aria-expanded="false"></button>
+                                                    <div class="dropdown-menu">
+                                                        <a
+                                                            class="dropdown-item"
+                                                            href="javascript:void(0);"
+                                                            @click="changeFilters('illumina')">
+                                                            _2
+                                                        </a>
+                                                        <a
+                                                            class="dropdown-item"
+                                                            href="javascript:void(0);"
+                                                            @click="changeFilters('Rs')">
+                                                            _R2
+                                                        </a>
+                                                        <a
+                                                            class="dropdown-item"
+                                                            href="javascript:void(0);"
+                                                            @click="changeFilters('dot12s')">
+                                                            .2.fastq
+                                                        </a>
+                                                    </div>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                        </div>
-                        <div class="pairing-split-parent">
-                            <div class="pairing-split-child">
-                                <div v-if="noUnpairedElementsDisplayed">
-                                    <b-alert show variant="warning">
-                                        {{ l("No datasets were found matching the current filters.") }}
-                                    </b-alert>
-                                </div>
-                                <div class="unpaired-columns flex-column-container scroll-container flex-row">
-                                    <div class="forward-column flex-column column truncate">
-                                        <ol class="column-datasets">
-                                            <UnpairedDatasetElementView
-                                                v-for="element in forwardElements"
-                                                :key="element.id"
-                                                :class="{
-                                                    selected:
-                                                        selectedForwardElement &&
-                                                        element.id == selectedForwardElement.id,
-                                                }"
-                                                :element="element"
-                                                @element-is-selected="forwardElementSelected" />
-                                        </ol>
+                                <div class="pairing-split-child">
+                                    <div v-if="noUnpairedElementsDisplayed">
+                                        <BAlert show variant="warning">
+                                            {{ localize("No datasets were found matching the current filters.") }}
+                                        </BAlert>
                                     </div>
-                                    <div class="paired-column flex-column no-flex column truncate">
-                                        <ol v-if="forwardFilter !== '' && reverseFilter !== ''" class="column-datasets">
-                                            <li
-                                                v-for="(pairableElement, index) in pairableElements"
-                                                :key="index"
-                                                class="dataset"
-                                                @click="_pair(pairableElement.forward, pairableElement.reverse)">
-                                                {{ l("Pair these datasets") }}
-                                            </li>
-                                        </ol>
-                                    </div>
-                                    <div class="reverse-column flex-column column truncate">
-                                        <ol class="column-datasets">
-                                            <UnpairedDatasetElementView
-                                                v-for="element in reverseElements"
-                                                :key="element.id"
-                                                :class="{
-                                                    selected:
-                                                        selectedReverseElement &&
-                                                        element.id == selectedReverseElement.id,
-                                                }"
-                                                :element="element"
-                                                @element-is-selected="reverseElementSelected" />
-                                        </ol>
+                                    <div class="unpaired-columns flex-column-container scroll-container flex-row">
+                                        <div class="forward-column flex-column column truncate">
+                                            <ol class="column-datasets">
+                                                <UnpairedDatasetElementView
+                                                    v-for="element in forwardElements"
+                                                    :key="element.id"
+                                                    :class="{
+                                                        selected:
+                                                            selectedForwardElement &&
+                                                            element.id === selectedForwardElement.id,
+                                                    }"
+                                                    :disabled="element.id === selectedReverseElement?.id"
+                                                    :element="element"
+                                                    @element-is-selected="forwardElementSelected" />
+                                            </ol>
+                                        </div>
+                                        <div class="paired-column flex-column no-flex column truncate">
+                                            <ol
+                                                v-if="forwardFilter !== '' && reverseFilter !== ''"
+                                                class="column-datasets">
+                                                <li
+                                                    v-for="(pairableElement, index) in pairableElements"
+                                                    :key="index"
+                                                    class="dataset"
+                                                    role="button"
+                                                    tabindex="0"
+                                                    @keyup.enter="
+                                                        _pair(pairableElement.forward, pairableElement.reverse)
+                                                    "
+                                                    @click="_pair(pairableElement.forward, pairableElement.reverse)">
+                                                    {{ localize("Pair these datasets") }}
+                                                </li>
+                                            </ol>
+                                        </div>
+                                        <div class="reverse-column flex-column column truncate">
+                                            <ol class="column-datasets">
+                                                <UnpairedDatasetElementView
+                                                    v-for="element in reverseElements"
+                                                    :key="element.id"
+                                                    :class="{
+                                                        selected:
+                                                            selectedReverseElement &&
+                                                            element.id == selectedReverseElement.id,
+                                                    }"
+                                                    :disabled="element.id === selectedForwardElement?.id"
+                                                    :element="element"
+                                                    @element-is-selected="reverseElementSelected" />
+                                            </ol>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
+                            </BCardBody>
+                        </BCard>
+                        <div>
                             <div class="pairing-split-child">
                                 <div class="column-header">
-                                    <div class="column-title paired-column-title">
-                                        <span class="title"> {{ numOfPairs }} {{ l(" pairs") }}</span>
+                                    <div class="column-title paired-column-title" data-description="number of pairs">
+                                        <span class="title"> {{ numOfPairs }} {{ localize("pairs") }}</span>
                                     </div>
-                                    <a
-                                        class="unpair-all-link"
-                                        href="javascript:void(0);"
-                                        role="button"
-                                        @click="unpairAll">
-                                        {{ l("Unpair all") }}
-                                    </a>
+                                    <BButton
+                                        v-if="generatedPairs.length > 0"
+                                        variant="link"
+                                        size="sm"
+                                        @click.stop="unpairAll">
+                                        <FontAwesomeIcon :icon="faUnlink" fixed-width />
+                                        {{ localize("Unpair all") }}
+                                    </BButton>
                                 </div>
                                 <div class="paired-columns flex-column-container scroll-container flex-row">
                                     <ol class="column-datasets">
-                                        <draggable v-model="pairedElements" @start="drag = true" @end="drag = false">
+                                        <draggable
+                                            v-model="generatedPairs"
+                                            handle=".dataset"
+                                            chosen-class="dragged-pair">
                                             <PairedElementView
-                                                v-for="pair in pairedElements"
-                                                :key="pair.id"
+                                                v-for="pair in generatedPairs"
+                                                :key="`${pair.forward.id}-${pair.reverse.id}`"
                                                 :pair="pair"
-                                                :unlink-fn="clickUnpair(pair)"
-                                                @onPairRename="(name) => (pair.name = name)" />
+                                                @onPairRename="(name) => (pair.name = name)"
+                                                @onUnpair="clickUnpair(pair)" />
                                         </draggable>
                                     </ol>
                                 </div>
                             </div>
                         </div>
                     </template>
-                </collection-creator>
+                </CollectionCreator>
             </div>
         </div>
     </div>
 </template>
-<script>
-import BootstrapVue from "bootstrap-vue";
-import STATES from "mvc/dataset/states";
-import levenshteinDistance from "utils/levenshtein";
-import _l from "utils/localization";
-import naturalSort from "utils/natural-sort";
-import Vue from "vue";
-import draggable from "vuedraggable";
-
-import mixin from "./common/mixin";
-import PairedElementView from "./PairedElementView";
-import UnpairedDatasetElementView from "./UnpairedDatasetElementView";
-
-Vue.use(BootstrapVue);
-export default {
-    components: {
-        UnpairedDatasetElementView,
-        PairedElementView,
-        draggable,
-    },
-    mixins: [mixin],
-    data: function () {
-        return {
-            state: "build", //error, duplicates
-            dragToChangeTitle: _l("Drag to change"),
-            chooseFilterTitle: _l("Choose from common filters"),
-            filterTextPlaceholder: _l("Filter text"),
-            filterTextTitle: _l("Use this box to filter elements, using simple matching or regular expressions."),
-            pairedElements: [],
-            unpairedElements: [],
-            commonFilters: {
-                illumina: ["_1", "_2"],
-                Rs: ["_R1", "_R2"],
-                dot12s: [".1.fastq", ".2.fastq"],
-            },
-            DEFAULT_FILTERS: "illumina",
-            forwardFilter: "",
-            reverseFilter: "",
-            automaticallyPair: true,
-            initialPairsPossible: true,
-            matchPercentage: 0.99,
-            twoPassAutoPairing: true,
-            removeExtensions: true,
-            workingElements: [],
-
-            selectedForwardElement: null,
-            selectedReverseElement: null,
-            /** autopair by exact match */
-
-            autopairSimple: this.autoPairFnBuilder({
-                scoreThreshold: function () {
-                    return 0.6;
-                },
-                match: function _match(params) {
-                    params = params || {};
-                    if (params.matchTo === params.possible) {
-                        return {
-                            index: params.index,
-                            score: 1.0,
-                        };
-                    }
-                    return params.bestMatch;
-                },
-            }),
-            /** autopair by levenshtein edit distance scoring */
-            autopairLevenshtein: this.autoPairFnBuilder({
-                scoreThreshold: function () {
-                    return this.matchPercentage;
-                },
-                match: function _matches(params) {
-                    params = params || {};
-
-                    var distance = levenshteinDistance(params.matchTo, params.possible);
-
-                    var score = 1.0 - distance / Math.max(params.matchTo.length, params.possible.length);
-
-                    if (score > params.bestMatch.score) {
-                        return {
-                            index: params.index,
-                            score: score,
-                        };
-                    }
-                    return params.bestMatch;
-                },
-            }),
-            /** autopair by longest common substrings scoring */
-            autopairLCS: this.autoPairFnBuilder({
-                scoreThreshold: function () {
-                    return this.matchPercentage;
-                },
-                match: function _matches(params) {
-                    params = params || {};
-
-                    var match = this._naiveStartingAndEndingLCS(params.matchTo, params.possible).length;
-
-                    var score = match / Math.max(params.matchTo.length, params.possible.length);
-
-                    if (score > params.bestMatch.score) {
-                        return {
-                            index: params.index,
-                            score: score,
-                        };
-                    }
-                    return params.bestMatch;
-                },
-            }),
-            strategy: null,
-            errorText: _l("Galaxy could not be reached and may be updating.  Try again in a few minutes."),
-            invalidHeader: _l("The following selections could not be included due to problems:"),
-            allInvalidElementsPartOne: _l("At least two elements are needed for the collection. You may need to"),
-            noElementsHeader: _l("No datasets were selected"),
-            cancelText: _l("cancel"),
-            allInvalidElementsPartTwo: _l("and reselect new elements."),
-            duplicatePairNames: [],
-        };
-    },
-    computed: {
-        forwardElements: {
-            get() {
-                return this.filterElements(this.workingElements, this.forwardFilter);
-            },
-        },
-        reverseElements: {
-            get() {
-                return this.filterElements(this.workingElements, this.reverseFilter);
-            },
-        },
-        pairableElements: {
-            get() {
-                var pairable = [];
-                this.forwardElements.forEach((elem, index) => {
-                    if (this.reverseElements[index] && elem.id != this.reverseElements[index].id) {
-                        pairable.push({
-                            forward: this.forwardElements[index],
-                            reverse: this.reverseElements[index],
-                        });
-                    }
-                });
-                return pairable;
-            },
-        },
-        numOfUnpairedForwardElements: function () {
-            return this.forwardElements.length;
-        },
-        numOfFilteredOutForwardElements: function () {
-            return this.workingElements.length - this.numOfUnpairedForwardElements;
-        },
-        numOfUnpairedReverseElements: function () {
-            return this.reverseElements.length;
-        },
-        numOfFilteredOutReverseElements: function () {
-            return this.workingElements.length - this.numOfUnpairedReverseElements;
-        },
-        numOfPairs: function () {
-            return this.pairedElements.length;
-        },
-        returnInvalidElementsLength: function () {
-            return this.invalidElements.length > 0;
-        },
-        returnInvalidElements: function () {
-            return this.invalidElements;
-        },
-        allElementsAreInvalid: function () {
-            return this.initialElements.length == this.invalidElements.length;
-        },
-        noElementsSelected: function () {
-            return this.initialElements.length == 0;
-        },
-        tooFewElementsSelected: function () {
-            return this.workingElements.length < 2 && this.pairedElements.length == 0;
-        },
-        showDuplicateError() {
-            return this.duplicatePairNames.length > 0;
-        },
-        noUnpairedElementsDisplayed() {
-            return this.numOfUnpairedForwardElements + this.numOfUnpairedReverseElements == 0;
-        },
-        renderPairButton() {
-            return this;
-        },
-    },
-    created() {
-        this.strategy = this.autopairLCS;
-        //TODO convert to Fwd/Rev
-        // Setup inital filters and shallow copy the items
-        this.forwardFilter = this.commonFilters[this.DEFAULT_FILTERS][0];
-        this.reverseFilter = this.commonFilters[this.DEFAULT_FILTERS][1];
-        this._elementsSetUp();
-    },
-    methods: {
-        l(str) {
-            // _l conflicts private methods of Vue internals, expose as l instead
-            return _l(str);
-        },
-        removeExtensionsToggle: function () {
-            this.removeExtensions = !this.removeExtensions;
-            this.pairedElements.forEach((pair, index) => {
-                pair.name = this._guessNameForPair(pair.forward, pair.reverse, this.removeExtensions);
-            });
-        },
-        /** set up main data */
-        _elementsSetUp: function () {
-            /** a list of invalid elements and the reasons they aren't valid */
-            this.invalidElements = [];
-            //TODO: handle fundamental problem of syncing DOM, views, and list here
-            /** data for list in progress */
-            this.workingElements = [];
-            //TODO: this should maybe be in it's own method as it will get called everytime selected array has two elements and dumps again.
-            this.selectedDatasetElems = [];
-            this.initialFiltersSet();
-            // copy initial list, sort, add ids if needed
-            this.workingElements = JSON.parse(JSON.stringify(this.initialElements.slice(0)));
-            this._ensureElementIds();
-            this._validateElements();
-            this._sortInitialList();
-            //attempt to autopair
-            if (this.automaticallyPair == true) {
-                this.autoPair();
-                this.initialPairsPossible = this.pairedElements.length > 0;
-            }
-        },
-        initialFiltersSet: function () {
-            let illumina = 0;
-            let dot12s = 0;
-            let Rs = 0;
-            //should we limit the forEach? What if there are 1000s of elements?
-            this.initialElements.forEach((element) => {
-                if (element.name.includes(".1.fastq") || element.name.includes(".2.fastq")) {
-                    dot12s++;
-                } else if (element.name.includes("_R1") || element.name.includes("_R2")) {
-                    Rs++;
-                } else if (element.name.includes("_1") || element.name.includes("_2")) {
-                    illumina++;
-                }
-            });
 
-            if (illumina > dot12s && illumina > Rs) {
-                this.changeFilters("illumina");
-            } else if (dot12s > illumina && dot12s > Rs) {
-                this.changeFilters("dot12s");
-            } else if (Rs > illumina && Rs > dot12s) {
-                this.changeFilters("Rs");
-            } else {
-                this.changeFilters("illumina");
-            }
-        },
-        /** add ids to dataset objs in initial list if none */
-        _ensureElementIds: function () {
-            this.workingElements.forEach((element) => {
-                if (!Object.prototype.hasOwnProperty.call(element, "id")) {
-                    element.id = element._uid;
-                }
-            });
-            return this.workingElements;
-        },
-        // /** separate working list into valid and invalid elements for this collection */
-        _validateElements: function () {
-            this.workingElements = this.workingElements.filter((element) => {
-                var problem = this._isElementInvalid(element);
-                if (problem) {
-                    this.invalidElements.push(element.name + "  " + problem);
-                }
-                return !problem;
-            });
-            return this.workingElements;
-        },
-        /** describe what is wrong with a particular element if anything */
-        _isElementInvalid: function (element) {
-            if (element.history_content_type === "dataset_collection") {
-                return _l("is a collection, this is not allowed");
-            }
-            var validState = element.state === STATES.OK || STATES.NOT_READY_STATES.includes(element.state);
-            if (!validState) {
-                return _l("has errored, is paused, or is not accessible");
-            }
-            if (element.deleted || element.purged) {
-                return _l("has been deleted or purged");
-            }
-            return null;
-        },
-        /** sort initial list */
-        _sortInitialList: function () {
-            //console.debug( '-- _sortInitialList' );
-            this._sortDatasetList(this.workingElements);
-        },
-
-        /** sort a list of datasets */
-        _sortDatasetList: function (list) {
-            // currently only natural sort by name
-            list.sort((a, b) => naturalSort(a.name, b.name));
-            return list;
-        },
-        filterElements: function (elements, filterText) {
-            return elements.filter((e) => this.filterElement(e, filterText));
-        },
-        filterElement: function (element, filterText) {
-            return filterText == "" || new RegExp(filterText).test(element.name);
-        },
-        forwardElementSelected: function (e) {
-            if (this.selectedForwardElement == null || !this.selectedForwardElement.id == e.id) {
-                this.selectedForwardElement = e;
-            } else {
-                this.selectedForwardElement = null;
-            }
-            if (
-                this.selectedForwardElement &&
-                this.selectedReverseElement &&
-                this.selectedReverseElement != this.selectedForwardElement
-            ) {
-                this._pair(this.selectedForwardElement, this.selectedReverseElement);
-            }
-        },
-        reverseElementSelected: function (e) {
-            if (this.selectedReverseElement == null || !this.selectedReverseElement.id == e.id) {
-                this.selectedReverseElement = e;
-            } else {
-                this.selectedReverseElement = null;
-            }
-            if (
-                this.selectedForwardElement &&
-                this.selectedReverseElement &&
-                this.selectedReverseElement != this.selectedForwardElement
-            ) {
-                this._pair(this.selectedForwardElement, this.selectedReverseElement);
-            }
-        },
-
-        // ------------------------------------------------------------------------ pairing / unpairing
-        /** create a pair from fwd and rev, removing them from unpaired, and placing the new pair in paired */
-        _pair: function (fwd, rev, options) {
-            options = options || {};
-            var pair = this._createPair(fwd, rev, options.name);
-            this.pairedElements.push(pair);
-            this.removePairFromUnpaired(fwd, rev);
-            if (!options.silent) {
-                this.$emit("pair:new", pair);
-            }
-            return pair;
-        },
-        removePairFromUnpaired: function (fwd, rev) {
-            this.workingElements.splice(this.workingElements.indexOf(rev), 1);
-            this.workingElements.splice(this.workingElements.indexOf(fwd), 1);
-            this.selectedForwardElement = null;
-            this.selectedReverseElement = null;
-        },
-        /** create a pair Object from fwd and rev, adding the name attribute (will guess if not given) */
-        _createPair: function (fwd, rev, name) {
-            // ensure existance and don't pair something with itself
-            if (!(fwd && rev) || fwd === rev) {
-                throw new Error(`Bad pairing: ${[JSON.stringify(fwd), JSON.stringify(rev)]}`);
-            }
-            name = name || this._guessNameForPair(fwd, rev);
-            return { forward: fwd, name: name, reverse: rev };
-        },
-        /** try to find a good pair name for the given fwd and rev datasets */
-        _guessNameForPair: function (fwd, rev, removeExtensions) {
-            removeExtensions = removeExtensions ? removeExtensions : this.removeExtensions;
-            let fwdName = fwd.name;
-            let revName = rev.name;
-            const fwdNameFilter = fwdName.replace(new RegExp(this.forwardFilter), "");
-            const revNameFilter = revName.replace(new RegExp(this.reverseFilter), "");
-            let lcs = this._naiveStartingAndEndingLCS(fwdNameFilter, revNameFilter);
-            /** remove url prefix if files were uploaded by url */
-            const lastSlashIndex = lcs.lastIndexOf("/");
-            if (lastSlashIndex > 0) {
-                const urlprefix = lcs.slice(0, lastSlashIndex + 1);
-                lcs = lcs.replace(urlprefix, "");
-            }
-
-            if (removeExtensions) {
-                const lastDotIndex = lcs.lastIndexOf(".");
-                if (lastDotIndex > 0) {
-                    const extension = lcs.slice(lastDotIndex, lcs.length);
-                    lcs = lcs.replace(extension, "");
-                    fwdName = fwdName.replace(extension, "");
-                    revName = revName.replace(extension, "");
-                }
-            }
-            if (lcs.endsWith(".") || lcs.endsWith("_")) {
-                lcs = lcs.substring(0, lcs.length - 1);
-            }
-            return lcs || `${fwdName} & ${revName}`;
-        },
-        clickAutopair: function () {
-            // Unselect any selected elements
-            this.selectedForwardElement = null;
-            this.selectedReverseElement = null;
-            this.autoPair();
-            this.workingElements = this.workingElements.filter((e) => !this.pairedElements.includes(e));
-        },
-        clickUnpair: function (pair) {
-            return () => this._unpair(pair);
-        },
-        clickClearFilters: function () {
-            this.forwardFilter = "";
-            this.reverseFilter = "";
-        },
-        splitByFilter: function () {
-            var filters = [new RegExp(this.forwardFilter), new RegExp(this.reverseFilter)];
-            var split = [[], []];
-            this.workingElements.forEach((e) => {
-                filters.forEach((filter, i) => {
-                    if (filter.test(e.name)) {
-                        split[i].push(e);
-                    }
-                });
-            });
-            return split;
-        },
-        // ------------------------------------------------------------------------ auto pairing
-        /** two passes to automatically create pairs:
-         *  use both simpleAutoPair, then the fn mentioned in strategy
-         */
-        autoPair: function (strategy) {
-            var split = this.splitByFilter();
-            var paired = [];
-            if (this.twoPassAutopairing) {
-                var simplePaired = this.autopairSimple({
-                    listA: split[0],
-                    listB: split[1],
-                });
-                paired = simplePaired ? simplePaired : paired;
-                split = this.splitByFilter();
-            }
-
-            // uncomment to see printlns while running tests
-            //console.debug = function(){ console.log.apply( console, arguments ); };
-
-            // then try the remainder with something less strict
-            strategy = strategy || this.strategy;
-            split = this.splitByFilter();
-            var pairedStrategy = strategy.call(this, {
-                listA: split[0],
-                listB: split[1],
-            });
-            paired = pairedStrategy ? paired.concat(pairedStrategy) : paired;
-            return paired;
-        },
-        /** add a dataset to the unpaired list in it's proper order */
-        _addToUnpaired: function (dataset) {
-            // currently, unpaired is natural sorted by name, use binary search to find insertion point
-            var binSearchSortedIndex = (low, hi) => {
-                if (low === hi) {
-                    return low;
-                }
-
-                var mid = Math.floor((hi - low) / 2) + low;
-
-                var compared = naturalSort(dataset.name, this.workingElements[mid].name);
-
-                if (compared < 0) {
-                    return binSearchSortedIndex(low, mid);
-                } else if (compared > 0) {
-                    return binSearchSortedIndex(mid + 1, hi);
-                }
-                // walk the equal to find the last
-                while (this.workingElements[mid] && this.workingElements[mid].name === dataset.name) {
-                    mid++;
-                }
-                return mid;
-            };
-
-            this.workingElements.splice(binSearchSortedIndex(0, this.workingElements.length), 0, dataset);
-        },
-        /** unpair a pair, removing it from paired, and adding the fwd,rev datasets back into unpaired */
-        _unpair: function (pair) {
-            if (!pair) {
-                throw new Error(`Bad pair: ${JSON.stringify(pair)}`);
-            }
-            this.pairedElements.splice(this.pairedElements.indexOf(pair), 1);
-            this._addToUnpaired(pair.forward);
-            this._addToUnpaired(pair.reverse);
-
-            return pair;
-        },
-        /** unpair all paired datasets */
-        unpairAll: function () {
-            var pairs = [];
-            while (this.pairedElements.length) {
-                pairs.push(this._unpair(this.pairedElements[0], { silent: true }));
-            }
-        },
-        // ============================================================================
-        /** returns an autopair function that uses the provided options.match function */
-        autoPairFnBuilder: function (options) {
-            options = options || {};
-            options.createPair =
-                options.createPair ||
-                function _defaultCreatePair(params) {
-                    params = params || {};
-                    var a = params.listA.splice(params.indexA, 1)[0];
-                    var b = params.listB.splice(params.indexB, 1)[0];
-                    var aInBIndex = params.listB.indexOf(a);
-                    var bInAIndex = params.listA.indexOf(b);
-                    if (aInBIndex !== -1) {
-                        params.listB.splice(aInBIndex, 1);
-                    }
-                    if (bInAIndex !== -1) {
-                        params.listA.splice(bInAIndex, 1);
-                    }
-                    return this._pair(a, b, { silent: true });
-                };
-            // compile these here outside of the loop
-            var _regexps = [];
-            function getRegExps() {
-                if (!_regexps.length) {
-                    _regexps = [new RegExp(this.forwardFilter), new RegExp(this.reverseFilter)];
-                }
-                return _regexps;
-            }
-            // mangle params as needed
-            options.preprocessMatch =
-                options.preprocessMatch ||
-                function _defaultPreprocessMatch(params) {
-                    var regexps = getRegExps.call(this);
-                    return Object.assign(params, {
-                        matchTo: params.matchTo.name.replace(regexps[0], ""),
-                        possible: params.possible.name.replace(regexps[1], ""),
-                    });
-                };
-
-            return function _strategy(params) {
-                // console.debug("autopair _strategy ---------------------------");
-                params = params || {};
-                var listA = params.listA;
-                var listB = params.listB;
-                var indexA = 0;
-                var indexB;
-
-                var bestMatch = {
-                    score: 0.0,
-                    index: null,
-                };
-
-                var paired = [];
-                //console.debug( 'params:', JSON.stringify( params, null, '  ' ) );
-                // console.debug("starting list lens:", listA.length, listB.length);
-                // console.debug("bestMatch (starting):", JSON.stringify(bestMatch, null, "  "));
-
-                while (indexA < listA.length) {
-                    var matchTo = listA[indexA];
-                    bestMatch.score = 0.0;
-
-                    for (indexB = 0; indexB < listB.length; indexB++) {
-                        var possible = listB[indexB];
-                        // console.debug(`${indexA}:${matchTo.name}`);
-                        // console.debug(`${indexB}:${possible.name}`);
-
-                        // no matching with self
-                        if (listA[indexA] !== listB[indexB]) {
-                            bestMatch = options.match.call(
-                                this,
-                                options.preprocessMatch.call(this, {
-                                    matchTo: matchTo,
-                                    possible: possible,
-                                    index: indexB,
-                                    bestMatch: bestMatch,
-                                })
-                            );
-                            // console.debug("bestMatch:", JSON.stringify(bestMatch, null, "  "));
-                            if (bestMatch.score === 1.0) {
-                                // console.debug("breaking early due to perfect match");
-                                break;
-                            }
-                        }
-                    }
-                    var scoreThreshold = options.scoreThreshold.call(this);
-                    // console.debug("scoreThreshold:", scoreThreshold);
-                    // console.debug("bestMatch.score:", bestMatch.score);
-
-                    if (bestMatch.score >= scoreThreshold) {
-                        //console.debug( 'autoPairFnBuilder.strategy', listA[ indexA ].name, listB[ bestMatch.index ].name );
-                        paired.push(
-                            options.createPair.call(this, {
-                                listA: listA,
-                                indexA: indexA,
-                                listB: listB,
-                                indexB: bestMatch.index,
-                            })
-                        );
-                        //console.debug( 'list lens now:', listA.length, listB.length );
-                    } else {
-                        indexA += 1;
-                    }
-                    if (!listA.length || !listB.length) {
-                        return paired;
-                    }
-                }
-                // console.debug("paired:", JSON.stringify(paired, null, "  "));
-                // console.debug("autopair _strategy ---------------------------");
-                return paired;
-            };
-        },
-        changeFilters: function (filter) {
-            this.forwardFilter = this.commonFilters[filter][0];
-            this.reverseFilter = this.commonFilters[filter][1];
-        },
-        clickedCreate: function (collectionName) {
-            this.checkForDuplicates();
-            if (this.state == "build") {
-                this.$emit("clicked-create", this.workingElements, this.collectionName, this.hideSourceItems);
-                return this.creationFn(this.pairedElements, collectionName, this.hideSourceItems)
-                    .done(this.oncreate)
-                    .fail(() => {
-                        this.state = "error";
-                    });
-            }
-        },
-        checkForDuplicates: function () {
-            var existingPairNames = {};
-            this.duplicatePairNames = [];
-            var valid = true;
-            this.pairedElements.forEach((pair) => {
-                if (Object.prototype.hasOwnProperty.call(existingPairNames, pair.name)) {
-                    valid = false;
-                    this.duplicatePairNames.push(pair.name);
-                }
-                existingPairNames[pair.name] = true;
-            });
-            this.state = valid ? "build" : "duplicates";
-        },
-        stripExtension(name) {
-            return name.includes(".") ? name.substring(0, name.lastIndexOf(".")) : name;
-        },
-    },
-};
-</script>
 <style lang="scss">
 $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
 @import "~@fortawesome/fontawesome-free/scss/_variables";
@@ -1060,6 +1342,13 @@ li.dataset.paired {
 .column-datasets {
     list-style: none;
     overflow: hidden;
+    .dragged-pair {
+        border-top: 2px solid black;
+    }
+    .unpair-btn {
+        border: none;
+        flex-shrink: 0;
+    }
     .dataset {
         height: 32px;
         margin-top: 2px;
@@ -1075,39 +1364,26 @@ li.dataset.paired {
             border-color: grey;
         }
         &.paired {
-            margin-left: 34px;
-            margin-right: 34px;
+            white-space: nowrap;
+            overflow: hidden;
             border: 2px solid grey;
             background: #aff1af;
-            height: auto;
+            text-align: center;
             span {
                 display: inline-block;
-                overflow: visible !important;
             }
             .forward-dataset-name {
                 text-align: right;
                 border-right: 1px solid grey;
                 padding-right: 8px;
-                &:after {
-                    @extend .fas;
-                    margin-left: 8px;
-                    content: fa-content($fa-var-arrow-right);
-                }
             }
             .pair-name-column {
+                padding: 0 8px;
                 text-align: center;
-                .pair-name:hover {
-                    text-decoration: underline;
-                }
             }
             .reverse-dataset-name {
                 border-left: 1px solid grey;
                 padding-left: 8px;
-                &:before {
-                    @extend .fas;
-                    margin-right: 8px;
-                    content: fa-content($fa-var-arrow-left);
-                }
             }
         }
         &:hover {
@@ -1143,14 +1419,41 @@ li.dataset.paired {
     }
     .reverse-column {
         .dataset.unpaired {
-            text-align: right;
             margin-left: 32px;
         }
     }
+    .dataset.unpaired {
+        white-space: nowrap;
+        overflow: hidden;
+        box-sizing: border-box;
+        position: relative;
+        .element-name {
+            display: inline-block;
+            position: relative;
+            min-width: 100%;
+        }
+        &:hover {
+            .element-name.moves {
+                animation: move-right 1s linear forwards;
+            }
+        }
+    }
+    @keyframes move-right {
+        10% {
+            transform: translate(0, 0);
+            left: 0%;
+        }
+        100% {
+            transform: translate(-100%, 0);
+            left: 100%;
+        }
+    }
 }
+
 .column-header {
     width: 100%;
     text-align: center;
+    justify-content: end;
     .column-title {
         display: inline;
     }
@@ -1168,21 +1471,6 @@ li.dataset.paired {
     .column-datasets {
         width: 100%;
     }
-    .unpair-btn {
-        float: right;
-        margin-top: -32px;
-        width: 31px;
-        height: 32px;
-        //z-index: 1;
-        border-color: transparent;
-        //border-color: #BFBFBF;
-        background: transparent;
-        font-size: 120%;
-        &:hover {
-            border-color: #bfbfbf;
-            background: #dedede;
-        }
-    }
     .empty-message {
         text-align: center;
     }
diff --git a/client/src/components/Collections/PairedListCollectionCreatorModal.js b/client/src/components/Collections/PairedListCollectionCreatorModal.js
deleted file mode 100644
index cab346fc7c63..000000000000
--- a/client/src/components/Collections/PairedListCollectionCreatorModal.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import _l from "utils/localization";
-import Vue from "vue";
-
-import { collectionCreatorModalSetup } from "./common/modal";
-
-import PairedListCollectionCreator from "./PairedListCollectionCreator.vue";
-
-function pairedListCollectionCreatorModal(elements, options) {
-    options = options || {};
-    options.title = _l("Create a collection of paired datasets");
-    const { promise, showEl } = collectionCreatorModalSetup(options);
-    var pairedListCollectionCreatorInstance = Vue.extend(PairedListCollectionCreator);
-    var vm = document.createElement("div");
-    showEl(vm);
-    new pairedListCollectionCreatorInstance({
-        propsData: {
-            initialElements: elements,
-            creationFn: options.creationFn,
-            oncancel: options.oncancel,
-            oncreate: options.oncreate,
-            defaultHideSourceItems: options.defaultHideSourceItems,
-        },
-    }).$mount(vm);
-    return promise;
-}
-
-/** Use a modal to create a list collection, then add it to the given history contents.
- *  @returns {Promise} resolved when the collection is added to the history.
- */
-function createPairedListCollection(contents, defaultHideSourceItems) {
-    const elements = contents.toJSON();
-    const promise = pairedListCollectionCreatorModal(elements, {
-        defaultHideSourceItems: defaultHideSourceItems,
-        creationFn: function (elements, name, hideSourceItems) {
-            elements = elements.map((pair) => ({
-                collection_type: "paired",
-                src: "new_collection",
-                name: pair.name,
-                element_identifiers: [
-                    {
-                        name: "forward",
-                        id: pair.forward.id,
-                        src: pair.forward.src || "hda",
-                    },
-                    {
-                        name: "reverse",
-                        id: pair.reverse.id,
-                        src: pair.reverse.src || "hda",
-                    },
-                ],
-            }));
-            return contents.createHDCA(elements, "list:paired", name, hideSourceItems);
-        },
-    });
-    return promise;
-}
-export default {
-    pairedListCollectionCreatorModal: pairedListCollectionCreatorModal,
-    createPairedListCollection: createPairedListCollection,
-};
diff --git a/client/src/components/Collections/UnpairedDatasetElementView.vue b/client/src/components/Collections/UnpairedDatasetElementView.vue
index 91494a082fea..553765c66b50 100644
--- a/client/src/components/Collections/UnpairedDatasetElementView.vue
+++ b/client/src/components/Collections/UnpairedDatasetElementView.vue
@@ -1,21 +1,66 @@
 <script setup lang="ts">
+import { computed, ref } from "vue";
+
+import type { HDASummary } from "@/api";
+import { useAnimationFrameSize } from "@/composables/sensors/animationFrameSize";
+
 interface Props {
-    // TODO: Define the type of the element
-    element: any;
+    element: HDASummary;
+    disabled?: boolean;
+    showExtension?: boolean;
+    showHid?: boolean;
 }
 
-defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+    showExtension: true,
+    showHid: true,
+});
 
 const emit = defineEmits<{
-    // TODO: Define the type of the element
-    (event: "element-is-selected", element: any): void;
+    (event: "element-is-selected", element: HDASummary): void;
 }>();
+
+const unpairedElement = ref<HTMLElement | null>(null);
+const elementName = ref<HTMLElement | null>(null);
+
+const { width: parentWidth } = useAnimationFrameSize(unpairedElement);
+
+const childWidth = computed(() => elementName.value?.clientWidth);
+const shouldMoveElement = computed(() => {
+    if (childWidth.value && parentWidth.value && childWidth.value <= parentWidth.value) {
+        return false;
+    } else {
+        return true;
+    }
+});
+
+function getExtension(): string {
+    return "extension" in props.element && props.element.extension ? props.element.extension : "";
+}
 </script>
 
 <template>
-    <li class="dataset unpaired" @click="emit('element-is-selected', element)">
-        <label>
-            {{ element.name }}
-        </label>
+    <li
+        ref="unpairedElement"
+        class="dataset unpaired"
+        :class="{ disabled: props.disabled }"
+        :aria-disabled="props.disabled"
+        role="button"
+        tabindex="0"
+        @keydown.enter="emit('element-is-selected', props.element)"
+        @click="emit('element-is-selected', props.element)">
+        <span ref="elementName" class="element-name" :class="{ moves: shouldMoveElement }">
+            <span v-if="props.showHid">{{ props.element.hid }}:</span>
+            <strong>{{ props.element.name }}</strong>
+            <i v-if="props.showExtension"> ({{ getExtension() }}) </i>
+        </span>
     </li>
 </template>
+
+<style scoped>
+.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}
+</style>
diff --git a/client/src/components/Collections/common/ClickToEdit.vue b/client/src/components/Collections/common/ClickToEdit.vue
index da60f01880d9..b77925d65a1d 100644
--- a/client/src/components/Collections/common/ClickToEdit.vue
+++ b/client/src/components/Collections/common/ClickToEdit.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { faSave } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { computed, ref, watch } from "vue";
 
 interface Props {
     value: string;
@@ -15,38 +18,52 @@ const emit = defineEmits<{
 const editable = ref(false);
 const localValue = ref(props.value);
 
-watch(
-    () => localValue.value,
-    (newLocalValue) => {
-        emit("input", newLocalValue);
-    }
-);
+const computedValue = computed(() => props.value);
 
 watch(
-    () => props.value,
-    (newValue) => {
-        localValue.value = newValue;
+    () => editable.value,
+    (value) => {
+        if (!value) {
+            emit("input", localValue.value);
+        }
     }
 );
 </script>
 
 <template>
-    <input
-        v-if="editable"
-        v-model="localValue"
-        class="click-to-edit-input"
-        contenteditable
-        @blur="editable = false"
-        @keyup.enter="editable = false" />
-
-    <label v-else @click="editable = true">
-        {{ localValue }}
+    <div v-if="editable">
+        <input
+            id="click-to-edit-input"
+            v-model="localValue"
+            tabindex="0"
+            contenteditable
+            @blur.prevent.stop="editable = false"
+            @keyup.prevent.stop.enter="editable = false"
+            @keyup.prevent.stop.escape="editable = false"
+            @click.prevent.stop />
+        <BButton class="p-0" style="border: none" variant="link" size="sm" @click.prevent.stop="editable = false">
+            <FontAwesomeIcon :icon="faSave" />
+        </BButton>
+    </div>
+
+    <label
+        v-else
+        role="button"
+        for="click-to-edit-input"
+        class="click-to-edit-label"
+        tabindex="0"
+        @keyup.enter="editable = true"
+        @click.stop="editable = true">
+        <span v-if="computedValue">{{ computedValue }}</span>
+        <i v-else>{{ title }}</i>
     </label>
 </template>
 
 <style scoped lang="scss">
-.click-to-edit-input {
-    width: 600px;
-    line-height: 1 !important;
+.click-to-edit-label {
+    cursor: text;
+    &:hover > * {
+        text-decoration: underline;
+    }
 }
 </style>
diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index 8ef14660d999..11cb51c9a8bb 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -1,38 +1,112 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { faChevronDown, faChevronUp, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BFormCheckbox, BFormGroup, BFormInput, BTab, BTabs } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
+import type { HDASummary } from "@/api";
+import type { CompositeFileInfo } from "@/api/datatypes";
+import { AUTO_EXTENSION, getUploadDatatypes } from "@/components/Upload/utils";
+import { useConfig } from "@/composables/config";
+import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
+import { orList } from "@/utils/strings";
 
-library.add(faChevronDown, faChevronUp);
+import HelpText from "@/components/Help/HelpText.vue";
+import DefaultBox from "@/components/Upload/DefaultBox.vue";
+
+const Tabs = {
+    create: 0,
+    upload: 1,
+};
+
+type ExtensionDetails = {
+    id: string;
+    text: string;
+    description: string | null;
+    description_url: string | null;
+    composite_files?: CompositeFileInfo[] | null;
+    upload_warning?: string | null;
+};
 
 interface Props {
     oncancel: () => void;
+    historyId: string;
     hideSourceItems: boolean;
     suggestedName?: string;
     renderExtensionsToggle?: boolean;
+    extensions?: string[];
+    extensionsToggle?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     suggestedName: "",
+    extensions: undefined,
+    extensionsToggle: false,
 });
 
 const emit = defineEmits<{
     (e: "remove-extensions-toggle"): void;
     (e: "clicked-create", value: string): void;
     (e: "onUpdateHideSourceItems", value: boolean): void;
+    (e: "on-update-datatype-toggle", value: "all" | "datatype" | "ext"): void;
+    (e: "add-uploaded-files", value: HDASummary[]): void;
 }>();
 
 const isExpanded = ref(false);
+const currentTab = ref(Tabs.create);
 const collectionName = ref(props.suggestedName);
 const localHideSourceItems = ref(props.hideSourceItems);
+const listExtensions = ref<ExtensionDetails[]>([]);
+const extensionsSet = ref(false);
 
 const validInput = computed(() => {
     return collectionName.value.length > 0;
 });
 
+// If there are props.extensions, filter the list of extensions to only include those
+const validExtensions = computed(() => {
+    return listExtensions.value.filter((ext) => props.extensions?.includes(ext.id));
+});
+
+// Upload properties
+const { config, isConfigLoaded } = useConfig();
+
+const { currentUser } = storeToRefs(useUserStore());
+
+const configOptions = computed(() =>
+    isConfigLoaded.value
+        ? {
+              chunkUploadSize: config.value.chunk_upload_size,
+              fileSourcesConfigured: config.value.file_sources_configured,
+              ftpUploadSite: config.value.ftp_upload_site,
+              defaultDbKey: config.value.default_genome || "",
+              defaultExtension: config.value.default_extension || "",
+          }
+        : {}
+);
+
+const ftpUploadSite = computed(() =>
+    currentUser.value && "id" in currentUser.value ? configOptions.value.ftpUploadSite : null
+);
+
+const defaultExtension = computed(() => {
+    if (!configOptions.value || !extensionsSet.value) {
+        return "auto";
+    } else if (!props.extensions?.length) {
+        return configOptions.value.defaultExtension || "auto";
+    } else {
+        return props.extensions[0];
+    }
+});
+
+function addUploadedFiles(value: HDASummary[]) {
+    // TODO: We really need to wait for each of these items to get `state = 'ok'`
+    //       before we can add them to the collection.
+    emit("add-uploaded-files", value);
+}
+
 function clickForHelp() {
     isExpanded.value = !isExpanded.value;
     return isExpanded.value;
@@ -42,6 +116,13 @@ function cancelCreate() {
     props.oncancel();
 }
 
+async function loadExtensions() {
+    listExtensions.value = await getUploadDatatypes(false, AUTO_EXTENSION);
+    extensionsSet.value = true;
+}
+
+loadExtensions();
+
 watch(
     () => localHideSourceItems.value,
     () => {
@@ -51,90 +132,148 @@ watch(
 </script>
 
 <template>
-    <div class="collection-creator">
-        <div class="header flex-row no-flex">
-            <div class="main-help well clear" :class="{ expanded: isExpanded }">
-                <a
-                    class="more-help"
-                    href="javascript:void(0);"
-                    role="button"
-                    :title="localize('Expand or Close Help')"
-                    @click="clickForHelp">
-                    <div v-if="!isExpanded">
-                        <FontAwesomeIcon :icon="faChevronDown" />
-                    </div>
-                    <div v-else>
-                        <FontAwesomeIcon :icon="faChevronUp" />
-                    </div>
-                </a>
-
-                <div class="help-content">
-                    <!-- each collection that extends this will add their own help content -->
-                    <slot name="help-content"></slot>
-
+    <BTabs v-model="currentTab" fill justified>
+        <BTab class="collection-creator" :title="localize('Create Collection')">
+            <div class="header flex-row no-flex">
+                <div class="main-help well clear" :class="{ expanded: isExpanded }">
                     <a
                         class="more-help"
                         href="javascript:void(0);"
                         role="button"
                         :title="localize('Expand or Close Help')"
                         @click="clickForHelp">
+                        <div v-if="!isExpanded">
+                            <FontAwesomeIcon :icon="faChevronDown" />
+                            <span class="sr-only">{{ localize("Expand Help") }}</span>
+                        </div>
+                        <div v-else>
+                            <FontAwesomeIcon :icon="faChevronUp" />
+                            <span class="sr-only">{{ localize("Close Help") }}</span>
+                        </div>
                     </a>
+
+                    <div class="help-content">
+                        <!-- each collection that extends this will add their own help content -->
+                        <slot name="help-content"></slot>
+
+                        <a
+                            class="more-help"
+                            href="javascript:void(0);"
+                            role="button"
+                            :title="localize('Expand or Close Help')"
+                            @click="clickForHelp">
+                            <span class="sr-only">{{ localize("Expand Help") }}</span>
+                        </a>
+                    </div>
                 </div>
             </div>
-        </div>
-
-        <div class="middle flex-row flex-row-container">
-            <slot name="middle-content"></slot>
-        </div>
-
-        <div class="footer flex-row no-flex">
-            <div class="attributes clear">
-                <div class="clear">
-                    <label v-if="renderExtensionsToggle" class="setting-prompt float-right">
-                        {{ localize("Remove file extensions?") }}
-                        <input
-                            class="remove-extensions float-right"
-                            type="checkbox"
-                            checked
-                            @click="emit('remove-extensions-toggle')" />
-                    </label>
-
-                    <label class="setting-prompt float-right">
-                        {{ localize("Hide original elements?") }}
-                        <input v-model="localHideSourceItems" class="hide-originals float-right" type="checkbox" />
-                    </label>
-                </div>
 
-                <div class="clear">
-                    <input
-                        v-model="collectionName"
-                        class="collection-name form-control float-right"
-                        :placeholder="localize('Enter a name for your new collection')" />
+            <div class="middle flex-row flex-row-container">
+                <slot name="middle-content"></slot>
+            </div>
 
-                    <div class="collection-name-prompt float-right">
-                        {{ localize("Name:") }}
+            <div class="footer flex-row">
+                <div class="vertically-spaced">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <BAlert v-if="extensions?.length" class="w-100 py-0" variant="secondary" show>
+                            <HelpText
+                                uri="galaxy.collections.collectionBuilder.filteredExtensions"
+                                :text="localize('Filtered extensions: ')" />
+                            <strong>{{ orList(extensions) }}</strong>
+                        </BAlert>
+                    </div>
+
+                    <div class="d-flex align-items-center justify-content-between">
+                        <BFormGroup class="inputs-form-group">
+                            <BFormCheckbox
+                                v-if="renderExtensionsToggle"
+                                name="remove-extensions"
+                                switch
+                                :checked="extensionsToggle"
+                                @input="emit('remove-extensions-toggle')">
+                                {{ localize("Remove file extensions?") }}
+                            </BFormCheckbox>
+
+                            <BFormCheckbox
+                                v-model="localHideSourceItems"
+                                name="hide-originals"
+                                data-description="hide original elements"
+                                switch>
+                                <HelpText
+                                    uri="galaxy.collections.collectionBuilder.hideOriginalElements"
+                                    :text="localize('Hide original elements')" />
+                            </BFormCheckbox>
+                        </BFormGroup>
+
+                        <BFormGroup
+                            class="flex-gapx-1 d-flex align-items-center w-50 inputs-form-group"
+                            :label="localize('Name:')"
+                            label-for="collection-name">
+                            <BFormInput
+                                id="collection-name"
+                                v-model="collectionName"
+                                class="collection-name"
+                                :placeholder="localize('Enter a name for your new collection')"
+                                size="sm"
+                                required
+                                :state="!collectionName ? false : null" />
+                        </BFormGroup>
                     </div>
                 </div>
-            </div>
 
-            <div class="actions clear vertically-spaced">
-                <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="cancelCreate">
+                <div class="actions vertically-spaced d-flex justify-content-between">
+                    <BButton tabindex="-1" @click="cancelCreate">
                         {{ localize("Cancel") }}
-                    </button>
-                </div>
+                    </BButton>
 
-                <div class="main-options float-right">
-                    <button
-                        class="create-collection btn btn-primary"
+                    <BButton
+                        class="create-collection"
+                        variant="primary"
                         :disabled="!validInput"
                         @click="emit('clicked-create', collectionName)">
                         {{ localize("Create collection") }}
-                    </button>
+                    </BButton>
                 </div>
             </div>
-        </div>
-    </div>
+        </BTab>
+        <BTab>
+            <template v-slot:title>
+                <FontAwesomeIcon :icon="faUpload" fixed-width />
+                <span>{{ localize("Upload Files to Add to Collection") }}</span>
+            </template>
+            <!-- TODO: This is incomplete; need to return uploadValues to parent -->
+            <DefaultBox
+                v-if="configOptions && extensionsSet"
+                :chunk-upload-size="configOptions.chunkUploadSize"
+                :default-db-key="configOptions.defaultDbKey"
+                :default-extension="defaultExtension"
+                :effective-extensions="props.extensions?.length ? validExtensions : listExtensions"
+                :file-sources-configured="configOptions.fileSourcesConfigured"
+                :ftp-upload-site="ftpUploadSite"
+                :has-callback="false"
+                :history-id="historyId"
+                :list-db-keys="[]"
+                disable-footer
+                emit-uploaded
+                @uploaded="addUploadedFiles"
+                @dismiss="currentTab = Tabs.create">
+                <template v-slot:footer>
+                    <div class="d-flex align-items-center justify-content-between mt-2">
+                        <BAlert v-if="extensions?.length" class="w-100 py-0" variant="secondary" show>
+                            <HelpText
+                                uri="galaxy.collections.collectionBuilder.requiredUploadExtensions"
+                                :text="localize('Required extensions: ')" />
+                            <strong>{{ orList(extensions) }}</strong>
+                        </BAlert>
+                    </div>
+                </template>
+                <template v-slot:emit-btn-txt>
+                    <FontAwesomeIcon :icon="faPlus" fixed-width />
+                    {{ localize("Add Uploaded") }}
+                </template>
+            </DefaultBox>
+        </BTab>
+    </BTabs>
 </template>
 
 <style lang="scss">
@@ -146,9 +285,6 @@ $fa-font-path: "../../../../node_modules/@fortawesome/fontawesome-free/webfonts/
 .collection-creator {
     height: 100%;
     overflow: hidden;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     // ------------------------------------------------------------------------ general
     ol,
     li {
@@ -367,38 +503,11 @@ $fa-font-path: "../../../../node_modules/@fortawesome/fontawesome-free/webfonts/
     }
     // ------------------------------------------------------------------------ footer
     .footer {
-        .attributes {
-            .setting-prompt {
-                //margin-right: 32px;
-                line-height: 32px;
-                padding-left: 10px;
-                .remove-extensions {
-                    display: inline-block;
-                    width: 24px;
-                    height: 24px;
-                }
-                .hide-originals {
-                    display: inline-block;
-                    width: 24px;
-                    height: 24px;
-                }
-            }
-            // actually appears/floats to the left of the input
-            .collection-name-prompt {
-                margin: 5px 4px 0 0;
-            }
-            .collection-name-prompt.validation-warning:before {
-                //TODO: localize (somehow)
-                content: "(required)";
-                margin-right: 4px;
-                color: red;
-            }
-            .collection-name {
-                width: 50%;
-                &.validation-warning {
-                    border-color: red;
-                }
-            }
+        .inputs-form-group > div {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            column-gap: 0.25rem;
         }
         .actions {
             .other-options > * {
diff --git a/client/src/components/Collections/common/modal.js b/client/src/components/Collections/common/modal.js
index a823d1c27657..eaf90715aa3e 100644
--- a/client/src/components/Collections/common/modal.js
+++ b/client/src/components/Collections/common/modal.js
@@ -17,8 +17,14 @@ export function collectionCreatorModalSetup(options, Galaxy = null) {
     });
     const showEl = function (el) {
         const close_event = options.closing_events === undefined || options.closing_events;
+        const title = options.title || _l("Create a collection");
+        const titleSuffix = options.historyName ? `From history: <b>${options.historyName}</b>` : "";
+        const titleHtml = `<div class='d-flex justify-content-between unselectable'>
+                <span>${title}</span>
+                <span>${titleSuffix}</span>
+            </div>`;
         modal.show({
-            title: options.title || _l("Create a collection"),
+            title: titleHtml,
             body: el,
             width: "85%",
             height: "100%",
diff --git a/client/src/components/Collections/common/modal.test.js b/client/src/components/Collections/common/modal.test.js
index e5a0f1384904..97905524972b 100644
--- a/client/src/components/Collections/common/modal.test.js
+++ b/client/src/components/Collections/common/modal.test.js
@@ -41,7 +41,7 @@ describe("modal.js", () => {
         it("should create showEl and resolve oncreate", async () => {
             expect(showOptions).toBe(null);
             showEl();
-            expect(showOptions.title).toEqual("Create a collection");
+            expect(showOptions.title).toContain("Create a collection");
 
             expect(hidden).toBeFalsy();
             options.oncreate(null, "testres");
diff --git a/client/src/components/Common/ButtonSpinner.vue b/client/src/components/Common/ButtonSpinner.vue
index f87f34b33991..31fa475980af 100644
--- a/client/src/components/Common/ButtonSpinner.vue
+++ b/client/src/components/Common/ButtonSpinner.vue
@@ -1,24 +1,27 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { faPlay, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 
-library.add(faPlay, faSpinner);
-
 interface Props {
-    title: string;
+    title?: string;
     wait?: boolean;
     tooltip?: string;
     disabled?: boolean;
     size?: string;
+    variant?: string;
+    icon?: IconDefinition;
 }
 
 withDefaults(defineProps<Props>(), {
+    title: "",
     wait: false,
-    tooltip: undefined,
+    tooltip: "",
     disabled: false,
     size: "md",
+    variant: "primary",
+    icon: undefined,
 });
 </script>
 
@@ -31,19 +34,23 @@ withDefaults(defineProps<Props>(), {
         variant="info"
         title="Please Wait..."
         class="d-flex flex-nowrap align-items-center text-nowrap">
-        <FontAwesomeIcon :icon="faSpinner" class="mr-2" spin />
-        {{ title }}
+        <FontAwesomeIcon :icon="faSpinner" fixed-width spin />
+        <slot>
+            <span v-if="title">{{ title }}</span>
+        </slot>
     </BButton>
     <BButton
         v-else
         v-b-tooltip.hover.bottom
-        variant="primary"
+        :variant="variant"
         class="d-flex flex-nowrap align-items-center text-nowrap"
         :title="tooltip"
         :disabled="disabled"
         :size="size"
         @click="$emit('onClick')">
-        <FontAwesomeIcon :icon="faPlay" class="mr-2" />
-        {{ title }}
+        <FontAwesomeIcon :icon="!icon ? faPlay : icon" fixed-width />
+        <slot>
+            <span v-if="title">{{ title }}</span>
+        </slot>
     </BButton>
 </template>
diff --git a/client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts b/client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts
index bc49c53c547d..266d2128a1b7 100644
--- a/client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts
+++ b/client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts
@@ -32,7 +32,7 @@ const FAKE_MONITOR: TaskMonitor = {
     isCompleted: ref(false),
     hasFailed: ref(false),
     requestHasFailed: ref(false),
-    status: ref(),
+    taskStatus: ref(""),
     expirationTime: FAKE_EXPIRATION_TIME,
     isFinalState: jest.fn(),
     loadStatus: jest.fn(),
diff --git a/client/src/components/Datatypes/model.ts b/client/src/components/Datatypes/model.ts
index 77826b73fc13..e0c2248031c4 100644
--- a/client/src/components/Datatypes/model.ts
+++ b/client/src/components/Datatypes/model.ts
@@ -39,4 +39,10 @@ export class DatatypesMapperModel {
     isSubTypeOfAny(child: string, parents: DatatypesCombinedMap["datatypes"]): boolean {
         return parents.some((parent) => this.isSubType(child, parent));
     }
+
+    /** For classes like `galaxy.datatypes.{parent}.{extension}`, get the extension's parent */
+    getParentDatatype(extension: string) {
+        const fullClassName = this.datatypesMapping.ext_to_class_name[extension];
+        return fullClassName?.split(".")[2];
+    }
 }
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 6a97be9c2ec5..d2a0e0b87ce9 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -1,9 +1,16 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
-import { faCaretDown, faCaretUp, faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
+import {
+    faCaretDown,
+    faCaretUp,
+    faExclamation,
+    faLink,
+    faPlus,
+    faSpinner,
+    faUnlink,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup, BCollapse, BFormCheckbox, BTooltip } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
 import { computed, onMounted, type Ref, ref, watch } from "vue";
 
 import { isDatasetElement, isDCE } from "@/api";
@@ -11,16 +18,22 @@ import { getGalaxyInstance } from "@/app";
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
 import { useUid } from "@/composables/utils/uid";
 import { type EventData, useEventStore } from "@/stores/eventStore";
+import { useHistoryStore } from "@/stores/historyStore";
 import { orList } from "@/utils/strings";
 
 import type { DataOption } from "./types";
 import { BATCH, SOURCE, VARIANTS } from "./variants";
 
 import FormSelection from "../FormSelection.vue";
+import CollectionCreatorModal from "@/components/Collections/CollectionCreatorModal.vue";
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 
-library.add(faCopy, faFile, faFolder, faCaretDown, faCaretUp, faExclamation, faLink, faUnlink);
+const COLLECTION_TYPE_TO_LABEL: Record<string, string> = {
+    list: "list",
+    "list:paired": "list of dataset pairs",
+    paired: "dataset pair",
+};
 
 type SelectOption = {
     label: string;
@@ -73,6 +86,11 @@ const currentHighlighting: Ref<string | null> = ref(null);
 const dragData: Ref<EventData | null> = ref(null);
 const dragTarget: Ref<EventTarget | null> = ref(null);
 
+// Collection creator modal settings
+const collectionModalShow = ref(false);
+const collectionModalType = ref<"list" | "list:paired" | "paired">("list");
+const { currentHistoryId } = storeToRefs(useHistoryStore());
+
 /** Store options which need to be preserved **/
 const keepOptions: Record<string, SelectOption> = {};
 
@@ -471,6 +489,23 @@ function canAcceptSrc(historyContentType: "dataset" | "dataset_collection", coll
     }
 }
 
+/** Allowed collection types for collection creation */
+const effectiveCollectionTypes = props.collectionTypes?.filter((collectionType) =>
+    ["list", "list:paired", "paired"].includes(collectionType)
+);
+
+function buildNewCollection(collectionType: string) {
+    if (!["list", "list:paired", "paired"].includes(collectionType)) {
+        throw Error(`Unknown collection type: ${collectionType}`);
+    }
+    collectionModalType.value = collectionType as "list" | "list:paired" | "paired";
+    collectionModalShow.value = true;
+}
+
+function createdCollection(collection: any) {
+    handleIncoming(collection);
+}
+
 // Drag/Drop event handlers
 function onDragEnter(evt: MouseEvent) {
     const eventData = eventStore.getDragData();
@@ -599,15 +634,26 @@ const noOptionsWarningMessage = computed(() => {
                     <FontAwesomeIcon :icon="['far', v.icon]" />
                 </BButton>
                 <BButton v-if="canBrowse" v-b-tooltip.hover.bottom title="Browse or Upload Datasets" @click="onBrowse">
-                    <FontAwesomeIcon v-if="loading" icon="fa-spinner" spin />
+                    <FontAwesomeIcon v-if="loading" :icon="faSpinner" spin />
                     <span v-else class="font-weight-bold">...</span>
                 </BButton>
+                <BButtonGroup v-if="effectiveCollectionTypes?.length > 0" size="sm" buttons>
+                    <BButton
+                        v-for="collectionType in effectiveCollectionTypes"
+                        :key="collectionType"
+                        v-b-tooltip.hover.bottom
+                        :title="`Create a new ${COLLECTION_TYPE_TO_LABEL[collectionType]}`"
+                        :variant="formattedOptions.length === 0 ? 'warning' : 'secondary'"
+                        @click="buildNewCollection(collectionType)">
+                        <FontAwesomeIcon :icon="faPlus" fixed-width />
+                    </BButton>
+                </BButtonGroup>
             </BButtonGroup>
             <div v-if="extensions && extensions.length > 0">
                 <BButton :id="formatsButtonId" class="ui-link" @click="formatsVisible = !formatsVisible">
                     accepted formats
-                    <FontAwesomeIcon v-if="formatsVisible" icon="fa-caret-up" />
-                    <FontAwesomeIcon v-else icon="fa-caret-down" />
+                    <FontAwesomeIcon v-if="formatsVisible" :icon="faCaretUp" />
+                    <FontAwesomeIcon v-else :icon="faCaretDown" />
                 </BButton>
                 <BCollapse v-model="formatsVisible">
                     <ul class="pl-3 m-0">
@@ -631,7 +677,7 @@ const noOptionsWarningMessage = computed(() => {
             :options="formattedOptions"
             :placeholder="`Select a ${placeholder}`">
             <template v-slot:no-options>
-                <BAlert variant="warning" show>
+                <BAlert class="w-100 align-items-center" variant="warning" show>
                     {{ noOptionsWarningMessage }}
                 </BAlert>
             </template>
@@ -643,6 +689,14 @@ const noOptionsWarningMessage = computed(() => {
             optional
             multiple />
 
+        <CollectionCreatorModal
+            v-if="currentHistoryId && effectiveCollectionTypes?.length > 0"
+            :history-id="currentHistoryId"
+            :collection-type="collectionModalType"
+            :extensions="props.extensions.filter((ext) => ext !== 'data')"
+            :show-modal.sync="collectionModalShow"
+            @created-collection="createdCollection" />
+
         <template v-if="currentVariant && currentVariant.batch !== BATCH.DISABLED">
             <BFormCheckbox
                 v-if="currentVariant.batch === BATCH.ENABLED"
@@ -650,18 +704,18 @@ const noOptionsWarningMessage = computed(() => {
                 class="checkbox no-highlight"
                 switch>
                 <span v-if="currentLinked">
-                    <FontAwesomeIcon icon="fa-link" />
+                    <FontAwesomeIcon :icon="faLink" />
                     <b v-localize class="mr-1">Linked:</b>
                     <span v-localize>Datasets will be run in matched order with other datasets.</span>
                 </span>
                 <span v-else>
-                    <FontAwesomeIcon icon="fa-unlink" />
+                    <FontAwesomeIcon :icon="faUnlink" />
                     <b v-localize class="mr-1">Unlinked:</b>
                     <span v-localize>Dataset will be run against *all* other datasets.</span>
                 </span>
             </BFormCheckbox>
             <div class="info text-info">
-                <FontAwesomeIcon icon="fa-exclamation" />
+                <FontAwesomeIcon :icon="faExclamation" />
                 <span v-if="props.type == 'data' && currentVariant.src == SOURCE.COLLECTION" class="ml-1">
                     The supplied input will be <HelpText text="mapped over" uri="galaxy.collections.mapOver" /> this
                     tool.
diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 95581fbc3972..4651b6b216d6 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -39,6 +39,10 @@ const props = defineProps({
         type: Array as PropType<SelectValue | SelectValue[]>,
         default: null,
     },
+    maintainSelectionOrder: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const emit = defineEmits<{
@@ -48,6 +52,7 @@ const emit = defineEmits<{
 const searchValue = ref("");
 const useRegex = ref(false);
 const caseSensitive = ref(false);
+const localSelectionOrder = computed(() => props.maintainSelectionOrder);
 
 const searchRegex = computed(() => {
     if (useRegex.value) {
@@ -94,6 +99,7 @@ const { unselectedOptionsFiltered, selectedOptionsFiltered, running, moreUnselec
     selectedDisplayCount,
     unselectedDisplayCount,
     caseSensitive,
+    maintainSelectionOrder: localSelectionOrder,
 });
 
 // debounced to it doesn't blink, and only appears when relevant
@@ -364,7 +370,9 @@ const selectedCount = computed(() => {
                     :class="{ highlighted: highlightUnselected.highlightedIndexes.includes(i) }"
                     @click="(e) => selectOption(e, i)"
                     @keydown="(e) => optionOnKey('unselected', e, i)">
-                    {{ option.label }}
+                    <slot name="label-area" v-bind="option">
+                        {{ option.label }}
+                    </slot>
                 </button>
 
                 <span v-if="moreUnselected" class="show-more-indicator">
@@ -396,7 +404,9 @@ const selectedCount = computed(() => {
                     :class="{ highlighted: highlightSelected.highlightedIndexes.includes(i) }"
                     @click="(e) => deselectOption(e, i)"
                     @keydown="(e) => optionOnKey('selected', e, i)">
-                    {{ option.label }}
+                    <slot name="label-area" v-bind="option">
+                        {{ option.label }}
+                    </slot>
                 </button>
 
                 <span v-if="moreSelected" class="show-more-indicator">
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
index c81eeb97e348..5aa5e4ee274f 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
@@ -14,6 +14,7 @@ export interface UseSelectManyOptions {
     unselectedDisplayCount: Ref<number>;
     selectedDisplayCount: Ref<number>;
     caseSensitive: Ref<boolean>;
+    maintainSelectionOrder: Ref<boolean>;
 }
 
 export interface UseSelectManyReturn {
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
index 485e55bd23fc..95c07be25d97 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
@@ -13,6 +13,7 @@ export function useSelectMany({
     unselectedDisplayCount,
     selectedDisplayCount,
     caseSensitive,
+    maintainSelectionOrder,
 }) {
     // only start a single worker
     if (!worker) {
@@ -64,6 +65,7 @@ export function useSelectMany({
             unselectedDisplayCount: unselectedDisplayCount.value,
             selectedDisplayCount: selectedDisplayCount.value,
             caseSensitive: caseSensitive.value,
+            maintainSelectionOrder: maintainSelectionOrder.value,
         });
     });
 
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
index 6eaed4c7638d..05afb92301a1 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
@@ -10,6 +10,7 @@ const createOptions = () => {
         unselectedDisplayCount: 1000,
         selectedDisplayCount: 1000,
         caseSensitive: false,
+        maintainSelectionOrder: false,
     };
 };
 
@@ -42,6 +43,7 @@ self.addEventListener("message", (e) => {
             options.unselectedDisplayCount = message.unselectedDisplayCount;
             options.selectedDisplayCount = message.selectedDisplayCount;
             options.caseSensitive = message.caseSensitive;
+            options.maintainSelectionOrder = message.maintainSelectionOrder;
             break;
 
         case "clear":
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
index 83e818ced7fa..34c043022938 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
@@ -43,6 +43,19 @@ export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNes
         }
     }
 
+    // In case maintainSelectionOrder is enabled, we need to maintain the order from selectedValues
+    if (options.maintainSelectionOrder) {
+        const selectedValuesArray = Array.from(selectedValues);
+        selectedOptionsFiltered.sort((a, b) => {
+            const aAsString = stringifyObject(a.value);
+            const bAsString = stringifyObject(b.value);
+
+            const aIndex = selectedValuesArray.findIndex((v) => v === aAsString);
+            const bIndex = selectedValuesArray.findIndex((v) => v === bAsString);
+            return aIndex - bIndex;
+        });
+    }
+
     return {
         unselectedOptionsFiltered,
         selectedOptionsFiltered,
diff --git a/client/src/components/Help/terms.yml b/client/src/components/Help/terms.yml
index 536d08f3dee1..fce6204d6198 100644
--- a/client/src/components/Help/terms.yml
+++ b/client/src/components/Help/terms.yml
@@ -59,6 +59,20 @@ galaxy:
       These lists will be gathered together in a nested list structured (collection type ``list:list``) where
       the outer element count and structure matches that of the input and the inner list for each of those
       is just the outputs of the tool for the corresponding element of the input.
+    collectionBuilder:
+      hideOriginalElements: |
+        Toggling this on means that the original history items that will become a part of the collection
+        will be hidden from the history panel (they will still be searchable via the 'visible: false' filter).
+      filteredExtensions: |
+        The history is filtered for the extensions that are required for this collection. You might see some
+        items with other extensions since those can still be valid inputs via implicit conversion.
+      requiredUploadExtensions: |
+        The extensions that are required for this collection. The files you upload will be assumed to have
+        these extensions. In the case of more than one extension, you can select a specific extension for
+        each individual file above. If there is only one extension, Galaxy will attempt to set that as the
+        extension for each file.
+
+
   jobs:
     states:
       # upload, waiting, failed, paused, deleting, deleted, stop, stopped, skipped.
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
index 313846e57546..28f55ff9385e 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
@@ -138,11 +138,19 @@
             <p v-localize>Remove the following tags from {{ numSelected }} items:</p>
             <StatelessTags v-model="selectedTags" class="tags" />
         </b-modal>
+        <CollectionCreatorModal
+            v-if="collectionModalType"
+            :history-id="history.id"
+            :collection-type="collectionModalType"
+            :filter-text="filterText"
+            :selected-items="collectionSelection"
+            :show-modal.sync="collectionModalShow"
+            default-hide-source-items
+            @created-collection="createdCollection" />
     </section>
 </template>
 
 <script>
-import { buildCollectionModal } from "components/History/adapters/buildCollectionModal";
 import { HistoryFilters } from "components/History/HistoryFilters";
 import {
     addTagsToSelectedContent,
@@ -159,13 +167,16 @@ import { DatatypesProvider, DbKeyProvider } from "components/providers";
 import SingleItemSelector from "components/SingleItemSelector";
 import { StatelessTags } from "components/Tags";
 
-import { GalaxyApi } from "@/api";
-import { createDatasetCollection, filtersToQueryValues } from "@/components/History/model/queries";
+import { createDatasetCollection } from "@/components/History/model/queries";
 import { useConfig } from "@/composables/config";
-import { rethrowSimple } from "@/utils/simple-error";
+
+import { buildRuleCollectionModal } from "../../adapters/buildCollectionModal";
+
+import CollectionCreatorModal from "@/components/Collections/CollectionCreatorModal.vue";
 
 export default {
     components: {
+        CollectionCreatorModal,
         DbKeyProvider,
         DatatypesProvider,
         SingleItemSelector,
@@ -186,6 +197,9 @@ export default {
     },
     data: function () {
         return {
+            collectionModalShow: false,
+            collectionModalType: null,
+            collectionSelection: undefined,
             selectedDbKey: { id: "?", text: "unspecified (?)" },
             selectedDatatype: { id: "auto", text: "Auto-detect" },
             selectedTags: [],
@@ -361,38 +375,26 @@ export default {
         },
 
         // collection creation, fires up a modal
-        async buildDatasetList() {
-            await this.buildNewCollection("list");
-        },
-        async buildDatasetListAll() {
-            let allContents = [];
-            const filters = HistoryFilters.getQueryDict(this.filterText);
-            const filterQuery = filtersToQueryValues(filters);
-            const { data, error } = await GalaxyApi().GET("/api/histories/{history_id}/contents/{type}s", {
-                params: {
-                    path: { history_id: this.history.id, type: "dataset" },
-                    query: { ...filterQuery, v: "dev" },
-                },
-            });
-            if (error) {
-                rethrowSimple(error);
-            }
-
-            allContents = data;
-
-            this.buildNewCollection("list", allContents);
-        },
-        async buildListOfPairs() {
-            await this.buildNewCollection("list:paired");
+        buildDatasetList() {
+            this.collectionModalType = "list";
+            this.collectionSelection = Array.from(this.contentSelection.values());
+            this.collectionModalShow = true;
+        },
+        buildDatasetListAll() {
+            this.collectionModalType = "list";
+            this.collectionSelection = undefined;
+            this.collectionModalShow = true;
+        },
+        buildListOfPairs() {
+            this.collectionModalType = "list:paired";
+            this.collectionSelection = Array.from(this.contentSelection.values());
+            this.collectionModalShow = true;
+        },
+        createdCollection(collection) {
+            this.$emit("reset-selection");
         },
         async buildCollectionFromRules() {
-            await this.buildNewCollection("rules");
-        },
-        async buildNewCollection(collectionType, contents) {
-            if (contents === undefined) {
-                contents = this.contentSelection;
-            }
-            const modalResult = await buildCollectionModal(collectionType, contents, this.history.id);
+            const modalResult = await buildRuleCollectionModal(this.contentSelection, this.history.id);
             await createDatasetCollection(this.history, modalResult);
 
             // have to hide the source items if that was requested
diff --git a/client/src/components/History/HistoryView.test.js b/client/src/components/History/HistoryView.test.js
index 85dc95106ede..b00e2647f7a9 100644
--- a/client/src/components/History/HistoryView.test.js
+++ b/client/src/components/History/HistoryView.test.js
@@ -17,6 +17,11 @@ jest.mock("stores/services/history.services");
 
 const { server, http } = useServerMock();
 
+jest.mock("vue-router/composables", () => ({
+    useRoute: jest.fn(() => ({})),
+    useRouter: jest.fn(() => ({})),
+}));
+
 function create_history(historyId, userId, purged = false, archived = false) {
     const historyName = `${userId}'s History ${historyId}`;
     return {
diff --git a/client/src/components/History/adapters/HistoryPanelProxy.js b/client/src/components/History/adapters/HistoryPanelProxy.js
index 28b95b38627f..11972ef9fc2c 100644
--- a/client/src/components/History/adapters/HistoryPanelProxy.js
+++ b/client/src/components/History/adapters/HistoryPanelProxy.js
@@ -8,7 +8,7 @@ import { startWatchingHistory } from "store/historyStore/model/watchHistory";
 import { useHistoryItemsStore } from "stores/historyItemsStore";
 import { useHistoryStore } from "stores/historyStore";
 
-import { buildCollectionModal } from "./buildCollectionModal";
+import { buildRuleCollectionModal } from "./buildCollectionModal";
 
 // extend existing current history panel
 export class HistoryPanelProxy {
@@ -45,7 +45,7 @@ export class HistoryPanelProxy {
         this.model.id = historyId;
         this.historyStore.setCurrentHistory(historyId);
     }
-    async buildCollection(collectionType, selection, historyId = null, fromRulesInput = false) {
+    async buildCollectionFromRules(selection, historyId = null, fromRulesInput = false) {
         let selectionContent = null;
         historyId = historyId || this.model.id;
         if (fromRulesInput) {
@@ -56,7 +56,7 @@ export class HistoryPanelProxy {
                 selectionContent.set(obj.id, obj);
             });
         }
-        const modalResult = await buildCollectionModal(collectionType, selectionContent, historyId, fromRulesInput);
+        const modalResult = await buildRuleCollectionModal(selectionContent, historyId, fromRulesInput);
         if (modalResult) {
             console.debug("Submitting collection build request.", modalResult);
             await createDatasetCollection({ id: historyId }, modalResult);
diff --git a/client/src/components/History/adapters/buildCollectionModal.js b/client/src/components/History/adapters/buildCollectionModal.ts
similarity index 51%
rename from client/src/components/History/adapters/buildCollectionModal.js
rename to client/src/components/History/adapters/buildCollectionModal.ts
index f5b5c030ea27..53a41b424914 100644
--- a/client/src/components/History/adapters/buildCollectionModal.js
+++ b/client/src/components/History/adapters/buildCollectionModal.ts
@@ -1,4 +1,5 @@
 /**
+ * TODO: Update this description...
  * Temporary adapter to launch bootstrap modals from Vue components, for use with
  * the collection assembly modals. i.e. With selected..... create dataset collection,
  * create paired collection, etc.
@@ -8,44 +9,50 @@
  * deprecated jquery Deferred object.
  */
 
-import LIST_COLLECTION_CREATOR from "components/Collections/ListCollectionCreatorModal";
-import PAIR_COLLECTION_CREATOR from "components/Collections/PairCollectionCreatorModal";
-import LIST_OF_PAIRS_COLLECTION_CREATOR from "components/Collections/PairedListCollectionCreatorModal";
-import RULE_BASED_COLLECTION_CREATOR from "components/Collections/RuleBasedCollectionCreatorModal";
 import jQuery from "jquery";
 
+import type { HDASummary, HistoryItemSummary } from "@/api";
+import RULE_BASED_COLLECTION_CREATOR from "@/components/Collections/RuleBasedCollectionCreatorModal";
+
+export type CollectionType = "list" | "paired" | "list:paired" | "rules";
+export type DatasetPair = {
+    forward: HDASummary;
+    reverse: HDASummary;
+    name: string;
+};
+
 // stand-in for buildCollection from history-view-edit.js
-export async function buildCollectionModal(collectionType, selectedContent, historyId, fromRulesInput = false) {
+export async function buildRuleCollectionModal(
+    selectedContent: HistoryItemSummary[],
+    historyId: string,
+    fromRulesInput = false,
+    defaultHideSourceItems = true
+) {
     // select legacy function
-    let createFunc;
-    if (collectionType == "list") {
-        createFunc = LIST_COLLECTION_CREATOR.createListCollection;
-    } else if (collectionType == "paired") {
-        createFunc = PAIR_COLLECTION_CREATOR.createPairCollection;
-    } else if (collectionType == "list:paired") {
-        createFunc = LIST_OF_PAIRS_COLLECTION_CREATOR.createPairedListCollection;
-    } else if (collectionType.startsWith("rules")) {
-        createFunc = RULE_BASED_COLLECTION_CREATOR.createCollectionViaRules;
-    } else {
-        throw new Error(`Unknown collectionType encountered ${collectionType}`);
-    }
+    const createFunc = RULE_BASED_COLLECTION_CREATOR.createCollectionViaRules;
     // pull up cached content by type_ids;
     if (fromRulesInput) {
         return await createFunc(selectedContent);
     } else {
-        const fakeBackboneContent = createBackboneContent(historyId, selectedContent);
+        const fakeBackboneContent = createBackboneContent(historyId, selectedContent, defaultHideSourceItems);
         return await createFunc(fakeBackboneContent);
     }
 }
 
-const createBackboneContent = (historyId, selection) => {
+const createBackboneContent = (historyId: string, selection: HistoryItemSummary[], defaultHideSourceItems: boolean) => {
     const selectionJson = Array.from(selection.values());
     return {
         historyId,
         toJSON: () => selectionJson,
         // result must be a $.Deferred object instead of a promise because
         // that's the kind of deprecated data format that backbone likes to use.
-        createHDCA(element_identifiers, collection_type, name, hide_source_items, options = {}) {
+        createHDCA(
+            element_identifiers: any,
+            collection_type: CollectionType,
+            name: string,
+            hide_source_items: boolean,
+            options = {}
+        ) {
             const def = jQuery.Deferred();
             return def.resolve(null, {
                 collection_type,
@@ -55,5 +62,6 @@ const createBackboneContent = (historyId, selection) => {
                 options,
             });
         },
+        defaultHideSourceItems,
     };
 };
diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index b65bc30f8de8..6dbf7f986aae 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -14,6 +14,7 @@ import {
 import { computed, reactive, ref } from "vue";
 
 import { GalaxyApi } from "@/api";
+import type { CollectionType } from "@/components/History/adapters/buildCollectionModal";
 import { Services } from "@/components/Libraries/LibraryFolder/services";
 import { deleteSelectedItems } from "@/components/Libraries/LibraryFolder/TopToolbar/delete-selected";
 import download from "@/components/Libraries/LibraryFolder/TopToolbar/download";
@@ -25,6 +26,7 @@ import { Toast } from "@/composables/toast";
 import { getAppRoot } from "@/onload";
 import { useUserStore } from "@/stores/userStore";
 
+import CollectionCreatorModal from "@/components/Collections/CollectionCreatorModal.vue";
 import FolderDetails from "@/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue";
 import LibraryBreadcrumb from "@/components/Libraries/LibraryFolder/LibraryBreadcrumb.vue";
 import SearchField from "@/components/Libraries/LibraryFolder/SearchField.vue";
@@ -90,6 +92,12 @@ const totalRows = computed(() => {
     return props.metadata?.total_rows ?? 0;
 });
 
+// Variables for Collection Creation
+const collectionModalType = ref<CollectionType | null>(null);
+const collectionModalShow = ref(false);
+const collectionSelection = ref<any[]>([]);
+const collectionHistoryId = ref<string | null>(null);
+
 function updateSearch(value: string) {
     emit("updateSearch", value);
 }
@@ -187,6 +195,16 @@ async function importToHistoryModal(isCollection: boolean) {
         if (isCollection) {
             new mod_import_collection.ImportCollectionModal({
                 selected: checkedItems,
+                onCollectionImport: async (collectionType: string, selection: any, historyId: string) => {
+                    try {
+                        collectionHistoryId.value = historyId;
+                        collectionModalType.value = collectionType as CollectionType;
+                        collectionSelection.value = selection;
+                        collectionModalShow.value = true;
+                    } catch (err) {
+                        console.error(err);
+                    }
+                },
             });
         } else {
             new mod_import_dataset.ImportDatasetModal({
@@ -410,5 +428,13 @@ function onAddDatasetsDirectory(selectedDatasets: Record<string, string | boolea
             :folder-id="props.folderId"
             @onSelect="onAddDatasetsDirectory"
             @onClose="onAddDatasets" />
+
+        <CollectionCreatorModal
+            v-if="collectionModalType && collectionHistoryId"
+            :history-id="collectionHistoryId"
+            :collection-type="collectionModalType"
+            :selected-items="collectionSelection"
+            :show-modal.sync="collectionModalShow"
+            default-hide-source-items />
     </div>
 </template>
diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-collection.js b/client/src/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-collection.js
index 1642d31d89d3..eaf8b7d3d55a 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-collection.js
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-collection.js
@@ -115,8 +115,12 @@ var ImportCollectionModal = Backbone.View.extend({
                 models: collectionElements,
             };
         }
-        const Galaxy = getGalaxyInstance();
-        Galaxy.currHistoryPanel.buildCollection(collectionType, selection, historyId);
+        if (collectionType === "rules") {
+            const Galaxy = getGalaxyInstance();
+            Galaxy.currHistoryPanel.buildCollectionFromRules(selection, historyId);
+        } else if (this.options.onCollectionImport) {
+            this.options.onCollectionImport(collectionType, selection, historyId);
+        }
     },
     templateCollectionSelectModal: function () {
         return _.template(
diff --git a/client/src/components/Upload/DefaultBox.vue b/client/src/components/Upload/DefaultBox.vue
index 4afaa63ad705..3023a3feeb98 100644
--- a/client/src/components/Upload/DefaultBox.vue
+++ b/client/src/components/Upload/DefaultBox.vue
@@ -8,10 +8,10 @@ import Vue, { computed, ref } from "vue";
 
 import { UploadQueue } from "@/utils/upload-queue.js";
 
-import { collectionBuilder } from "./builders.js";
 import { defaultModel } from "./model.js";
 import { COLLECTION_TYPES, DEFAULT_FILE_NAME, hasBrowserSupport } from "./utils";
 
+import CollectionCreatorModal from "../Collections/CollectionCreatorModal.vue";
 import DefaultRow from "./DefaultRow.vue";
 import UploadBox from "./UploadBox.vue";
 import UploadSelect from "./UploadSelect.vue";
@@ -68,10 +68,20 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    disableFooter: {
+        type: Boolean,
+        default: false,
+    },
+    emitUploaded: {
+        type: Boolean,
+        default: false,
+    },
 });
 
-const emit = defineEmits(["dismiss", "progress"]);
+const emit = defineEmits(["dismiss", "progress", "uploaded"]);
 
+const collectionModalShow = ref(false);
+const collectionSelection = ref([]);
 const collectionType = ref("list");
 const counterAnnounce = ref(0);
 const counterError = ref(0);
@@ -147,8 +157,28 @@ function eventAnnounce(index, file) {
 }
 
 /** Populates collection builder with uploaded files */
-function eventBuild() {
-    collectionBuilder(historyId, collectionType.value, uploadValues.value);
+async function eventBuild(openModal = false) {
+    try {
+        collectionSelection.value = [];
+        uploadValues.value.forEach((model) => {
+            const outputs = model.outputs;
+            if (outputs) {
+                Object.entries(outputs).forEach((output) => {
+                    const outputDetails = output[1];
+                    collectionSelection.value.push(outputDetails);
+                });
+            } else {
+                console.debug("Warning, upload response does not contain outputs.", model);
+            }
+        });
+        if (openModal) {
+            collectionModalShow.value = true;
+        } else {
+            emit("uploaded", collectionSelection.value);
+        }
+    } catch (err) {
+        console.error(err);
+    }
     counterRunning.value = 0;
     eventReset();
     emit("dismiss");
@@ -369,8 +399,8 @@ defineExpose({
                     :file-name="uploadItem.fileName"
                     :file-size="uploadItem.fileSize"
                     :info="uploadItem.info"
-                    :list-extensions="isCollection ? null : listExtensions"
-                    :list-db-keys="isCollection ? null : listDbKeys"
+                    :list-extensions="!isCollection && listExtensions.length > 1 ? listExtensions : null"
+                    :list-db-keys="!isCollection && listDbKeys.length > 1 ? listDbKeys : null"
                     :percentage="uploadItem.percentage"
                     :space-to-tab="uploadItem.spaceToTab"
                     :status="uploadItem.status"
@@ -387,7 +417,7 @@ defineExpose({
             </div>
             <input ref="uploadFile" type="file" :multiple="multiple" @change="addFiles($event.target.files)" />
         </UploadBox>
-        <div class="upload-footer text-center">
+        <div v-if="!disableFooter" class="upload-footer text-center">
             <span v-if="isCollection" class="upload-footer-title">Collection:</span>
             <UploadSelect
                 v-if="isCollection"
@@ -416,6 +446,7 @@ defineExpose({
                 placeholder="Select Reference"
                 @input="updateDbKey" />
         </div>
+        <slot name="footer" />
         <div class="upload-buttons d-flex justify-content-end">
             <BButton id="btn-local" :disabled="!enableSources" @click="uploadFile.click()">
                 <FontAwesomeIcon icon="fa-laptop" />
@@ -443,9 +474,21 @@ defineExpose({
                 :disabled="!enableBuild"
                 title="Build"
                 :variant="enableBuild ? 'primary' : null"
-                @click="eventBuild">
+                @click="() => eventBuild(true)">
                 <span v-localize>Build</span>
             </BButton>
+            <BButton
+                v-if="emitUploaded"
+                id="btn-emit"
+                :disabled="!enableBuild"
+                title="Use Uploaded Files"
+                :variant="enableBuild ? 'primary' : null"
+                @click="() => eventBuild(false)">
+                <slot name="emit-btn-txt">
+                    <span v-localize>Use Uploaded</span>
+                </slot>
+                ({{ counterSuccess }})
+            </BButton>
             <BButton id="btn-stop" title="Pause" :disabled="!isRunning" @click="eventStop">
                 <span v-localize>Pause</span>
             </BButton>
@@ -457,5 +500,12 @@ defineExpose({
                 <span v-else v-localize>Close</span>
             </BButton>
         </div>
+        <CollectionCreatorModal
+            v-if="isCollection && historyId"
+            :history-id="historyId"
+            :collection-type="collectionType"
+            :selected-items="collectionSelection"
+            :show-modal.sync="collectionModalShow"
+            default-hide-source-items />
     </div>
 </template>
diff --git a/client/src/components/Upload/RulesInput.vue b/client/src/components/Upload/RulesInput.vue
index 9cac3661a470..ed36d9636574 100644
--- a/client/src/components/Upload/RulesInput.vue
+++ b/client/src/components/Upload/RulesInput.vue
@@ -60,7 +60,7 @@ function eventBuild() {
     } else if (entry.selectionType == "remote_files") {
         entry.elements = uris.value;
     }
-    Galaxy.currHistoryPanel.buildCollection("rules", entry, null, true);
+    Galaxy.currHistoryPanel.buildCollectionFromRules(entry, null, true);
     emit("dismiss");
 }
 
diff --git a/client/src/components/Upload/builders.js b/client/src/components/Upload/builders.js
deleted file mode 100644
index 5253a8ba6b97..000000000000
--- a/client/src/components/Upload/builders.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * Interface with rule builder
- */
-import { getGalaxyInstance } from "app";
-
-/** Populates collection builder with uploaded files */
-export function collectionBuilder(historyId, type, uploadValues) {
-    const Galaxy = getGalaxyInstance();
-    const models = {};
-    uploadValues.forEach((model) => {
-        const outputs = model.outputs;
-        if (outputs) {
-            Object.entries(outputs).forEach((output) => {
-                const outputDetails = output[1];
-                models[outputDetails.id] = outputDetails;
-            });
-        } else {
-            console.debug("Warning, upload response does not contain outputs.", model);
-        }
-    });
-    // Build selection object
-    const selection = {
-        models: Object.values(models),
-        historyId: historyId,
-    };
-    Galaxy.currHistoryPanel.buildCollection(type, selection);
-}
diff --git a/client/src/composables/genericTaskMonitor.ts b/client/src/composables/genericTaskMonitor.ts
index cb0c1f7c7137..e13876dda9b1 100644
--- a/client/src/composables/genericTaskMonitor.ts
+++ b/client/src/composables/genericTaskMonitor.ts
@@ -42,7 +42,7 @@ export interface TaskMonitor {
      * The meaning of the status string is up to the monitor implementation.
      * In case of an error, this will be the error message.
      */
-    status: Readonly<Ref<string | undefined>>;
+    taskStatus: Readonly<Ref<string | undefined>>;
 
     /**
      * Loads the status of the task from a stored value.
@@ -96,19 +96,19 @@ export function useGenericMonitor(options: {
     let pollDelay = options.defaultPollDelay ?? DEFAULT_POLL_DELAY;
 
     const isRunning = ref(false);
-    const status = ref<string>();
+    const taskStatus = ref<string>();
     const requestId = ref<string>();
     const requestHasFailed = ref(false);
 
-    const isCompleted = computed(() => options.completedCondition(status.value));
-    const hasFailed = computed(() => options.failedCondition(status.value));
+    const isCompleted = computed(() => options.completedCondition(taskStatus.value));
+    const hasFailed = computed(() => options.failedCondition(taskStatus.value));
 
     function isFinalState(status?: string) {
         return options.completedCondition(status) || options.failedCondition(status);
     }
 
     function loadStatus(storedStatus: string) {
-        status.value = storedStatus;
+        taskStatus.value = storedStatus;
     }
 
     async function waitForTask(taskId: string, pollDelayInMs?: number) {
@@ -122,7 +122,7 @@ export function useGenericMonitor(options: {
     async function fetchTaskStatus(taskId: string) {
         try {
             const result = await options.fetchStatus(taskId);
-            status.value = result;
+            taskStatus.value = result;
             if (isCompleted.value || hasFailed.value) {
                 isRunning.value = false;
             } else {
@@ -141,7 +141,7 @@ export function useGenericMonitor(options: {
     }
 
     function handleError(err: string) {
-        status.value = err.toString();
+        taskStatus.value = err.toString();
         requestHasFailed.value = true;
         isRunning.value = false;
         resetTimeout();
@@ -156,7 +156,7 @@ export function useGenericMonitor(options: {
 
     function resetState() {
         resetTimeout();
-        status.value = undefined;
+        taskStatus.value = undefined;
         requestHasFailed.value = false;
         isRunning.value = false;
     }
@@ -169,7 +169,7 @@ export function useGenericMonitor(options: {
         isCompleted: readonly(isCompleted),
         hasFailed: readonly(hasFailed),
         requestHasFailed: readonly(requestHasFailed),
-        status: readonly(status),
+        taskStatus: readonly(taskStatus),
         expirationTime: options.expirationTime,
     };
 }
diff --git a/client/src/composables/persistentProgressMonitor.test.ts b/client/src/composables/persistentProgressMonitor.test.ts
index 2a5f9c547dd0..88e21b79e7a0 100644
--- a/client/src/composables/persistentProgressMonitor.test.ts
+++ b/client/src/composables/persistentProgressMonitor.test.ts
@@ -20,7 +20,7 @@ jest.mock("@vueuse/core", () => ({
 
 function useMonitorMock(): TaskMonitor {
     const isRunning = ref(false);
-    const status = ref();
+    const taskStatus = ref();
 
     return {
         waitForTask: jest.fn().mockImplementation(() => {
@@ -30,11 +30,11 @@ function useMonitorMock(): TaskMonitor {
         isCompleted: ref(false),
         hasFailed: ref(false),
         requestHasFailed: ref(false),
-        status,
+        taskStatus,
         expirationTime: 1000,
         isFinalState: jest.fn(),
         loadStatus(storedStatus) {
-            status.value = storedStatus;
+            taskStatus.value = storedStatus;
         },
     };
 }
diff --git a/client/src/composables/persistentProgressMonitor.ts b/client/src/composables/persistentProgressMonitor.ts
index fc2c9067771a..a54773d718d2 100644
--- a/client/src/composables/persistentProgressMonitor.ts
+++ b/client/src/composables/persistentProgressMonitor.ts
@@ -98,7 +98,7 @@ export interface MonitoringData {
      * The meaning of the status string is up to the monitor implementation.
      * In case of an error, this will be the error message.
      */
-    status?: string;
+    taskStatus?: string;
 }
 
 /**
@@ -120,7 +120,7 @@ export function usePersistentProgressTaskMonitor(
         isCompleted,
         hasFailed,
         requestHasFailed,
-        status,
+        taskStatus,
         expirationTime,
     } = useMonitor;
 
@@ -152,12 +152,12 @@ export function usePersistentProgressTaskMonitor(
     });
 
     watch(
-        status,
+        () => taskStatus.value,
         (newStatus) => {
             if (newStatus && currentMonitoringData.value) {
                 currentMonitoringData.value = {
                     ...currentMonitoringData.value,
-                    status: newStatus,
+                    taskStatus: newStatus,
                 };
             }
         },
@@ -173,10 +173,10 @@ export function usePersistentProgressTaskMonitor(
             throw new Error("No monitoring data provided or stored. Cannot start monitoring progress.");
         }
 
-        if (isFinalState(currentMonitoringData.value.status)) {
+        if (isFinalState(currentMonitoringData.value.taskStatus)) {
             // The task has already finished no need to start monitoring again.
             // Instead, reload the stored status to update the UI.
-            return loadStatus(currentMonitoringData.value.status!);
+            return loadStatus(currentMonitoringData.value.taskStatus!);
         }
 
         if (hasExpired.value) {
@@ -240,7 +240,7 @@ export function usePersistentProgressTaskMonitor(
          * The meaning of the status string is up to the monitor implementation.
          * In case of an error, this will be the error message.
          */
-        status,
+        status: taskStatus,
 
         /**
          * True if the monitoring data can expire.
diff --git a/client/src/composables/shortTermStorageMonitor.test.ts b/client/src/composables/shortTermStorageMonitor.test.ts
index f76e4c1eabcc..2dc3974c0668 100644
--- a/client/src/composables/shortTermStorageMonitor.test.ts
+++ b/client/src/composables/shortTermStorageMonitor.test.ts
@@ -31,28 +31,28 @@ describe("useShortTermStorageMonitor", () => {
     });
 
     it("should indicate the task is running when it is still not ready", async () => {
-        const { waitForTask, isRunning, status } = useShortTermStorageMonitor();
+        const { waitForTask, isRunning, taskStatus } = useShortTermStorageMonitor();
 
         expect(isRunning.value).toBe(false);
         waitForTask(PENDING_TASK_ID);
         await flushPromises();
         expect(isRunning.value).toBe(true);
-        expect(status.value).toBe("PENDING");
+        expect(taskStatus.value).toBe("PENDING");
     });
 
     it("should indicate the task is successfully completed when the state is ready", async () => {
-        const { waitForTask, isRunning, isCompleted, status } = useShortTermStorageMonitor();
+        const { waitForTask, isRunning, isCompleted, taskStatus } = useShortTermStorageMonitor();
 
         expect(isCompleted.value).toBe(false);
         waitForTask(COMPLETED_TASK_ID);
         await flushPromises();
         expect(isCompleted.value).toBe(true);
         expect(isRunning.value).toBe(false);
-        expect(status.value).toBe("READY");
+        expect(taskStatus.value).toBe("READY");
     });
 
     it("should indicate the task status request failed when the request failed", async () => {
-        const { waitForTask, requestHasFailed, isRunning, isCompleted, status } = useShortTermStorageMonitor();
+        const { waitForTask, requestHasFailed, isRunning, isCompleted, taskStatus } = useShortTermStorageMonitor();
 
         expect(requestHasFailed.value).toBe(false);
         waitForTask(REQUEST_FAILED_TASK_ID);
@@ -60,16 +60,16 @@ describe("useShortTermStorageMonitor", () => {
         expect(requestHasFailed.value).toBe(true);
         expect(isRunning.value).toBe(false);
         expect(isCompleted.value).toBe(false);
-        expect(status.value).toBe("Request failed");
+        expect(taskStatus.value).toBe("Request failed");
     });
 
     it("should load the status from the stored monitoring data", async () => {
-        const { loadStatus, isRunning, isCompleted, hasFailed, status } = useShortTermStorageMonitor();
+        const { loadStatus, isRunning, isCompleted, hasFailed, taskStatus } = useShortTermStorageMonitor();
         const storedStatus = "READY";
 
         loadStatus(storedStatus);
 
-        expect(status.value).toBe(storedStatus);
+        expect(taskStatus.value).toBe(storedStatus);
         expect(isRunning.value).toBe(false);
         expect(isCompleted.value).toBe(true);
         expect(hasFailed.value).toBe(false);
@@ -77,26 +77,26 @@ describe("useShortTermStorageMonitor", () => {
 
     describe("isFinalState", () => {
         it("should indicate is final state when the task is completed", async () => {
-            const { waitForTask, isFinalState, isRunning, isCompleted, hasFailed, status } =
+            const { waitForTask, isFinalState, isRunning, isCompleted, hasFailed, taskStatus } =
                 useShortTermStorageMonitor();
 
-            expect(isFinalState(status.value)).toBe(false);
+            expect(isFinalState(taskStatus.value)).toBe(false);
             waitForTask(COMPLETED_TASK_ID);
             await flushPromises();
-            expect(isFinalState(status.value)).toBe(true);
+            expect(isFinalState(taskStatus.value)).toBe(true);
             expect(isRunning.value).toBe(false);
             expect(isCompleted.value).toBe(true);
             expect(hasFailed.value).toBe(false);
         });
 
         it("should indicate is final state when the task has failed", async () => {
-            const { waitForTask, isFinalState, isRunning, isCompleted, hasFailed, status } =
+            const { waitForTask, isFinalState, isRunning, isCompleted, hasFailed, taskStatus } =
                 useShortTermStorageMonitor();
 
-            expect(isFinalState(status.value)).toBe(false);
+            expect(isFinalState(taskStatus.value)).toBe(false);
             waitForTask(REQUEST_FAILED_TASK_ID);
             await flushPromises();
-            expect(isFinalState(status.value)).toBe(true);
+            expect(isFinalState(taskStatus.value)).toBe(true);
             expect(isRunning.value).toBe(false);
             expect(isCompleted.value).toBe(false);
             expect(hasFailed.value).toBe(true);
diff --git a/client/src/composables/taskMonitor.test.ts b/client/src/composables/taskMonitor.test.ts
index b62dd22bf93e..60702963e983 100644
--- a/client/src/composables/taskMonitor.test.ts
+++ b/client/src/composables/taskMonitor.test.ts
@@ -35,39 +35,39 @@ describe("useTaskMonitor", () => {
     });
 
     it("should indicate the task is running when it is still pending", async () => {
-        const { waitForTask, isRunning, status } = useTaskMonitor();
+        const { waitForTask, isRunning, taskStatus } = useTaskMonitor();
 
         expect(isRunning.value).toBe(false);
         waitForTask(PENDING_TASK_ID);
         await flushPromises();
         expect(isRunning.value).toBe(true);
-        expect(status.value).toBe("PENDING");
+        expect(taskStatus.value).toBe("PENDING");
     });
 
     it("should indicate the task is successfully completed when the state is SUCCESS", async () => {
-        const { waitForTask, isRunning, isCompleted, status } = useTaskMonitor();
+        const { waitForTask, isRunning, isCompleted, taskStatus } = useTaskMonitor();
 
         expect(isCompleted.value).toBe(false);
         waitForTask(COMPLETED_TASK_ID);
         await flushPromises();
         expect(isCompleted.value).toBe(true);
         expect(isRunning.value).toBe(false);
-        expect(status.value).toBe("SUCCESS");
+        expect(taskStatus.value).toBe("SUCCESS");
     });
 
     it("should indicate the task has failed when the state is FAILED", async () => {
-        const { waitForTask, isRunning, hasFailed, status } = useTaskMonitor();
+        const { waitForTask, isRunning, hasFailed, taskStatus } = useTaskMonitor();
 
         expect(hasFailed.value).toBe(false);
         waitForTask(FAILED_TASK_ID);
         await flushPromises();
         expect(hasFailed.value).toBe(true);
         expect(isRunning.value).toBe(false);
-        expect(status.value).toBe("FAILURE");
+        expect(taskStatus.value).toBe("FAILURE");
     });
 
     it("should indicate the task status request failed when the request failed", async () => {
-        const { waitForTask, requestHasFailed, isRunning, isCompleted, status } = useTaskMonitor();
+        const { waitForTask, requestHasFailed, isRunning, isCompleted, taskStatus } = useTaskMonitor();
 
         expect(requestHasFailed.value).toBe(false);
         waitForTask(REQUEST_FAILED_TASK_ID);
@@ -75,16 +75,16 @@ describe("useTaskMonitor", () => {
         expect(requestHasFailed.value).toBe(true);
         expect(isRunning.value).toBe(false);
         expect(isCompleted.value).toBe(false);
-        expect(status.value).toBe("Request failed");
+        expect(taskStatus.value).toBe("Request failed");
     });
 
     it("should load the status from the stored monitoring data", async () => {
-        const { loadStatus, isRunning, isCompleted, hasFailed, status } = useTaskMonitor();
+        const { loadStatus, isRunning, isCompleted, hasFailed, taskStatus } = useTaskMonitor();
         const storedStatus = "SUCCESS";
 
         loadStatus(storedStatus);
 
-        expect(status.value).toBe(storedStatus);
+        expect(taskStatus.value).toBe(storedStatus);
         expect(isRunning.value).toBe(false);
         expect(isCompleted.value).toBe(true);
         expect(hasFailed.value).toBe(false);
@@ -92,24 +92,24 @@ describe("useTaskMonitor", () => {
 
     describe("isFinalState", () => {
         it("should indicate is final state when the task is completed", async () => {
-            const { waitForTask, isFinalState, isRunning, isCompleted, hasFailed, status } = useTaskMonitor();
+            const { waitForTask, isFinalState, isRunning, isCompleted, hasFailed, taskStatus } = useTaskMonitor();
 
-            expect(isFinalState(status.value)).toBe(false);
+            expect(isFinalState(taskStatus.value)).toBe(false);
             waitForTask(COMPLETED_TASK_ID);
             await flushPromises();
-            expect(isFinalState(status.value)).toBe(true);
+            expect(isFinalState(taskStatus.value)).toBe(true);
             expect(isRunning.value).toBe(false);
             expect(isCompleted.value).toBe(true);
             expect(hasFailed.value).toBe(false);
         });
 
         it("should indicate is final state when the task has failed", async () => {
-            const { waitForTask, isFinalState, isRunning, isCompleted, hasFailed, status } = useTaskMonitor();
+            const { waitForTask, isFinalState, isRunning, isCompleted, hasFailed, taskStatus } = useTaskMonitor();
 
-            expect(isFinalState(status.value)).toBe(false);
+            expect(isFinalState(taskStatus.value)).toBe(false);
             waitForTask(FAILED_TASK_ID);
             await flushPromises();
-            expect(isFinalState(status.value)).toBe(true);
+            expect(isFinalState(taskStatus.value)).toBe(true);
             expect(isRunning.value).toBe(false);
             expect(isCompleted.value).toBe(false);
             expect(hasFailed.value).toBe(true);
diff --git a/client/src/stores/collectionBuilderItemsStore.ts b/client/src/stores/collectionBuilderItemsStore.ts
new file mode 100644
index 000000000000..dc5705a7b4b7
--- /dev/null
+++ b/client/src/stores/collectionBuilderItemsStore.ts
@@ -0,0 +1,78 @@
+import { defineStore } from "pinia";
+import { ref, set } from "vue";
+
+import { GalaxyApi, type HDASummary } from "@/api";
+import { HistoryFilters } from "@/components/History/HistoryFilters";
+import { filtersToQueryValues } from "@/components/History/model/queries";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+const DEFAULT_FILTERS = { visible: true, deleted: false };
+
+/**
+ * Fetches datasets for the Collection Builder modal. It caches the datasets for each filter text.
+ */
+export const useCollectionBuilderItemsStore = defineStore("collectionBuilderItemsStore", () => {
+    const cachedDatasetsForFilterText = ref<Record<string, HDASummary[]>>({});
+    const errorMessage = ref<string | null>(null);
+    const isFetching = ref<Record<string, boolean>>({});
+    const lastFetch = ref<{ id: string; time: string; text: string } | null>(null);
+
+    async function fetchDatasetsForFiltertext(historyId: string, historyUpdateTime?: string, filterText = "") {
+        if (isFetching.value[filterText]) {
+            return { data: [], error: null };
+        }
+
+        if (
+            lastFetch.value &&
+            lastFetch.value.id === historyId &&
+            lastFetch.value.time === historyUpdateTime &&
+            lastFetch.value.text === filterText
+        ) {
+            return {
+                data: cachedDatasetsForFilterText.value[filterText] || [],
+                error: errorMessage.value,
+            };
+        }
+
+        set(isFetching.value, filterText, true);
+
+        const filterQuery = getFilterQuery(filterText);
+
+        // Note: Had "/api/histories/{history_id}/contents/datasets" before but it was returning datasets and collections
+        const { data, error: apiError } = await GalaxyApi().GET("/api/histories/{history_id}/contents", {
+            params: {
+                path: { history_id: historyId },
+                query: { ...filterQuery, v: "dev" },
+            },
+        });
+        const returnedData = data as HDASummary[];
+
+        let error = null;
+        if (apiError) {
+            error = errorMessageAsString(apiError);
+            errorMessage.value = error;
+        } else {
+            set(cachedDatasetsForFilterText.value, filterText, returnedData);
+        }
+
+        set(isFetching.value, filterText, false);
+        lastFetch.value = { id: historyId, time: historyUpdateTime || "", text: filterText };
+
+        return { data: returnedData, error };
+    }
+
+    function getFilterQuery(filterText: string) {
+        let filters = filterText ? HistoryFilters.getQueryDict(filterText) : DEFAULT_FILTERS;
+        if (filters.history_content_type) {
+            delete filters.history_content_type;
+        }
+        filters = { ...filters, history_content_type: "dataset" };
+        return filtersToQueryValues(filters);
+    }
+
+    return {
+        cachedDatasetsForFilterText,
+        isFetching,
+        fetchDatasetsForFiltertext,
+    };
+});
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index d29d05759050..916d98d12c99 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -71,6 +71,9 @@ $ui-margin-horizontal-large: $margin-v * 2;
 .ui-modal {
     display: none;
     overflow: auto;
+    .title {
+        width: 100%;
+    }
     .modal-header.no-separator {
         border: none !important;
         padding-bottom: 0px !important;
diff --git a/client/src/utils/natural-sort.js b/client/src/utils/natural-sort.js
deleted file mode 100644
index c620f169163f..000000000000
--- a/client/src/utils/natural-sort.js
+++ /dev/null
@@ -1,38 +0,0 @@
-// Alphanumeric/natural sort fn
-function naturalSort(a, b) {
-    // setup temp-scope variables for comparison evauluation
-    var re = /(-?[0-9.]+)/g;
-
-    var x = a.toString().toLowerCase() || "";
-    var y = b.toString().toLowerCase() || "";
-    var nC = String.fromCharCode(0);
-    var xN = x.replace(re, `${nC}$1${nC}`).split(nC);
-    var yN = y.replace(re, `${nC}$1${nC}`).split(nC);
-    var xD = new Date(x).getTime();
-    var yD = xD ? new Date(y).getTime() : null;
-    // natural sorting of dates
-    if (yD) {
-        if (xD < yD) {
-            return -1;
-        } else if (xD > yD) {
-            return 1;
-        }
-    }
-
-    // natural sorting through split numeric strings and default strings
-    var oFxNcL;
-
-    var oFyNcL;
-    for (var cLoc = 0, numS = Math.max(xN.length, yN.length); cLoc < numS; cLoc++) {
-        oFxNcL = parseFloat(xN[cLoc]) || xN[cLoc];
-        oFyNcL = parseFloat(yN[cLoc]) || yN[cLoc];
-        if (oFxNcL < oFyNcL) {
-            return -1;
-        } else if (oFxNcL > oFyNcL) {
-            return 1;
-        }
-    }
-    return 0;
-}
-
-export default naturalSort;
diff --git a/client/src/utils/naturalSort.ts b/client/src/utils/naturalSort.ts
new file mode 100644
index 000000000000..91a047b90dd0
--- /dev/null
+++ b/client/src/utils/naturalSort.ts
@@ -0,0 +1,45 @@
+// Alphanumeric/natural sort fn
+export function naturalSort(a = "", b = ""): number {
+    // setup temp-scope variables for comparison evauluation
+    const re = /(-?[0-9.]+)/g;
+
+    const x = a.toString().toLowerCase() || "";
+    const y = b.toString().toLowerCase() || "";
+    const nC = String.fromCharCode(0);
+    const xN = x.replace(re, `${nC}$1${nC}`).split(nC);
+    const yN = y.replace(re, `${nC}$1${nC}`).split(nC);
+    const xD = new Date(x).getTime();
+    const yD = xD ? new Date(y).getTime() : null;
+    // natural sorting of dates
+    if (yD) {
+        if (xD < yD) {
+            return -1;
+        } else if (xD > yD) {
+            return 1;
+        }
+    }
+
+    // natural sorting through split numeric strings and default strings
+    let oFxNcL;
+
+    let oFyNcL;
+    for (let cLoc = 0, numS = Math.max(xN.length, yN.length); cLoc < numS; cLoc++) {
+        oFxNcL = parseFloat(xN[cLoc] || "") || xN[cLoc];
+        oFyNcL = parseFloat(yN[cLoc] || "") || yN[cLoc];
+
+        // Check if either part is undefined
+        if (oFxNcL === undefined) {
+            return -1;
+        }
+        if (oFyNcL === undefined) {
+            return 1;
+        }
+
+        if (oFxNcL < oFyNcL) {
+            return -1;
+        } else if (oFxNcL > oFyNcL) {
+            return 1;
+        }
+    }
+    return 0;
+}
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index dc4fcaeaa0cb..05f9a5a964d6 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -438,7 +438,7 @@ history_copy_elements:
 
 collection_builders:
   selectors:
-    clear_filters: "a.clear-filters-link"
+    clear_filters: "button.clear-filters-link"
     forward_datasets: ".forward-column .column-datasets"
     reverse_datasets: ".reverse-column .column-datasets"
     name: "input.collection-name"
@@ -1051,7 +1051,7 @@ libraries:
       export_to_history_paired_option: 'option[value="${collection_option}"]'
       export_to_history_collection_name: '.collection-name'
       export_to_history_new_history: 'input[name=history_name]'
-      clear_filters: '.clear-filters-link'
+      clear_filters: "button.clear-filters-link"
       import_progress_bar: '.progress-bar-import'
       import_from_path_textarea: '#import_paths'
       select_all: '#select-all-checkboxes'
diff --git a/client/tests/test-data/paired-collection-creator.data.js b/client/tests/test-data/paired-collection-creator.data.js
index 1e2638c8a754..2f8a1bc10f87 100644
--- a/client/tests/test-data/paired-collection-creator.data.js
+++ b/client/tests/test-data/paired-collection-creator.data.js
@@ -2,39 +2,39 @@ import STATES from "mvc/dataset/states";
 // ============================================================================
 // plain 3 step job chain
 var datasets1 = [
-    { name: "SET1-01_1.fastq", state: STATES.OK },
-    { name: "SET1-01_2.fastq", state: STATES.OK },
-    { name: "SET1-02_1.fastq", state: STATES.OK },
-    { name: "SET1-02_2.fastq", state: STATES.OK },
-    { name: "SET1-03_1.fastq", state: STATES.OK },
-    { name: "SET1-03_2.fastq", state: STATES.OK },
-    { name: "SET1-04_1.fastq", state: STATES.OK },
-    { name: "SET1-04_2.fastq", state: STATES.OK },
-    { name: "SET1-05_1.fastq", state: STATES.OK },
-    { name: "SET1-05_2.fastq", state: STATES.OK },
-    { name: "SET1-06_1.fastq", state: STATES.OK },
-    { name: "SET1-06_2.fastq", state: STATES.OK },
-    { name: "SET1-07_1.fastq", state: STATES.OK },
-    { name: "SET1-07_2.fastq", state: STATES.OK },
+    { name: "SET1-01_1.fastq", state: STATES.OK, id: "011" },
+    { name: "SET1-01_2.fastq", state: STATES.OK, id: "012" },
+    { name: "SET1-02_1.fastq", state: STATES.OK, id: "021" },
+    { name: "SET1-02_2.fastq", state: STATES.OK, id: "022" },
+    { name: "SET1-03_1.fastq", state: STATES.OK, id: "031" },
+    { name: "SET1-03_2.fastq", state: STATES.OK, id: "032" },
+    { name: "SET1-04_1.fastq", state: STATES.OK, id: "041" },
+    { name: "SET1-04_2.fastq", state: STATES.OK, id: "042" },
+    { name: "SET1-05_1.fastq", state: STATES.OK, id: "051" },
+    { name: "SET1-05_2.fastq", state: STATES.OK, id: "052" },
+    { name: "SET1-06_1.fastq", state: STATES.OK, id: "061" },
+    { name: "SET1-06_2.fastq", state: STATES.OK, id: "062" },
+    { name: "SET1-07_1.fastq", state: STATES.OK, id: "071" },
+    { name: "SET1-07_2.fastq", state: STATES.OK, id: "072" },
 ];
 
 var datasets2 = [
-    { name: "DP134_1_FS_PSII_FSB_42C_A10.1.fastq", state: STATES.OK },
-    { name: "DP134_1_FS_PSII_FSB_42C_A10.2.fastq", state: STATES.OK },
+    { name: "DP134_1_FS_PSII_FSB_42C_A10.1.fastq", state: STATES.OK, id: "101" },
+    { name: "DP134_1_FS_PSII_FSB_42C_A10.2.fastq", state: STATES.OK, id: "102" },
 ];
 
 var datasets3 = [
-    { name: "UII_moo_1.1.fastq", state: STATES.OK },
-    { name: "UII_moo_1.2.fastq", state: STATES.OK },
+    { name: "UII_moo_1.1.fastq", state: STATES.OK, id: "11" },
+    { name: "UII_moo_1.2.fastq", state: STATES.OK, id: "12" },
 ];
 
 var datasets4 = [
-    { name: "SET1-01_R1.fastq", state: STATES.OK },
-    { name: "SET1-01_R2.fastq", state: STATES.OK },
-    { name: "SET1-02_R1.fastq", state: STATES.OK },
-    { name: "SET1-02_R2.fastq", state: STATES.OK },
-    { name: "SET1-03_R1.fastq", state: STATES.OK },
-    { name: "SET1-03_R2.fastq", state: STATES.OK },
+    { name: "SET1-01_R1.fastq", state: STATES.OK, id: "111" },
+    { name: "SET1-01_R2.fastq", state: STATES.OK, id: "112" },
+    { name: "SET1-02_R1.fastq", state: STATES.OK, id: "211" },
+    { name: "SET1-02_R2.fastq", state: STATES.OK, id: "212" },
+    { name: "SET1-03_R1.fastq", state: STATES.OK, id: "311" },
+    { name: "SET1-03_R2.fastq", state: STATES.OK, id: "312" },
 ];
 
 var datasets1CreateRequestJSON = {
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 7a1c2aab576c..ef499834b962 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1987,13 +1987,13 @@ def _wait_for_input_text_component_and_fill(self, component, text):
         target_element.send_keys(text)
 
     def collection_builder_hide_originals(self):
-        self.wait_for_and_click_selector("input.hide-originals")
+        self.wait_for_and_click_selector('[data-description="hide original elements"]')
 
     def collection_builder_create(self):
         self.wait_for_and_click_selector("button.create-collection")
 
     def collection_builder_clear_filters(self):
-        self.wait_for_and_click_selector("a.clear-filters-link")
+        self.wait_for_and_click_selector("button.clear-filters-link")
 
     def collection_builder_click_paired_item(self, forward_or_reverse, item):
         assert forward_or_reverse in ["forward", "reverse"]