diff --git a/packages/nc-gui/components/cell/attachment/IconView.vue b/packages/nc-gui/components/cell/attachment/IconView.vue
new file mode 100644
index 0000000000..80422eacb5
--- /dev/null
+++ b/packages/nc-gui/components/cell/attachment/IconView.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  item: any
+}>()
+
+const icon = useAttachmentIcon(() => props.item.title, props.item.mimetype)
+
+</script>
+
+<template>
+  <GeneralIcon :icon="icon" class="text-white" />
+</template>
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 88a89e2143..5617e5d759 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -261,16 +261,7 @@ defineExpose({
             @click="onFileClick(item)"
           />
 
-          <component
-            :is="FileIcon(item.icon)"
-            v-else-if="item.icon"
-            :height="45"
-            :width="45"
-            class="text-white"
-            @click="selectedFile = item"
-          />
-
-          <GeneralIcon v-else icon="ncFileTypeUnknown" :height="45" :width="45" class="text-white" @click="selectedFile = item" />
+          <CellAttachmentIconView v-else :item="item" :height="45" :width="45" @click="selectedFile = item" />
         </div>
 
         <div class="relative px-1 flex" :title="item.title">
@@ -433,9 +424,7 @@ defineExpose({
               }"
               @click="onFileClick(item)"
             >
-              <component :is="FileIcon(item.icon)" v-if="item.icon" class="text-white max-h-full max-w-full" />
-
-              <GeneralIcon v-else icon="ncFileTypeUnknown" class="text-white max-h-full max-w-full" />
+              <CellAttachmentIconView :item="item" class="max-h-full max-w-full" />
             </div>
           </NcTooltip>
         </template>
diff --git a/packages/nc-gui/composables/useAttachmentIcon.ts b/packages/nc-gui/composables/useAttachmentIcon.ts
new file mode 100644
index 0000000000..b4aaf18df8
--- /dev/null
+++ b/packages/nc-gui/composables/useAttachmentIcon.ts
@@ -0,0 +1,38 @@
+
+export const useAttachmentIcon = (title: MaybeRefOrGetter<string | undefined>, mimetype: MaybeRefOrGetter<string | undefined>) => {
+  return computed<keyof typeof iconMap>(() => {
+    if (isImage(toValue(title) || '', toValue(mimetype))) {
+      return 'image'
+    }
+
+    if (isPdf(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypePdf'
+    }
+
+    if (isVideo(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypeVideo'
+    }
+
+    if (isAudio(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypeAudio'
+    }
+
+    if (isWord(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypeWord'
+    }
+
+    if (isExcel(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypeExcel'
+    }
+
+    if (isPresentation(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypePresentation'
+    }
+
+    if (isZip(toValue(title) || '', toValue(mimetype))) {
+      return 'ncFileTypeZip'
+    }
+
+    return 'ncFileTypeUnknown'
+  })
+}