diff --git a/src/components/AttachmentTag.vue b/src/components/AttachmentTag.vue
new file mode 100644
index 0000000000..494ab44ed1
--- /dev/null
+++ b/src/components/AttachmentTag.vue
@@ -0,0 +1,62 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="attachment-tag" :class="{ 'attachment-tag--remaing': remaining > 0 }" @click="$emit('open')">
+		<FileIcon v-if="remaining === 0" :file-name="fileName" :mime-type="mimeType" />
+		<p class="attachment-tag__filename">
+			{{ remaining > 0 ? `+${remaining}` : fileName }}
+		</p>
+	</div>
+</template>
+
+<script>
+import FileIcon from './icons/FileIcon.vue'
+export default {
+	name: 'AttachmentTag',
+	components: { FileIcon },
+	props: {
+		fileName: {
+			type: String,
+			default: '',
+		},
+
+		mimeType: {
+			type: String,
+			default: '',
+		},
+
+		remaining: {
+			type: Number,
+			default: 0,
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.attachment-tag {
+    height: 24px;
+    border: 1px solid var(--color-border-dark);
+    border-radius: var(--border-radius-element);
+	gap: 4px;
+	display: flex;
+	cursor: unset;
+	align-items: center;
+    max-width: 140px;
+	min-width: 60px;
+	margin-inline-end: 4px;
+	padding: 0 6px;
+
+	&__filename{
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+}
+
+.attachment-tag--remaing{
+	min-width: unset;
+}
+</style>
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index b9d16502f0..0b01bada05 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -4,6 +4,7 @@
 -->
 <template>
 	<EnvelopeSkeleton
+		ref="component"
 		v-draggable-envelope="{
 			accountId: data.accountId ? data.accountId : mailbox.accountId,
 			mailboxId: data.mailboxId,
@@ -421,6 +422,13 @@
 					{{ translateTagDisplayName(tag) }}
 				</span>
 			</div>
+			<div v-for="(attachment, idx) in attachments" :key="`attachement-${idx}`">
+				<AttachmentTag
+					:file-name="attachment.fileName"
+					:mime-type="attachment.mime"
+					@open="showViewer(fileInfos[idx])" />
+			</div>
+			<AttachmentTag v-if="remainingAttachements > 0" :remaining="remainingAttachements" />
 			<MoveModal
 				v-if="showMoveModal"
 				:account="account"
@@ -485,6 +493,7 @@ import StarOutline from 'vue-material-design-icons/StarOutline.vue'
 import TagIcon from 'vue-material-design-icons/TagOutline.vue'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import DownloadIcon from 'vue-material-design-icons/TrayArrowDown.vue'
+import AttachmentTag from './AttachmentTag.vue'
 import Avatar from './Avatar.vue'
 import EnvelopePrimaryActions from './EnvelopePrimaryActions.vue'
 import EnvelopeSkeleton from './EnvelopeSkeleton.vue'
@@ -500,6 +509,7 @@ import { matchError } from '../errors/match.js'
 import NoTrashMailboxConfiguredError
 	from '../errors/NoTrashMailboxConfiguredError.js'
 import logger from '../logger.js'
+import AttachementMixin from '../mixins/AttachementMixin.js'
 import { buildRecipients as buildReplyRecipients } from '../ReplyBuilder.js'
 import { FOLLOW_UP_TAG_LABEL } from '../store/constants.js'
 import useMainStore from '../store/mainStore.js'
@@ -511,6 +521,7 @@ import { hiddenTags } from './tags.js'
 export default {
 	name: 'Envelope',
 	components: {
+		AttachmentTag,
 		AlertOctagonIcon,
 		Avatar,
 		IconCreateEvent,
@@ -559,6 +570,8 @@ export default {
 		draggableEnvelope: DraggableEnvelopeDirective,
 	},
 
+	mixins: [AttachementMixin],
+
 	props: {
 		withReply: {
 			// "Reply" action should only appear in envelopes from the envelope list
@@ -612,6 +625,7 @@ export default {
 			overwriteOneLineMobile: false,
 			hoveringAvatar: false,
 			quickActionLoading: false,
+			possibleAttachementsCount: 0,
 		}
 	},
 
@@ -746,6 +760,14 @@ export default {
 			return tags
 		},
 
+		attachments() {
+			return this.data.attachments.filter((e) => e.fileName && e.fileName.length > 0).slice(0, this.possibleAttachementsCount)
+		},
+
+		remainingAttachements() {
+			return this.data.attachments.length - this.attachments.length
+		},
+
 		draggableLabel() {
 			let label = this.data.subject
 			const sender = this.data.from[0]?.label ?? this.data.from[0]?.email
@@ -923,6 +945,20 @@ export default {
 			return shortRelativeDatetime(new Date(this.data.dateInt * 1000))
 		},
 
+		countPossibleAttachements() {
+			const container = this.$refs.component?.$el?.querySelector('.list-item-content')
+			if (!container) {
+				return 0 // or a default value
+			}
+			const tagsWidth = Array.from(container.querySelectorAll('.tag-group') ?? [])
+				.reduce((total, tag) => total + tag.clientWidth, 0)
+			const detailsWidth = container.querySelector('.list-item-content__inner__details')?.clientWidth ?? 0
+			const availableWidth = (container.clientWidth ?? 0) - detailsWidth - tagsWidth - 30 // 30px for the extra (+n) indicator
+
+			const attachementSize = 140 + 4 // min-width + gap
+			this.possibleAttachementsCount = Math.min(3, Math.floor(availableWidth / attachementSize))
+		},
+
 		async executeQuickAction(action) {
 			this.closeQuickActionsMenu()
 			this.quickActionLoading = true
@@ -1343,6 +1379,7 @@ export default {
 			} else {
 				this.overwriteOneLineMobile = false
 			}
+			this.countPossibleAttachements()
 		},
 	},
 }
diff --git a/src/components/EnvelopeSkeleton.vue b/src/components/EnvelopeSkeleton.vue
index b5e2608cfe..f1b175d220 100644
--- a/src/components/EnvelopeSkeleton.vue
+++ b/src/components/EnvelopeSkeleton.vue
@@ -55,7 +55,10 @@
 									<!-- @slot Slot for the second line of the component -->
 									<slot name="subname" />
 								</div>
-								<div v-if="$slots.tags" class="list-item-content__inner__tags">
+								<div
+									v-if="$slots.tags"
+									class="list-item-content__inner__tags"
+									@click.prevent.stop>
 									<!-- @slot This slot is used for the third line of the component -->
 									<slot name="tags" />
 								</div>
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index 6ba80a83f1..e08eb7c0d9 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -66,7 +66,6 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
-import { basename } from '@nextcloud/paths'
 import { generateUrl } from '@nextcloud/router'
 import { NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
@@ -75,6 +74,7 @@ import CloudDownload from 'vue-material-design-icons/CloudDownloadOutline.vue'
 import Download from 'vue-material-design-icons/TrayArrowDown.vue'
 import MessageAttachment from './MessageAttachment.vue'
 import Logger from '../logger.js'
+import AttachementMixin from '../mixins/AttachementMixin.js'
 import { saveAttachmentsToFiles } from '../service/AttachmentService.js'
 
 export default {
@@ -89,6 +89,7 @@ export default {
 		FilePicker,
 	},
 
+	mixins: [AttachementMixin],
 	props: {
 		envelope: {
 			required: true,
@@ -122,25 +123,6 @@ export default {
 	},
 
 	computed: {
-		fileInfos() {
-			return this.attachments.map((attachment) => ({
-				filename: attachment.downloadUrl,
-				source: attachment.downloadUrl,
-				basename: basename(attachment.downloadUrl),
-				mime: attachment.mime,
-				etag: 'fixme',
-				hasPreview: false,
-				fileid: parseInt(attachment.id, 10),
-			}))
-		},
-
-		previewableFileInfos() {
-			return this.fileInfos.filter((fileInfo) => (fileInfo.mime.startsWith('image/')
-				|| fileInfo.mime.startsWith('video/')
-				|| fileInfo.mime.startsWith('audio/')
-				|| fileInfo.mime === 'application/pdf')
-			&& OCA.Viewer.mimetypes.includes(fileInfo.mime))
-		},
 
 		moreThanOne() {
 			return this.attachments.length > 1
@@ -154,6 +136,7 @@ export default {
 	},
 
 	mounted() {
+		console.log(this.attachments)
 		let prevTop = null
 		this.visible = 0
 		this.$nextTick(function() {
@@ -175,9 +158,6 @@ export default {
 	},
 
 	methods: {
-		canPreview(fileInfo) {
-			return this.previewableFileInfos.includes(fileInfo)
-		},
 
 		saveAll(dest) {
 			const path = dest[0].path
@@ -198,19 +178,6 @@ export default {
 		downloadZip() {
 			window.location = this.zipUrl
 		},
-
-		showViewer(fileInfo) {
-			if (!this.canPreview(fileInfo)) {
-				return
-			}
-
-			if (this.previewableFileInfos.includes(fileInfo)) {
-				OCA.Viewer.open({
-					fileInfo,
-					list: this.previewableFileInfos,
-				})
-			}
-		},
 	},
 }
 </script>
diff --git a/src/components/icons/FileIcon.vue b/src/components/icons/FileIcon.vue
new file mode 100644
index 0000000000..b290c1d166
--- /dev/null
+++ b/src/components/icons/FileIcon.vue
@@ -0,0 +1,107 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<span class="file-icon" :style="{ color: `var(${color})` }">
+		<component :is="iconComponent" class="file-icon__svg" :size="16" />
+	</span>
+</template>
+
+<script>
+import DocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
+import MusicOutlineIcon from 'vue-material-design-icons/FileMusicOutline.vue'
+import FileOutlineIcon from 'vue-material-design-icons/FileOutline.vue'
+import FilePdfBox from 'vue-material-design-icons/FilePdfBox.vue'
+import VideoOutlineIcon from 'vue-material-design-icons/FileVideoOutline.vue'
+import ImageOutlineIcon from 'vue-material-design-icons/ImageOutline.vue'
+import { FILE_EXTENSIONS_PRESENTATION, FILE_EXTENSIONS_SPREADSHEET, FILE_EXTENSIONS_WORD_PROCESSING } from '../../store/constants.js'
+
+export default {
+	name: 'FileIcon',
+	props: {
+		fileName: {
+			type: String,
+			required: true,
+		},
+
+		mimeType: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			extension: '',
+			icon: null,
+			color: '--color-text-maxcontrast',
+		}
+	},
+
+	computed: {
+		iconName() {
+			const type = this.mimeType.split('/')[0].toLowerCase()
+			if (this.extension === 'pdf') {
+				return 'pdf'
+			}
+			if ([...FILE_EXTENSIONS_WORD_PROCESSING, 'txt', 'md'].includes(this.extension)) {
+				return 'document'
+			}
+			if (type === 'image') {
+				return 'image'
+			}
+			if (type === 'video') {
+				return 'video'
+			}
+			if (type === 'audio') {
+				return 'music'
+			}
+			return 'file'
+		},
+
+		iconComponent() {
+			const map = {
+				file: FileOutlineIcon,
+				image: ImageOutlineIcon,
+				video: VideoOutlineIcon,
+				music: MusicOutlineIcon,
+				document: DocumentOutlineIcon,
+				pdf: FilePdfBox,
+			}
+			return map[this.iconName] || FileOutlineIcon
+		},
+	},
+
+	mounted() {
+		this.extension = this.fileName.split('.').pop().toLowerCase()
+		this.setColor()
+	},
+
+	methods: {
+		setColor() {
+			if (FILE_EXTENSIONS_WORD_PROCESSING.includes(this.extension)) {
+				this.color = '--color-info-text'
+			} else if (FILE_EXTENSIONS_SPREADSHEET.includes(this.extension)) {
+				this.color = '--color-border-success'
+			} else if (FILE_EXTENSIONS_PRESENTATION.includes(this.extension)) {
+				this.color = '--color-favorite'
+			} else if (this.extension === 'pdf') {
+				this.color = '--color-text-error'
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.file-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+	border-radius: 4px;
+	padding: 0 4px;
+}
+</style>
diff --git a/src/mixins/AttachementMixin.js b/src/mixins/AttachementMixin.js
new file mode 100644
index 0000000000..30c47b66d2
--- /dev/null
+++ b/src/mixins/AttachementMixin.js
@@ -0,0 +1,44 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export default {
+	computed: {
+		fileInfos() {
+			return this.attachments.map((attachment) => ({
+				filename: attachment.downloadUrl,
+				source: attachment.downloadUrl,
+				basename: attachment.fileName,
+				mime: attachment.mime,
+				etag: 'fixme',
+				hasPreview: false,
+				fileid: parseInt(attachment.id, 10),
+			}))
+		},
+
+		previewableFileInfos() {
+			return this.fileInfos.filter((fileInfo) => (fileInfo.mime.startsWith('image/')
+				|| fileInfo.mime.startsWith('video/')
+				|| fileInfo.mime.startsWith('audio/')
+				|| fileInfo.mime === 'application/pdf')
+			&& OCA.Viewer.mimetypes.includes(fileInfo.mime))
+		},
+	},
+	methods: {
+		canPreview(fileInfo) {
+			return this.previewableFileInfos.includes(fileInfo)
+		},
+		showViewer(fileInfo) {
+			if (!this.canPreview(fileInfo)) {
+				return
+			}
+
+			OCA.Viewer.open({
+				fileInfo,
+				list: this.previewableFileInfos,
+			})
+		},
+
+	},
+}
diff --git a/src/store/constants.js b/src/store/constants.js
index d34e342e58..ee76ba8f4e 100644
--- a/src/store/constants.js
+++ b/src/store/constants.js
@@ -18,3 +18,6 @@ export const STATUS_IMAP_SENT_MAILBOX_FAIL = 11
 export const STATUS_SMTP_ERROR = 13
 
 export const FOLLOW_UP_TAG_LABEL = '$follow_up'
+export const FILE_EXTENSIONS_WORD_PROCESSING = ['doc', 'docx', 'dot', 'odt', 'dotx', 'odt', 'ott']
+export const FILE_EXTENSIONS_SPREADSHEET = ['xls', 'xlsx', 'ods']
+export const FILE_EXTENSIONS_PRESENTATION = ['ppt', 'pptx', 'odp', 'otp', 'pps', 'ppsx', 'pot', 'potx']
diff --git a/src/store/mainStore/actions.js b/src/store/mainStore/actions.js
index 83059563be..6429cc2ebe 100644
--- a/src/store/mainStore/actions.js
+++ b/src/store/mainStore/actions.js
@@ -2225,7 +2225,13 @@ export default function mainStoreActions() {
 				this.normalizeTags(e)
 				const mailbox = this.mailboxes[e.mailboxId]
 				Vue.set(e, 'accountId', mailbox.accountId)
-				Vue.set(this.envelopes, e.databaseId, { ...this.envelopes[e.databaseId] || {}, ...e })
+				const existing = this.envelopes[e.databaseId] || {}
+				const merged = { ...existing, ...e }
+				// preserve attachments
+				if (existing.attachments && existing.attachments.length > 0) {
+					merged.attachments = existing.attachments
+				}
+				Vue.set(this.envelopes, e.databaseId, merged)
 			})
 
 			// Store the references
diff --git a/src/tests/unit/store/mutations.spec.js b/src/tests/unit/store/mutations.spec.js
index acc33761b3..55bacd934b 100644
--- a/src/tests/unit/store/mutations.spec.js
+++ b/src/tests/unit/store/mutations.spec.js
@@ -939,6 +939,7 @@ describe('Pinia store mutations', () => {
 			databaseId: 123,
 			mailboxId: 27,
 			uid: 12345,
+			attachments: [{ id: 1, fileName: 'example' }],
 		}
 		store.$patch({
 			mailboxes: {
@@ -966,6 +967,7 @@ describe('Pinia store mutations', () => {
 					databaseId: 123,
 					mailboxId: 27,
 					uid: 12345,
+					attachments: [],
 				},
 				{
 					databaseId: 124,
@@ -1001,6 +1003,7 @@ describe('Pinia store mutations', () => {
 						124,
 					],
 					tags: [],
+					attachments: [{ id: 1, fileName: 'example' }],
 				},
 				124: {
 					databaseId: 124,
@@ -1042,6 +1045,7 @@ describe('Pinia store mutations', () => {
 			envelopes: [{
 				mailboxId: 27,
 				databaseId: 12345,
+				attachments: [],
 				id: 123,
 				subject: 'henlo',
 				uid: 321,
@@ -1070,6 +1074,7 @@ describe('Pinia store mutations', () => {
 				12345: {
 					mailboxId: 27,
 					databaseId: 12345,
+					attachments: [],
 					uid: 321,
 					id: 123,
 					subject: 'henlo',