diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js
index ae7c4a0d..d77f09f6 100644
--- a/ext/bg/js/templates.js
+++ b/ext/bg/js/templates.js
@@ -77,23 +77,16 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.tags : depth0),{"name":"each","hash":{},"fn":container.program(11, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "</div>\n";
 },"11":function(container,depth0,helpers,partials,data) {
-    var stack1, helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+    var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
-  return "    <span class=\"tag "
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0["class"] : depth0),{"name":"if","hash":{},"fn":container.program(12, data, 0),"inverse":container.program(14, data, 0),"data":data})) != null ? stack1 : "")
+  return "    <span class=\"tag tag-"
+    + alias4(((helper = (helper = helpers["class"] || (depth0 != null ? depth0["class"] : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"class","hash":{},"data":data}) : helper)))
     + "\" title=\""
     + alias4(((helper = (helper = helpers.desc || (depth0 != null ? depth0.desc : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"desc","hash":{},"data":data}) : helper)))
     + "\">"
-    + alias4(((helper = (helper = helpers.key || (data && data.key)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"key","hash":{},"data":data}) : helper)))
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
     + "</span>\n";
-},"12":function(container,depth0,helpers,partials,data) {
-    var helper;
-
-  return "tag-"
-    + container.escapeExpression(((helper = (helper = helpers["class"] || (depth0 != null ? depth0["class"] : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"class","hash":{},"data":data}) : helper)));
-},"14":function(container,depth0,helpers,partials,data) {
-    return "tag-default";
-},"16":function(container,depth0,helpers,partials,data) {
+},"13":function(container,depth0,helpers,partials,data) {
     return "        <li><span>"
     + container.escapeExpression(container.lambda(depth0, depth0))
     + "</span></li>\n";
@@ -106,7 +99,7 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
     + "\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.tags : depth0),{"name":"if","hash":{},"fn":container.program(10, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n<div class=\"glossary\">\n    <ol>\n"
-    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(16, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(13, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "    </ol>\n</div>\n";
 },"useData":true});
 templates['term-list.html'] = template({"1":function(container,depth0,helpers,partials,data) {
diff --git a/ext/bg/js/translator.js b/ext/bg/js/translator.js
index e2d15e46..eeeea540 100644
--- a/ext/bg/js/translator.js
+++ b/ext/bg/js/translator.js
@@ -103,8 +103,8 @@ class Translator {
                 return 1;
             }
 
-            const p1 = v1.tags.hasOwnProperty('P');
-            const p2 = v2.tags.hasOwnProperty('P');
+            const p1 = v1.popular;
+            const p2 = v2.popular;
             if (p1 && !p2) {
                 return -1;
             } else if (!p1 && p2) {
@@ -158,22 +158,52 @@ class Translator {
                 }
             }
 
-            let tagInfo = {};
+            let popular  = false;
+            let tagItems = [];
             for (const tag of entry.tags) {
-                const info = this.tags[tag];
-                if (info) {
-                    tagInfo[tag] = info;
+                const tagItem = this.tags[tag];
+                if (tagItem) {
+                    tagItems.push({
+                        class: tagItem.class || 'default',
+                        order: tagItem.order || Number.MAX_SAFE_INTEGER,
+                        name: tag
+                    });
+                }
+                if (tag === 'P') {
+                    popular = true;
                 }
             }
 
+            tagItems = tagItems.sort((v1, v2) => {
+                const order1 = v1.order;
+                const order2 = v2.order;
+                if (order1 < order2) {
+                    return -1;
+                } else if (order1 > order2) {
+                    return 1;
+                }
+
+                const name1 = v1.name;
+                const name2 = v2.name;
+                if (name1 < name2) {
+                    return -1;
+                } else if (name1 > name2) {
+                    return 1;
+                }
+
+                return 0;
+            });
+
+
             if (matched) {
                 groups[entry.id] = {
                     expression: entry.expression,
                     reading:    entry.reading,
                     glossary:   entry.glossary,
-                    tags:       tagInfo,
+                    tags:       tagItems,
                     source:     source,
-                    rules:      rules
+                    rules:      rules,
+                    popular:    popular
                 };
             }
         }
diff --git a/util/tmpl/term.html b/util/tmpl/term.html
index e97104f1..054f7510 100644
--- a/util/tmpl/term.html
+++ b/util/tmpl/term.html
@@ -15,7 +15,7 @@
 {{#if tags}}
 <div class="tags">
     {{#each tags}}
-    <span class="tag {{#if class}}tag-{{class}}{{else}}tag-default{{/if}}" title="{{desc}}">{{@key}}</span>
+    <span class="tag tag-{{class}}" title="{{desc}}">{{name}}</span>
     {{/each}}
 </div>
 {{/if}}