diff --git a/resources/js/pages/patients/NotesPanel.vue b/resources/js/pages/patients/NotesPanel.vue
index 69021e6..18b49cb 100644
--- a/resources/js/pages/patients/NotesPanel.vue
+++ b/resources/js/pages/patients/NotesPanel.vue
@@ -37,6 +37,15 @@ const downloadFile = (fileUrl) => {
     link.click();
     document.body.removeChild(link);
 };
+const downloadImage = async (imageUrl) => {
+      try {
+        const response = await fetch(imageUrl)
+        const blob = await response.blob()
+        const fileName = imageUrl.split('/').pop()
+        saveAs(blob, fileName)
+      } catch (error) {
+        console.error('Error downloading image:', error)      }
+    }
 </script>
 
 <template>
@@ -64,9 +73,10 @@ const downloadFile = (fileUrl) => {
             <span class="app-timeline-title" v-if="p_note.note_type=='Notes'">
               {{p_note.note}}
             </span>
-           <span class="app-timeline-title" v-if="p_note.note_type=='file'">
-             <img :src="p_note.note"/>
-            </span>
+          <span class="app-timeline-title" v-if="p_note.note_type == 'file'">
+                <img :src="p_note.note" @click="downloadImage(p_note.note)" />
+         
+          </span>
             <span class="app-timeline-meta">{{ formatDateDate(p_note.created_at) }}</span>
             <!-- <span></span> -->
           </div>
diff --git a/resources/js/pages/providers/NotesPanel.vue b/resources/js/pages/providers/NotesPanel.vue
index 9091db5..a795d39 100644
--- a/resources/js/pages/providers/NotesPanel.vue
+++ b/resources/js/pages/providers/NotesPanel.vue
@@ -76,8 +76,8 @@ const downloadFile = (fileUrl) => {
             </span>
          
               <span class="app-timeline-title" v-if="p_note.note_type == 'file'">
-            <img :src="p_note.note" @click="downloadImage(p_note.note)" />
-            <button @click="downloadImage(p_note.note)">Download Image</button>
+                <img :src="p_note.note" @click="downloadImage(p_note.note)" />
+         
           </span>