diff --git a/app/javascript/dashboard/components-next/message/bubbles/File.vue b/app/javascript/dashboard/components-next/message/bubbles/File.vue
index 0d907f68a..1dc8f4c1d 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/File.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/File.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import BaseBubble from './Base.vue';
-import Icon from 'next/icon/Icon.vue';
+import FileIcon from 'next/icon/FileIcon.vue';
 import Button from 'next/button/Button.vue';
 
 /**
@@ -46,51 +46,15 @@ const fileName = computed(() => {
   return t('CONVERSATION.UNKNOWN_FILE_TYPE');
 });
 
-const fileTypeIcon = computed(() => {
-  const fileType = fileName.value.split('.').pop();
-
-  const fileIconMap = {
-    '7z': 'i-teenyicons-zip-solid',
-    csv: 'i-teenyicons-csv-solid',
-    doc: 'i-teenyicons-doc-solid',
-    docx: 'i-teenyicons-doc-solid',
-    json: 'i-teenyicons-text-document-solid',
-    odt: 'i-teenyicons-doc-solid',
-    pdf: 'i-teenyicons-pdf-solid',
-    ppt: 'i-teenyicons-ppt-solid',
-    pptx: 'i-teenyicons-ppt-solid',
-    rar: 'i-teenyicons-archive-solid',
-    rtf: 'i-teenyicons-doc-solid',
-    tar: 'i-teenyicons-archive-solid',
-    txt: 'i-teenyicons-text-document-solid',
-    xls: 'i-teenyicons-xls-solid',
-    xlsx: 'i-teenyicons-xls-solid',
-    zip: 'i-teenyicons-zip-solid',
-  };
-
-  return fileIconMap[fileType] || 'i-teenyicons-text-document-solid';
-});
-
-const iconColor = computed(() => {
-  const colorMap = {
-    'i-teenyicons-archive-solid': '#1B1B1B',
-    'i-teenyicons-csv-solid': '#217346',
-    'i-teenyicons-doc-solid': '#2B579A',
-    'i-teenyicons-pdf-solid': '#FF0000',
-    'i-teenyicons-ppt-solid': '#D24726',
-    'i-teenyicons-text-document-solid': '#41A5EE',
-    'i-teenyicons-xls-solid': '#217346',
-    'i-teenyicons-zip-solid': '#FDB813',
-  };
-
-  return colorMap[fileTypeIcon.value];
+const fileType = computed(() => {
+  return fileName.value.split('.').pop();
 });
 </script>
 
 <template>
   <BaseBubble class="overflow-hidden relative group p-3 min-w-56">
     <span class="text-n-slate-12 flex items-center gap-1.5">
-      <Icon :icon="fileTypeIcon" class="size-4" :style="{ color: iconColor }" />
+      <FileIcon :file-type="fileType" class="size-4" />
       {{ decodeURI(fileName) }}
     </span>
     <Button xs solid slate class="w-full mt-2" icon="i-lucide-download">