diff --git a/src/includes/mytinytodo.js b/src/includes/mytinytodo.js
index 96013b3..556b5d9 100644
--- a/src/includes/mytinytodo.js
+++ b/src/includes/mytinytodo.js
@@ -911,29 +911,44 @@ function loadTasks(opts)
 
 function prepareTaskStr(item, noteExp)
 {
-	// — = — = —
-	var id = item.id;
-	var prio = item.prio;
-	return '<li id="taskrow_'+id+'" class="' + (item.compl?'task-completed ':'') + item.dueClass + (item.note!=''?' task-has-note':'') +
+	return '<li id="taskrow_'+item.id+'" class="' + (item.compl?'task-completed ':'') + item.dueClass + (item.note!=''?' task-has-note':'') +
 				((curList.showNotes && item.note != '') || noteExp ? ' task-expanded' : '') + prepareTagsClass(item.tags_ids) + '">' +
-		'<div class="task-actions"><a href="#" class="taskactionbtn"></a></div>'+"\n"+
-		'<div class="task-left"><div class="task-toggle"></div>'+
-		'<input type="checkbox" '+(flag.readOnly?'disabled="disabled"':'')+(item.compl?'checked="checked"':'')+'/></div>'+"\n"+
-		'<div class="task-middle"><div class="task-through-right">'+prepareDuedate(item)+
-		'<span class="task-date-completed"><span title="'+item.dateInlineTitle+'">'+item.dateInline+'</span>&#8212;'+
-		'<span title="'+item.dateCompletedInlineTitle+'">'+item.dateCompletedInline+'</span></span></div>'+"\n"+
-		'<div class="task-through">'+preparePrio(prio,id)+'<span class="task-title">'+prepareHtml(item.title)+'</span> '+
-		(curList.id == -1 ? '<span class="task-listname">'+ tabLists.get(item.listId).name +'</span>' : '') +	"\n" +
-		prepareTagsStr(item)+'<span class="task-date">'+item.dateInlineTitle+'</span></div>'+
-		'<div class="task-note-block">'+
-			'<div id="tasknote'+id+'" class="task-note"><span>'+prepareHtml(item.note)+'</span></div>'+
-			'<div id="tasknotearea'+id+'" class="task-note-area"><textarea id="notetext'+id+'"></textarea>'+
-				'<span class="task-note-actions"><a href="#" class="mtt-action-note-save">'+_mtt.lang.get('actionNoteSave')+
-				'</a> | <a href="#" class="mtt-action-note-cancel">'+_mtt.lang.get('actionNoteCancel')+'</a></span></div>'+
-		'</div>'+
-		"</div></li>\n";
+					prepareTaskBlocks(item) + "</li>\n";
 };
 
+function prepareTaskBlocks(item)
+{
+	var id = item.id;
+	return	''+
+		'<div class="task-left">' + 
+			'<div class="task-toggle"></div>' +
+			'<label><input type="checkbox" '+(flag.readOnly?'disabled="disabled"':'')+(item.compl?'checked="checked"':'')+'/></label>' + 
+		"</div>\n" +
+		
+		'<div class="task-middle">' + 
+			
+			'<div class="task-middle-top">' +
+				'<div class="task-through">' + 
+					preparePrio(item.prio,id) + 
+					'<span class="task-title">' + prepareHtml(item.title) + '</span> ' +
+					(curList.id == -1 ? '<span class="task-listname">'+ tabLists.get(item.listId).name +'</span>' : '') +
+					prepareTagsStr(item) + 
+					'<span class="task-date">'+item.dateInlineTitle+'</span>' +
+				'</div>' +
+				'<div class="task-through-right">' + prepareDueDate(item) + prepareCompletedDate(item) + "</div>" +
+			'</div>' + 
+			
+			'<div class="task-note-block">' +
+				'<div id="tasknote'+id+'" class="task-note"><span>'+prepareHtml(item.note)+'</span></div>' +
+				'<div id="tasknotearea'+id+'" class="task-note-area"><textarea id="notetext'+id+'"></textarea>'+
+					'<span class="task-note-actions"><a href="#" class="mtt-action-note-save">'+_mtt.lang.get('actionNoteSave') +
+						'</a> | <a href="#" class="mtt-action-note-cancel">'+_mtt.lang.get('actionNoteCancel')+'</a></span>' +
+				'</div>' +
+			'</div>'+
+		"</div>" +
+
+		'<div class="task-actions"><div class="taskactionbtn"></div></div>';
+};
 
 function prepareHtml(s)
 {
@@ -974,12 +989,21 @@ function prepareTagsClass(ids)
 	return ' '+a.join(' ');
 };
 
-function prepareDuedate(item)
+function prepareDueDate(item)
 {
 	if(!item.duedate) return '';
 	return '<span class="duedate" title="'+item.dueTitle+'">'+item.dueStr+'</span>';
 };
 
+function prepareCompletedDate(item)
+{
+	// &mdash; = &#8212; = —
+	return	'<span class="task-date-completed">' + 
+				'<span title="' + item.dateInlineTitle + '">' + item.dateInline + '</span>&#8212;' +
+				'<span title="' + item.dateCompletedInlineTitle + '">' + item.dateCompletedInline + '</span>' +
+			'</span>';
+};
+
 
 function submitNewTask(form)
 {
diff --git a/src/themes/default/images/note-toggle.svg b/src/themes/default/images/note-toggle.svg
index d1b3b7d..74d619b 100644
--- a/src/themes/default/images/note-toggle.svg
+++ b/src/themes/default/images/note-toggle.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <!--<rect x="0" y="0" width="16" height="16" fill="orange"/>-->
-  <polygon points="6 2, 12 8, 6 14" fill="#000"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+<!--<rect x="0" y="0" width="14" height="14" fill="lightpink"/>-->
+<polyline points="5 2, 10 7, 5 12" stroke-width="1.5" stroke="#000" fill="none" />
 </svg>
\ No newline at end of file
diff --git a/src/themes/default/images/task-menu.svg b/src/themes/default/images/task-menu.svg
new file mode 100644
index 0000000..6d4dc04
--- /dev/null
+++ b/src/themes/default/images/task-menu.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 14 14">
+<!--<rect x="0" y="0" width="14" height="14" fill="lightpink"/>-->
+<polyline points="2 7, 7 12, 12 7" stroke-width="2" stroke="#000" fill="none" />
+</svg>
\ No newline at end of file
diff --git a/src/themes/default/mobile.css b/src/themes/default/mobile.css
index 6cb7338..4e3dbb1 100644
--- a/src/themes/default/mobile.css
+++ b/src/themes/default/mobile.css
@@ -32,7 +32,6 @@ h2 { margin:0; margin-bottom:2px; font-size:1rem; }
 .task-note-actions { display:block; padding-top:8px; }
 .task-note-block { margin-left:0px; border-left:1px solid #777777; background:none; padding-left:4px; display:none; } 
 .task-note-area textarea { width:95%; }
-.task-middle { margin-right:0px; }
 
 #tasklist li .task-through { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 #tasklist li:hover { background-color:#ffffff; }
@@ -45,7 +44,6 @@ h2 { margin:0; margin-bottom:2px; font-size:1rem; }
 /*#tasklist li.clicked.task-has-note .task-toggle { background-position:-48px 0; } */
 #tasklist li.clicked.doubleclicked.task-has-note .task-note-block { display:none; }
 .task-toggle { display:none; }
-.task-middle { margin-left:25px; }
 
 #page_taskedit { max-width:99.5%; border:none; position:static; padding:0; }
 #page_taskedit .form-table { width:100%; }
diff --git a/src/themes/default/style.css b/src/themes/default/style.css
index be00bdb..e1c23b3 100644
--- a/src/themes/default/style.css
+++ b/src/themes/default/style.css
@@ -152,26 +152,34 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
 #mtt-tag-toolbar-close span { background:url(images/close.svg) no-repeat; }
 
 
-.task-left { float:left; }
-.task-toggle { visibility:hidden; margin-top:1px; cursor:pointer; width:16px; height:16px; float:left;
-  background:url(images/note-toggle.svg) no-repeat; opacity:0.45;
+.task-toggle { visibility:hidden; cursor:pointer; width:14px; height:14px; flex:0 0 14px; /* =1rem */ margin-right:2px;
+  background:url(images/note-toggle.svg) no-repeat; background-size:14px 14px; background-position:center; opacity:0.45;
   transition:transform .1s linear, opacity .1s ease-in;
 }
+.task-toggle::after { content:'_'; visibility:hidden; } /* for baseline */
 .task-toggle:hover { opacity:0.7; }
 li.task-has-note .task-toggle { visibility:visible; }
 li.task-expanded .task-toggle { transform:rotate(90deg); }
-.task-middle { margin-left:40px; margin-right:20px; }
+
+/* #tasklist input[type="checkbox"] { vertical-align:-1px; } /* Chrome */
+
 #tasklist { list-style-type: none; margin: 0; padding: 0;}
-#tasklist li { padding:6px 2px 6px 6px; border-bottom:1px solid #DEDEDE; min-height:18px; margin-bottom:1px; background-color:#fff; }
+#tasklist li { padding:6px 2px 6px 6px; border-bottom:1px solid #DEDEDE; min-height:18px; margin-bottom:1px; background-color:#fff; 
+	 display:flex; justify-content:start; align-items:baseline; }
 #tasklist li:hover { background-color:#f6f6f6; }
-.task-actions { float:right; width:20px; min-height:18px; padding-top:1px; text-align:right; }
+.task-left { display:flex; align-items:baseline; }
+.task-middle { flex-grow:1; margin-left: 5px; min-width:0; }
+.task-middle-top { display:flex; align-items:baseline; }
+.task-actions { flex:0 0 16px; margin-left:5px; }
+
+.task-left label { min-width:18px; text-align:center; } /* Safari has small checkboxes */
 .task-date { color:#999999; font-size:0.8rem; margin-left:4px; display:none; }
 .task-date-completed { color:#999999; display:none; margin-left:5px; }
 .show-inline-date .task-date { display:inline; }
 .show-inline-date li.task-completed .task-date-completed { display:inline; }
 .show-inline-date li.task-completed .task-date { display:none; }
-.task-through { overflow:hidden; }
-.task-through-right { float:right; }
+.task-through { overflow:hidden; flex-grow:1; }
+.task-through-right { }
 .task-title a { color:#000000; }
 .task-title a:hover { color:#af0000; }
 #mtt_body.readonly #tasklist li .task-actions { display:none; }
@@ -179,7 +187,7 @@ li.task-expanded .task-toggle { transform:rotate(90deg); }
 .task-tags { padding:0px 2px; }
 .task-tags .tag { font-size:0.8rem; font-weight:bold; color:#333333; text-decoration:underline;  }
 .task-tags .tag:hover {  }
-.duedate { color:#333333; padding:0px; padding-left:1px; margin-left:5px;  }
+.duedate { color:#333333; padding:0px; padding-left:1px; margin-left:5px; white-space:nowrap; }
 .duedate:before { content:'\2192\20'; }
 li.task-completed .duedate { /*font-size:0.8rem;*/ display:none; }
 #tasklist li.soon .duedate { color:#008000; }
@@ -197,8 +205,11 @@ li.task-completed .task-title a { color:#777777; }
  border-radius:5px;
 }
 
-a.taskactionbtn { display:block; float:right; height:16px; width:16px; text-decoration:none; background:url(images/arrdown.svg) no-repeat; display:none; }
-li:hover a.taskactionbtn, a.taskactionbtn.mtt-menu-button-active { background-image:url(images/arrdown-hover.svg); display:block;}
+.taskactionbtn { height:1rem; width:1rem; background:url(images/task-menu.svg) no-repeat; background-size:cover; display:none;
+	opacity:0.45; transition:opacity .1s ease-in; }
+.taskactionbtn::after { content:'_'; visibility:hidden; } /* for baseline */
+li:hover .taskactionbtn { display:block; }
+.taskactionbtn:hover, .taskactionbtn.mtt-menu-button-active { opacity:0.7; cursor:pointer; display:block; }
 
 #tasklist.filter-past li, #tasklist.filter-today li, #tasklist.filter-soon li { display:none; }
 #tasklist.filter-past li.past, #tasklist.filter-today li.today, #tasklist.filter-soon li.soon { display:block; }