diff --git a/lib/Controller/AttachmentApiController.php b/lib/Controller/AttachmentApiController.php
index e2c044e1a..cf027c064 100644
--- a/lib/Controller/AttachmentApiController.php
+++ b/lib/Controller/AttachmentApiController.php
@@ -45,7 +45,7 @@ class AttachmentApiController extends ApiController {
 	 *
 	 */
     public function getAll() {
-        $attachment = $this->attachmentService->findAll($this->request->getParam('cardId'));
+        $attachment = $this->attachmentService->findAll($this->request->getParam('cardId'), true);
         return new DataResponse($attachment, HTTP::STATUS_OK);
     }
 
diff --git a/lib/Controller/AttachmentController.php b/lib/Controller/AttachmentController.php
index ea31f194a..d595dc2b8 100644
--- a/lib/Controller/AttachmentController.php
+++ b/lib/Controller/AttachmentController.php
@@ -42,7 +42,7 @@ class AttachmentController extends Controller {
 	 * @NoAdminRequired
 	 */
 	public function getAll($cardId) {
-		return $this->attachmentService->findAll($cardId);
+		return $this->attachmentService->findAll($cardId, true);
 	}
 
 	/**
diff --git a/lib/Db/AttachmentMapper.php b/lib/Db/AttachmentMapper.php
index 2ccae3be8..00a7c61d7 100644
--- a/lib/Db/AttachmentMapper.php
+++ b/lib/Db/AttachmentMapper.php
@@ -81,6 +81,22 @@ class AttachmentMapper extends DeckMapper implements IPermissionMapper {
 		return $this->mapRowToEntity($row);
 	}
 
+	public function findByData($cardId, $data) {
+        $qb = $this->db->getQueryBuilder();
+        $qb->select('*')
+                ->from('deck_attachment')
+                ->where($qb->expr()->eq('card_id', $qb->createNamedParameter($cardId, IQueryBuilder::PARAM_INT)))
+                ->andWhere($qb->expr()->eq('data', $qb->createNamedParameter($data, IQueryBuilder::PARAM_STR)));
+        $cursor = $qb->execute();
+        $row = $cursor->fetch(PDO::FETCH_ASSOC);
+        if($row === false) {
+                $cursor->closeCursor();
+                throw new DoesNotExistException('Did expect one result but found none when executing' . $qb);
+        }
+        $cursor->closeCursor();
+        return $this->mapRowToEntity($row);
+	}
+
 	/**
 	 * Find all attachments for a card
 	 *
diff --git a/lib/Service/FileService.php b/lib/Service/FileService.php
index 0aafd45ce..1e4216591 100644
--- a/lib/Service/FileService.php
+++ b/lib/Service/FileService.php
@@ -25,6 +25,7 @@ namespace OCA\Deck\Service;
 
 use OC\Security\CSP\ContentSecurityPolicyManager;
 use OCA\Deck\Db\Attachment;
+use OCA\Deck\Db\AttachmentMapper;
 use OCA\Deck\StatusException;
 use OCA\Deck\Exceptions\ConflictException;
 use OCP\AppFramework\Http\ContentSecurityPolicy;
@@ -53,6 +54,7 @@ class FileService implements IAttachmentService {
 	private $logger;
 	private $rootFolder;
 	private $config;
+	private $attachmentMapper;
 
 	public function __construct(
 		IL10N $l10n,
@@ -60,7 +62,8 @@ class FileService implements IAttachmentService {
 		IRequest $request,
 		ILogger $logger,
 		IRootFolder $rootFolder,
-		IConfig $config
+		IConfig $config,
+		AttachmentMapper $attachmentMapper
 	) {
 		$this->l10n = $l10n;
 		$this->appData = $appData;
@@ -68,6 +71,7 @@ class FileService implements IAttachmentService {
 		$this->logger = $logger;
 		$this->rootFolder = $rootFolder;
 		$this->config = $config;
+		$this->attachmentMapper = $attachmentMapper;
 	}
 
 	/**
@@ -155,6 +159,7 @@ class FileService implements IAttachmentService {
 		$folder = $this->getFolder($attachment);
 		$fileName = $file['name'];
 		if ($folder->fileExists($fileName)) {
+			$attachment = $this->attachmentMapper->findByData($attachment->getCardId(), $fileName);
 			throw new ConflictException('File already exists.', $attachment);
 		}
 
diff --git a/package-lock.json b/package-lock.json
index eeda19e46..36ff598c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3442,6 +3442,22 @@
 			"resolved": "https://registry.npmjs.org/@nextcloud/browserslist-config/-/browserslist-config-1.0.0.tgz",
 			"integrity": "sha512-f+sKpdLZXkODV+OY39K1M+Spmd4RgxmtEXmNn4Bviv4R7uBFHXuw+JX9ZdfDeOryfHjJ/TRQxQEp0GMpBwZFUw=="
 		},
+		"@nextcloud/dialogs": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@nextcloud/dialogs/-/dialogs-1.2.1.tgz",
+			"integrity": "sha512-v+nnlqdOUpqumD51Fkjo1V9W/xImW7GcY29Iq1ErSDCmkhrS4pk9YDYrZO86teey+pT5nZ0gdGAtiU+LNFQgzw==",
+			"requires": {
+				"core-js": "3.6.4",
+				"toastify-js": "^1.6.2"
+			},
+			"dependencies": {
+				"core-js": {
+					"version": "3.6.4",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz",
+					"integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw=="
+				}
+			}
+		},
 		"@nextcloud/event-bus": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-1.1.2.tgz",
@@ -17828,6 +17844,11 @@
 				}
 			}
 		},
+		"toastify-js": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.7.0.tgz",
+			"integrity": "sha512-GmPy4zJ/ulCfmCHlfCtgcB+K2xhx2AXW3T/ZZOSjyjaIGevhz+uvR8HSCTay/wBq4tt2mUnBqlObP1sSWGlsnQ=="
+		},
 		"tough-cookie": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
diff --git a/package.json b/package.json
index f6f2c22d8..2888b99a7 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
 		"@nextcloud/auth": "^1.2.1",
 		"@nextcloud/axios": "^1.3.1",
 		"@nextcloud/l10n": "^1.1.0",
+		"@nextcloud/dialogs": "^1.2.1",
 		"@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 de401f96d..3ebc600f2 100644
--- a/src/components/card/CardSidebarTabAttachments.vue
+++ b/src/components/card/CardSidebarTabAttachments.vue
@@ -22,22 +22,6 @@
 
 <template>
 	<div>
-		<li v-for="attachment in attachments" :key="attachment.id" class="attachment">
-			<a class="fileicon" :style="mimetypeForAttachment(attachment)" />
-			<div class="details" :href="attachmentUrl(attachment)">
-				<div class="filename">
-					<span class="basename">{{ attachment.data }}</span>
-				</div>
-				<span class="filesize">{{ attachment.extendedData.filesize }}</span>
-				<span class="filedate">{{ attachment.createdAt }}</span>
-				<span class="filedate">{{ attachment.createdBy }}</span>
-			</div>
-			<Actions>
-				<ActionButton icon="icon-delete" @click="deleteAttachment(attachment)">
-					{{ t('deck', 'Delete Attachment') }}
-				</ActionButton>
-			</Actions>
-		</li>
 		<button class="icon-upload" @click="clickAddNewAttachmment()">
 			{{ t('deck', 'Upload attachment') }}
 		</button>
@@ -45,7 +29,41 @@
 			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>
 
+							<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>	
+			</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>
@@ -70,6 +88,7 @@
 
 <script>
 import { Actions, ActionButton, Modal } from '@nextcloud/vue'
+import { showError } from '@nextcloud/dialogs'
 
 export default {
 	name: 'CardSidebarTabAttachments',
@@ -88,7 +107,7 @@ export default {
 		return {
 			modalShow: false,
 			file: '',
-			overrideError: null
+			overwriteAttachment: null
 		}
 	},
 	computed: {
@@ -111,15 +130,22 @@ export default {
 			bodyFormData.append('file', e.target.files[0])
 			this.file = e.target.files[0]
 			try {
-				const data = await this.$store.dispatch('createAttachment', { cardId: this.card.id, formData: bodyFormData })
-				console.log(data)
+				await this.$store.dispatch('createAttachment', { cardId: this.card.id, formData: bodyFormData })
 			} catch (e) {
-				this.modalShow = true
+				if (e.response.data.status === 409) {
+					this.overwriteAttachment = e.response.data.data
+					this.modalShow = true
+				} else {
+					showError(e.response.data.message)
+				}
 			}
 		},
 		deleteAttachment(attachment) {
 			this.$store.dispatch('deleteAttachment', attachment)
 		},
+		restoreAttachment(attachment) {
+			this.$store.dispatch('restoreAttachment', attachment)
+		},
 		mimetypeForAttachment(attachment) {
 			const url = OC.MimeType.getIconUrl(attachment.extendedData.mimetype)
 			const styles = {
@@ -135,7 +161,11 @@ export default {
 			bodyFormData.append('cardId', this.card.id)
 			bodyFormData.append('type', 'deck_file')
 			bodyFormData.append('file', this.file)
-			this.$store.dispatch('updateAttachment', { cardId: this.card.id, attachmentId: 1, formData: bodyFormData })
+			this.$store.dispatch('updateAttachment', { 
+				cardId: this.card.id,
+				attachmentId: this.overwriteAttachment.id,
+				formData: bodyFormData 
+			})
 
 			this.modalShow = false
 		},
@@ -143,14 +173,7 @@ export default {
 }
 </script>
 
-<style scoped>
-	.fileicon {
-		display: inline-block;
-		min-width: 32px;
-		width: 32px;
-		height: 32px;
-		background-size: contain;
-	}
+<style scoped lang="scss">
 	.modal__content {
 		width: 25vw;
 		min-width: 250px;
@@ -163,4 +186,96 @@ export default {
 		float: right;
 		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;
+			position: absolute;
+			width: 30%;
+			max-width: 500px;
+			min-width: 200px;
+			max-height: 50%;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			background-color: #eee;
+			z-index: 2;
+			border-radius: 3px;
+			box-shadow: 0 0 3px darkgray;
+			overflow: scroll;
+		}
+		h3.attachment-selector {
+			margin: 0 0 10px;
+			padding: 0;
+			.icon-close {
+				display: inline-block;
+				float: right;
+			}
+		}
+
+		li.attachment {
+			display: flex;
+			padding: 3px;
+
+			&.deleted {
+				opacity: .5;
+			}
+
+			.fileicon {
+				display: inline-block;
+				min-width: 32px;
+				width: 32px;
+				height: 32px;
+				background-size: contain;
+			}
+			.details {
+				flex-grow: 1;
+				flex-shrink: 1;
+				min-width: 0;
+				flex-basis: 50%;
+				line-height: 110%;
+				padding: 2px;
+			}
+			.filename {
+				width: 70%;
+				display: flex;
+				.basename {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					padding-bottom: 2px;
+				}
+				.extension {
+					opacity: 0.7;
+				}
+			}
+			.filesize, .filedate {
+				font-size: 90%;
+				color: darkgray;
+			}
+			.app-popover-menu-utils {
+				position: relative;
+				right: -10px;
+				button {
+					height: 32px;
+					width: 42px;
+				}
+			}
+			button.icon-history {
+				width: 44px;
+			}
+			progress {
+				margin-top: 3px;
+			}
+		}
+	}
 </style>
diff --git a/src/services/AttachmentApi.js b/src/services/AttachmentApi.js
index 66cab0934..30b90b595 100644
--- a/src/services/AttachmentApi.js
+++ b/src/services/AttachmentApi.js
@@ -38,7 +38,7 @@ export class AttachmentApi {
 	}
 
 	async createAttachment({ cardId, formData }) {
-		 const response = await axios({
+		const response = await axios({
 			method: 'POST',
 			url: this.url(`/cards/${cardId}/attachment`),
 			data: formData,
@@ -48,10 +48,11 @@ export class AttachmentApi {
 
 	async updateAttachment({ cardId, attachmentId, formData }) {
 		const response = await axios({
-		   method: 'PUT',
+		   method: 'POST',
 		   url: this.url(`/cards/${cardId}/attachment/${attachmentId}`),
 		   data: formData,
 	   })
+	   console.log(response)
 	   return response.data
 	}
 
@@ -61,6 +62,14 @@ export class AttachmentApi {
 			url: this.url(`/cards/${attachment.cardId}/attachment/${attachment.id}`),
 		})
 	}
+	
+	async restoreAttachment(attachment) {
+		const response = await axios({
+			method: 'GET',
+			url: this.url(`/cards/${attachment.cardId}/attachment/${attachment.id}/restore`),
+		})
+		return response.data
+	}
 
 	async displayAttachment(attachment) {
 		const response = await axios({
diff --git a/src/store/attachment.js b/src/store/attachment.js
index f8651f42a..7ce303170 100644
--- a/src/store/attachment.js
+++ b/src/store/attachment.js
@@ -39,7 +39,15 @@ export default {
 
 	},
 	mutations: {
-		createAttachment(state, { cardId, attachments }) {
+		createAttachment(state, { cardId, attachment }) {
+			if (typeof state.attachments[cardId] === 'undefined') {
+				Vue.set(state.attachments, cardId, attachment)
+			} else {
+				state.attachments[cardId].push(attachment)
+			}
+		},
+
+		createAttachments(state, { cardId, attachments }) {
 			if (typeof state.attachments[cardId] === 'undefined') {
 				Vue.set(state.attachments, cardId, attachments)
 			} else {
@@ -54,7 +62,15 @@ 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
+			}
+		},
+
+		restoreAttachment(state, restoredAttachment) {
+			const existingIndex = state.attachments[restoredAttachment.cardId].findIndex(a => a.id === restoredAttachment.id)
+			if (existingIndex !== -1) {
+				state.attachments[restoredAttachment.cardId][existingIndex].deletedAt = 0
 			}
 		},
 
@@ -62,12 +78,12 @@ export default {
 	actions: {
 		async fetchAttachments({ commit }, cardId) {
 			const attachments = await apiClient.fetchAttachments(cardId)
-			commit('createAttachment', { cardId, attachments })
+			commit('createAttachments', { cardId, attachments })
 		},
 
 		async createAttachment({ commit }, { cardId, formData }) {
-			const attachments = await apiClient.createAttachment({ cardId, formData })
-			commit('createAttachment', { cardId, attachments })
+			const attachment = await apiClient.createAttachment({ cardId, formData })
+			commit('createAttachment', { cardId, attachment })
 			commit('cardIncreaseAttachmentCount', cardId)
 		},
 
@@ -82,5 +98,11 @@ export default {
 			commit('cardDecreaseAttachmentCount', attachment.cardId)
 		},
 
+		async restoreAttachment({ commit }, attachment) {
+			const restoredAttachment = await apiClient.restoreAttachment(attachment)
+			commit('restoreAttachment', restoredAttachment)
+			commit('cardIncreaseAttachmentCount', attachment.cardId)
+		},
+
 	},
 }