diff --git a/app.js b/app.js
index b36c69c..f2fce19 100644
--- a/app.js
+++ b/app.js
@@ -69,12 +69,13 @@ const templateTodoTasks = () => {
   // Map each task to a list item
   const taskList = todoTasks
     .map((task, index) => {
-      return `<li data-item id="task-item-${index}" class="list-inside list-disc">${task}</li>`;
+      return `<input id="task-item-${index}" data-item type="radio" class="form-radio" name="task-item" value="${task}"><label for="task-item-${index}"> ${task}</label><br>`;
+      // <li data-item id="task-item-${index}" class="list-inside list-disc">${task}</li>
     })
     .join("");
 
   // Return an ordered list with all the tasks
-  return `<ol>${taskList}</ol>`;
+  return taskList;
 };
 
 /**
@@ -262,6 +263,7 @@ const markTaskComplete = currentTask => {
  * @param {Event} event
  */
 const clickDelegator = event => {
+  
   if (event.target.hasAttribute("data-reset")) {
     clearInterval();
     timerData.timer = 1500;
@@ -281,12 +283,11 @@ const clickDelegator = event => {
   }
 
   if (event.target.hasAttribute("data-task")) {
-    console.log("Adding Task");
     addTask();
   }
 
   if (event.target.hasAttribute("data-item")) {
-    setCurrentTask(event.target.innerText);
+    setCurrentTask(event.target.value);
   }
 
   if (event.target.hasAttribute("data-current-task")) {
diff --git a/index.html b/index.html
index 20cbd3a..4c9497e 100644
--- a/index.html
+++ b/index.html
@@ -34,16 +34,18 @@ <h1 class="text-5xl font-bold text-center">Pompom</h1>
             <section class="grid col-span-2 justify-center">
                 <input type="text" name="newTask" id="newTask" class="col-span-2 shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                 <button class="col-span-1 bg-transparent hover:bg-green-500 text-green-700 font-semibold uppercase hover:text-white py-2 md:px-4 border border-green-500 hover:border-transparent rounded text-xs md:text-sm" data-task>Add</button>
-                <div class="col-span-3 italic text-sm">Add tasks to todo and then click on the item below to use as current item</div>
+                <div class="col-span-3 italic text-sm">Add tasks to todo</div>
 
             </section>
-            <section class="grid col-span-2 md:col-span-1">
-                <h2 class="text-xl font-bold text-center uppercase col-span-3 ">Todo List</h2>
-                <div data-task-list class="col-span-3"></div>
+            <section class="grid col-span-2 md:col-span-1 content-start">
+                <h2 class="text-xl font-bold text-center uppercase">Todo List</h2>
+                <div class="italic text-sm text-center">Select a task below to use as current item</div>
+                <div data-task-list class="pt-4 px-4"></div>
             </section>
-            <section class="complete grid col-span-2 md:col-span-1">
+            <section class="grid col-span-2 md:col-span-1 content-start">
                 <h2 class="text-xl font-bold text-center uppercase">Completed Tasks</h2>
-                <div data-complete-tasks></div>
+                <div class="italic text-sm text-center">Tasks completed will be listed below</div>
+                <div data-complete-tasks class="pt-4 px-4"></div>
             </section>
         </main>