diff --git a/src/content/mytinytodo.js b/src/content/mytinytodo.js
index 49b507a..66bfdd8 100644
--- a/src/content/mytinytodo.js
+++ b/src/content/mytinytodo.js
@@ -496,7 +496,7 @@ var mytinytodo = window.mytinytodo = _mtt = {
             clearTimeout(_mtt.timers.previewtag);
             $('#tasklist li').removeClass('not-in-tagpreview');
             //tag is not escaped
-            addFilterTag($(this).attr('tag'), $(this).attr('tagid'), (event.metaKey || event.ctrlKey ? true : false) );
+            addFilterTag(this.dataset.tag, this.dataset.tagId, (event.metaKey || event.ctrlKey ? true : false) );
             return false;
         });
 
@@ -523,10 +523,12 @@ var mytinytodo = window.mytinytodo = _mtt = {
 
         if (this.options.tagPreview && !this.options.touchDevice) {
             $('#tasklist').on('mouseover mouseout', '.tag', function(event){
-                var cl = 'tag-id-' + $(this).attr('tagid');
-                var sel = (event.metaKey || event.ctrlKey) ? 'li.'+cl : 'li:not(.'+cl+')';
-                if(event.type == 'mouseover') {
-                    _mtt.timers.previewtag = setTimeout( function(){$('#tasklist '+sel).addClass('not-in-tagpreview');}, _mtt.options.tagPreviewDelay);
+                const cl = 'tag-id-' + this.dataset.tagId;
+                const sel = (event.metaKey || event.ctrlKey) ? 'li.'+cl : 'li:not(.'+cl+')';
+                if (event.type == 'mouseover') {
+                    _mtt.timers.previewtag = setTimeout( function(){
+                        $('#tasklist '+sel).addClass('not-in-tagpreview');
+                    }, _mtt.options.tagPreviewDelay);
                 }
                 else {
                     clearTimeout(_mtt.timers.previewtag);
@@ -1234,12 +1236,12 @@ _mtt.preparePrio = preparePrio;
 
 function prepareTagsStr(item)
 {
-    if(!item.tags || item.tags == '') return '';
-    var a = item.tags.split(',');
-    if(!a.length) return '';
-    var b = item.tags_ids.split(',')
-    for(var i in a) {
-        a[i] = '<a href="#" class="tag" tag="'+a[i]+'" tagid="'+b[i]+'">'+a[i]+'</a>';
+    if (!item.tags || item.tags == '') return '';
+    let a = item.tags.split(',');
+    if (!a.length) return '';
+    const b = item.tags_ids.split(',')
+    for (let i in a) {
+        a[i] = '<span class="tag" data-tag="'+a[i]+'" data-tag-id="'+b[i]+'">'+a[i]+'</span>';
     }
     return '<span class="task-tags">'+a.join(', ')+'</span>';
 };
@@ -1836,14 +1838,16 @@ function saveTask(form)
 
 function toggleEditAllTags(show)
 {
-    if(show)
+    if (show)
     {
-        if(curList.id == -1) {
-            var taskId = document.getElementById('taskedit_form').id.value;
+        if (curList.id == -1) {
+            const taskId = document.getElementById('taskedit_form').id.value;
             loadTags(taskList[taskId].listId, fillEditAllTags);
         }
-        else if(flag.tagsChanged) loadTags(curList.id, fillEditAllTags);
-        else fillEditAllTags();
+        else if (flag.tagsChanged)
+            loadTags(curList.id, fillEditAllTags);
+        else
+            fillEditAllTags();
         showhide($('#alltags_hide'), $('#alltags_show'));
     }
     else {
@@ -1858,7 +1862,7 @@ function fillEditAllTags()
     tagsList.forEach( (item) => {
         a.push('<span class="tag" data-tag="' + item.tag +'">' + item.tag + '</span>');
     });
-    const content = (a.length == 0)  ?  _mtt.lang.get('noTags')  :  a.join(', ');
+    const content = (a.length == 0)  ?  _mtt.lang.get('noTags')  :  a.join('');
     $('#alltags').html(content);
     $('#alltags').show();
 };
diff --git a/src/content/theme/dark.css b/src/content/theme/dark.css
index 159e4f8..7a856fe 100644
--- a/src/content/theme/dark.css
+++ b/src/content/theme/dark.css
@@ -47,7 +47,7 @@
     --color-btn-tab-hover-bg: #5a5a5a;
 
     /* Menu */
-    --color-menu: #2b2b2b;
+    --color-menu: #252525;
     --color-menu-border: #555;
     --color-menu-hover: #5a8df0;
     --color-menu-text: #eaeaea;
@@ -63,8 +63,10 @@
     --color-tasklist-tag: var(--color-tab-text);
     --color-tasklist-note-link: #999;
     --color-tasklist-link-hover: var(--color-link);
-    --color-taglist-text-hover: var(--color-bg);
-    --color-taglist-text-hover-bg: var(--color-text-default);
+    --color-taglist-tag: var(--color-text-reduced);
+    --color-taglist-tag-bg: #444;
+    --color-taglist-tag-hover: var(--color-taglist-tag);
+    --color-taglist-tag-hover-bg: var(--color-taglist-tag-bg);
     --color-tasklist-listname: #bbb;
     --color-tasklist-listname-bg: #333;
 
diff --git a/src/content/theme/style.css b/src/content/theme/style.css
index d2b04ab..ebbccaf 100644
--- a/src/content/theme/style.css
+++ b/src/content/theme/style.css
@@ -67,8 +67,10 @@
   --color-tasklist-tag: var(--color-tab-text);
   --color-tasklist-note-link: #777;
   --color-tasklist-link-hover: var(--color-link); /* #af0000 */
-  --color-taglist-text-hover: var(--color-bg);
-  --color-taglist-text-hover-bg: var(--color-btn-tab-hover-bg);
+  --color-taglist-tag: var(--color-text-reduced);
+  --color-taglist-tag-bg: #e0e0e0;
+  --color-taglist-tag-hover: var(--color-taglist-tag);
+  --color-taglist-tag-hover-bg: var(--color-taglist-tag-bg);
   --color-tasklist-listname: #555;
   --color-tasklist-listname-bg: #eee;
 
@@ -592,7 +594,13 @@ li.task-row.task-expanded .task-toggle { transform:rotate(90deg); }
   margin: 0px 2px;
 }
 .task-tags { padding:0px 2px; }
-.task-tags .tag { font-size:0.9rem; font-weight:bold; color: var(--color-tasklist-tag); text-decoration:underline;  }
+.task-tags .tag {
+  font-size:0.9rem;
+  font-weight:bold;
+  color: var(--color-tasklist-tag);
+  text-decoration:underline;
+  cursor: pointer;
+}
 .duedate { color:var(--color-duedate-default); padding:0px; padding-left:1px; margin-left:5px; white-space:nowrap; }
 .duedate:before {
   content:'\2192\20';
@@ -718,18 +726,29 @@ li.task-row.task-expanded .task-note-block { display:block; }
 }
 #page_taskedit .form-row-short { float:left; margin-right:12px; }
 #alltags .tag {
-  color:var(--color-tasklist-tag);
-  text-decoration: underline;
+  display: inline-block;
+  color:var(--color-taglist-tag);
+  background-color:var(--color-taglist-tag-bg);
   cursor: pointer;
+  padding: 0 0.5em;
+  border-radius: 1em;
+  background-clip: padding-box;
+  border: 1px solid transparent;
+  margin-bottom:2px;
+  margin-right: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 #alltags .tag:hover {
-  background-color:var(--color-taglist-text-hover-bg);
-  color: var(--color-taglist-text-hover);
+  /*background-color:var(--color-taglist-tag-hover-bg);*/
+  border-color: var(--color-taglist-tag-hover-bg);;
+  color: var(--color-taglist-tag-hover);
 }
 .alltags-cell { width:1%; white-space:nowrap; padding-left:5px; }
 #page_taskedit.mtt-inadd .mtt-inedit { display:none; }
 #page_taskedit.mtt-inedit .mtt-inadd { display:none; }
-#taskedit_id {
+#taskedit_id, #taskview_id {
   color: var(--color-text-reduced2);
   font-weight: normal;
   margin-left: 5px;
@@ -795,17 +814,24 @@ h3.page-title a.mtt-back-button {
   padding:5px;
 }
 #tagcloud .tag {
-  margin: 2px;
-  padding: 2px;
-  line-height:160%;
-  color: var(--color-text-default);
+  display: inline-block;
+  padding: 0 0.5em;
+  border-radius: 1em;
+  color:var(--color-taglist-tag);
+  background-color:var(--color-taglist-tag-bg);
   cursor: pointer;
-  text-decoration: underline;
   white-space: nowrap;
+  background-clip: padding-box; /* for transparent border */
+  border: 1px solid transparent;
+  margin-bottom:2px;
+  margin-right: 1px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 #tagcloud .tag:hover {
-  background-color:var(--color-taglist-text-hover-bg);
-  color: var(--color-taglist-text-hover);
+  border-color: var(--color-taglist-tag-hover-bg);
+  color: var(--color-taglist-tag-hover);
 }
 #tagcloudload {
   display:none;