diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index f9b68eb..bb866a5 100755
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -12,6 +12,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/vue-fontawesome": "^3.0.3",
         "axios": "^1.4.0",
+        "file-saver": "^2.0.5",
         "pinia": "^2.1.4",
         "primevue": "^3.31.0",
         "vee-validate": "^4.11.7",
@@ -26,6 +27,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/user-event": "^14.4.3",
         "@testing-library/vue": "^7.0.0",
+        "@types/file-saver": "^2.0.7",
         "@types/jsdom": "^21.1.1",
         "@types/node": "^20.3.1",
         "@vitejs/plugin-vue": "^4.2.3",
@@ -1156,6 +1158,12 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -3613,6 +3621,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 9813cf2..da67261 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -15,6 +15,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "axios": "^1.4.0",
+    "file-saver": "^2.0.5",
     "pinia": "^2.1.4",
     "primevue": "^3.31.0",
     "vee-validate": "^4.11.7",
@@ -29,6 +30,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^7.0.0",
+    "@types/file-saver": "^2.0.7",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^20.3.1",
     "@vitejs/plugin-vue": "^4.2.3",
diff --git a/webapp/src/views/InstanceView.vue b/webapp/src/views/InstanceView.vue
index 8eb0c2d..f47b9cc 100644
--- a/webapp/src/views/InstanceView.vue
+++ b/webapp/src/views/InstanceView.vue
@@ -129,6 +129,7 @@
             >
               <div
                 class="flex h-8 w-full items-center rounded bg-transparent pl-2 pr-4 font-sans font-semibold text-gray-400 outline-none hover:cursor-pointer hover:bg-gray-600 hover:underline"
+                v-on:click="download_file(att)"
               >
                 {{ att }}
               </div>
@@ -156,7 +157,7 @@
           </div>
         </div>
         <div class="border bg-green-500">
-          <input type="file" v-on:change="uploadfile" />
+          <input type="file" v-on:change="upload_file" />
         </div>
       </div>
       <div
@@ -185,7 +186,7 @@
             <div class="max-h-full px-4 py-4">
               <p class="text-gray-800">
                 Are you sure you want to delete:
-                <span class="font-semibold">{{ att }}</span> ?
+                <span class="font-semibold">{{ attachment }}</span> ?
               </p>
 
               <div class="mt-4 text-right">
@@ -248,6 +249,7 @@ import { useModelStore } from "@/stores/modelStore";
 import FabMark from "@/components/FabMark.vue";
 
 import { formatDecimal, formatDate, getLabel } from "@/utils/utils";
+import { saveAs } from "file-saver";
 
 import type { Model } from "@/types";
 
@@ -256,7 +258,7 @@ const modelStore = useModelStore();
 const route = useRoute();
 
 const showModal = ref(false);
-const att = ref("");
+const attachment = ref("");
 
 // const createNewModel = () => {
 //   console.log(`new model ${model_name.value}`);
@@ -265,7 +267,11 @@ const att = ref("");
 const delete_instance = async () => {
   showModal.value = false;
 
-  await modelStore.delete_attachment(model_name.value, id.value, att.value);
+  await modelStore.delete_attachment(
+    model_name.value,
+    id.value,
+    attachment.value
+  );
 
   // refresh to get updated list of attachments
   modelStore.get_instance(model_name.value, id.value);
@@ -289,7 +295,7 @@ const getSkemaFields = computed(() => {
   return [];
 });
 
-const uploadfile = async (e: any) => {
+const upload_file = async (e: any) => {
   const presigned_url = await modelStore.get_presigned_put_url(
     model_name.value,
     id.value,
@@ -304,9 +310,19 @@ const uploadfile = async (e: any) => {
   modelStore.get_instance(model_name.value, id.value);
 };
 
+const download_file = async (filename: string) => {
+  const presigned_url = await modelStore.get_presigned_get_url(
+    model_name.value,
+    id.value,
+    filename
+  );
+
+  saveAs(presigned_url, filename);
+};
+
 const confirm_delete_attachment = async (s: any) => {
   showModal.value = true;
-  att.value = s;
+  attachment.value = s;
 };
 
 // const ff = computed(() => {