diff --git a/spa/index.html b/spa/index.html
index 36f06aa..4098e8b 100644
--- a/spa/index.html
+++ b/spa/index.html
@@ -5,6 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
+  <!-- Font Awesome -->
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 </head>
 <style>
@@ -22,29 +24,39 @@
           <input class="form-control" id="newTodo" type="text" placeholder="Today i must...">
           <small class="form-text text-muted">Add a new todo</small>
       </div>
+
+      <div class="col form-group col-lg-4">
+                <input type="date" class="form-control" placeholder="Deadline" id="deadline" value="2019-11-01" />
+      </div>
       <div class="col-4">
         <div class="flex-row justify-content-center align-items-center"> 
-          <button class="btn btn-primary mt-1 mt-md-0" onclick="addTodo()">ADD +</button>
-          <button class="btn btn-secondary mt-1 mt-md-0" >Reset</button>
+          <button class="btn btn-primary mt-1 mt-md-0" id="" onclick="addTodo()">ADD +</button>
+          <button class="btn btn-secondary mt-1 mt-md-0" onclick="reset()">Reset</button>
           <button class="btn btn-danger mt-1" onclick="removeTodos()">Bin</button>
+          <button class="btn btn-secondary mt-1 mt-md-0" id="sort" title="Sort">Sort</button>
+
         </div>
       </div>
     </div>
     
+    <!-- Bootstrap table -->
     <div class="row mt-2">
-      <div class="col-10 offset-1">
-          <ul class="list-group">
-        
-            </ul>
-      </div>
-      
-    </div>
-    
-
-  </div>
+        <div class="col-10 offset-1">
+            <table class="table">
+                <thead class="table-dark">
+                    <tr>
+                        <th>TODO</th>
+                        <th>Deadline</th>
+                        <th>Options</th>
+                    </tr>
+                </thead>
 
+                <tbody></tbody>
 
+            </table>
+        </div>
+  </div>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="index.js" defer></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/spa/index.js b/spa/index.js
index 062d888..d4ff1a0 100644
--- a/spa/index.js
+++ b/spa/index.js
@@ -2,59 +2,163 @@ let todos = [
   {
     id: 1,
     name: "Teach Class at Nagarro",
-    done: true
+    done: true,
+    deadline : new Date()
   },
   {
     id: 2,
     name: "Get Coffee",
-    done: false
+    done: false,
+    deadline: new Date()
   }
 ];
 
+
+let id = todos.length + 1;
+
+
 function render(state) {
+    let length = todos.length
   return state
-    .map(todo => {
-      // const li = document.createElement('li')
-      // li.classList.add("striked")
-      // document.body.append(li)
-      const classString = todo.done ? `class = "list-group-item striked"` : `class = "list-group-item"`
-      return `<li data-todo="${todo.id}" ${classString}> ${todo.name} </li>`;
+      .map(
+        (todo, index) => {
+
+          const strikeString = todo.done ? 'striked' : ''
+          const upArrow = index == 0 ? '-' : 'fa-arrow-up'
+          const upButtonClass = index == 0 ? '' : 'go-up'
+          const downArrow = index == length - 1 ? '-s' : 'fa-arrow-down'
+          const downButtonClass = index == length - 1 ? '' : 'go-down'
+
+          const row = document.createElement('tr')
+          row.setAttribute('data-todoId', todo.id)
+          
+
+          const name = document.createElement('td')
+          name.setAttribute('class', strikeString+" strikable")
+          name.innerText = todo.name
+
+          const deadlineDate = document.createElement('td')
+          deadlineDate.setAttribute('class', strikeString)
+          deadlineDate.innerText = (todo.deadline.getMonth() + 1) + "/" + todo.deadline.getDate() + "/"+(todo.deadline.getYear()+1900)
+          
+          
+
+          const up = document.createElement('button')
+          up.setAttribute('type', 'button')
+          up.setAttribute('class', 'btn btn-info ' + upButtonClass)
+          const upIcon = document.createElement('i')
+          upIcon.setAttribute('class', 'fa ' + upArrow)
+		  upIcon.text = "⬆"
+          up.appendChild(upIcon)
+
+
+          const down = document.createElement('button')
+          down.setAttribute('type', 'button')
+          down.setAttribute('class', 'btn btn-info ' + downButtonClass)
+          const downIcon = document.createElement('i')
+          downIcon.setAttribute('class', 'fa ' + downArrow)
+		  downIcon.text = '⬇'
+          down.appendChild(downIcon)
+
+          const operations = document.createElement('td')
+          operations.appendChild(up)
+          operations.appendChild(down)
+
+          row.appendChild(name)
+          row.appendChild(deadlineDate)
+          row.appendChild(operations)
+
+         
+          return row.outerHTML;
+         
     })
     .join("");
 }
 
+
 function paint() {
-  $("ul").html(render(todos));
+    $("tbody").html(render(todos));
+
+    $('.strikable').click(function () {
+
+        let strikeId = this.parentElement.dataset.todoid
+        todos.forEach(function (todo) {
+            if (todo.id == strikeId) { todo.done = !todo.done }
+        })
+        paint()
+    }
+    )
+
+    $('.go-down').on('click', function () {
+        let clickedId = this.parentElement.parentElement.dataset.todoid
+        for (let i = 0; i < todos.length; i++) {
+            if (todos[i].id == clickedId) {
+                let temp = todos[i]
+                todos[i] = todos[i + 1]
+                todos[i + 1] = temp
+                break
+            }
+        }
+        paint()
+    })
+
+    $('.go-up').on('click', function () {
+        let clickedId = this.parentElement.parentElement.dataset.todoid
+        for (let i = 0; i < todos.length; i++) {
+            if (todos[i].id == clickedId) {
+                let temp = todos[i]
+                todos[i] = todos[i - 1]
+                todos[i - 1] = temp
+                break
+            }
+        }
+        paint()
+    })
+   
 }
 
-function addTodo() {
-  // document.getElementById('newTodo') != $('#newTodo')
-  const inputBox = $('#newTodo')
-  todos.push({
-    id: todos.length + 1,
-    name: inputBox.val(),
-    done: false
-  })
 
-  inputBox.val('')
+$('#sort').on('click', function () {
+    todos.sort(function (a, b) {
+        return a.deadline - b.deadline
+    })
+    paint()
+})
 
-  paint()
+function addTodo() {
+    const inputBox = $('#newTodo')
+    const deadline = $('#deadline')
+    todos.push({
+        id: id++,
+        name: inputBox.val(),
+        done: false,
+        deadline: new Date(deadline.val())
+    })
+    inputBox.val('')
+    deadline.val("2019-11-01")
+    paint()
 }
 
 
 
 function removeTodos() {
   todos = todos.filter(todo => !todo.done)
-
   paint()
 }
 
 
+// Modifications are done here
+function reset() {
+  todos = [];
+  paint();
+}
+
+
+
 $('ul').on("click", function (e) {
   const idToFind = e.target.dataset.todo
   const todo = todos.find(todo => todo.id == idToFind)
   todo.done = !todo.done
-
   paint()
 })