diff --git a/www/todo/inner.html b/www/todo/inner.html
index 4d8aacbce..476376a4d 100644
--- a/www/todo/inner.html
+++ b/www/todo/inner.html
@@ -9,13 +9,11 @@
 <body class="loading-hidden">
     <div id="toolbar" class="toolbar-container"></div>
     <div id="container">
-    	<div class="create-form">
-    		<input type="text" id="newTodoName" />
-    		<button class="btn btn-success">Add the task</button>
-    	</div>
-    	<div id="tasksList">
-    		
-    	</div>
+        <div class="cp-create-form">
+            <input type="text" id="newTodoName" />
+            <button class="btn btn-success">Add the task</button>
+        </div>
+        <div id="tasksList"></div>
     </div>
 </body>
 </html>
diff --git a/www/todo/main.js b/www/todo/main.js
index 17d70e361..a46c0f2f7 100644
--- a/www/todo/main.js
+++ b/www/todo/main.js
@@ -41,14 +41,14 @@ define([
                     'class': 'cp-task'
                 }).appendTo($list);
 
-                $('<span>', {})
+                $('<span>', { 'class': 'cp-task-text' })
                     .text(APP.lm.proxy.data[el].task)
                     .appendTo($taskDiv);
-                $('<span>', {})
+                $('<span>', { 'class': 'cp-task-date' })
                     .text(new Date(APP.lm.proxy.data[el].ctime).toLocaleString())
                     .appendTo($taskDiv);
                 $('<button>', {
-                    'class': 'fa fa-times'
+                    'class': 'fa fa-times cp-task-remove'
                 }).appendTo($taskDiv).on('click', function() {
                     deleteTask(el);
                 });
@@ -67,12 +67,11 @@ define([
 
             todo.add(Cryptpad.createChannelId(), obj);
 
-            $input.empty();
-
+            $input.val("");
             display();
         };
 
-        $iframe.find('.create-form button').on('click', addTask);
+        $iframe.find('.cp-create-form button').on('click', addTask);
 
         var editTask = function () {
 
diff --git a/www/todo/todo.less b/www/todo/todo.less
index 605be07a2..56fa49908 100644
--- a/www/todo/todo.less
+++ b/www/todo/todo.less
@@ -32,4 +32,30 @@ body {
     flex-flow: column;
     padding: 20px;
     align-items: center;
-}
\ No newline at end of file
+    background-color: lighten(@toolbar-todo-bg, 15%);
+}
+
+@spacing: 15px;
+
+.cp-create-form {
+    margin: @spacing;
+}
+
+.cp-task {
+    border: 1px solid black;
+    padding: @spacing;
+    display: flex;
+    align-items: center;
+    background-color: white;
+
+    .cp-task-text {
+        margin: @spacing;
+        flex: 1;
+    }
+    .cp-task-date {
+        margin: @spacing;
+    }
+    .cp-task-remove {
+        margin: @spacing;
+    }
+}
