diff --git a/.eslintrc b/.eslintrc
index 39172a499..59d17b1e9 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -27,6 +27,7 @@
     "Promise": true,
     "require": true,
     "wcEvents": true,
+    "wcTmpl": true,
     "WindowHelpers": true
   },
   "rules": {
diff --git a/.gitignore b/.gitignore
index 3c6671352..7266f789c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,7 @@ webcompat/static/js/issues.js
 webcompat/static/js/issue-list.js
 webcompat/static/js/user-activity.js
 webcompat/static/js/cssfixme.js
+webcompat/static/js/templates.js
 webcompat/**/*.min.js
 webcompat/**/*.min.css
 webcompat/**/*.dev.css
diff --git a/Gruntfile.js b/Gruntfile.js
index 508d95d29..8641f2b07 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -5,6 +5,7 @@
 module.exports = function(grunt) {
   grunt.initConfig({
     pkg: grunt.file.readJSON("package.json"),
+    tmplPath: "webcompat/templates/",
     jsPath: "webcompat/static/js",
     cssPath: "webcompat/static/css",
     imgPath: "webcompat/static/img",
@@ -24,6 +25,7 @@ module.exports = function(grunt) {
   // Default task.
   grunt.registerTask("default", [
     "checkDependencies",
+    "jst",
     "concat",
     "uglify",
     "postcss",
@@ -33,6 +35,7 @@ module.exports = function(grunt) {
   // Task used before doing a deploy (same as default, but does image optimization)
   grunt.registerTask("deploy", [
     "checkDependencies",
+    "jst",
     "concat",
     "uglify",
     "postcss",
diff --git a/docs/dev-env-setup.md b/docs/dev-env-setup.md
index 0f4549057..66fbee70e 100644
--- a/docs/dev-env-setup.md
+++ b/docs/dev-env-setup.md
@@ -198,6 +198,7 @@ After certain kinds of changes are made, you need to build the project before se
 
 * CSS: a build will run cssnext, combine custom media queries, and concat all source files into webcompat.dev.css. You'll need to re-build the CSS to see any changes, so it's recommended to use a watch task (see `npm run watch`).
 * JS: a build will run eslint, minify and concat source files.
+* JS templates (.jst files): if you are making changes to a Backbone template in a `.jst` file, you will need to re-run the `build` command to update the pre-compiled `templates.js` file before you will see the results.
 * HTML templates: the changes should be served from disk without the need for rebuilding
 * Python: the Flask local server will detect changes and restart automatically. No need to re-build.
 
diff --git a/grunt-tasks/concat.js b/grunt-tasks/concat.js
index cc3827dac..ca622612e 100644
--- a/grunt-tasks/concat.js
+++ b/grunt-tasks/concat.js
@@ -22,7 +22,8 @@ module.exports = function(grunt) {
         "<%= jsPath %>/vendor/backbone.mousetrap.js",
         "<%= jsPath %>/lib/flash-message.js",
         "<%= jsPath %>/lib/homepage.js",
-        "<%= jsPath %>/lib/bugform.js"
+        "<%= jsPath %>/lib/bugform.js",
+        "<%= jsPath %>/templates.js"
       ],
       dest: "<%= jsPath %>/<%= pkg.name %>.js"
     },
diff --git a/grunt-tasks/jst.js b/grunt-tasks/jst.js
new file mode 100644
index 000000000..5c6087e57
--- /dev/null
+++ b/grunt-tasks/jst.js
@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = function(grunt) {
+  grunt.config("jst", {
+    compile: {
+      options: {
+        namespace: "wcTmpl",
+        prettify: true,
+        processContent: function(src) {
+          // strip the opening and closing <script> tags...
+          // otherwise, the template functions will just inject script elements
+          // that won't render.
+          src = src.replace(/<script type="text\/template">/, "");
+          src = src.replace(/<\/script>/, "");
+          return src.trim();
+        },
+        processName: function(filename) {
+          // make this a bit less redunant when we have to refer back
+          // to the pre-compiled template function names.
+          return filename.split("webcompat/templates/")[1];
+        }
+      },
+      files: {
+        "<%= jsPath %>/templates.js": ["<%= tmplPath %>/**/*.jst"]
+      }
+    }
+  });
+};
diff --git a/package.json b/package.json
index 98e4d434c..59a88d73a 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "grunt-contrib-concat": "^1.0.0",
     "grunt-contrib-cssmin": "^2.0.0",
     "grunt-contrib-imagemin": "~1.0.1",
+    "grunt-contrib-jst": "^1.0.0",
     "grunt-contrib-uglify": "^2.3.0",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-postcss": "^0.8.0",
diff --git a/webcompat/helpers.py b/webcompat/helpers.py
index 2f462531a..c5ab33cff 100644
--- a/webcompat/helpers.py
+++ b/webcompat/helpers.py
@@ -494,7 +494,7 @@ def add_csp(response):
         "font-src 'self'; " +
         "img-src 'self' https://www.google-analytics.com https://*.githubusercontent.com data:; " +  # nopep8
         "manifest-src 'self'; " +
-        "script-src 'self' 'unsafe-eval' https://www.google-analytics.com https://api.github.com; " +  # nopep8
+        "script-src 'self' https://www.google-analytics.com https://api.github.com; " +  # nopep8
         "style-src 'self' 'unsafe-inline'; " +
         "report-uri /csp-report"
     )
diff --git a/webcompat/static/js/lib/comments.js b/webcompat/static/js/lib/comments.js
index 5d9ea683c..d1f209d99 100644
--- a/webcompat/static/js/lib/comments.js
+++ b/webcompat/static/js/lib/comments.js
@@ -26,7 +26,7 @@ issues.CommentView = Backbone.View.extend({
   id: function() {
     return this.model.get("commentLinkId");
   },
-  template: _.template($("#comment-tmpl").html()),
+  template: wcTmpl["issue/issue-comment-list.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;
diff --git a/webcompat/static/js/lib/diagnose.js b/webcompat/static/js/lib/diagnose.js
index 5f74d4f2e..b7e9f6250 100644
--- a/webcompat/static/js/lib/diagnose.js
+++ b/webcompat/static/js/lib/diagnose.js
@@ -23,7 +23,7 @@ diagnose.NeedsTriageView = Backbone.View.extend({
       })
       .error(function() {});
   },
-  template: _.template($("#needstriage-tmpl").html()),
+  template: wcTmpl["web_modules/issue-list.jst"],
   render: function() {
     this.$el.html(
       this.template({
diff --git a/webcompat/static/js/lib/flash-message.js b/webcompat/static/js/lib/flash-message.js
index 1ce3f1845..40a3fad69 100644
--- a/webcompat/static/js/lib/flash-message.js
+++ b/webcompat/static/js/lib/flash-message.js
@@ -44,16 +44,7 @@ var FlashMessageView = Backbone.View.extend({
     this.render(message);
   },
   showThanks: function(opts) {
-    var buildTemplate = _.template(
-      [
-        "<h4>Thanks for reporting an issue!</h4>",
-        "<p>You're helping us make the web a better place to work and play.</p>",
-        "<p>Tell your friends about the bug you just filed:</p>",
-        '<a class="wc-Button wc-Button--action" href="https://twitter.com/intent/tweet?text=<%- encodeURIComponent("I just filed a bug on the internet:") %>&url=<%- encodeURIComponent("https://webcompat.com/issues/") %><%= number %>&via=webcompat" target="_blank">Share on Twitter</a>',
-        '<a class="wc-Button wc-Button--action" href="https://facebook.com/sharer/sharer.php?u=<%- encodeURIComponent("https://webcompat.com/issues/") %><%= number %>" target="_blank">Share on Facebook</a>'
-      ].join("")
-    );
-
+    var buildTemplate = wcTmpl["issue/thanks.jst"];
     this.$el.addClass("is-active wc-FlashMessage--thanks");
     this.$el
       .html(buildTemplate({ number: opts.message }))
diff --git a/webcompat/static/js/lib/issue-list.js b/webcompat/static/js/lib/issue-list.js
index 9a29fdae2..22e778067 100644
--- a/webcompat/static/js/lib/issue-list.js
+++ b/webcompat/static/js/lib/issue-list.js
@@ -38,7 +38,7 @@ issueList.DropdownView = Backbone.View.extend({
       _.bind(this.selectDropdownOption, this)
     );
   },
-  template: _.template($("#dropdown-tmpl").html()),
+  template: wcTmpl["list-issue/dropdown.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;
@@ -154,7 +154,7 @@ issueList.SearchView = Backbone.View.extend({
     issueList.events.on("search:clear", _.bind(this.clearSearchBox, this));
     issueList.events.on("search:current", _.bind(this.currentSearch, this));
   },
-  template: _.template($("#issuelist-search-tmpl").html()),
+  template: wcTmpl["list-issue/issuelist-search.jst"],
   render: function(cb) {
     this.$el.html(this.template());
     this.input = this.$el.find("input");
@@ -245,7 +245,7 @@ issueList.SortingView = Backbone.View.extend({
       model: this.sortModel
     });
   },
-  template: _.template($("#issuelist-sorting-tmpl").html()),
+  template: wcTmpl["list-issue/issuelist-sorting.jst"],
   render: function() {
     this.$el.html(this.template());
     this.paginationDropdown
@@ -290,7 +290,7 @@ issueList.IssueView = Backbone.View.extend(
       issuesPagination.initMixin(this, this.issues, $("main"));
       this.loadIssues();
     },
-    template: _.template($("#issuelist-issue-tmpl").html()),
+    template: wcTmpl["list-issue/issuelist-issue.jst"],
     loadIssues: function() {
       // Attemps to load model state from URL params, if present,
       // otherwise grab model defaults and load issues
diff --git a/webcompat/static/js/lib/issues.js b/webcompat/static/js/lib/issues.js
index 65098b8cf..47252334d 100644
--- a/webcompat/static/js/lib/issues.js
+++ b/webcompat/static/js/lib/issues.js
@@ -100,7 +100,7 @@ issues.MetaDataView = Backbone.View.extend({
       }, this)
     );
   },
-  template: _.template($("#metadata-tmpl").html()),
+  template: wcTmpl["issue/metadata.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;
@@ -117,7 +117,7 @@ issues.AsideView = Backbone.View.extend({
       }, this)
     );
   },
-  template: _.template($("#aside-tmpl").html()),
+  template: wcTmpl["issue/aside.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;
@@ -127,7 +127,7 @@ issues.AsideView = Backbone.View.extend({
 issues.BodyView = Backbone.View.extend({
   el: $(".wc-Issue-report"),
   mainView: null,
-  template: _.template($("#issue-info-tmpl").html()),
+  template: wcTmpl["issue/issue-report.jst"],
   initialize: function(options) {
     this.mainView = options.mainView;
   },
@@ -184,7 +184,7 @@ issues.ImageUploadView = Backbone.View.extend({
   },
   _submitButton: $(".js-Issue-comment-button"),
   _loaderImage: $(".js-Upload-Loader"),
-  template: _.template($("#upload-input-tmpl").html()),
+  template: wcTmpl["issue/upload-image.jst"],
   render: function() {
     this.$el.html(this.template()).insertAfter($("textarea"));
     return this;
@@ -352,7 +352,7 @@ issues.StateButtonView = Backbone.View.extend({
       }, this)
     );
   },
-  template: _.template($("#state-button-tmpl").html()),
+  template: wcTmpl["issue/state-button.jst"],
   render: function() {
     var buttonText;
     if (this.model.get("state") === "open") {
diff --git a/webcompat/static/js/lib/labels.js b/webcompat/static/js/lib/labels.js
index 265b1d23b..956901b40 100644
--- a/webcompat/static/js/lib/labels.js
+++ b/webcompat/static/js/lib/labels.js
@@ -35,18 +35,10 @@ issues.LabelsView = Backbone.View.extend({
       this.editLabels();
     }
   },
-  template: _.template($("#issue-labels-tmpl").html()),
+  template: wcTmpl["issue/issue-labels.jst"],
   // this subTemplate will need to be kept in sync with
-  // relavant parts in $('#issue-labels-tmpl')
-  subTemplate: _.template(
-    [
-      "<% _.each(labels, function(label) { %>",
-      '<span class="wc-Label wc-Label--badge js-Label" style="background-color:#<%=label.color%>">',
-      "<%= label.name %>",
-      "</span>",
-      "<% }); %>"
-    ].join("")
-  ),
+  // relavant parts in issue/issue-labels.jst
+  subTemplate: wcTmpl["issue/issue-labels-sub.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     this.fetchLabels();
@@ -105,7 +97,7 @@ issues.LabelEditorView = Backbone.View.extend({
   initialize: function(options) {
     this.issueView = options.issueView;
   },
-  template: _.template($("#label-editor-tmpl").html()),
+  template: wcTmpl["web_modules/label-editor.jst"],
   render: function() {
     this.$el.html(this.template(this.model));
     this.resizeEditorHeight();
diff --git a/webcompat/static/js/lib/user-activity.js b/webcompat/static/js/lib/user-activity.js
index a2abe5902..73f5cfa5a 100644
--- a/webcompat/static/js/lib/user-activity.js
+++ b/webcompat/static/js/lib/user-activity.js
@@ -36,11 +36,11 @@ issueList.MyIssuesView = Backbone.View.extend(
       );
       this.fetchAndRenderIssues({ url: this.issues.url });
     },
-    template: _.template($("#my-issues-tmpl").html()),
+    template: wcTmpl["web_modules/issue-list.jst"],
     render: function() {
       this.$el.html(
         this.template({
-          myIssues: this.issues.toJSON()
+          issues: this.issues.toJSON()
         })
       );
 
@@ -107,11 +107,11 @@ issueList.IssueMentionsView = Backbone.View.extend(
       );
       this.fetchAndRenderIssues({ url: this.issues.url });
     },
-    template: _.template($("#issue-mentions-tmpl").html()),
+    template: wcTmpl["web_modules/issue-list.jst"],
     render: function() {
       this.$el.html(
         this.template({
-          issueMentions: this.issues.toJSON()
+          issues: this.issues.toJSON()
         })
       );
       return this;
diff --git a/webcompat/static/js/templates.js b/webcompat/static/js/templates.js
new file mode 100644
index 000000000..ba0882dca
--- /dev/null
+++ b/webcompat/static/js/templates.js
@@ -0,0 +1,31 @@
+this["wcTmpl"] = this["wcTmpl"] || {};
+
+this["wcTmpl"]["issue/aside.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape;with (obj) {__p += '<header class="wc-Issue-information-header wc-Issue-information-header--' +((__t = ( stateClass )) == null ? '' : __t) +'">\n    <div>' +((__t = ( issueState )) == null ? '' : __t) +'</div>\n    <div>#' +((__t = ( number )) == null ? '' : __t) +'</div>\n  </header>\n  <div class="wc-Issue-information-content">\n    <h1 class="wc-Issue-title js-Issue-title">\n      ' +((__t = ( title )) == null ? '' : __t) +'\n    </h1>\n  </div>\n  <div class="wc-Issue-information-content">\n    <div>Opened: ' +((__t = ( createdAt )) == null ? '' : __t) +'</div>\n    <div>\n      Reporter:\n      <span class="wc-Issue-reporter js-Issue-reporter">\n        <a class="wc-Link" href="https://github.com/' +((__t = ( reporter )) == null ? '' : __t) +'">' +((__t = ( reporter )) == null ? '' : __t) +'</a>\n      </span>\n    </div>\n    <div>Comments: ' +((__t = ( commentNumber )) == null ? '' : __t) +'</div>\n  </div>';}return __p};
+
+this["wcTmpl"]["issue/issue-comment-list.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape;with (obj) {__p += '<div class="wc-Comment-body">\n    <div class="wc-Comment-wrapper">\n      <div class="wc-Comment-header">\n        <div class="wc-Comment-owner">\n          <div class="wc-Comment-owner-avatar">\n            <img src="' +((__t = ( avatarUrl )) == null ? '' : __t) +'" alt="' +((__t = ( commenter )) == null ? '' : __t) +'">\n          </div>\n          <div class="wc-Comment-owner-name js-Comment-owner">\n            <a class="wc-Link" href="https://github.com/' +((__t = ( commenter )) == null ? '' : __t) +'">' +((__t = ( commenter )) == null ? '' : __t) +'</a>\n          </div>\n        </div>\n        <div>\n          <a class="wc-Link" href="#' +((__t = ( commentLinkId )) == null ? '' : __t) +'">' +((__t = ( createdAt )) == null ? '' : __t) +'</a>\n        </div>\n      </div>\n      <div class="wc-Comment-content js-Comment-content">\n        <div class="wc-Markdown">\n          ' +((__t = ( body )) == null ? '' : __t) +'\n        </div>\n      </div>\n    </div>\n  </div>';}return __p};
+
+this["wcTmpl"]["issue/issue-labels-sub.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape, __j = Array.prototype.join;function print() { __p += __j.call(arguments, '') }with (obj) { _.each(labels, function(label) { ;__p += '\n  <span class="wc-Label wc-Label--badge js-Label"\n        style="background-color:#' +((__t = (label.color)) == null ? '' : __t) +'">\n    ' +((__t = ( label.name )) == null ? '' : __t) +'\n  </span>\n'; }); ;}return __p};
+
+this["wcTmpl"]["issue/issue-labels.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape, __j = Array.prototype.join;function print() { __p += __j.call(arguments, '') }with (obj) {__p += '<header class="wc-Issue-labelEditor">\n    <div class="wc-Issue-labelEditor-title">\n      Labels\n    </div>\n    '; if ($("body").data("username")) { ;__p += '\n    <span class="wc-Issue-labelEditor-button js-Issue-labelEditor">\n      <button class="wc-LabelEditorLauncher r-ResetButton wc-Icon wc-Icon--gear js-LabelEditorLauncher" aria-hidden="true">\n        <span class="wc-Accessibility">Edit Labels</span></button>\n    </span>\n    '; } ;__p += '\n  </header>\n   <div class="js-Label-list">\n  '; _.each(labels, function(label) { ;__p += '\n    <span class="wc-Label wc-Label--badge js-Label" style="background-color:#' +((__t = (label.color)) == null ? '' : __t) +'">\n      ' +((__t = ( label.name )) == null ? '' : __t) +'\n    </span>\n  '; }); ;__p += '\n  </span>';}return __p};
+
+this["wcTmpl"]["issue/issue-report.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape;with (obj) {__p += '<div class="wc-Comment">\n    <div class="wc-Comment-avatar">\n      <img src="' +((__t = ( reporterAvatar )) == null ? '' : __t) +'" alt="' +((__t = ( reporter )) == null ? '' : __t) +'">\n    </div>\n    <div class="wc-Comment-body wc-Comment-body--caret">\n      <div class="wc-Comment-wrapper">\n        <div class="wc-Comment-header">\n          <div>\n            <span class="wc-Comment-owner">\n              <a class="wc-Link" href="https://github.com/' +((__t = ( reporter )) == null ? '' : __t) +'">' +((__t = ( reporter )) == null ? '' : __t) +'</a>\n            </span><span class="wc-Comment-header-spacing"> reported on </span><a class="wc-Link" href="https://webcompat.com/issues/' +((__t = ( number )) == null ? '' : __t) +'">' +((__t = ( createdAt )) == null ? '' : __t) +'</a>\n          </div>\n        </div>\n        <div class="wc-Comment-content">\n          <div class="js-Issue-markdown wc-Markdown">\n            ' +((__t = ( body )) == null ? '' : __t) +'\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>';}return __p};
+
+this["wcTmpl"]["issue/metadata.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape;with (obj) {__p += '<div class="wc-Issue-information-content">\n    <div class="js-Issue-markdown wc-Markdown">\n      ' +((__t = ( body )) == null ? '' : __t) +'\n    </div>\n  </div>';}return __p};
+
+this["wcTmpl"]["issue/state-button.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape;with (obj) {__p += '<span class="js-comment-' +((__t = ( stateClass )) == null ? '' : __t) +'">' +((__t = ( state )) == null ? '' : __t) +'</span>';}return __p};
+
+this["wcTmpl"]["issue/thanks.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape;with (obj) {__p += '<h4>Thanks for reporting an issue!</h4>\n  <p>You\'re helping us make the web a better place to work and play.</p>\n  <p>Tell your friends about the bug you just filed:</p>\n  <a class="wc-Button wc-Button--action"\n     href="https://twitter.com/intent/tweet?text=' +__e( encodeURIComponent("I just filed a bug on the internet:") ) +'&url=' +__e( encodeURIComponent("https://webcompat.com/issues/") ) +'' +((__t = ( number )) == null ? '' : __t) +'&via=webcompat"\n     target="_blank">Share on Twitter</a>\n  <a class="wc-Button wc-Button--action"\n     href="https://facebook.com/sharer/sharer.php?u=' +__e( encodeURIComponent("https://webcompat.com/issues/") ) +'' +((__t = ( number )) == null ? '' : __t) +'"\n     target="_blank">Share on Facebook</a>';}return __p};
+
+this["wcTmpl"]["issue/upload-image.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape;with (obj) {__p += '<form>\n    <label class="wc-UploadForm wc-UploadForm--new" for="image">\n      <div class="wc-UploadForm-wrapper">\n        <div class="wc-UploadForm-label wc-UploadForm-label--uploadForm">\n          Attach images by <span class="wc-UploadForm-label--link">selecting them</span>\n        </div>\n        <input accept=".jpe,.jpg,.jpeg,.gif,.png,.bmp"\n               class="wc-ButtonUpload js-buttonUpload"\n               id="image"\n               name="image"\n               type="file"\n        />\n      </div>\n      <img class="wc-Upload-Loader wc-Issue-Loader js-Upload-Loader"\n           src="/img/upload-loader.svg" alt="Uploading image">\n    </label>\n  </form>';}return __p};
+
+this["wcTmpl"]["list-issue/dropdown.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape, __j = Array.prototype.join;function print() { __p += __j.call(arguments, '') }with (obj) {__p += '<button type="button" class="wc-Dropdown-toggle js-Dropdown-toggle">\n     <h1 class="wc-Dropdown-label js-Dropdown-label">' +((__t = ( dropdownTitle )) == null ? '' : __t) +'</h1> <span class="wc-Icon wc-Icon--chevron-down"></span>\n  </button>\n  <ul class="wc-Dropdown-content js-Dropdown-options" aria-hidden="false">\n    '; _.each(dropdownOptions, function(option) { ;__p += '\n    <li class="wc-Dropdown-item js-Dropdown-item">\n      <a href="#" class="wc-Dropdown-link js-Dropdown-link" data-params="' +((__t = ( option.params )) == null ? '' : __t) +'">\n        ' +((__t = ( option.title )) == null ? '' : __t) +'\n      </a>\n    </li>\n    '; }); ;__p += '\n  </ul>';}return __p};
+
+this["wcTmpl"]["list-issue/issuelist-issue.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape, __j = Array.prototype.join;function print() { __p += __j.call(arguments, '') }with (obj) { if (issues.length) { ;__p += '\n  '; _.each(issues, function(issue) { ;__p += '\n    <article class="wc-IssueList wc-IssueList--' +((__t = ( issue.stateClass )) == null ? '' : __t) +' wc-IssueList--large js-IssueList">\n      <div class="wc-IssueList-section">\n        <header class="wc-IssueList-header">\n          <a class="wc-Link" href="/issues/' +((__t = ( issue.number )) == null ? '' : __t) +'">\n            <span class="wc-IssueList-count">Issue ' +((__t = ( issue.number )) == null ? '' : __t) +'</span>: ' +__e( issue.title ) +'\n          </a>\n        </header>\n        <p>\n          <span class="wc-IssueList-metadata">Opened: <time>' +((__t = ( issue.createdAt )) == null ? '' : __t) +'</time></span>\n          <span class="wc-IssueList-metadata">Comments: ' +((__t = ( issue.commentNumber )) == null ? '' : __t) +'</span>\n        </p>\n      </div>\n      <div class="wc-IssueList-section">\n        <span class="wc-IssueList-label js-Issue-label">\n        '; _.each(issue.labels, function(label) { ;__p += '\n          <a href="/issues?q=label:' +((__t = ( label.remoteName )) == null ? '' : __t) +'"\n             class="wc-Labels" data-remotename="' +((__t = ( label.remoteName )) == null ? '' : __t) +'"\n             title="Labels : ' +((__t = ( label.name )) == null ? '' : __t) +'">' +((__t = ( label.name )) == null ? '' : __t) +'</a>\n        '; }); ;__p += '</span>\n      </div>\n    </article>\n  '; }); ;__p += '\n'; } else { ;__p += '\n  <div class="wc-SearchIssue-noResults">\n    <div class="wc-SearchIssue-noResults-title">Sorry, no results were found.</div>\n     <ul class="wc-SearchIssue-noResults-list">\n       <li class="wc-SearchIssue-noResults-list-item">Check your spelling</li>\n       <li class="wc-SearchIssue-noResults-list-item">Try a more general search</li>\n       <li class="wc-SearchIssue-noResults-list-item">Search for popular labels</li>\n       <li class="wc-SearchIssue-noResults-list-item wc-SearchIssue-noResults-list-item--label">\n         <ul class="r-ResetList wc-SearchIssue-noResults-list-labels">\n           <li class="wc-SearchIssue-noResults-list-labelsItem js-Issue-label" >\n             <a class="wc-Labels" href="#" title="Labels : android"\n                data-remotename="browser-android"\n                style="border-color: #48DE20">android</a>\n            </li>\n           <li class="wc-SearchIssue-noResults-list-labelsItem js-Issue-label">\n             <a class="wc-Labels" href="#" title="Labels : chrome"\n                data-remotename="browser-chrome"\n                style="border-color: #FFA500">chrome</a>\n            </li>\n           <li class="wc-SearchIssue-noResults-list-labelsItem js-Issue-label">\n             <a class="wc-Labels" href="#" title="Labels : firefox"\n                data-remotename="browser-firefox"\n                style="border-color: #E50000">firefox</a>\n           </li>\n           <li class="wc-SearchIssue-noResults-list-labelsItem js-Issue-label">\n             <a class="wc-Labels" href="#" title="Labels : ie"\n                data-remotename="browser-ie"\n                style="border-color: #3E8AE5">ie</a>\n            </li>\n         </ul>\n       </li>\n     </ul>\n  </div>\n'; } ;__p += '\n<p>\n  <a class="wc-Link wc-GithubLink" href="https://github.com/{{ config[\'ISSUES_REPO_URI\'] }}/{{ number }}"><span class="wc-GithubLink-Icon"></span>View issues on Github</a>\n</p>\n<p>\n  <span class="wc-GithubLink-DesktopOnly">Shortcut: Press <b>g</b> on your keyboard to be taken to the GitHub view of this page.</span>\n</p>';}return __p};
+
+this["wcTmpl"]["list-issue/issuelist-search.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape;with (obj) {__p += '<div class="wc-UIContent">\n    <div class="wc-SearchForm-content">\n      <label for="wc-SearchForm-input" class="wc-Accessibility">Search By Keyword</label>\n      <input type="text" id="js-SearchForm-input" class="wc-SearchForm-item mousetrap" placeholder="Search by keyword">\n      <button role="button" type="submit" class="r-ResetButton wc-SearchForm-button js-SearchForm-button">\n        <span class="wc-Accessibility">Search</span>\n        <span class="wc-Icon wc-Icon--search" aria-hidden="true"></span>\n      </button>\n    </div>\n  </div>';}return __p};
+
+this["wcTmpl"]["list-issue/issuelist-sorting.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape;with (obj) {__p += '<div class="wc-Dropdown js-Dropdown js-Dropdown-pagination"></div>\n  <div class="wc-Dropdown js-Dropdown js-Dropdown-sort"></div>';}return __p};
+
+this["wcTmpl"]["web_modules/issue-list.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape, __j = Array.prototype.join;function print() { __p += __j.call(arguments, '') }with (obj) { if (issues.length) { ;__p += '\n    '; _.each(issues, function(issue) { ;__p += '\n      <article class="wc-IssueList wc-IssueList--' +((__t = ( issue.stateClass )) == null ? '' : __t) +' wc-IssueList--large js-IssueList">\n        <div class="wc-IssueList-section">\n          <header class="wc-IssueList-header">\n            <a class="wc-Link" href="/issues/' +((__t = ( issue.number )) == null ? '' : __t) +'">\n              <span class="wc-IssueList-count">Issue ' +((__t = ( issue.number )) == null ? '' : __t) +'</span>: ' +__e( issue.title ) +'\n            </a>\n          </header>\n          <p>\n            <span class="wc-IssueList-metadata">Opened: <time>' +((__t = ( issue.createdAt )) == null ? '' : __t) +'</time></span>\n            <span class="wc-IssueList-metadata">Comments: ' +((__t = ( issue.commentNumber )) == null ? '' : __t) +'</span>\n          </p>\n        </div>\n        <div class="wc-IssueList-section">\n          <span class="wc-IssueList-label js-Issue-label">\n          '; _.each(issue.labels, function(label) { ;__p += '\n            <a href="/issues?q=label:' +((__t = ( label.remoteName )) == null ? '' : __t) +'"\n               class="wc-Labels" data-remotename="' +((__t = ( label.remoteName )) == null ? '' : __t) +'"\n               title="Labels : ' +((__t = ( label.name )) == null ? '' : __t) +'">' +((__t = ( label.name )) == null ? '' : __t) +'</a>\n          '; }); ;__p += '</span>\n        </div>\n      </article>\n    '; }); ;__p += '\n  '; } else { ;__p += '\n  <p>Nothing here currently, go report something!</p>\n'; } ;}return __p};
+
+this["wcTmpl"]["web_modules/label-editor.jst"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape, __j = Array.prototype.join;function print() { __p += __j.call(arguments, '') }with (obj) {__p += '<div class="wc-LabelEditor-header">\n    <input class="form-control wc-LabelEditor-search" placeholder="filter label">\n    <button class="wc-LabelEditor-button r-ResetButton" tabindex="0">\n      Save &amp; Close\n    </button>\n  </div>\n  <div class="wc-LabelEditor-list" tabindex="-1">\n    '; _.each(labels, function(label) { ;__p += '\n      <label class="wc-LabelEditor-list-item" tabindex="0">\n        <span class="wc-LabelEditor-list-item-squareColor"\n              style="background-color:#' +((__t = (label.color)) == null ? '' : __t) +'">\n          <input class="wc-LabelEditor-list-item-checkbox"\n                 type="checkbox" name="' +((__t = ( label.name )) == null ? '' : __t) +'"\n                 data-color="' +((__t = (label.color)) == null ? '' : __t) +'"\n                 data-remotename="' +((__t = ( label.remoteName )) == null ? '' : __t) +'"\n                 tabindex="-1">\n        </span>\n        <span class="wc-LabelEditor-list-item-name">' +((__t = ( label.name )) == null ? '' : __t) +'</span>\n      </label>\n    '; }); ;__p += '\n  </div>';}return __p};
\ No newline at end of file
diff --git a/webcompat/templates/home-page/browse-issues.html b/webcompat/templates/home-page/browse-issues.html
index 2476bbda5..f8843e396 100644
--- a/webcompat/templates/home-page/browse-issues.html
+++ b/webcompat/templates/home-page/browse-issues.html
@@ -2,16 +2,8 @@
   <div class="wc-UIContent">
     <h2 class="wc-Title wc-Title--l">Latest Untriaged Issues</h2>
     <div id="js-lastIssue">
-      <script type="text/template" id="needstriage-tmpl">
-        <% if (issues.length) { %>
-          <% _.each(issues, function(issue) { %>
-            {% include "web_modules/issue-list.html" %}
-          <% }); %>
-        <% } else { %>
-        <p>Nothing here currently, cool!</p>
-      <% } %>
-      </script>
-      </div>
+      {% include "web_modules/issue-list.jst" %}
+    </div>
     <p class="wc-IssueItem-linkMoreIssues">
       <a class="wc-Link" href="{{ url_for("show_issues") }}">View All</a>
     </p>
diff --git a/webcompat/templates/issue.html b/webcompat/templates/issue.html
index 66d136d75..985219e6e 100644
--- a/webcompat/templates/issue.html
+++ b/webcompat/templates/issue.html
@@ -11,7 +11,7 @@
         {% include "issue/issue-aside.html" %}
         {% include "issue/issue-information.html" %}
         <div class="wc-Issue-commentList js-Issue-commentList">
-          {% include "issue/issue-comment-list.html" %}
+          {% include "issue/issue-comment-list.jst" %}
         </div>
         {% if session.user_id and session.avatar_url %}
           <div class="wc-Issue-commentSubmit">
diff --git a/webcompat/templates/issue/aside.jst b/webcompat/templates/issue/aside.jst
new file mode 100644
index 000000000..52daf23ce
--- /dev/null
+++ b/webcompat/templates/issue/aside.jst
@@ -0,0 +1,21 @@
+<script type="text/template">
+  <header class="wc-Issue-information-header wc-Issue-information-header--<%= stateClass %>">
+    <div><%= issueState %></div>
+    <div>#<%= number %></div>
+  </header>
+  <div class="wc-Issue-information-content">
+    <h1 class="wc-Issue-title js-Issue-title">
+      <%= title %>
+    </h1>
+  </div>
+  <div class="wc-Issue-information-content">
+    <div>Opened: <%= createdAt %></div>
+    <div>
+      Reporter:
+      <span class="wc-Issue-reporter js-Issue-reporter">
+        <a class="wc-Link" href="https://github.com/<%= reporter %>"><%= reporter %></a>
+      </span>
+    </div>
+    <div>Comments: <%= commentNumber %></div>
+  </div>
+</script>
diff --git a/webcompat/templates/issue/issue-aside.html b/webcompat/templates/issue/issue-aside.html
index 9f441b9da..6aa58e434 100644
--- a/webcompat/templates/issue/issue-aside.html
+++ b/webcompat/templates/issue/issue-aside.html
@@ -1,28 +1,9 @@
 <aside class="wc-Issue-aside">
   <div class="wc-Issue-information wc-Issue-information--fullWidth" id="js-Issue-aside">
-    <script type="text/template" id="aside-tmpl">
-      <header class="wc-Issue-information-header wc-Issue-information-header--<%= stateClass %>">
-        <div><%= issueState %></div>
-        <div>#<%= number %></div>
-      </header>
-      <div class="wc-Issue-information-content">
-        <h1 class="wc-Issue-title js-Issue-title">
-          <%= title %>
-        </h1>
-      </div>
-      <div class="wc-Issue-information-content">
-        <div>Opened: <%= createdAt %></div>
-        <div>
-          Reporter:
-          <span class="wc-Issue-reporter js-Issue-reporter">
-            <a class="wc-Link" href="https://github.com/<%= reporter %>"><%= reporter %></a>
-          </span>
-        </div>
-        <div>Comments: <%= commentNumber %></div>
-      </div>
-    </script>
+    {% include "issue/aside.jst" %}
   </div>
   <div class="wc-Issue-labels js-Issue-labels">
-    {% include "issue/issue-labels.html" %}
+    {% include "issue/issue-labels.jst" %}
+    {% include "web_modules/label-editor.jst" %}
   </div>
 </aside>
diff --git a/webcompat/templates/issue/issue-comment-list.html b/webcompat/templates/issue/issue-comment-list.jst
similarity index 94%
rename from webcompat/templates/issue/issue-comment-list.html
rename to webcompat/templates/issue/issue-comment-list.jst
index 53a54a45e..37807d3a2 100644
--- a/webcompat/templates/issue/issue-comment-list.html
+++ b/webcompat/templates/issue/issue-comment-list.jst
@@ -1,4 +1,4 @@
-<script type="text/template" id="comment-tmpl">
+<script type="text/template">
   <div class="wc-Comment-body">
     <div class="wc-Comment-wrapper">
       <div class="wc-Comment-header">
diff --git a/webcompat/templates/issue/issue-comment-submit.html b/webcompat/templates/issue/issue-comment-submit.html
index 9a85c410e..30f42e060 100644
--- a/webcompat/templates/issue/issue-comment-submit.html
+++ b/webcompat/templates/issue/issue-comment-submit.html
@@ -13,32 +13,11 @@
   <label for="wc-Comment-text" class="wc-Accessibility">Comment Text</label>
     <textarea class="wc-Comment-submit js-Comment-text mousetrap js-autoExpand" placeholder="Leave a comment"></textarea>
     <div class="wc-Form-group js-ImageUploadView">
-      <script type="text/template" id="upload-input-tmpl">
-        <form>
-          <label class="wc-UploadForm wc-UploadForm--new" for="image">
-            <div class="wc-UploadForm-wrapper">
-              <div class="wc-UploadForm-label wc-UploadForm-label--uploadForm">
-                Attach images by <span class="wc-UploadForm-label--link">selecting them</span>
-              </div>
-              <input
-                accept=".jpe,.jpg,.jpeg,.gif,.png,.bmp"
-                class="wc-ButtonUpload js-buttonUpload"
-                id="image"
-                name="image"
-                type="file"
-              />
-            </div>
-            <img class="wc-Upload-Loader wc-Issue-Loader js-Upload-Loader"
-                 src="/img/upload-loader.svg" alt="Uploading image">
-          </label>
-        </form>
-      </script>
+      {% include "issue/upload-image.jst" %}
     </div>
     <div class="wc-Comment-button">
       <button class="wc-Button wc-Button--action js-Issue-state-button">
-        <script type="text/template" id="state-button-tmpl">
-        <span class="js-comment-<%= stateClass %>"><%= state %></span>
-        </script>
+        {% include "issue/state-button.jst" %}
       </button>
       <button value="comment" class="wc-Button wc-Button--default js-Issue-comment-button" type="submit">Comment</button>
     </div>
diff --git a/webcompat/templates/issue/issue-information.html b/webcompat/templates/issue/issue-information.html
index 82f5688cf..01c6556af 100644
--- a/webcompat/templates/issue/issue-information.html
+++ b/webcompat/templates/issue/issue-information.html
@@ -1,11 +1,5 @@
 <div class="wc-Issue-information">
   <div id="js-Issue-information">
-    <script type="text/template" id="metadata-tmpl">
-      <div class="wc-Issue-information-content">
-        <div class="js-Issue-markdown wc-Markdown">
-          <%= body %>
-        </div>
-      </div>
-    </script>
+  {% include "issue/metadata.jst" %}
   </div>
 </div>
diff --git a/webcompat/templates/issue/issue-labels-sub.jst b/webcompat/templates/issue/issue-labels-sub.jst
new file mode 100644
index 000000000..4b09a44ef
--- /dev/null
+++ b/webcompat/templates/issue/issue-labels-sub.jst
@@ -0,0 +1,8 @@
+<script type="text/template">
+<% _.each(labels, function(label) { %>
+  <span class="wc-Label wc-Label--badge js-Label"
+        style="background-color:#<%=label.color%>">
+    <%= label.name %>
+  </span>
+<% }); %>
+</script>
diff --git a/webcompat/templates/issue/issue-labels.html b/webcompat/templates/issue/issue-labels.jst
similarity index 78%
rename from webcompat/templates/issue/issue-labels.html
rename to webcompat/templates/issue/issue-labels.jst
index d7ba0593d..538698249 100644
--- a/webcompat/templates/issue/issue-labels.html
+++ b/webcompat/templates/issue/issue-labels.jst
@@ -1,14 +1,14 @@
-<script type="text/template" id="issue-labels-tmpl">
+<script type="text/template">
   <header class="wc-Issue-labelEditor">
     <div class="wc-Issue-labelEditor-title">
       Labels
     </div>
-    {% if session.user_id and session.avatar_url %}
+    <% if ($("body").data("username")) { %>
     <span class="wc-Issue-labelEditor-button js-Issue-labelEditor">
       <button class="wc-LabelEditorLauncher r-ResetButton wc-Icon wc-Icon--gear js-LabelEditorLauncher" aria-hidden="true">
         <span class="wc-Accessibility">Edit Labels</span></button>
     </span>
-    {% endif %}
+    <% } %>
   </header>
    <div class="js-Label-list">
   <% _.each(labels, function(label) { %>
@@ -18,5 +18,3 @@
   <% }); %>
   </span>
 </script>
-
-{% include "web_modules/label-editor.html" %}
diff --git a/webcompat/templates/issue/issue-report.html b/webcompat/templates/issue/issue-report.jst
similarity index 94%
rename from webcompat/templates/issue/issue-report.html
rename to webcompat/templates/issue/issue-report.jst
index ad72226dd..bf453cf51 100644
--- a/webcompat/templates/issue/issue-report.html
+++ b/webcompat/templates/issue/issue-report.jst
@@ -1,4 +1,4 @@
-<script type="text/template" id="issue-info-tmpl">
+<script type="text/template">
   <div class="wc-Comment">
     <div class="wc-Comment-avatar">
       <img src="<%= reporterAvatar %>" alt="<%= reporter %>">
diff --git a/webcompat/templates/issue/metadata.jst b/webcompat/templates/issue/metadata.jst
new file mode 100644
index 000000000..7b8d176de
--- /dev/null
+++ b/webcompat/templates/issue/metadata.jst
@@ -0,0 +1,7 @@
+<script type="text/template">
+  <div class="wc-Issue-information-content">
+    <div class="js-Issue-markdown wc-Markdown">
+      <%= body %>
+    </div>
+  </div>
+</script>
diff --git a/webcompat/templates/issue/state-button.jst b/webcompat/templates/issue/state-button.jst
new file mode 100644
index 000000000..40a3d3cad
--- /dev/null
+++ b/webcompat/templates/issue/state-button.jst
@@ -0,0 +1,3 @@
+<script type="text/template">
+  <span class="js-comment-<%= stateClass %>"><%= state %></span>
+</script>
diff --git a/webcompat/templates/issue/thanks.jst b/webcompat/templates/issue/thanks.jst
new file mode 100644
index 000000000..4c9d42bd9
--- /dev/null
+++ b/webcompat/templates/issue/thanks.jst
@@ -0,0 +1,11 @@
+<script type="text/template">
+  <h4>Thanks for reporting an issue!</h4>
+  <p>You're helping us make the web a better place to work and play.</p>
+  <p>Tell your friends about the bug you just filed:</p>
+  <a class="wc-Button wc-Button--action"
+     href="https://twitter.com/intent/tweet?text=<%- encodeURIComponent("I just filed a bug on the internet:") %>&url=<%- encodeURIComponent("https://webcompat.com/issues/") %><%= number %>&via=webcompat"
+     target="_blank">Share on Twitter</a>
+  <a class="wc-Button wc-Button--action"
+     href="https://facebook.com/sharer/sharer.php?u=<%- encodeURIComponent("https://webcompat.com/issues/") %><%= number %>"
+     target="_blank">Share on Facebook</a>
+</script>
diff --git a/webcompat/templates/issue/upload-image.jst b/webcompat/templates/issue/upload-image.jst
new file mode 100644
index 000000000..e82b00754
--- /dev/null
+++ b/webcompat/templates/issue/upload-image.jst
@@ -0,0 +1,19 @@
+<script type="text/template">
+  <form>
+    <label class="wc-UploadForm wc-UploadForm--new" for="image">
+      <div class="wc-UploadForm-wrapper">
+        <div class="wc-UploadForm-label wc-UploadForm-label--uploadForm">
+          Attach images by <span class="wc-UploadForm-label--link">selecting them</span>
+        </div>
+        <input accept=".jpe,.jpg,.jpeg,.gif,.png,.bmp"
+               class="wc-ButtonUpload js-buttonUpload"
+               id="image"
+               name="image"
+               type="file"
+        />
+      </div>
+      <img class="wc-Upload-Loader wc-Issue-Loader js-Upload-Loader"
+           src="/img/upload-loader.svg" alt="Uploading image">
+    </label>
+  </form>
+</script>
diff --git a/webcompat/templates/layout.html b/webcompat/templates/layout.html
index b4cb7587c..999c7f07f 100644
--- a/webcompat/templates/layout.html
+++ b/webcompat/templates/layout.html
@@ -58,6 +58,7 @@
 <script src="{{ url_for('static', filename='js/lib/flash-message.js') }}"></script>
 <script src="{{ url_for('static', filename='js/lib/homepage.js') }}"></script>
 <script src="{{ url_for('static', filename='js/lib/bugform.js') }}"></script>
+<script src="{{ url_for('static', filename='js/templates.js') }}"></script>
 {%- if config['LOCALHOST'] -%}
 <script src="{{ url_for('get_test_helper',
                          filename='functional/lib/window-helpers.js') }}"></script>
diff --git a/webcompat/templates/list-issue.html b/webcompat/templates/list-issue.html
index be4c15925..ec3af4e9e 100644
--- a/webcompat/templates/list-issue.html
+++ b/webcompat/templates/list-issue.html
@@ -21,7 +21,9 @@
       <div class="wc-SearchIssue-sorting">
         {% include "list-issue/search-issue-sorting.html" %}
       </div>
-      {% include "list-issue/issue-list.html" %}
+      <div class="wc-UIContent js-list-issue">
+        {% include "list-issue/issuelist-issue.jst" %}
+      </div>
       <div class="wc-SearchIssue-sorting">
         <div class="wc-UIContent">
           {% include "web_modules/pagination.html" %}
diff --git a/webcompat/templates/list-issue/dropdown.jst b/webcompat/templates/list-issue/dropdown.jst
new file mode 100644
index 000000000..08b7d607c
--- /dev/null
+++ b/webcompat/templates/list-issue/dropdown.jst
@@ -0,0 +1,14 @@
+<script type="text/template">
+  <button type="button" class="wc-Dropdown-toggle js-Dropdown-toggle">
+     <h1 class="wc-Dropdown-label js-Dropdown-label"><%= dropdownTitle %></h1> <span class="wc-Icon wc-Icon--chevron-down"></span>
+  </button>
+  <ul class="wc-Dropdown-content js-Dropdown-options" aria-hidden="false">
+    <% _.each(dropdownOptions, function(option) { %>
+    <li class="wc-Dropdown-item js-Dropdown-item">
+      <a href="#" class="wc-Dropdown-link js-Dropdown-link" data-params="<%= option.params %>">
+        <%= option.title %>
+      </a>
+    </li>
+    <% }); %>
+  </ul>
+</script>
diff --git a/webcompat/templates/list-issue/issue-list.html b/webcompat/templates/list-issue/issue-list.html
deleted file mode 100644
index 6a4a2f21d..000000000
--- a/webcompat/templates/list-issue/issue-list.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<div class="wc-UIContent js-list-issue">
-  <script type="text/template" id="issuelist-issue-tmpl">
-  <% if (issues.length) { %>
-    <% _.each(issues, function(issue) { %>
-      {% include "web_modules/issue-list.html" %}
-    <% }); %>
-  <% } else { %>
-    <div class="wc-SearchIssue-noResults">
-      <div class="wc-SearchIssue-noResults-title">Sorry, no results were found.</div>
-       <ul class="wc-SearchIssue-noResults-list">
-         <li class="wc-SearchIssue-noResults-list-item">Check your spelling</li>
-         <li class="wc-SearchIssue-noResults-list-item">Try a more general search</li>
-         <li class="wc-SearchIssue-noResults-list-item">Search for popular labels</li>
-         <li class="wc-SearchIssue-noResults-list-item wc-SearchIssue-noResults-list-item--label">
-           <ul class="r-ResetList wc-SearchIssue-noResults-list-labels">
-             <li class="wc-SearchIssue-noResults-list-labelsItem js-Issue-label" >
-               <a class="wc-Labels" href="#" title="Labels : android"
-                  data-remotename="browser-android"
-                  style="border-color: #48DE20">android</a>
-              </li>
-             <li class="wc-SearchIssue-noResults-list-labelsItem js-Issue-label">
-               <a class="wc-Labels" href="#" title="Labels : chrome"
-                  data-remotename="browser-chrome"
-                  style="border-color: #FFA500">chrome</a>
-              </li>
-             <li class="wc-SearchIssue-noResults-list-labelsItem js-Issue-label">
-               <a class="wc-Labels" href="#" title="Labels : firefox"
-                  data-remotename="browser-firefox"
-                  style="border-color: #E50000">firefox</a>
-             </li>
-             <li class="wc-SearchIssue-noResults-list-labelsItem js-Issue-label">
-               <a class="wc-Labels" href="#" title="Labels : ie"
-                  data-remotename="browser-ie"
-                  style="border-color: #3E8AE5">ie</a>
-              </li>
-           </ul>
-         </li>
-       </ul>
-    </div>
-  <% } %>
-  <p>
-    <a class="wc-Link wc-GithubLink" href="https://github.com/{{ config['ISSUES_REPO_URI'] }}/{{ number }}"><span class="wc-GithubLink-Icon"></span>View issues on Github</a>
-  </p>
-  <p>
-    <span class="wc-GithubLink-DesktopOnly">Shortcut: Press <b>g</b> on your keyboard to be taken to the GitHub view of this page.</span>
-  </p>
-  </script>
-</div>
diff --git a/webcompat/templates/list-issue/issuelist-issue.jst b/webcompat/templates/list-issue/issuelist-issue.jst
new file mode 100644
index 000000000..c8b9cee28
--- /dev/null
+++ b/webcompat/templates/list-issue/issuelist-issue.jst
@@ -0,0 +1,66 @@
+<script type="text/template">
+<% if (issues.length) { %>
+  <% _.each(issues, function(issue) { %>
+    <article class="wc-IssueList wc-IssueList--<%= issue.stateClass %> wc-IssueList--large js-IssueList">
+      <div class="wc-IssueList-section">
+        <header class="wc-IssueList-header">
+          <a class="wc-Link" href="/issues/<%= issue.number %>">
+            <span class="wc-IssueList-count">Issue <%= issue.number %></span>: <%- issue.title %>
+          </a>
+        </header>
+        <p>
+          <span class="wc-IssueList-metadata">Opened: <time><%= issue.createdAt %></time></span>
+          <span class="wc-IssueList-metadata">Comments: <%= issue.commentNumber %></span>
+        </p>
+      </div>
+      <div class="wc-IssueList-section">
+        <span class="wc-IssueList-label js-Issue-label">
+        <% _.each(issue.labels, function(label) { %>
+          <a href="/issues?q=label:<%= label.remoteName %>"
+             class="wc-Labels" data-remotename="<%= label.remoteName %>"
+             title="Labels : <%= label.name %>"><%= label.name %></a>
+        <% }); %></span>
+      </div>
+    </article>
+  <% }); %>
+<% } else { %>
+  <div class="wc-SearchIssue-noResults">
+    <div class="wc-SearchIssue-noResults-title">Sorry, no results were found.</div>
+     <ul class="wc-SearchIssue-noResults-list">
+       <li class="wc-SearchIssue-noResults-list-item">Check your spelling</li>
+       <li class="wc-SearchIssue-noResults-list-item">Try a more general search</li>
+       <li class="wc-SearchIssue-noResults-list-item">Search for popular labels</li>
+       <li class="wc-SearchIssue-noResults-list-item wc-SearchIssue-noResults-list-item--label">
+         <ul class="r-ResetList wc-SearchIssue-noResults-list-labels">
+           <li class="wc-SearchIssue-noResults-list-labelsItem js-Issue-label" >
+             <a class="wc-Labels" href="#" title="Labels : android"
+                data-remotename="browser-android"
+                style="border-color: #48DE20">android</a>
+            </li>
+           <li class="wc-SearchIssue-noResults-list-labelsItem js-Issue-label">
+             <a class="wc-Labels" href="#" title="Labels : chrome"
+                data-remotename="browser-chrome"
+                style="border-color: #FFA500">chrome</a>
+            </li>
+           <li class="wc-SearchIssue-noResults-list-labelsItem js-Issue-label">
+             <a class="wc-Labels" href="#" title="Labels : firefox"
+                data-remotename="browser-firefox"
+                style="border-color: #E50000">firefox</a>
+           </li>
+           <li class="wc-SearchIssue-noResults-list-labelsItem js-Issue-label">
+             <a class="wc-Labels" href="#" title="Labels : ie"
+                data-remotename="browser-ie"
+                style="border-color: #3E8AE5">ie</a>
+            </li>
+         </ul>
+       </li>
+     </ul>
+  </div>
+<% } %>
+<p>
+  <a class="wc-Link wc-GithubLink" href="https://github.com/{{ config['ISSUES_REPO_URI'] }}/{{ number }}"><span class="wc-GithubLink-Icon"></span>View issues on Github</a>
+</p>
+<p>
+  <span class="wc-GithubLink-DesktopOnly">Shortcut: Press <b>g</b> on your keyboard to be taken to the GitHub view of this page.</span>
+</p>
+</script>
diff --git a/webcompat/templates/list-issue/issuelist-search.jst b/webcompat/templates/list-issue/issuelist-search.jst
new file mode 100644
index 000000000..f749ac71c
--- /dev/null
+++ b/webcompat/templates/list-issue/issuelist-search.jst
@@ -0,0 +1,12 @@
+<script type="text/template">
+  <div class="wc-UIContent">
+    <div class="wc-SearchForm-content">
+      <label for="wc-SearchForm-input" class="wc-Accessibility">Search By Keyword</label>
+      <input type="text" id="js-SearchForm-input" class="wc-SearchForm-item mousetrap" placeholder="Search by keyword">
+      <button role="button" type="submit" class="r-ResetButton wc-SearchForm-button js-SearchForm-button">
+        <span class="wc-Accessibility">Search</span>
+        <span class="wc-Icon wc-Icon--search" aria-hidden="true"></span>
+      </button>
+    </div>
+  </div>
+</script>
diff --git a/webcompat/templates/list-issue/issuelist-sorting.jst b/webcompat/templates/list-issue/issuelist-sorting.jst
new file mode 100644
index 000000000..560f5ece6
--- /dev/null
+++ b/webcompat/templates/list-issue/issuelist-sorting.jst
@@ -0,0 +1,4 @@
+<script type="text/template">
+  <div class="wc-Dropdown js-Dropdown js-Dropdown-pagination"></div>
+  <div class="wc-Dropdown js-Dropdown js-Dropdown-sort"></div>
+</script>
diff --git a/webcompat/templates/list-issue/search-issue-filter.html b/webcompat/templates/list-issue/search-issue-filter.html
index 927d716e8..154d364aa 100644
--- a/webcompat/templates/list-issue/search-issue-filter.html
+++ b/webcompat/templates/list-issue/search-issue-filter.html
@@ -1,4 +1,3 @@
-{% from "web_modules/dropdown.html" import dropdown with context %}
 {% from "web_modules/tag.html" import tag with context %}
 
 <div class="wc-SearchIssue-filter">
@@ -7,17 +6,4 @@
   {% endfor %}
 </div>
 
-<script type="text/template" id="dropdown-tmpl">
-  <button type="button" class="wc-Dropdown-toggle js-Dropdown-toggle">
-     <h1 class="wc-Dropdown-label js-Dropdown-label"><%= dropdownTitle %></h1> <span class="wc-Icon wc-Icon--chevron-down"></span>
-  </button>
-  <ul class="wc-Dropdown-content js-Dropdown-options" aria-hidden="false">
-    <% _.each(dropdownOptions, function(option) { %>
-    <li class="wc-Dropdown-item js-Dropdown-item">
-      <a href="#" class="wc-Dropdown-link js-Dropdown-link" data-params="<%= option.params %>">
-        <%= option.title %>
-      </a>
-    </li>
-    <% }); %>
-  </ul>
-</script>
+{% include "list-issue/dropdown.jst" %}
diff --git a/webcompat/templates/list-issue/search-issue-search-form.html b/webcompat/templates/list-issue/search-issue-search-form.html
index 5cd723b72..1c86f5821 100644
--- a/webcompat/templates/list-issue/search-issue-search-form.html
+++ b/webcompat/templates/list-issue/search-issue-search-form.html
@@ -1,7 +1,3 @@
 <div class="wc-SearchForm js-SearchForm">
-  <script type="text/template" id="issuelist-search-tmpl">
-    <div class="wc-UIContent">
-      {% include "web_modules/issue-search.html" %}
-    </div>
-  </script>
+  {% include "list-issue/issuelist-search.jst" %}
 </div>
diff --git a/webcompat/templates/list-issue/search-issue-sorting.html b/webcompat/templates/list-issue/search-issue-sorting.html
index dff7b8da0..c8c540e13 100644
--- a/webcompat/templates/list-issue/search-issue-sorting.html
+++ b/webcompat/templates/list-issue/search-issue-sorting.html
@@ -1,13 +1,8 @@
-{% from "web_modules/dropdown.html" import dropdown with context %}
-
 <div class="wc-UIContent">
   <div class="r-Grid">
     <div class="r-Grid-cell r-all--1of2">
       <div class="js-SearchIssue-sorting">
-        <script type="text/template" id="issuelist-sorting-tmpl">
-          {{ dropdown('js-Dropdown-pagination') }}
-          {{ dropdown('js-Dropdown-sort') }}
-        </script>
+      {% include "list-issue/issuelist-sorting.jst" %}
       </div>
     </div>
     <div class="r-Grid-cell r-all--1of2">
diff --git a/webcompat/templates/user-activity.html b/webcompat/templates/user-activity.html
index 14ed6e60b..052e27299 100644
--- a/webcompat/templates/user-activity.html
+++ b/webcompat/templates/user-activity.html
@@ -6,7 +6,9 @@
   <div class="wc-Loader js-loader"></div>
   <section class="wc-UISection">
     <div class="wc-UIContent">
-      <h1 class="wc-Title wc-Title--l wc-ResetOffsetBottom js-username">{{user}}'s activity</h1>
+      <h1 class="wc-Title wc-Title--l wc-ResetOffsetBottom js-username">
+        {{user}}'s activity
+      </h1>
     </div>
   </section>
   <section class="wc-UISection wc-UISection--backgroundColor js-list-issue">
diff --git a/webcompat/templates/user-activity/reported-by-user.html b/webcompat/templates/user-activity/reported-by-user.html
index e2bdd0694..f8f7639a3 100644
--- a/webcompat/templates/user-activity/reported-by-user.html
+++ b/webcompat/templates/user-activity/reported-by-user.html
@@ -3,17 +3,9 @@
     <h2 class="wc-Title wc-Title--l">Issues reported by {{user}}</h2>
   </div>
   <div class="wc-ListIssue-pagination">
-      {% include "web_modules/pagination.html" %}
+    {% include "web_modules/pagination.html" %}
   </div>
   <div id="my-issues">
-    <script type="text/template" id="my-issues-tmpl">
-      <% if (myIssues.length) { %>
-        <% _.each(myIssues, function(issue) { %>
-          {% include "web_modules/issue-list.html" %}
-        <% }); %>
-      <% } else { %>
-      <p>Nothing here currently, go report something!</p>
-      <% } %>
-    </script>
+    {% include "web_modules/issue-list.jst" %}
   </div>
 </div>
diff --git a/webcompat/templates/user-activity/user-mentions.html b/webcompat/templates/user-activity/user-mentions.html
index ea5036d76..c5d4899d7 100644
--- a/webcompat/templates/user-activity/user-mentions.html
+++ b/webcompat/templates/user-activity/user-mentions.html
@@ -6,14 +6,6 @@ <h2 class="wc-Title--l">Issues mentioning {{user}}</h2>
     {% include "web_modules/pagination.html" %}
   </div>
   <div id="issue-mentions">
-    <script type="text/template" id="issue-mentions-tmpl">
-      <% if (issueMentions.length) { %>
-        <% _.each(issueMentions, function(issue) { %>
-          {% include "web_modules/issue-list.html" %}
-        <% }); %>
-      <% } else { %>
-      <p>Nothing here currently.</p>
-      <% } %>
-    </script>
+    {% include "web_modules/issue-list.jst" %}
   </div>
 </div>
diff --git a/webcompat/templates/web_modules/dropdown.html b/webcompat/templates/web_modules/dropdown.html
deleted file mode 100644
index b59632a5e..000000000
--- a/webcompat/templates/web_modules/dropdown.html
+++ /dev/null
@@ -1,3 +0,0 @@
-{% macro dropdown(config) %}
-  <div class="wc-Dropdown js-Dropdown {{config}}"></div>
-{% endmacro %}
diff --git a/webcompat/templates/web_modules/issue-list.html b/webcompat/templates/web_modules/issue-list.html
deleted file mode 100644
index 9323ab01f..000000000
--- a/webcompat/templates/web_modules/issue-list.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<article class="wc-IssueList wc-IssueList--<%= issue.stateClass %> wc-IssueList--large js-IssueList">
-  <div class="wc-IssueList-section">
-    <header class="wc-IssueList-header">
-      <a class="wc-Link" href="/issues/<%= issue.number %>">
-        <span class="wc-IssueList-count">Issue <%= issue.number %></span>: <%- issue.title %>
-      </a>
-    </header>
-    <p>
-      <span class="wc-IssueList-metadata">Opened: <time><%= issue.createdAt %></time></span>
-      <span class="wc-IssueList-metadata">Comments: <%= issue.commentNumber %></span>
-    </p>
-  </div>
-  <div class="wc-IssueList-section">
-    <span class="wc-IssueList-label js-Issue-label">
-    <% _.each(issue.labels, function(label) { %>
-      <a href="/issues?q=label:<%= label.remoteName %>"
-         class="wc-Labels" data-remotename="<%= label.remoteName %>"
-         title="Labels : <%= label.name %>"><%= label.name %></a>
-    <% }); %></span>
-  </div>
-</article>
diff --git a/webcompat/templates/web_modules/issue-list.jst b/webcompat/templates/web_modules/issue-list.jst
new file mode 100644
index 000000000..e93b3c16f
--- /dev/null
+++ b/webcompat/templates/web_modules/issue-list.jst
@@ -0,0 +1,29 @@
+<script type="text/template">
+  <% if (issues.length) { %>
+    <% _.each(issues, function(issue) { %>
+      <article class="wc-IssueList wc-IssueList--<%= issue.stateClass %> wc-IssueList--large js-IssueList">
+        <div class="wc-IssueList-section">
+          <header class="wc-IssueList-header">
+            <a class="wc-Link" href="/issues/<%= issue.number %>">
+              <span class="wc-IssueList-count">Issue <%= issue.number %></span>: <%- issue.title %>
+            </a>
+          </header>
+          <p>
+            <span class="wc-IssueList-metadata">Opened: <time><%= issue.createdAt %></time></span>
+            <span class="wc-IssueList-metadata">Comments: <%= issue.commentNumber %></span>
+          </p>
+        </div>
+        <div class="wc-IssueList-section">
+          <span class="wc-IssueList-label js-Issue-label">
+          <% _.each(issue.labels, function(label) { %>
+            <a href="/issues?q=label:<%= label.remoteName %>"
+               class="wc-Labels" data-remotename="<%= label.remoteName %>"
+               title="Labels : <%= label.name %>"><%= label.name %></a>
+          <% }); %></span>
+        </div>
+      </article>
+    <% }); %>
+  <% } else { %>
+  <p>Nothing here currently, go report something!</p>
+<% } %>
+</script>
diff --git a/webcompat/templates/web_modules/issue-search.html b/webcompat/templates/web_modules/issue-search.html
deleted file mode 100644
index 1bdf8589f..000000000
--- a/webcompat/templates/web_modules/issue-search.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="wc-SearchForm-content">
-  <label for="wc-SearchForm-input" class="wc-Accessibility">Search By Keyword</label>
-  <input type="text" id="js-SearchForm-input" class="wc-SearchForm-item mousetrap" placeholder="Search by keyword">
-  <button role="button" type="submit" class="r-ResetButton wc-SearchForm-button js-SearchForm-button">
-    <span class="wc-Accessibility">Search</span>
-    <span class="wc-Icon wc-Icon--search" aria-hidden="true"></span>
-  </button>
-</div>
diff --git a/webcompat/templates/web_modules/label-editor.html b/webcompat/templates/web_modules/label-editor.jst
similarity index 52%
rename from webcompat/templates/web_modules/label-editor.html
rename to webcompat/templates/web_modules/label-editor.jst
index c97122c12..b25d3223e 100644
--- a/webcompat/templates/web_modules/label-editor.html
+++ b/webcompat/templates/web_modules/label-editor.jst
@@ -1,13 +1,20 @@
-<script type="text/template" id="label-editor-tmpl">
+<script type="text/template">
   <div class="wc-LabelEditor-header">
     <input class="form-control wc-LabelEditor-search" placeholder="filter label">
-    <button class="wc-LabelEditor-button r-ResetButton" tabindex="0">Save &amp; Close</button>
+    <button class="wc-LabelEditor-button r-ResetButton" tabindex="0">
+      Save &amp; Close
+    </button>
   </div>
   <div class="wc-LabelEditor-list" tabindex="-1">
     <% _.each(labels, function(label) { %>
       <label class="wc-LabelEditor-list-item" tabindex="0">
-        <span class="wc-LabelEditor-list-item-squareColor" style="background-color:#<%=label.color%>">
-          <input class="wc-LabelEditor-list-item-checkbox" type="checkbox" name="<%= label.name %>" data-color="<%=label.color%>" data-remotename="<%= label.remoteName %>" tabindex="-1">
+        <span class="wc-LabelEditor-list-item-squareColor"
+              style="background-color:#<%=label.color%>">
+          <input class="wc-LabelEditor-list-item-checkbox"
+                 type="checkbox" name="<%= label.name %>"
+                 data-color="<%=label.color%>"
+                 data-remotename="<%= label.remoteName %>"
+                 tabindex="-1">
         </span>
         <span class="wc-LabelEditor-list-item-name"><%= label.name %></span>
       </label>