diff --git a/package-lock.json b/package-lock.json
index 36ff598c5..dbe2859eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3485,6 +3485,21 @@
 				}
 			}
 		},
+		"@nextcloud/files": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/files/-/files-1.0.0.tgz",
+			"integrity": "sha512-HJF+eavX8BymQ83jGkluNyQ8zrbFfuiQwunSe140sbQ042pjyljSUACf/WyvVAeqaCj7cIeYMPQBtvykom0+cg==",
+			"requires": {
+				"core-js": "3.5.0"
+			},
+			"dependencies": {
+				"core-js": {
+					"version": "3.5.0",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.5.0.tgz",
+					"integrity": "sha512-Ifh3kj78gzQ7NAoJXeTu+XwzDld0QRIwjBLRqAMhuLhP3d2Av5wmgE9ycfnvK6NAEjTkQ1sDPeoEZAWO3Hx1Uw=="
+				}
+			}
+		},
 		"@nextcloud/l10n": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/l10n/-/l10n-1.1.0.tgz",
diff --git a/package.json b/package.json
index 2888b99a7..6ff7e4314 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
 		"@nextcloud/axios": "^1.3.1",
 		"@nextcloud/l10n": "^1.1.0",
 		"@nextcloud/dialogs": "^1.2.1",
+		"@nextcloud/files": "^1.0.0",
 		"@nextcloud/moment": "^1.1.0",
 		"@nextcloud/router": "^1.0.0",
 		"@nextcloud/vue": "^1.4.0",
diff --git a/src/components/card/CardSidebarTabAttachments.vue b/src/components/card/CardSidebarTabAttachments.vue
index 3ebc600f2..2b13dbfd2 100644
--- a/src/components/card/CardSidebarTabAttachments.vue
+++ b/src/components/card/CardSidebarTabAttachments.vue
@@ -29,41 +29,36 @@
 			type="file"
 			style="display: none;"
 			@change="onLocalAttachmentSelected">
-		<attachment-list-component>
-			<div class="attachment-list-wrapper">
-				<div class="attachment-list">
-					<ul>	
-						<li v-for="attachment in attachments" :key="attachment.id" class="attachment">
-							<a class="fileicon" :style="mimetypeForAttachment(attachment)" :href="attachmentUrl(attachment)" 
-								style="background-image: url(&quot;/apps/theming/img/core/filetypes/image.svg?v=13&quot;);"></a>
-								<div class="details">
-									<a :href="attachmentUrl(attachment)" target="_blank">
-										<div class="filename">
-											<span class="basename">{{ attachment.data }}</span>
-											<span class="extension">.xxx</span>
-										</div>
-										<span class="filesize">{{ attachment.extendedData.filesize }}</span>
-										<span class="filedate">{{ attachment.createdAt }}</span>
-										<span class="filedate">{{ attachment.createdBy }}</span>
-									</a>
-								</div>
+		<div class="attachment-list">
+			<ul>
+				<li v-for="attachment in attachments"
+					:key="attachment.id"
+					class="attachment"
+					style="display: flex;">
+					<a class="fileicon" :style="mimetypeForAttachment(attachment)" :href="attachmentUrl(attachment)" />
+					<div class="details">
+						<a :href="attachmentUrl(attachment)" target="_blank">
+							<div class="filename">
+								<span class="basename">{{ attachment.data }}</span>
+							</div>
+							<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
+							<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
+							<span class="filedate">{{ attachment.createdBy }}</span>
+						</a>
+					</div>
+					<Actions>
+						<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="deleteAttachment(attachment)">
+							{{ t('deck', 'Delete Attachment') }}
+						</ActionButton>
 
-							<Actions>
-								<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="deleteAttachment(attachment)">
-									{{ t('deck', 'Delete Attachment') }}
-								</ActionButton>
+						<ActionButton v-else icon="icon-history" @click="restoreAttachment(attachment)">
+							{{ t('deck', 'Restore Attachment') }}
+						</ActionButton>
+					</Actions>
+				</li>
+			</ul>
+		</div>
 
-								<ActionButton v-else icon="icon-history" @click="restoreAttachment(attachment)">
-									{{ t('deck', 'Restore Attachment') }}
-								</ActionButton>
-							</Actions>
-							
-						</li>
-					</ul>
-				</div>	
-			</div>
-		</attachment-list-component>
-		
 		<Modal v-if="modalShow" title="File already exists" @close="modalShow=false">
 			<div class="modal__content">
 				<h2>{{ t('deck', 'File already exists') }}</h2>
@@ -89,6 +84,8 @@
 <script>
 import { Actions, ActionButton, Modal } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
+import { formatFileSize } from '@nextcloud/files'
+import relativeDate from '../../mixins/relativeDate'
 
 export default {
 	name: 'CardSidebarTabAttachments',
@@ -97,6 +94,7 @@ export default {
 		ActionButton,
 		Modal,
 	},
+	mixins: [ relativeDate ],
 	props: {
 		card: {
 			type: Object,
@@ -107,13 +105,16 @@ export default {
 		return {
 			modalShow: false,
 			file: '',
-			overwriteAttachment: null
+			overwriteAttachment: null,
 		}
 	},
 	computed: {
 		attachments() {
 			return this.$store.getters.attachmentsByCard(this.card.id)
 		},
+		formattedFileSize() {
+			return (filesize) => formatFileSize(filesize)
+		},
 
 	},
 	created: function() {
@@ -161,10 +162,10 @@ export default {
 			bodyFormData.append('cardId', this.card.id)
 			bodyFormData.append('type', 'deck_file')
 			bodyFormData.append('file', this.file)
-			this.$store.dispatch('updateAttachment', { 
+			this.$store.dispatch('updateAttachment', {
 				cardId: this.card.id,
 				attachmentId: this.overwriteAttachment.id,
-				formData: bodyFormData 
+				formData: bodyFormData,
 			})
 
 			this.modalShow = false
@@ -187,15 +188,6 @@ export default {
 		margin: 40px 3px 3px 0;
 	}
 
-	.attachment-list-wrapper {
-		position: fixed;
-		width: 100%;
-		height: 100%;
-		background-color: rgba(darkgray, 0.5);
-		left: 0;
-		top: 0;
-		z-index: 300;
-	}
 	.attachment-list {
 		&.selector {
 			padding: 10px;
diff --git a/src/services/AttachmentApi.js b/src/services/AttachmentApi.js
index 30b90b595..2849c913f 100644
--- a/src/services/AttachmentApi.js
+++ b/src/services/AttachmentApi.js
@@ -52,7 +52,6 @@ export class AttachmentApi {
 		   url: this.url(`/cards/${cardId}/attachment/${attachmentId}`),
 		   data: formData,
 	   })
-	   console.log(response)
 	   return response.data
 	}
 
@@ -62,7 +61,7 @@ export class AttachmentApi {
 			url: this.url(`/cards/${attachment.cardId}/attachment/${attachment.id}`),
 		})
 	}
-	
+
 	async restoreAttachment(attachment) {
 		const response = await axios({
 			method: 'GET',
diff --git a/src/store/attachment.js b/src/store/attachment.js
index 7ce303170..884bbbcb2 100644
--- a/src/store/attachment.js
+++ b/src/store/attachment.js
@@ -62,7 +62,7 @@ export default {
 		deleteAttachment(state, deletedAttachment) {
 			const existingIndex = state.attachments[deletedAttachment.cardId].findIndex(a => a.id === deletedAttachment.id)
 			if (existingIndex !== -1) {
-				//state.attachments[deletedAttachment.cardId].splice(existingIndex, 1)
+				// state.attachments[deletedAttachment.cardId].splice(existingIndex, 1)
 				state.attachments[deletedAttachment.cardId][existingIndex].deletedAt = -1
 			}
 		},