diff --git a/dist/main.js b/dist/main.js
index e9a07b3..c665ca0 100644
--- a/dist/main.js
+++ b/dist/main.js
@@ -146,7 +146,7 @@ eval("\n\n/* istanbul ignore next  */\nfunction styleTagTransform(css, styleElem
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @fortawesome/fontawesome-free/js/fontawesome */ \"./node_modules/@fortawesome/fontawesome-free/js/fontawesome.js\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/fontawesome-free/js/solid */ \"./node_modules/@fortawesome/fontawesome-free/js/solid.js\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _modules_controller__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/controller */ \"./src/modules/controller.js\");\n\r\n\r\n\r\n\r\n\r\n\r\nwindow.addEventListener(\"load\", () => {\r\n    const controller = new _modules_controller__WEBPACK_IMPORTED_MODULE_3__.Controller();\r\n    controller.listenForProjectAdd();\r\n    controller.listenForTodoAdd();\r\n    controller.listenForProjects();\r\n});\r\n\n\n//# sourceURL=webpack://todo/./src/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @fortawesome/fontawesome-free/js/fontawesome */ \"./node_modules/@fortawesome/fontawesome-free/js/fontawesome.js\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/fontawesome-free/js/solid */ \"./node_modules/@fortawesome/fontawesome-free/js/solid.js\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _modules_controller__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/controller */ \"./src/modules/controller.js\");\n\r\n\r\n\r\n\r\n\r\n\r\nwindow.addEventListener(\"load\", () => {\r\n    const controller = new _modules_controller__WEBPACK_IMPORTED_MODULE_3__.Controller();\r\n    controller.initializeUI();\r\n});\r\n\r\n/* Next step: Display Todos associated with the active project */\n\n//# sourceURL=webpack://todo/./src/index.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\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.allCurrentProjects = document.querySelector(\"li\");\r\n  }\r\n\r\n  listenForProjects() {\r\n    this.allCurrentProjects?.forEach((project) => {\r\n      project.addEventListener(\"click\", (e) => {\r\n        this.currentProjectId = e.target.getAttribute(\"id\");\r\n      });\r\n    });\r\n  }\r\n\r\n  listenForProjectAdd() {\r\n    this.addProjectButton.addEventListener(\"click\", () => {\r\n      let projectTitle = this.projectInputField.value;\r\n      this.model.addProject(projectTitle);\r\n      this.view.displayProjects(this.model.getProjects());\r\n    });\r\n  }\r\n\r\n  listenForTodoAdd() {\r\n    this.addTodoButton.addEventListener(\"click\", () => {\r\n      let todoTitle = this.todoInputField.value;\r\n      this.model.addTodoToProject(this.currentProjectId);\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\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\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  }\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  }\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        console.log(this.currentProjectId);\r\n      });\r\n    });\r\n  }\r\n\r\n  listenForProjectAdd() {\r\n    this.addProjectButton.addEventListener(\"click\", () => {\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    });\r\n  }\r\n\r\n  listenForTodoAdd() {\r\n    this.addTodoButton.addEventListener(\"click\", () => {\r\n      let todoTitle = this.todoInputField.value;\r\n      this.model.addTodoToProject(this.currentProjectId, todoTitle);\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\r\n\n\n//# sourceURL=webpack://todo/./src/modules/controller.js?");
 
 /***/ }),
 
@@ -179,7 +179,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 */   \"Model\": () => (/* binding */ Model)\n/* harmony export */ });\n/* harmony import */ var _entities__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./entities */ \"./src/modules/entities.js\");\n\r\n\r\nclass Model {\r\n    projectList;\r\n\r\n    constructor(){\r\n        const defaultProject = new _entities__WEBPACK_IMPORTED_MODULE_0__.Project(\"default\");\r\n        this.projectList = [defaultProject];\r\n    }\r\n\r\n    addProject(title){\r\n        console.log(\"inside model: add project\");\r\n        this.projectList.push(new _entities__WEBPACK_IMPORTED_MODULE_0__.Project(title));\r\n    }\r\n    \r\n    getProject(id){\r\n        console.log(this.projectList[id]);\r\n        return this.projectList[id];\r\n    }\r\n    \r\n    getProjects(){\r\n        console.log(\"inside model: get projects\");\r\n        return this.projectList;\r\n    }\r\n    \r\n    addTodoToProject(id, title, due, prio){\r\n        this.projectList[id].addTodo(title,due,prio);\r\n    }\r\n\r\n}\r\n\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/model.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Model\": () => (/* binding */ Model)\n/* harmony export */ });\n/* harmony import */ var _entities__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./entities */ \"./src/modules/entities.js\");\n\r\n\r\nclass Model {\r\n    projectList;\r\n\r\n    constructor(){\r\n        const defaultProject = new _entities__WEBPACK_IMPORTED_MODULE_0__.Project(\"default\");\r\n        this.projectList = [defaultProject];\r\n    }\r\n\r\n    addProject(title){\r\n        this.projectList.push(new _entities__WEBPACK_IMPORTED_MODULE_0__.Project(title));\r\n    }\r\n    \r\n    getProject(id){\r\n        return this.projectList[id];\r\n    }\r\n    \r\n    getProjects(){\r\n        return this.projectList;\r\n    }\r\n    \r\n    addTodoToProject(id, title, due, prio){\r\n        this.projectList[id].addTodo(title,due,prio);\r\n        console.log(this.projectList);\r\n    }\r\n\r\n}\r\n\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/model.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(\"table\");\r\n        this.projectList = document.querySelector(\".projectList\");\r\n    }\r\n\r\n    displayProjects(currentProjectsList) {\r\n      this.projectList.innerHTML = \"\";\r\n      currentProjectsList.forEach((project) => {\r\n        this.projectList.appendChild(this.createLi(project.title));\r\n      });\r\n    }\r\n    \r\n    createLi(projectTitle) {\r\n      const newLi = document.createElement(\"li\");\r\n      newLi.textContent = projectTitle;\r\n      let id = parseInt(newLi.previousElementSibling?.getAttribute(\"id\")) +1 || 0;\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      // loop through list\r\n      currentTodoArray.forEach((todo) => {\r\n        // Create and add a new row to the table\r\n        this.todoTable.appendChild(createRow(todo.title));\r\n      });\r\n    }\r\n    \r\n    createRow(title) {\r\n      const newRow = document.createElement(\"tr\");\r\n      newRow.innerHTML = `<td>${title}</td>`;\r\n      return newRow;\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(\"table\");\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, id++));\r\n      });\r\n    }\r\n    \r\n    createRow(title, id) {\r\n      const newRow = document.createElement(\"tr\");\r\n      newRow.innerHTML = `<td>${title}</td>`;\r\n      newRow.setAttribute(\"id\", id);\r\n      return newRow;\r\n    }\r\n}\r\n\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/view.js?");
 
 /***/ })
 
diff --git a/src/index.js b/src/index.js
index 7fde005..d46bfec 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,7 +6,7 @@ import {Controller} from "./modules/controller";
 
 window.addEventListener("load", () => {
     const controller = new Controller();
-    controller.listenForProjectAdd();
-    controller.listenForTodoAdd();
-    controller.listenForProjects();
+    controller.initializeUI();
 });
+
+/* Next step: Display Todos associated with the active project */
\ No newline at end of file
diff --git a/src/modules/controller.js b/src/modules/controller.js
index 59bbc58..9b68344 100644
--- a/src/modules/controller.js
+++ b/src/modules/controller.js
@@ -19,13 +19,21 @@ class Controller {
     this.projectInputField = document.querySelector("#projectsInputField");
     this.addProjectButton = document.querySelector(".addProjectButton");
     this.currentProjectId = 0;
-    this.allCurrentProjects = document.querySelector("li");
   }
-
+  
+  initializeUI(){
+    this.view.displayProjects(this.model.getProjects());
+    this.listenForProjects();
+    this.listenForProjectAdd();
+    this.listenForTodoAdd();
+  }
+  
   listenForProjects() {
+    this.allCurrentProjects = Array.from(document.querySelectorAll("li"));
     this.allCurrentProjects?.forEach((project) => {
       project.addEventListener("click", (e) => {
         this.currentProjectId = e.target.getAttribute("id");
+        console.log(this.currentProjectId);
       });
     });
   }
@@ -35,13 +43,14 @@ class Controller {
       let projectTitle = this.projectInputField.value;
       this.model.addProject(projectTitle);
       this.view.displayProjects(this.model.getProjects());
+      this.listenForProjects();
     });
   }
 
   listenForTodoAdd() {
     this.addTodoButton.addEventListener("click", () => {
       let todoTitle = this.todoInputField.value;
-      this.model.addTodoToProject(this.currentProjectId);
+      this.model.addTodoToProject(this.currentProjectId, todoTitle);
       this.view.displayTodos(
         this.model.getProject(this.currentProjectId).getTodos()
       );
diff --git a/src/modules/model.js b/src/modules/model.js
index 074649e..1e0b55b 100644
--- a/src/modules/model.js
+++ b/src/modules/model.js
@@ -9,22 +9,20 @@ class Model {
     }
 
     addProject(title){
-        console.log("inside model: add project");
         this.projectList.push(new Project(title));
     }
     
     getProject(id){
-        console.log(this.projectList[id]);
         return this.projectList[id];
     }
     
     getProjects(){
-        console.log("inside model: get projects");
         return this.projectList;
     }
     
     addTodoToProject(id, title, due, prio){
         this.projectList[id].addTodo(title,due,prio);
+        console.log(this.projectList);
     }
 
 }
diff --git a/src/modules/view.js b/src/modules/view.js
index 32eff00..1d80b78 100644
--- a/src/modules/view.js
+++ b/src/modules/view.js
@@ -8,15 +8,15 @@ class View {
 
     displayProjects(currentProjectsList) {
       this.projectList.innerHTML = "";
+      let id = 0;
       currentProjectsList.forEach((project) => {
-        this.projectList.appendChild(this.createLi(project.title));
+        this.projectList.appendChild(this.createLi(project.title, id++));
       });
     }
     
-    createLi(projectTitle) {
+    createLi(projectTitle, id) {
       const newLi = document.createElement("li");
       newLi.textContent = projectTitle;
-      let id = parseInt(newLi.previousElementSibling?.getAttribute("id")) +1 || 0;
       newLi.setAttribute("id", id);
       return newLi;
     }
@@ -24,16 +24,18 @@ class View {
     displayTodos(currentTodoArray) {
       // Wipeout current list
       this.todoTable.innerHTML = "";
+      let id = 0;
       // loop through list
       currentTodoArray.forEach((todo) => {
         // Create and add a new row to the table
-        this.todoTable.appendChild(createRow(todo.title));
+        this.todoTable.appendChild(this.createRow(todo.title, id++));
       });
     }
     
-    createRow(title) {
+    createRow(title, id) {
       const newRow = document.createElement("tr");
       newRow.innerHTML = `<td>${title}</td>`;
+      newRow.setAttribute("id", id);
       return newRow;
     }
 }