diff --git a/index.html b/index.html
index ef4aa1f60ca..886c6fe8350 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,65 @@
-<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>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Todo App</title>
+  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" 
+        rel="stylesheet">
+  <link rel="stylesheet" 
+        href="style.css" 
+        media="screen" 
+        charset="utf-8">
+</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>
-</li>
-</ul>
-</div>
-<script type="text/javascript" SRC="app.js"></script>
+  <div class="matrix">
+    <img class="matrix-img" src="./eisenhower-matrix.jpg" alt="matrix">
+    <a class="more-inf" 
+       href="https://goal-life.com/page/method/matrix-eisenhower">Want more details</a>
+  </div>
+  <div class="centered-main-page-element">
+    <p id="topSectionForAddingElementToList">
+      <label for="new-task" class="task-label">Add Item</label>
+      <div class="task-row-wrapper">
+        <input id="new-task" 
+               class="task" 
+               type="text">
+        <button class="button" type="button">Add</button>
+      </div>
+    </p>
+
+    <h3 class="header-title">Todo</h3>
+    <ul id="incompleteTasks" class="incomplete-tasks">
+      <li class="add-item">
+        <input type="checkbox" class="task-input" placeholder="Add">
+        <label class="task">Pay Bills</label>
+        <input type="text" class="task" placeholder="Add">
+        <button class="button edit" type="button">Edit</button>
+        <button class="button delete" type="button">
+            <img src="./remove.svg" alt="icon">
+        </button>
+      </li>
+      <li class="editMode add-item">
+        <input type="checkbox" placeholder="d">
+        <label class="task">Go Shopping</label>
+        <input type="text" value="Go Shopping" class="task" placeholder="d">
+        <button class="edit button" type="button">Save</button>
+        <button class="delete button" type="button">
+            <img src="./remove.svg" alt="icon"></button>
+       </li>
+    </ul>
+
+    <h3 class="header-title">Completed</h3>
+    <ul id="completed-tasks">
+        <li class="add-item">
+            <input type="checkbox" checked placeholder="d">
+            <label class="task">See the Doctor</label>
+            <input type="text" class="task" placeholder="d">
+            <button class="edit button" type="button">Edit</button>
+            <button class="delete button" type="button">
+                <img src="./remove.svg" alt="icon">
+            </button>
+        </li>
+    </ul>
+  </div>
+<script src="app.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index ab36227705e..c24c899dd49 100644
--- a/style.css
+++ b/style.css
@@ -4,21 +4,23 @@ body {
     color: #333;
     font-family: Lato, sans-serif;
 }
-.aaa {
+.matrix {
     width: 500px;
     margin: 0 auto;
     display: block;
     text-align: right;
 }
-.aaa img {
+.matrix-img {
     width: 100%;
 }
-.aaa .more_inf {
+.matrix,
+.more-inf {
     font-family: fantasy, cursive;
 }
 
 @media (max-width:768px) {
-.aaa { text-align: center;
+.matrix { 
+    text-align: center;
 }
 }
 .centered-main-page-element {
@@ -38,13 +40,14 @@ ul {
     margin:0;
     padding: 0px;
 }
-li, h3 {
+.add-item, 
+.header-title {
     list-style:none;
 }
 input,button{
     outline:none;
 }
-button {
+.button {
     background: none;
     border: 0px;
     color: #888;
@@ -53,12 +56,12 @@ button {
     font-family: Lato, sans-serif;
     cursor: pointer;
 }
-button:hover {
+.button:hover {
     color: #3a3A3a;
 }
 /* Heading */
-h3,
-label[for='new-task'] {
+.header-title,
+.task-label {
     color: #333;
     font-weight: 700;
     font-size: 15px;
@@ -93,7 +96,7 @@ input#new-task {
 }
 
 /* Task list */
-li {
+.add-item {
     overflow: hidden;
     padding: 20px 0;
     border-bottom: 1px solid #eee;
@@ -102,34 +105,34 @@ li {
     justify-content: space-between;
     align-items: center;
 }
-li > * {
+.add-item > * {
     vertical-align: middle;
 }
 
-li > input[type="checkbox"] {
+.add-item > input[type="checkbox"] {
     margin: 0 10px;
 }
-li > label {
+.add-item > label {
     padding-left: 10px;
     box-sizing: border-box;
     font-size: 18px;
     width: 226px;
 }
-li >    input[type="text"] {
+.add-item > input[type="text"] {
     width: 226px
 }
-button.delete img {
+.delete img {
     height: 2em;
     transform: rotateZ(45deg);
     transition: transform 200ms ease-in;
 }
-button.delete img:hover {
+.delete img:hover {
     transform: rotateZ(0);
 }
 
 /* Completed */
 ul#completed-tasks label {
-    text-decoration: line-through
+    text-decoration: line-through;
     color: #888;
 }
 
@@ -138,11 +141,10 @@ ul li input[type=text] {
     display:none
 }
 
-ul li.editMode input[type=text] {
+.editMode input[type=text] {
     display:inline-block;
     width:224px
 }
-
-ul li.editMode label {
+.editMode label {
     display:none;
 }
\ No newline at end of file
