diff --git a/dist/main.js b/dist/main.js
index 9e91100..70d7bcb 100644
--- a/dist/main.js
+++ b/dist/main.js
@@ -36,7 +36,7 @@ eval("/*!\n * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com\
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"body {\\r\\n  background-color: red;\\r\\n  height: 100vh;\\r\\n  display: grid;\\r\\n  grid-template-columns: 1fr 4fr;\\r\\n  grid-template-rows: 1fr 3fr 1fr;\\r\\n  font-family: monospace;\\r\\n}\\r\\n\\r\\nheader {\\r\\n  background-color: aliceblue;\\r\\n  grid-column: 1/3;\\r\\n  grid-row: 1/2;\\r\\n}\\r\\n\\r\\naside {\\r\\n  grid-column: 1/2;\\r\\n  grid-row: 2/3;\\r\\n}\\r\\n.content {\\r\\n  background-color: coral;\\r\\n  grid-column: 2/3;\\r\\n  grid-row: 2/3;\\r\\n}\\r\\n\\r\\nfooter {\\r\\n  background-color: aqua;\\r\\n  grid-column: 1/3;\\r\\n  grid-row: 3/4;\\r\\n}\\r\\n\\r\\n.popup {\\r\\n  display: none;\\r\\n}\\r\\n\\r\\n.active {\\r\\n  display: block;\\r\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://todo/./src/style.css?./node_modules/css-loader/dist/cjs.js");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"body {\\r\\n  background-color: red;\\r\\n  height: 100vh;\\r\\n  display: grid;\\r\\n  grid-template-columns: 1fr 4fr;\\r\\n  grid-template-rows: 1fr 3fr 1fr;\\r\\n  font-family: monospace;\\r\\n}\\r\\n\\r\\nheader {\\r\\n  background-color: aliceblue;\\r\\n  grid-column: 1/3;\\r\\n  grid-row: 1/2;\\r\\n}\\r\\n\\r\\naside {\\r\\n  grid-column: 1/2;\\r\\n  grid-row: 2/3;\\r\\n}\\r\\n.content {\\r\\n  background-color: coral;\\r\\n  grid-column: 2/3;\\r\\n  grid-row: 2/3;\\r\\n}\\r\\n\\r\\nfooter {\\r\\n  background-color: aqua;\\r\\n  grid-column: 1/3;\\r\\n  grid-row: 3/4;\\r\\n}\\r\\n\\r\\n.popup {\\r\\n  display: none;\\r\\n}\\r\\n\\r\\n.active {\\r\\n  display: block;\\r\\n}\\r\\n\\r\\nsvg {\\r\\n  pointer-events: auto;\\r\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://todo/./src/style.css?./node_modules/css-loader/dist/cjs.js");
 
 /***/ }),
 
@@ -157,7 +157,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sty
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Controller\": () => (/* binding */ Controller)\n/* harmony export */ });\n/* harmony import */ var _view__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./view */ \"./src/modules/view.js\");\n/* harmony import */ var _model_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./model.js */ \"./src/modules/model.js\");\n\r\n\r\n\r\nclass Controller {\r\n  model;\r\n  view;\r\n  todoInputField;\r\n  addTodoButton;\r\n  projectInputField;\r\n  addProjectButton;\r\n  currentProjectId;\r\n  allCurrentProjects;\r\n  showPopupButton;\r\n  popup;\r\n  todoDate;\r\n  todoPrio;\r\n\r\n  constructor() {\r\n    this.model = new _model_js__WEBPACK_IMPORTED_MODULE_1__.Model();\r\n    this.view = new _view__WEBPACK_IMPORTED_MODULE_0__.View();\r\n    this.todoInputField = document.querySelector(\"#todoInputField\");\r\n    this.addTodoButton = document.querySelector(\".addTodoButton\");\r\n    this.projectInputField = document.querySelector(\"#projectsInputField\");\r\n    this.addProjectButton = document.querySelector(\".addProjectButton\");\r\n    this.currentProjectId = 0;\r\n    this.showPopupButton = document.querySelector(\".showPopupButton\");\r\n    this.popup = document.querySelector(\".popup\");\r\n    this.todoDate = document.querySelector(\"#dateInput\");\r\n    this.todoPrio = document.querySelector(\"#prio\");\r\n  }\r\n\r\n  initializeUI() {\r\n    this.view.displayProjects(this.model.getProjects());\r\n    this.listenForProjects();\r\n    this.listenForProjectAdd();\r\n    this.listenForTodoAdd();\r\n    this.listenForShowPopupButton();\r\n  }\r\n\r\n  listenForProjects() {\r\n    this.allCurrentProjects = Array.from(document.querySelectorAll(\"li\"));\r\n    this.allCurrentProjects?.forEach((project) => {\r\n      project.addEventListener(\"click\", (e) => {\r\n        this.currentProjectId = e.target.getAttribute(\"id\");\r\n        // Display all todos for active project\r\n        this.view.displayTodos(\r\n          this.model.getProject(this.currentProjectId).getTodos()\r\n        );\r\n        this.listenForTodos();\r\n      });\r\n    });\r\n  }\r\n\r\n  listenForProjectAdd() {\r\n    \r\n    this.addProjectButton.addEventListener(\"click\", () => {\r\n      this.addProjectHelper();\r\n    });\r\n    // Add keyboard listener but to the input field not to the projects themselves\r\n    this.projectInputField.addEventListener(\"keypress\", (e) => {\r\n      if (e.key === \"Enter\") {\r\n        this.addProjectHelper();\r\n      }\r\n    });\r\n  }\r\n\r\n  addProjectHelper() {\r\n    let projectTitle = this.projectInputField.value;\r\n    this.model.addProject(projectTitle);\r\n    this.view.displayProjects(this.model.getProjects());\r\n    this.listenForProjects();\r\n    this.listenForDescriptions();\r\n  }\r\n\r\n  listenForTodoAdd() {\r\n    this.addTodoButton.addEventListener(\"click\", () => {\r\n      this.addTodoHelper();\r\n    });\r\n    // Listen for keypress also\r\n    this.todoInputField.addEventListener(\"keypress\", (e)=>{\r\n      if(e.key===\"Enter\"){\r\n        this.addTodoHelper();\r\n      }\r\n    })\r\n  }\r\n\r\n  addTodoHelper() {\r\n    let todoTitle = this.todoInputField.value;\r\n    let todoDate = this.todoDate.value;\r\n    let todoPrio = this.todoPrio.value;\r\n    this.model.addTodoToProject(\r\n      this.currentProjectId,\r\n      todoTitle,\r\n      todoDate,\r\n      todoPrio\r\n    );\r\n    this.view.displayTodos(\r\n      this.model.getProject(this.currentProjectId).getTodos()\r\n    );\r\n    this.popup.classList.remove(\"active\");\r\n    this.listenForDescriptions();\r\n    this.listenForTodos();\r\n  }\r\n\r\n  listenForTodos() {\r\n    const todos = Array.from(document.querySelectorAll(\"tr[id]\"));\r\n    todos.forEach((todo) => {\r\n      todo.addEventListener(\"click\", () => {\r\n        todo.nextElementSibling.classList.toggle(\"popup\");\r\n        this.listenForDescriptions();\r\n      });\r\n    });\r\n  }\r\n\r\n  listenForShowPopupButton() {\r\n    this.showPopupButton.addEventListener(\"click\", () => {\r\n      this.popup.classList.add(\"active\");\r\n    });\r\n  }\r\n\r\n  listenForDescriptions() {\r\n    const descriptions = Array.from(document.querySelectorAll(\"textarea\"));\r\n    descriptions.forEach((description) => {\r\n      description.addEventListener(\"keypress\", (e) => {\r\n        if (e.key === \"Enter\") {\r\n          // Save the description in the corresponding todo\r\n          let correspondingTodoId =\r\n            e.target.parentNode.parentNode.previousElementSibling.getAttribute(\r\n              \"id\"\r\n            );\r\n          this.model.addDescriptionToTodo(\r\n            this.currentProjectId,\r\n            correspondingTodoId,\r\n            e.target.value\r\n          );\r\n        }\r\n      });\r\n    });\r\n  }\r\n}\r\n\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/controller.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Controller\": () => (/* binding */ Controller)\n/* harmony export */ });\n/* harmony import */ var _view__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./view */ \"./src/modules/view.js\");\n/* harmony import */ var _model_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./model.js */ \"./src/modules/model.js\");\n\r\n\r\n\r\nclass Controller {\r\n  model;\r\n  view;\r\n  todoInputField;\r\n  addTodoButton;\r\n  projectInputField;\r\n  addProjectButton;\r\n  currentProjectId;\r\n  allCurrentProjects;\r\n  showPopupButton;\r\n  popup;\r\n  todoDate;\r\n  todoPrio;\r\n\r\n  constructor() {\r\n    this.model = new _model_js__WEBPACK_IMPORTED_MODULE_1__.Model();\r\n    this.view = new _view__WEBPACK_IMPORTED_MODULE_0__.View();\r\n    this.todoInputField = document.querySelector(\"#todoInputField\");\r\n    this.addTodoButton = document.querySelector(\".addTodoButton\");\r\n    this.projectInputField = document.querySelector(\"#projectsInputField\");\r\n    this.addProjectButton = document.querySelector(\".addProjectButton\");\r\n    this.currentProjectId = 0;\r\n    this.showPopupButton = document.querySelector(\".showPopupButton\");\r\n    this.popup = document.querySelector(\".popup\");\r\n    this.todoDate = document.querySelector(\"#dateInput\");\r\n    this.todoPrio = document.querySelector(\"#prio\");\r\n  }\r\n\r\n  initializeUI() {\r\n    this.view.displayProjects(this.model.getProjects());\r\n    this.listenForProjects();\r\n    this.listenForProjectAdd();\r\n    this.listenForTodoAdd();\r\n    this.listenForShowPopupButton();\r\n  }\r\n\r\n  listenForProjects() {\r\n    this.allCurrentProjects = Array.from(document.querySelectorAll(\"li\"));\r\n    this.allCurrentProjects?.forEach((project) => {\r\n      project.addEventListener(\"click\", (e) => {\r\n        this.currentProjectId = e.target.getAttribute(\"id\");\r\n        // Display all todos for active project\r\n        this.view.displayTodos(\r\n          this.model.getProject(this.currentProjectId).getTodos()\r\n        );\r\n        this.listenForTodos();\r\n      });\r\n    });\r\n  }\r\n\r\n  listenForProjectAdd() {\r\n    this.addProjectButton.addEventListener(\"click\", () => {\r\n      this.addProjectHelper();\r\n    });\r\n    // Add keyboard listener but to the input field not to the projects themselves\r\n    this.projectInputField.addEventListener(\"keypress\", (e) => {\r\n      if (e.key === \"Enter\") {\r\n        this.addProjectHelper();\r\n      }\r\n    });\r\n  }\r\n\r\n  addProjectHelper() {\r\n    let projectTitle = this.projectInputField.value;\r\n    this.model.addProject(projectTitle);\r\n    this.view.displayProjects(this.model.getProjects());\r\n    this.listenForProjects();\r\n    this.listenForDescriptions();\r\n  }\r\n\r\n  listenForTodoAdd() {\r\n    this.addTodoButton.addEventListener(\"click\", () => {\r\n      this.addTodoHelper();\r\n    });\r\n    // Listen for keypress also\r\n    this.todoInputField.addEventListener(\"keypress\", (e) => {\r\n      if (e.key === \"Enter\") {\r\n        this.addTodoHelper();\r\n      }\r\n    });\r\n  }\r\n\r\n  addTodoHelper() {\r\n    let todoTitle = this.todoInputField.value;\r\n    let todoDate = this.todoDate.value;\r\n    let todoPrio = this.todoPrio.value;\r\n    this.model.addTodoToProject(\r\n      this.currentProjectId,\r\n      todoTitle,\r\n      todoDate,\r\n      todoPrio\r\n    );\r\n    this.view.displayTodos(\r\n      this.model.getProject(this.currentProjectId).getTodos()\r\n    );\r\n    this.popup.classList.remove(\"active\");\r\n    this.listenForDescriptions();\r\n    this.listenForTodos();\r\n    this.listenForDelete();\r\n    this.listenForEdit();\r\n  }\r\n\r\n  // Listen for delete icon\r\n  listenForDelete() {\r\n    const deleteIcons = Array.from(document.querySelectorAll(\".trash-icon\"));\r\n    deleteIcons.forEach((icon) => {\r\n      icon.parentNode.addEventListener(\"click\", () => {\r\n        // Get id of corresponding todo\r\n        let thisTodoId =\r\n          +icon.parentNode.parentNode.previousElementSibling.getAttribute(\"id\");\r\n        this.model.getProject(this.currentProjectId).deleteTodo(thisTodoId);\r\n        this.view.displayTodos(\r\n          this.model.getProject(this.currentProjectId).getTodos()\r\n        );\r\n      });\r\n    });\r\n  }\r\n\r\n  listenForEdit(){\r\n    const editIcons = Array.from(document.querySelectorAll(\".edit-icon\"));\r\n    editIcons.forEach((icon)=>{\r\n      icon.addEventListener(\"click\", ()=>{\r\n        // Get id of todo to edit\r\n        let thisTodoId =\r\n          +icon.parentNode.parentNode.previousElementSibling.getAttribute(\"id\");\r\n        // Get data from the popup + descr\r\n        this.popup.classList.add(\"active\");\r\n        // Hide the Add button (its listening to add a new todo)\r\n        this.popup.lastElementChild.style.display=\"none\";\r\n        // Disable the trash can while editing\r\n        icon.parentElement.nextElementSibling.firstChild.style.display=\"none\";\r\n        // Add an update button (which will update not add a new one)\r\n        const updateButton = document.createElement(\"button\");\r\n        updateButton.textContent=\"update\";\r\n        this.popup.appendChild(updateButton);\r\n        let todoTitle = this.todoInputField.value;\r\n        let todoDate = this.todoDate.value;\r\n        let todoPrio = this.todoPrio.value;\r\n        let todoDescription = icon.parentNode.previousElementSibling.firstChild.value;\r\n        this.model.getProject(this.currentProjectId).setTodo(\r\n          thisTodoId,\r\n          todoTitle,\r\n          todoDate,\r\n          todoPrio,\r\n          todoDescription,\r\n        );\r\n      })\r\n    })\r\n  }\r\n\r\n  listenForTodos() {\r\n    const todos = Array.from(document.querySelectorAll(\"tr[id]\"));\r\n    todos.forEach((todo) => {\r\n      todo.addEventListener(\"click\", () => {\r\n        todo.nextElementSibling.classList.toggle(\"popup\");\r\n        this.listenForDescriptions();\r\n      });\r\n    });\r\n  }\r\n\r\n  listenForShowPopupButton() {\r\n    this.showPopupButton.addEventListener(\"click\", () => {\r\n      this.popup.classList.add(\"active\");\r\n    });\r\n  }\r\n\r\n  listenForDescriptions() {\r\n    const descriptions = Array.from(document.querySelectorAll(\"textarea\"));\r\n    descriptions.forEach((description) => {\r\n      description.addEventListener(\"keypress\", (e) => {\r\n        if (e.key === \"Enter\") {\r\n          // Save the description in the corresponding todo\r\n          let correspondingTodoId =\r\n            e.target.parentNode.parentNode.previousElementSibling.getAttribute(\r\n              \"id\"\r\n            );\r\n          this.model.addDescriptionToTodo(\r\n            this.currentProjectId,\r\n            correspondingTodoId,\r\n            e.target.value\r\n          );\r\n        }\r\n      });\r\n    });\r\n  }\r\n}\r\n\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/controller.js?");
 
 /***/ }),
 
@@ -168,7 +168,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Project\": () => (/* binding */ Project),\n/* harmony export */   \"Todo\": () => (/* binding */ Todo)\n/* harmony export */ });\nclass Todo {\r\n    title;\r\n    due;\r\n    prio;\r\n    description;\r\n\r\n    constructor(title, due, prio) {\r\n        this.title = title;\r\n        this.due = due;\r\n        this.prio = prio;\r\n    }\r\n\r\n    setDescription(text){\r\n        this.description=text;\r\n        console.log(this.description);\r\n    }\r\n\r\n    getDescription(){\r\n        return this.description;\r\n    }\r\n\r\n    setTitle(title) {\r\n        this.title = title;\r\n    }\r\n\r\n    getTitle() {\r\n        return this.title;\r\n    }\r\n\r\n\r\n    setDue(due) {\r\n        this.due = due;\r\n    }\r\n\r\n    getDue() {\r\n        return this.due;\r\n    }\r\n\r\n    setPriority(prio) {\r\n        this.prio = prio;\r\n    }\r\n\r\n    getPrio() {\r\n        return this.prio;\r\n    }\r\n}\r\n\r\nclass Project {\r\n    title;\r\n    todoList = [];\r\n\r\n    constructor(title){\r\n        this.title = title;\r\n    }\r\n\r\n    setTitle(title){\r\n        this.title = title;\r\n    }\r\n\r\n    getTitle(){\r\n        return this.title;\r\n    }\r\n\r\n    addTodo(title,due,prio){\r\n        this.todoList.push(new Todo(title,due,prio));\r\n    }\r\n\r\n    getTodo(id){\r\n        return this.todoList[id];\r\n    }\r\n\r\n    getTodos(){\r\n        return this.todoList;\r\n    }\r\n}\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/entities.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Project\": () => (/* binding */ Project),\n/* harmony export */   \"Todo\": () => (/* binding */ Todo)\n/* harmony export */ });\nclass Todo {\r\n    title;\r\n    due;\r\n    prio;\r\n    description;\r\n\r\n    constructor(title, due, prio) {\r\n        this.title = title;\r\n        this.due = due;\r\n        this.prio = prio;\r\n    }\r\n\r\n    setDescription(text){\r\n        this.description=text;\r\n        console.log(this.description);\r\n    }\r\n\r\n    getDescription(){\r\n        return this.description;\r\n    }\r\n\r\n    setTitle(title) {\r\n        this.title = title;\r\n    }\r\n\r\n    getTitle() {\r\n        return this.title;\r\n    }\r\n\r\n\r\n    setDue(due) {\r\n        this.due = due;\r\n    }\r\n\r\n    getDue() {\r\n        return this.due;\r\n    }\r\n\r\n    setPriority(prio) {\r\n        this.prio = prio;\r\n    }\r\n\r\n    getPrio() {\r\n        return this.prio;\r\n    }\r\n}\r\n\r\nclass Project {\r\n    title;\r\n    todoList = [];\r\n\r\n    constructor(title){\r\n        this.title = title;\r\n    }\r\n\r\n    setTitle(title){\r\n        this.title = title;\r\n    }\r\n\r\n    getTitle(){\r\n        return this.title;\r\n    }\r\n\r\n    addTodo(title,due,prio){\r\n        this.todoList.push(new Todo(title,due,prio));\r\n    }\r\n\r\n    getTodo(id){\r\n        return this.todoList[id];\r\n    }\r\n\r\n    setTodo(id, title, due, prio, description){\r\n        this.todoList[id].setTitle(title);\r\n        this.todoList[id].setDue(due);\r\n        this.todoList[id].setPriority(prio);\r\n        this.todoList[id].setDescription(description);\r\n    }\r\n\r\n    getTodos(){\r\n        return this.todoList;\r\n    }\r\n\r\n    deleteTodo(id){\r\n        this.todoList.splice(id,1);\r\n    }\r\n}\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/entities.js?");
 
 /***/ }),
 
@@ -190,7 +190,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"View\": () => (/* binding */ View)\n/* harmony export */ });\nclass View {\r\n    todoTable;\r\n    projectList;\r\n    constructor(){\r\n        this.todoTable = document.querySelector(\"tbody\");\r\n        this.projectList = document.querySelector(\".projectList\");\r\n    }\r\n\r\n    displayProjects(currentProjectsList) {\r\n      this.projectList.innerHTML = \"\";\r\n      let id = 0;\r\n      currentProjectsList.forEach((project) => {\r\n        this.projectList.appendChild(this.createLi(project.title, id++));\r\n      });\r\n    }\r\n    \r\n    createLi(projectTitle, id) {\r\n      const newLi = document.createElement(\"li\");\r\n      newLi.textContent = projectTitle;\r\n      newLi.setAttribute(\"id\", id);\r\n      return newLi;\r\n    }\r\n    \r\n    displayTodos(currentTodoArray) {\r\n      // Wipeout current list\r\n      this.todoTable.innerHTML = \"\";\r\n      let id = 0;\r\n      // loop through list\r\n      currentTodoArray.forEach((todo) => {\r\n        // Create and add a new row to the table\r\n        this.todoTable.appendChild(this.createRow(todo.title, todo.due, todo.prio, id++));\r\n        this.todoTable.appendChild(this.createNewTodoPopup(todo.description));\r\n      });\r\n    }\r\n    \r\n    createRow(title, due, prio, id) {\r\n      const newRow = document.createElement(\"tr\");\r\n      newRow.innerHTML = `<td>${title}</td>\r\n      <td>${due}</td><td>${prio}</td>`;\r\n      newRow.setAttribute(\"id\", id);\r\n      return newRow;\r\n    }\r\n\r\n    createNewTodoPopup(description){\r\n      const newRowPopup = document.createElement(\"tr\");\r\n      newRowPopup.innerHTML = `<td><textarea>${description}</textarea></td>\r\n      <td><i class=\"fa-solid fa-pencil\"></i></td>\r\n     <td><i class=\"fa-solid fa-trash\"></td>`;\r\n      newRowPopup.setAttribute(\"class\", \"popup\");\r\n      return newRowPopup;\r\n    }\r\n\r\n}\r\n\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/view.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"View\": () => (/* binding */ View)\n/* harmony export */ });\nclass View {\r\n    todoTable;\r\n    projectList;\r\n    constructor(){\r\n        this.todoTable = document.querySelector(\"tbody\");\r\n        this.projectList = document.querySelector(\".projectList\");\r\n    }\r\n\r\n    displayProjects(currentProjectsList) {\r\n      this.projectList.innerHTML = \"\";\r\n      let id = 0;\r\n      currentProjectsList.forEach((project) => {\r\n        this.projectList.appendChild(this.createLi(project.title, id++));\r\n      });\r\n    }\r\n    \r\n    createLi(projectTitle, id) {\r\n      const newLi = document.createElement(\"li\");\r\n      newLi.textContent = projectTitle;\r\n      newLi.setAttribute(\"id\", id);\r\n      return newLi;\r\n    }\r\n    \r\n    displayTodos(currentTodoArray) {\r\n      // Wipeout current list\r\n      this.todoTable.innerHTML = \"\";\r\n      let id = 0;\r\n      // loop through list\r\n      currentTodoArray.forEach((todo) => {\r\n        // Create and add a new row to the table\r\n        this.todoTable.appendChild(this.createRow(todo.title, todo.due, todo.prio, id++));\r\n        this.todoTable.appendChild(this.createNewTodoPopup(todo.description));\r\n      });\r\n    }\r\n    \r\n    createRow(title, due, prio, id) {\r\n      const newRow = document.createElement(\"tr\");\r\n      newRow.innerHTML = `<td>${title}</td>\r\n      <td>${due}</td><td>${prio}</td>`;\r\n      newRow.setAttribute(\"id\", id);\r\n      return newRow;\r\n    }\r\n\r\n    createNewTodoPopup(description){\r\n      const newRowPopup = document.createElement(\"tr\");\r\n      newRowPopup.innerHTML = `<td><textarea>${description}</textarea></td>\r\n      <td><div class=\"edit-icon\"><i class=\"fa-solid fa-pencil\"></i></div></td>\r\n     <td><div class=\"trash-icon\"><i class=\"fa-solid fa-trash\"></div></td>`;\r\n      newRowPopup.setAttribute(\"class\", \"popup\");\r\n      return newRowPopup;\r\n    }\r\n\r\n}\r\n\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/view.js?");
 
 /***/ })
 
diff --git a/src/modules/controller.js b/src/modules/controller.js
index 5223161..540f330 100644
--- a/src/modules/controller.js
+++ b/src/modules/controller.js
@@ -52,7 +52,6 @@ class Controller {
   }
 
   listenForProjectAdd() {
-    
     this.addProjectButton.addEventListener("click", () => {
       this.addProjectHelper();
     });
@@ -77,11 +76,11 @@ class Controller {
       this.addTodoHelper();
     });
     // Listen for keypress also
-    this.todoInputField.addEventListener("keypress", (e)=>{
-      if(e.key==="Enter"){
+    this.todoInputField.addEventListener("keypress", (e) => {
+      if (e.key === "Enter") {
         this.addTodoHelper();
       }
-    })
+    });
   }
 
   addTodoHelper() {
@@ -100,6 +99,56 @@ class Controller {
     this.popup.classList.remove("active");
     this.listenForDescriptions();
     this.listenForTodos();
+    this.listenForDelete();
+    this.listenForEdit();
+  }
+
+  // Listen for delete icon
+  listenForDelete() {
+    const deleteIcons = Array.from(document.querySelectorAll(".trash-icon"));
+    deleteIcons.forEach((icon) => {
+      icon.parentNode.addEventListener("click", () => {
+        // Get id of corresponding todo
+        let thisTodoId =
+          +icon.parentNode.parentNode.previousElementSibling.getAttribute("id");
+        this.model.getProject(this.currentProjectId).deleteTodo(thisTodoId);
+        this.view.displayTodos(
+          this.model.getProject(this.currentProjectId).getTodos()
+        );
+      });
+    });
+  }
+
+  listenForEdit(){
+    const editIcons = Array.from(document.querySelectorAll(".edit-icon"));
+    editIcons.forEach((icon)=>{
+      icon.addEventListener("click", ()=>{
+        // Get id of todo to edit
+        let thisTodoId =
+          +icon.parentNode.parentNode.previousElementSibling.getAttribute("id");
+        // Get data from the popup + descr
+        this.popup.classList.add("active");
+        // Hide the Add button (its listening to add a new todo)
+        this.popup.lastElementChild.style.display="none";
+        // Disable the trash can while editing
+        icon.parentElement.nextElementSibling.firstChild.style.display="none";
+        // Add an update button (which will update not add a new one)
+        const updateButton = document.createElement("button");
+        updateButton.textContent="update";
+        this.popup.appendChild(updateButton);
+        let todoTitle = this.todoInputField.value;
+        let todoDate = this.todoDate.value;
+        let todoPrio = this.todoPrio.value;
+        let todoDescription = icon.parentNode.previousElementSibling.firstChild.value;
+        this.model.getProject(this.currentProjectId).setTodo(
+          thisTodoId,
+          todoTitle,
+          todoDate,
+          todoPrio,
+          todoDescription,
+        );
+      })
+    })
   }
 
   listenForTodos() {
diff --git a/src/modules/entities.js b/src/modules/entities.js
index 5792261..7dbb628 100644
--- a/src/modules/entities.js
+++ b/src/modules/entities.js
@@ -69,9 +69,20 @@ class Project {
         return this.todoList[id];
     }
 
+    setTodo(id, title, due, prio, description){
+        this.todoList[id].setTitle(title);
+        this.todoList[id].setDue(due);
+        this.todoList[id].setPriority(prio);
+        this.todoList[id].setDescription(description);
+    }
+
     getTodos(){
         return this.todoList;
     }
+
+    deleteTodo(id){
+        this.todoList.splice(id,1);
+    }
 }
 
 export {Todo, Project};
\ No newline at end of file
diff --git a/src/modules/view.js b/src/modules/view.js
index 77c45a5..89fd4eb 100644
--- a/src/modules/view.js
+++ b/src/modules/view.js
@@ -44,8 +44,8 @@ class View {
     createNewTodoPopup(description){
       const newRowPopup = document.createElement("tr");
       newRowPopup.innerHTML = `<td><textarea>${description}</textarea></td>
-      <td><i class="fa-solid fa-pencil"></i></td>
-     <td><i class="fa-solid fa-trash"></td>`;
+      <td><div class="edit-icon"><i class="fa-solid fa-pencil"></i></div></td>
+     <td><div class="trash-icon"><i class="fa-solid fa-trash"></div></td>`;
       newRowPopup.setAttribute("class", "popup");
       return newRowPopup;
     }
diff --git a/src/style.css b/src/style.css
index 902f414..e2103e7 100644
--- a/src/style.css
+++ b/src/style.css
@@ -35,4 +35,8 @@ footer {
 
 .active {
   display: block;
+}
+
+svg {
+  pointer-events: auto;
 }
\ No newline at end of file