diff --git a/Makefile b/Makefile
index cd7189a..c4da9c7 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/task.ls client/todowebsocket.ls client/validation-modal.ls  
+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  
 	@echo '  BUN >   main.bundle.js'
 	$(Q)npx browserify -t browserify-livescript client/index.ls -o main.bundle.js
 
@@ -120,6 +120,7 @@ $(PACKAGE)-$(VERSION).tar.gz: distdir
 		$(PACKAGE)-$(VERSION)/client/bulma.ls \
 		$(PACKAGE)-$(VERSION)/client/modal.ls \
 		$(PACKAGE)-$(VERSION)/client/project.ls \
+		$(PACKAGE)-$(VERSION)/client/TaskCreationModal.ls \
 		$(PACKAGE)-$(VERSION)/client/task.ls \
 		$(PACKAGE)-$(VERSION)/client/todowebsocket.ls \
 		$(PACKAGE)-$(VERSION)/client/validation-modal.ls
@@ -135,6 +136,7 @@ $(PACKAGE)-$(VERSION).tar.xz: distdir
 		$(PACKAGE)-$(VERSION)/client/bulma.ls \
 		$(PACKAGE)-$(VERSION)/client/modal.ls \
 		$(PACKAGE)-$(VERSION)/client/project.ls \
+		$(PACKAGE)-$(VERSION)/client/TaskCreationModal.ls \
 		$(PACKAGE)-$(VERSION)/client/task.ls \
 		$(PACKAGE)-$(VERSION)/client/todowebsocket.ls \
 		$(PACKAGE)-$(VERSION)/client/validation-modal.ls
@@ -150,6 +152,7 @@ $(PACKAGE)-$(VERSION).tar.bz2: distdir
 		$(PACKAGE)-$(VERSION)/client/bulma.ls \
 		$(PACKAGE)-$(VERSION)/client/modal.ls \
 		$(PACKAGE)-$(VERSION)/client/project.ls \
+		$(PACKAGE)-$(VERSION)/client/TaskCreationModal.ls \
 		$(PACKAGE)-$(VERSION)/client/task.ls \
 		$(PACKAGE)-$(VERSION)/client/todowebsocket.ls \
 		$(PACKAGE)-$(VERSION)/client/validation-modal.ls
diff --git a/client/index.ls b/client/index.ls
index da90db8..6ed3d23 100644
--- a/client/index.ls
+++ b/client/index.ls
@@ -176,8 +176,9 @@ model.todod-ws.add-event-listener \new-list, (message) ->
 
 model.todod-ws.add-event-listener \tasks, (message) ->
 	console.log "RECEIVED TASKS MESSAGE", message
-	model.project-list.find((.id == message.list)).tasks := message.tasks
-	model.project-list.find((.id == message.list)).tasks-updated!
+	project = model.project-list.find((.id == message.list))
+	model.project-list.find((.id == message.list)).tasks := message.tasks.map (e) -> Task e, project, model.todod-ws
+	console.log "Once done: ", model.project-list.find((.id == message.list)).tasks
 	projector.schedule-render!
 
 model.todod-ws.add-event-listener \list-removed, (message) ->
@@ -197,7 +198,23 @@ model.todod-ws.add-event-listener \task-created, (message) ->
 	# console.log task, list
 
 	if list
-		list.tasks ++= [ Task task, list, model ]
+		list.tasks ++= [ Task task, list, model.todod-ws ]
+		projector.schedule-render!
+
+
+model.todod-ws.add-event-listener \task-updated, (message) ->
+	console.log "A task has been updated", message
+
+	task = message.task
+	list = model.project-list.find((.id == task.list))
+	# console.log task, list
+
+	if list
+		list.tasks = list.tasks.map (e) ->
+			if e.id == task.id
+				Task task, list, model.todod-ws
+			else
+				e
 		projector.schedule-render!
 
 render-navbar = ->
diff --git a/client/project.ls b/client/project.ls
index 60c0542..d864294 100644
--- a/client/project.ls
+++ b/client/project.ls
@@ -3,24 +3,18 @@ h     = require 'maquette' .h
 bulma = require "./bulma.ls"
 Task  = require "./task.ls"
 Modal = require './modal.ls'
+TaskCreationModal = require './TaskCreationModal.ls'
 
 Project = (self, todod-ws) ->
 	self.todod-ws = todod-ws
-	self.tasks-objects = self.tasks.map (e) -> Task e, self, {}
+	self.tasks = []
 
 	modal = void
 
-	self.tasks-updated = ->
-		self.tasks-objects = self.tasks.map (e) -> Task e, self, {}
-
 	self.render-column = (column, first) ->
-		# FIXME: display unregistred tasks in the first column
-		tasks-to-display = self.tasks-objects.filter (task) ->
-			task.extra_properties && task.extra_properties.column && task.extra_properties.column == column.id || ((! task.extra_properties || ! task.extra_properties.column) && first)
-
-		console.log "TASKS", self.tasks
-		console.log "TASKS-OBJECTS", self.tasks-objects
-		console.log "TASKS TO DISPLAY", tasks-to-display
+		tasks-to-display = self.tasks.filter (task) ->
+			task.extra_properties && task.extra_properties.column && task.extra_properties.column == column.id
+			|| ((! task.extra_properties || ! task.extra_properties.column) && first)
 
 		h \div.column [
 			bulma.title 4 column.title
@@ -45,13 +39,7 @@ Project = (self, todod-ws) ->
 					h \div.navbar-item [
 						h \div.button.is-success.is-outlined {
 							onclick: ->
-								modal := Modal {
-									+visible
-									content:
-										h \p [ "New task lol?" ]
-									on-validation: ->
-										self.todod-ws.add-task self.id, "Hello There", {}
-								}
+								modal := TaskCreationModal self.id, self.todod-ws
 						} [ "+" ]
 					]
 
diff --git a/client/task.ls b/client/task.ls
index 014acef..58392ce 100644
--- a/client/task.ls
+++ b/client/task.ls
@@ -5,6 +5,7 @@
 h     = require 'maquette' .h
 bulma = require "./bulma.ls"
 nmd   = require "nano-markdown"
+TaskCreationModal = require './TaskCreationModal.ls'
 
 #
 # generic functions
@@ -30,202 +31,20 @@ get-next = (collection, element) ->
 			found-element := true
 
 
-Task = (self, project, model) ->
+Task = (self, project, todod-ws) ->
+	modal = void
+
 	self.render = ->
-		h \div [ self.title ]
+		h \div { key: self.id } [
+			self.title
+			h \div.button {
+				onclick: ->
+					modal := TaskCreationModal project.id, todod-ws, self
+			} [ "Edit" ]
 
-	# self.render-old = ->
-	# 	author = model.users[self.author]
-	# 	if typeof(author) != "object" and author != "request sent"
-	# 		model.users[self.author] = "request sent"
-	# 		# FIXME: This should go directly to authd.
-	# 		model.todod-ws.get-user self.author
-
-	# 	assigned_to = model.users[self.assigned_to]
-	# 	if self.assigned_to and typeof(assigned_to) != "object" and assigned_to != "request sent"
-	# 		model.users[self.assigned_to] = "request sent"
-	# 		# FIXME: This should go directly to authd.
-	# 		model.todod-ws.get-user self.assigned_to
-
-	# 	is-selected = model.selected == self.id
-
-	# 	h (\div.card.is- + (self.color || "dark")), {
-	# 		key: self.id
-	# 		classes: {
-	# 			"is-selected": is-selected
-	# 		}
-	# 		onclick: ->
-	# 			model.selected := self.id
-	# 	} [
-	# 		h \div.card-content [
-	# 			h \div.media [
-	# 				h \div.media-left [
-	# 					h \img.image.is-48x48.avatar {
-	# 						alt: "user image"
-	# 						src: if typeof(assigned_to) == "object"
-	# 							assigned_to.avatar
-	# 						else
-	# 							"https://bulma.io/images/placeholders/96x96.png"
-	# 					}
-	# 				]
-	# 				h \div.media-content [
-	# 					if model.editing == self.id + ".title"
-	# 						h \input.input {
-	# 							value: self.title
-	# 							onchange: (e) ->
-	# 								model.editing := undefined
-	# 								model.todod-ws.edit-task project.id, self.id, {
-	# 									title: e.target.value
-	# 								}
-	# 						} [ self.title ]
-	# 					else
-	# 						h \a [
-	# 							bulma.title 4 self.title
-	# 						]
-
-	# 					if typeof(model.users[self.assigned_to]) == "object"
-	# 						user = model.users[self.assigned_to]
-
-	# 						h \div.subtitle.is-6 [
-	# 							"@" + (user.full_name || user.login)
-	# 						]
-	# 				]
-	# 				if ! is-selected && self.description != ""
-	# 					h \div.media-right {key: "description-icon"} [
-	# 						h \span.icon.is-size-1 [ "🗎" ]
-	# 					]
-
-	# 				if is-selected
-	# 					h \div.media-right {key: "edit"} [
-	# 						h \a.small {
-	# 							onclick: ->
-	# 								if model.editing == self.id + ".title"
-	# 									model.editing := undefined
-	# 								else
-	# 									model.editing := self.id + ".title"
-	# 						} [
-	# 							"Edit"
-	# 						]
-	# 					]
-
-	# 				if is-selected
-	# 					h \div.media-right {key: "delete"} [
-	# 						h \a.small {
-	# 							onclick: ->
-	# 								model.editing := self.id + ".delete"
-	# 						} [
-	# 							"Delete"
-	# 						]
-	# 					]
-	# 			]
-
-	# 			if is-selected
-	# 				h \div.content {
-	# 					key: self.description
-	# 					after-create: (dom) ->
-	# 						dom.innerHTML = nmd self.description
-	# 				} [
-	# 					if model.editing == self.id + ".description"
-	# 						h \form.form [
-	# 							h \textarea.textarea {
-	# 								value: model.editing-data
-	# 								oninput: (e) ->
-	# 									model.editing-data := e.target.value
-	# 							}
-	# 							h \div.button.is-fullwidth {
-	# 								onclick: ->
-	# 									model.todod-ws.edit-task project.id, self.id, {
-	# 										description: model.editing-data
-	# 									}
-	# 									model.editing-data := undefined
-	# 									model.editing := undefined
-	# 							} [ "Update" ]
-	# 						]
-	# 				]
-
-	# 			if is-selected
-	# 				h \span.button.is-small {
-	# 					onclick: ->
-	# 						model.editing-data := self.description
-	# 						model.editing := self.id + ".description"
-	# 				} [
-	# 					"edit"
-	# 				]
-	# 		]
-
-	# 		if is-selected
-	# 			h \div.card-footer {key: "assign"} [
-	# 				if model.editing == self.id + ".assigned_to"
-	# 					h \div.card-footer-item {
-	# 						key: "assign.clicked"
-	# 					} [
-	# 						h \input.input {
-	# 							onchange: (e) ->
-	# 								model.editing := undefined
-	# 								model.todod-ws.edit-task project.id, self.id, {
-	# 									assigned_to: Number e.target.value
-	# 								}
-	# 						}
-	# 					]
-	# 				else
-	# 					h \a.card-footer-item {
-	# 						key: "assign"
-	# 						onclick: ->
-	# 							model.editing := self.id + ".assigned_to"
-	# 					} [ "Assign" ]
-	# 			]
-
-	# 		if is-selected
-	# 			h \div.card-footer {key: "color"} [
-	# 				if model.editing == self.id + ".color"
-	# 					h \div.card-footer-item {
-	# 						key: "color.clicked"
-	# 					} [
-	# 						h \input.input {
-	# 							onchange: (e) ->
-	# 								model.editing := undefined
-	# 								model.todod-ws.edit-task project.id, self.id, {
-	# 									color: e.target.value
-	# 								}
-	# 						}
-	# 					]
-	# 				else
-	# 					h \a.card-footer-item {
-	# 						key: "assign"
-	# 						onclick: ->
-	# 							model.editing := self.id + ".color"
-	# 					} [ "Change Color" ]
-	# 			]
-
-	# 		if is-selected
-	# 			h \div.card-footer {key: "move"} [
-	# 				h \a.card-footer-item {
-	# 					key: "⇐"
-	# 					onclick: ->
-	# 						model.todod-ws.edit-task project.id, self.id, {
-	# 							column: get-previous project.columns.map((.id)), self.column
-	# 						}
-	# 				} [ "⇐" ]
-
-	# 				if model.editing == self.id + ".delete"
-	# 					h \a.card-footer-item {
-	# 						key: "delete"
-	# 					} [
-	# 						h \div.button.is-danger {
-	# 							onclick: ->
-	# 								model.todod-ws.delete-task project.id, self.id
-	# 						} [ "Delete! For real!" ]
-	# 					]
-
-	# 				h \a.card-footer-item {
-	# 					key: "⇒"
-	# 					onclick: ->
-	# 						model.todod-ws.edit-task project.id, self.id, {
-	# 							column: get-next project.columns.map((.id)), self.column
-	# 						}
-	# 				} [ "⇒" ]
-	# 			]
-	# 	]
+			if modal
+				modal.render!
+		]
 
 	self
 
diff --git a/client/todowebsocket.ls b/client/todowebsocket.ls
index c9d24f1..5fc0816 100644
--- a/client/todowebsocket.ls
+++ b/client/todowebsocket.ls
@@ -151,10 +151,10 @@ module.exports = {
 
 			self.send request-types[\add-task], JSON.stringify payload
 
-		self.edit-task = (id, opts) ->
+		self.edit-task = (task-id, opts) ->
 			payload = {
 				token: self.token
-				list: list-id
+				task: task-id
 			}
 
 			for key, value of opts