diff --git a/index.html b/index.html
index ef4aa1f60c..31d120e87f 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,67 @@
-<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>
+  <meta charset="utf-8">
+  <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>
+  <header>
+    <div class="matrix">
+      <img src="./eisenhower-matrix.jpg" alt="matrix" class="matrix__img">
+      <a class="matrix__more-inf" 
+      href="https://goal-life.com/page/method/matrix-eisenhower"
+      >Want more details?
+      </a>
+    </div>
+  </header>    
+  <main class="page-el">
+    <section class="task-form" id="add-list">
+      <h2 class="task-form__title">Add Item</h2>
+      <div class="task-form__wrapper">
+        <input id="new-task" class="task-form__input" type="text">
+        <button class="task-form__button">Add</button>
+      </div>
+    </section>
+    <section class="task-list">
+      <h3 class="task-list__title">Todo</h3>
+      <ul class="task-list__items" id="incomp-tasks">
+        <li class="task-list__item">
+          <input type="checkbox" class="task-list__input">
+          <label class="task-list__label">Pay Bills</label>
+          <input type="text" class="task-list__input">
+          <button class="task-list__edit">Edit</button>
+          <button class="task-list__delete">
+            <img src="./remove.svg" alt="remove" class="task-item__icon">
+          </button>
+        </li>
+        <li class="task-item ed-mode">
+          <input type="checkbox"  class="task-list__input">
+          <label class="task-list__label">Go Shopping</label>
+          <input type="text" value="Go Shopping" class="task-list__input">
+          <button class="task-list__edit">Save</button>
+          <button class="task-list__delete">
+            <img src="./remove.svg" alt="remove" class="task-item__icon">
+          </button>
+        </li>
+      </ul>
+    </section>
+    <section>
+      <h3>Completed</h3>
+      <ul id="completed-tasks">
+        <li>
+          <input type="checkbox" checked  class="task-list__input">
+          <label class="task-list__label">See the Doctor</label>
+          <input type="text" class="task-list__input">
+          <button class="task-list__edit"">Edit</button>
+          <button class="task-list__delete">
+            <img src="./remove.svg" alt="remove" class="task-item__icon">
+          </button>
+        </li>
+      </ul>
+    </section>
+  </main>
+  <script src="app.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index ab36227705..ceb4eefb1a 100644
--- a/style.css
+++ b/style.css
@@ -4,45 +4,48 @@ 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 .matrix__more-inf {
     font-family: fantasy, cursive;
 }
 
 @media (max-width:768px) {
-.aaa { text-align: center;
+  .matrix { 
+    text-align: center;
+  }
 }
-}
-.centered-main-page-element {
+.page-el {
     display: block;
     width: 500px;
     margin: 0 auto 0;
 }
-.task {
+.task-form__input {
     width: 56%;
     display: inline-block;
-    flex-grow: 1
+    flex-grow: 1;
 }
-.task-row-wrapper {
+.task-form__wrapper {
     display: flex;
 }
 ul {
-    margin:0;
+    margin: 0;
     padding: 0px;
 }
-li, h3 {
-    list-style:none;
+li, 
+h3 {
+    list-style: none;
 }
-input,button{
-    outline:none;
+input, 
+button {
+    outline: none;
 }
 button {
     background: none;
@@ -57,8 +60,15 @@ button:hover {
     color: #3a3A3a;
 }
 /* Heading */
+h2 {
+    color: #333;
+    font-weight: 700;
+    border-bottom: 2px solid #333;
+    font-size: 15px;
+    text-transform: uppercase;
+}
 h3,
-label[for='new-task'] {
+label[for="new-task"] {
     color: #333;
     font-weight: 700;
     font-size: 15px;
@@ -84,11 +94,11 @@ input[type="text"]:focus {
 }
 
 /* New Task */
-label[for='new-task'] {
+label[for="new-task"] {
     display: block;
     margin: 0 0 20px;
 }
-input#new-task {
+#new-task {
     width: 318px;
 }
 
@@ -97,7 +107,6 @@ li {
     overflow: hidden;
     padding: 20px 0;
     border-bottom: 1px solid #eee;
-
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -115,34 +124,32 @@ li > label {
     font-size: 18px;
     width: 226px;
 }
-li >    input[type="text"] {
-    width: 226px
+li > input[type="text"] {
+    width: 226px;
 }
-button.delete img {
+.task-item__icon {
     height: 2em;
     transform: rotateZ(45deg);
     transition: transform 200ms ease-in;
 }
-button.delete img:hover {
+.task-item__icon:hover {
     transform: rotateZ(0);
 }
 
 /* Completed */
-ul#completed-tasks label {
-    text-decoration: line-through
+#completed-tasks label {
+    text-decoration: line-through;
     color: #888;
 }
 
 /* Edit Task */
-ul li input[type=text] {
-    display:none
+.task-list__input[type=text] {
+    display: none;
 }
-
-ul li.editMode input[type=text] {
-    display:inline-block;
-    width:224px
+.ed-mode input[type=text] {
+    display: inline-block;
+    width: 224px;
 }
-
-ul li.editMode label {
-    display:none;
-}
\ No newline at end of file
+.ed-mode label {
+    display: none;
+} 
\ No newline at end of file
