diff --git a/assets/vue/components/message/Form.vue b/assets/vue/components/message/Form.vue
index 7c2e4eecde..5e24bb6eec 100644
--- a/assets/vue/components/message/Form.vue
+++ b/assets/vue/components/message/Form.vue
@@ -10,42 +10,40 @@
       <slot></slot>
     </div>
 
-    <div>
-      <div v-if="attachments && attachments.length > 0">
-        <div
-          v-t="'Attachments'"
-          class="text-h6"
-        />
-
-        <ul>
-          <li
-            v-for="(attachment, index) in attachments"
-            :key="index"
-            class="my-2"
-          >
-            <audio
-              v-if="attachment.type.indexOf('audio') === 0"
-              class="max-w-full"
-              controls
-            >
-              <source :src="window.URL.createObjectURL(attachment)" />
-            </audio>
-          </li>
-        </ul>
+    <div class="space-y-4">
+      <p class="text-h6">
+        <BaseIcon icon="attachment" />
+        {{ t("Attachments") }}
+      </p>
 
-        <hr />
-      </div>
+      <ul
+        v-if="attachments && attachments.length > 0"
+        class="space-y-2"
+      >
+        <li
+          v-for="(attachment, index) in attachments"
+          :key="index"
+          class="text-body-2"
+          v-text="attachment.originalName"
+        />
+      </ul>
 
-      <AudioRecorder @attach-audio="attachAudios" />
+      <BaseUploader
+        field-name="file"
+        :endpoint="resourceFileService.endpoint"
+        @upload-success="onUploadSuccess"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import AudioRecorder from "../AudioRecorder"
 import BaseInputText from "../basecomponents/BaseInputText.vue"
 import { useI18n } from "vue-i18n"
 import { computed } from "vue"
+import BaseIcon from "../basecomponents/BaseIcon.vue"
+import BaseUploader from "../basecomponents/BaseUploader.vue"
+import resourceFileService from "../../services/resourceFileService"
 
 const attachments = defineModel("attachments", {
   type: Array,
@@ -70,5 +68,5 @@ const { t } = useI18n()
 
 const item = computed(() => props.initialValues || props.values)
 
-const attachAudios = (audio) => attachments.value.push(audio)
+const onUploadSuccess = (resource) => attachments.value.push(resource)
 </script>
diff --git a/assets/vue/services/resourceFileService.js b/assets/vue/services/resourceFileService.js
new file mode 100644
index 0000000000..4ae9259f20
--- /dev/null
+++ b/assets/vue/services/resourceFileService.js
@@ -0,0 +1,12 @@
+import baseService from "./baseService"
+
+const endpoint = "/api/resource_files"
+
+const post = async (formData) => {
+  return await baseService.postForm(endpoint, formData)
+}
+
+export default {
+  endpoint,
+  post,
+}
diff --git a/assets/vue/views/message/MessageCreate.vue b/assets/vue/views/message/MessageCreate.vue
index 41797ee6c4..ff89445bb1 100644
--- a/assets/vue/views/message/MessageCreate.vue
+++ b/assets/vue/views/message/MessageCreate.vue
@@ -91,6 +91,7 @@ const item = ref({
   msgType: MESSAGE_TYPE_INBOX,
   title: "",
   content: "",
+  attachments: [],
 })
 
 const attachments = ref([])
@@ -127,6 +128,10 @@ const onSubmit = async () => {
   if (!canSubmitMessage.value) {
     return
   }
+
+  item.value.attachments = attachments.value.map((attachment) => ({
+    resourceFileToAttach: attachment["@id"],
+  }))
   item.value.receivers = [...receiversTo.value, ...receiversCc.value]
   isLoading.value = true