diff --git a/Makefile b/Makefile
index c4da9c7..37c5b3b 100644
--- a/Makefile
+++ b/Makefile
@@ -37,7 +37,7 @@ main.js: main.bundle.js
 	$(Q)npx babel --minified main.bundle.js -o main.js
 
 
-main.bundle.js: client/index.ls client/authd.ls client/bulma.ls client/modal.ls client/project.ls client/TaskCreationModal.ls client/task.ls client/todowebsocket.ls client/validation-modal.ls  
+main.bundle.js: client/index.ls client/authd.ls client/bulma.ls client/card.ls client/modal.ls client/project.ls client/TaskCreationModal.ls client/task.ls client/task-removal-modal.ls client/todowebsocket.ls client/validation-modal.ls  
 	@echo '  BUN >   main.bundle.js'
 	$(Q)npx browserify -t browserify-livescript client/index.ls -o main.bundle.js
 
@@ -118,10 +118,12 @@ $(PACKAGE)-$(VERSION).tar.gz: distdir
 		$(PACKAGE)-$(VERSION)/client/style.sass \
 		$(PACKAGE)-$(VERSION)/client/authd.ls \
 		$(PACKAGE)-$(VERSION)/client/bulma.ls \
+		$(PACKAGE)-$(VERSION)/client/card.ls \
 		$(PACKAGE)-$(VERSION)/client/modal.ls \
 		$(PACKAGE)-$(VERSION)/client/project.ls \
 		$(PACKAGE)-$(VERSION)/client/TaskCreationModal.ls \
 		$(PACKAGE)-$(VERSION)/client/task.ls \
+		$(PACKAGE)-$(VERSION)/client/task-removal-modal.ls \
 		$(PACKAGE)-$(VERSION)/client/todowebsocket.ls \
 		$(PACKAGE)-$(VERSION)/client/validation-modal.ls
 
@@ -134,10 +136,12 @@ $(PACKAGE)-$(VERSION).tar.xz: distdir
 		$(PACKAGE)-$(VERSION)/client/style.sass \
 		$(PACKAGE)-$(VERSION)/client/authd.ls \
 		$(PACKAGE)-$(VERSION)/client/bulma.ls \
+		$(PACKAGE)-$(VERSION)/client/card.ls \
 		$(PACKAGE)-$(VERSION)/client/modal.ls \
 		$(PACKAGE)-$(VERSION)/client/project.ls \
 		$(PACKAGE)-$(VERSION)/client/TaskCreationModal.ls \
 		$(PACKAGE)-$(VERSION)/client/task.ls \
+		$(PACKAGE)-$(VERSION)/client/task-removal-modal.ls \
 		$(PACKAGE)-$(VERSION)/client/todowebsocket.ls \
 		$(PACKAGE)-$(VERSION)/client/validation-modal.ls
 
@@ -150,10 +154,12 @@ $(PACKAGE)-$(VERSION).tar.bz2: distdir
 		$(PACKAGE)-$(VERSION)/client/style.sass \
 		$(PACKAGE)-$(VERSION)/client/authd.ls \
 		$(PACKAGE)-$(VERSION)/client/bulma.ls \
+		$(PACKAGE)-$(VERSION)/client/card.ls \
 		$(PACKAGE)-$(VERSION)/client/modal.ls \
 		$(PACKAGE)-$(VERSION)/client/project.ls \
 		$(PACKAGE)-$(VERSION)/client/TaskCreationModal.ls \
 		$(PACKAGE)-$(VERSION)/client/task.ls \
+		$(PACKAGE)-$(VERSION)/client/task-removal-modal.ls \
 		$(PACKAGE)-$(VERSION)/client/todowebsocket.ls \
 		$(PACKAGE)-$(VERSION)/client/validation-modal.ls
 
diff --git a/client/index.ls b/client/index.ls
index 8755496..04ff201 100644
--- a/client/index.ls
+++ b/client/index.ls
@@ -217,6 +217,16 @@ model.todod-ws.add-event-listener \task-updated, (message) ->
 				e
 		projector.schedule-render!
 
+model.todod-ws.add-event-listener \task-removed, (message) ->
+	console.log "A task has been removed", message
+
+	task = message.task
+	for project in model.project-list
+		if project.tasks.find((.id == task))
+			project.tasks := project.tasks.filter((.id != task))
+			projector.schedule-render!
+
+
 render-navbar = ->
 	h \div.navbar [
 		h \div.navbar-start [
diff --git a/client/modal.ls b/client/modal.ls
index ee047ae..bed07f2 100644
--- a/client/modal.ls
+++ b/client/modal.ls
@@ -6,16 +6,16 @@ h = require 'maquette' .h
 # confirmation de suppression de listes, de tâches, de colonnes
 
 Modal = (args) ->
-	self = {}
-
-	self.modal-args = args.modal-args || {}
-	self.visible = args.visible || false
-	self.content = args.content || []
-	self.background-args = args.background-args || []
-	self.on-validation = args.on-validation || ->
-	self.on-cancellation = args.on-cancellation || ->
-	self.validation-label = args.validation-label || "Ok"
-	self.cancellation-label = args.cancellation-label || "Cancel"
+	self = {
+		modal-args:         args.modal-args || {}
+		visible:            args.visible || false
+		content:            args.content || []
+		background-args:    args.background-args || []
+		on-validation:      args.on-validation || ->
+		on-cancellation:    args.on-cancellation || ->
+		validation-label:   args.validation-label || "Ok"
+		cancellation-label: args.cancellation-label || "Cancel"
+	}
 
 	self.render = ->
 		console.log "Rendering a modal: ", self, self.content
diff --git a/client/task.ls b/client/task.ls
index 58392ce..7175fa7 100644
--- a/client/task.ls
+++ b/client/task.ls
@@ -6,6 +6,7 @@ h     = require 'maquette' .h
 bulma = require "./bulma.ls"
 nmd   = require "nano-markdown"
 TaskCreationModal = require './TaskCreationModal.ls'
+TaskRemovalModal = require './task-removal-modal.ls'
 
 #
 # generic functions
@@ -35,13 +36,28 @@ Task = (self, project, todod-ws) ->
 	modal = void
 
 	self.render = ->
-		h \div { key: self.id } [
-			self.title
-			h \div.button {
-				onclick: ->
-					modal := TaskCreationModal project.id, todod-ws, self
-			} [ "Edit" ]
-
+		h \div.card { key: self.id } [
+			h \div.card-content [
+				h \div.media [
+					h \div.media-left [
+						"LEFT"
+					]
+					h \div.media-content [
+						self.title
+					]
+					h \div.button {
+						onclick: ->
+							modal := TaskCreationModal project.id, todod-ws, self
+					} [ "Edit" ]
+					h \div.button {
+						onclick: ->
+							modal := TaskRemovalModal project.id, todod-ws, self
+					} [ "X" ]
+				]
+				h \div.content [
+					self.description
+				]
+			]
 			if modal
 				modal.render!
 		]