diff --git a/app.js b/app.js
index ab737a60027..9d925108e14 100644
--- a/app.js
+++ b/app.js
@@ -1,46 +1,31 @@
-//Document is the DOM can be accessed in the console with document.window.
-// Tree is from the top, html, body, p etc.
+var taskInput=document.getElementById("new-task");
+var addButton=document.getElementsByTagName("button")[0];
+var incompleteTaskHolder=document.getElementById("incompleteTasks");
+var completedTasksHolder=document.getElementById("completed-tasks");
 
-//Problem: User interaction does not provide the correct results.
-//Solution: Add interactivity so the user can manage daily tasks.
-//Break things down into smaller steps and take each step at a time.
-
-
-// Event handling, user interaction is what starts the code execution.
-
-var taskInput=document.getElementById("new-task");//Add a new task.
-var addButton=document.getElementsByTagName("button")[0];//first button
-var incompleteTaskHolder=document.getElementById("incompleteTasks");//ul of #incompleteTasks
-var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks
-
-
-//New task list item
 var createNewTaskElement=function(taskString){
-
     var listItem=document.createElement("li");
-
-    //input (checkbox)
-    var checkBox=document.createElement("input");//checkbx
-    //label
-    var label=document.createElement("label");//label
-    //input (text)
-    var editInput=document.createElement("input");//text
-    //button.edit
-    var editButton=document.createElement("button");//edit button
-
-    //button.delete
-    var deleteButton=document.createElement("button");//delete button
-    var deleteButtonImg=document.createElement("img");//delete button image
+    
+    var checkBox=document.createElement("input");
+  
+    var label=document.createElement("label");
+   
+    var editInput=document.createElement("input");
+    
+    var editButton=document.createElement("button");
+
+    var deleteButton=document.createElement("button");
+    var deleteButtonImg=document.createElement("img");
 
     label.innerText=taskString;
     label.className='task';
 
-    //Each elements, needs appending
+   
     checkBox.type="checkbox";
     editInput.type="text";
     editInput.className="task";
 
-    editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
+    editButton.innerText="Edit";
     editButton.className="edit";
 
     deleteButton.className="delete";
@@ -48,7 +33,7 @@ var createNewTaskElement=function(taskString){
     deleteButton.appendChild(deleteButtonImg);
 
 
-    //and appending.
+
     listItem.appendChild(checkBox);
     listItem.appendChild(label);
     listItem.appendChild(editInput);
@@ -61,11 +46,10 @@ var createNewTaskElement=function(taskString){
 
 var addTask=function(){
     console.log("Add Task...");
-    //Create a new list item with the text from the #new-task:
     if (!taskInput.value) return;
     var listItem=createNewTaskElement(taskInput.value);
 
-    //Append listItem to incompleteTaskHolder
+  
     incompleteTaskHolder.appendChild(listItem);
     bindTaskEvents(listItem, taskCompleted);
 
@@ -73,7 +57,6 @@ var addTask=function(){
 
 }
 
-//Edit an existing task.
 
 var editTask=function(){
     console.log("Edit Task...");
@@ -86,11 +69,7 @@ var editTask=function(){
     var label=listItem.querySelector("label");
     var editBtn=listItem.querySelector(".edit");
     var containsClass=listItem.classList.contains("editMode");
-    //If class of the parent is .editmode
     if(containsClass){
-
-        //switch to .editmode
-        //label becomes the inputs value.
         label.innerText=editInput.value;
         editBtn.innerText="Edit";
     }else{
@@ -98,28 +77,26 @@ var editTask=function(){
         editBtn.innerText="Save";
     }
 
-    //toggle .editmode on the parent.
     listItem.classList.toggle("editMode");
 };
 
 
-//Delete task.
+
 var deleteTask=function(){
     console.log("Delete Task...");
 
     var listItem=this.parentNode;
     var ul=listItem.parentNode;
-    //Remove the parent list item from the ul.
+   
     ul.removeChild(listItem);
 
 }
 
 
-//Mark task completed
 var taskCompleted=function(){
     console.log("Complete Task...");
 
-    //Append the task list item to the #completed-tasks
+
     var listItem=this.parentNode;
     completedTasksHolder.appendChild(listItem);
     bindTaskEvents(listItem, taskIncomplete);
@@ -129,9 +106,6 @@ var taskCompleted=function(){
 
 var taskIncomplete=function(){
     console.log("Incomplete Task...");
-//Mark task as incomplete.
-    //When the checkbox is unchecked
-    //Append the task list item to the #incompleteTasks.
     var listItem=this.parentNode;
     incompleteTaskHolder.appendChild(listItem);
     bindTaskEvents(listItem,taskCompleted);
@@ -143,10 +117,9 @@ var ajaxRequest=function(){
     console.log("AJAX Request");
 }
 
-//The glue to hold it all together.
 
 
-//Set the click handler to the addTask function.
+
 addButton.onclick=addTask;
 addButton.addEventListener("click",addTask);
 addButton.addEventListener("click",ajaxRequest);
@@ -154,42 +127,22 @@ addButton.addEventListener("click",ajaxRequest);
 
 var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
     console.log("bind list item events");
-//select ListItems children
+
     var checkBox=taskListItem.querySelector("input[type=checkbox]");
     var editButton=taskListItem.querySelector("button.edit");
     var deleteButton=taskListItem.querySelector("button.delete");
-
-
-    //Bind editTask to edit button.
+    
     editButton.onclick=editTask;
-    //Bind deleteTask to delete button.
     deleteButton.onclick=deleteTask;
-    //Bind taskCompleted to checkBoxEventHandler.
     checkBox.onchange=checkBoxEventHandler;
 }
 
-//cycle over incompleteTaskHolder ul list items
-//for each list item
 for (var i=0; i<incompleteTaskHolder.children.length;i++){
 
-    //bind events to list items chldren(tasksCompleted)
     bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
 }
 
 
-
-
-//cycle over completedTasksHolder ul list items
 for (var i=0; i<completedTasksHolder.children.length;i++){
-    //bind events to list items chldren(tasksIncompleted)
     bindTaskEvents(completedTasksHolder.children[i],taskIncomplete);
 }
-
-
-
-
-// Issues with usability don't get seen until they are in front of a human tester.
-
-//prevent creation of empty tasks.
-
-//Change edit to save when you are in edit mode.
\ No newline at end of file
diff --git a/index.html b/index.html
index ef4aa1f60ca..9432db299df 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,56 @@
+<!DOCTYPE html>
 <html>
-<HEAD><title>Todo App</title>
-<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
-<link rel="stylesheet" href="style.css" type="text/css" MEDIA="screen" charset="utf-8">
-</HEAD>
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Todo App</title>
+<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet" type='text/css'>
+<link rel="stylesheet" href="style.css">
+</head>
 <body>
-<div class="aaa"><img src="./eisenhower-matrix.jpg"><a class='more_inf' href="https://goal-life.com/page/method/matrix-eisenhower">Want more details&quest;</a></div>
-<div class="centered-main-page-element"><p id='topSectionForAddingElementToList'><label for="new-task">Add Item</label><div class="task-row-wrapper"><input id='new-task'class="task" type="text"><button>Add</button></div>
-</p><h3>Todo</h3>
-<ul id='incompleteTasks'>
-<li><input type='checkbox'><label class="task">Pay Bills</label><input type="text" class="task"><button class="edit">Edit</button><button class="delete"><img src="./remove.svg"></button></li>
-<li class="editMode"><input type="checkbox"><label class="task">Go Shopping</label><input type="text" value="Go Shopping" class="task"><button class='edit'>Save</button><button class="delete"><img src="./remove.svg"></button></li>
-</ul><h3>Completed</h3><ul id="completed-tasks"><li><input type="checkbox" checked><label class="task">See the Doctor</label><input type="text" class="task"><button class="edit">Edit</button><button class="delete"><img src="./remove.svg"></button>
+<div class="container">
+    <img src="./eisenhower-matrix.jpg">
+    <a class="more-inf" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details&quest;</a>
+</div>
+<div class="centered-main-page-element">
+    <p id="topSectionForAddingElementToList"></p>
+    <label for="new-task">Add Item</label>
+        <div class="task-row-wrapper">
+            <input id="new-task"class="task" type="text">
+            <button>Add</button>
+        </div>
+        
+        <h3>Todo</h3>
+<ul id="incompleteTasks">
+<li>
+    <input type="checkbox"><label class="task">Pay Bills</label>
+    <input type="text" class="task">
+    <button class="edit">Edit</button>
+    <button class="delete">
+        <img src="./remove.svg">
+    </button>
+</li>
+<li class="editMode">
+    <input type="checkbox"><label class="task">Go Shopping</label>
+    <input type="text" value="Go Shopping" class="task">
+    <button class="edit">Save</button>
+    <button class="delete">
+    <img src="./remove.svg">
+</button>
 </li>
 </ul>
+<h3>Completed</h3>
+<ul id="completed-tasks">
+    <li>
+        <input type="checkbox" checked><label class="task">See the Doctor</label>
+        <input type="text" class="task">
+        <button class="edit">Edit</button>
+        <button class="delete">
+            <img src="./remove.svg"></button>
+   </li>
+   </ul>
 </div>
-<script type="text/javascript" SRC="app.js"></script>
+<script src="app.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/style.css b/style.css
index ab36227705e..342f663d91e 100644
--- a/style.css
+++ b/style.css
@@ -1,24 +1,24 @@
-/* Basic Style */
 body {
     background-color: #f8f8f8;
     color: #333;
     font-family: Lato, sans-serif;
 }
-.aaa {
+.container {
     width: 500px;
     margin: 0 auto;
     display: block;
     text-align: right;
 }
-.aaa img {
+.container img {
     width: 100%;
 }
-.aaa .more_inf {
+.container
+.more-inf {
     font-family: fantasy, cursive;
 }
 
 @media (max-width:768px) {
-.aaa { text-align: center;
+.container { text-align: center;
 }
 }
 .centered-main-page-element {
@@ -41,7 +41,8 @@ ul {
 li, h3 {
     list-style:none;
 }
-input,button{
+input,
+button{
     outline:none;
 }
 button {
@@ -56,7 +57,7 @@ button {
 button:hover {
     color: #3a3A3a;
 }
-/* Heading */
+
 h3,
 label[for='new-task'] {
     color: #333;
@@ -83,7 +84,6 @@ input[type="text"]:focus {
     color: #333;
 }
 
-/* New Task */
 label[for='new-task'] {
     display: block;
     margin: 0 0 20px;
@@ -92,7 +92,6 @@ input#new-task {
     width: 318px;
 }
 
-/* Task list */
 li {
     overflow: hidden;
     padding: 20px 0;
@@ -114,6 +113,7 @@ li > label {
     box-sizing: border-box;
     font-size: 18px;
     width: 226px;
+   
 }
 li >    input[type="text"] {
     width: 226px
@@ -127,13 +127,13 @@ button.delete img:hover {
     transform: rotateZ(0);
 }
 
-/* Completed */
+
 ul#completed-tasks label {
-    text-decoration: line-through
+    text-decoration: line-through;
     color: #888;
 }
 
-/* Edit Task */
+
 ul li input[type=text] {
     display:none
 }
@@ -145,4 +145,4 @@ ul li.editMode input[type=text] {
 
 ul li.editMode label {
     display:none;
-}
\ No newline at end of file
+}