diff --git a/client/src/components/History/Content/Dataset/DatasetDownload.vue b/client/src/components/History/Content/Dataset/DatasetDownload.vue
index 55413836e22..9c25c998021 100644
--- a/client/src/components/History/Content/Dataset/DatasetDownload.vue
+++ b/client/src/components/History/Content/Dataset/DatasetDownload.vue
@@ -1,5 +1,48 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faSave } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BDropdown, BDropdownItem } from "bootstrap-vue";
+import { computed } from "vue";
+
+import { prependPath } from "@/utils/redirect";
+
+library.add(faSave);
+
+interface Props {
+    item: {
+        id: string;
+        extension: string;
+        meta_files: {
+            file_type: string;
+        }[];
+    };
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits(["on-download"]);
+
+const metaFiles = computed(() => {
+    return props.item.meta_files;
+});
+const hasMetaFiles = computed(() => {
+    return metaFiles.value && metaFiles.value.length > 0;
+});
+const metaDownloadUrl = computed(() => {
+    return prependPath(`api/datasets/${props.item.id}/metadata_file?metadata_file=`);
+});
+const downloadUrl = computed(() => {
+    return prependPath(`api/datasets/${props.item.id}/display?to_ext=${props.item.extension}`);
+});
+
+function onDownload(resource: string, extension = "") {
+    emit("on-download", `${resource}${extension}`);
+}
+</script>
+
 <template>
-    <b-dropdown
+    <BDropdown
         v-if="hasMetaFiles"
         v-b-tooltip.top.hover
         dropup
@@ -12,21 +55,24 @@
         class="download-btn"
         data-description="dataset download">
         <template v-slot:button-content>
-            <span class="fa fa-save" />
+            <FontAwesomeIcon :icon="faSave" />
         </template>
-        <b-dropdown-item v-localize :href="downloadUrl" @click.prevent.stop="onDownload(downloadUrl)">
+
+        <BDropdownItem v-localize :href="downloadUrl" @click.prevent.stop="onDownload(downloadUrl)">
             Download Dataset
-        </b-dropdown-item>
-        <b-dropdown-item
+        </BDropdownItem>
+
+        <BDropdownItem
             v-for="(metaFile, index) of metaFiles"
             :key="index"
             :data-description="`download ${metaFile.file_type}`"
             :href="metaDownloadUrl + metaFile.file_type"
             @click.prevent.stop="onDownload(metaDownloadUrl, metaFile.file_type)">
             Download {{ metaFile.file_type }}
-        </b-dropdown-item>
-    </b-dropdown>
-    <b-button
+        </BDropdownItem>
+    </BDropdown>
+
+    <BButton
         v-else
         class="download-btn px-1"
         title="Download"
@@ -34,35 +80,6 @@
         variant="link"
         :href="downloadUrl"
         @click.prevent.stop="onDownload(downloadUrl)">
-        <span class="fa fa-save" />
-    </b-button>
+        <FontAwesomeIcon :icon="faSave" />
+    </BButton>
 </template>
-
-<script>
-import { prependPath } from "utils/redirect";
-
-import { downloadUrlMixin } from "./mixins.js";
-
-export default {
-    mixins: [downloadUrlMixin],
-    props: {
-        item: { type: Object, required: true },
-    },
-    computed: {
-        hasMetaFiles() {
-            return this.metaFiles && this.metaFiles.length > 0;
-        },
-        metaDownloadUrl() {
-            return prependPath(`api/datasets/${this.item.id}/metadata_file?metadata_file=`);
-        },
-        metaFiles() {
-            return this.item.meta_files;
-        },
-    },
-    methods: {
-        onDownload(resource, extension = "") {
-            this.$emit("on-download", `${resource}${extension}`);
-        },
-    },
-};
-</script>