diff --git a/resources/report/js/custom.js b/resources/report/html/plugin-card.html
similarity index 71%
rename from resources/report/js/custom.js
rename to resources/report/html/plugin-card.html
index a188b7be..7931f2e7 100644
--- a/resources/report/js/custom.js
+++ b/resources/report/html/plugin-card.html
@@ -1,164 +1,293 @@
-/*  LOOT
+<link rel="import" href="loot://import/plugin-menu.html" />
 
-    A load order optimisation tool for Oblivion, Skyrim, Fallout 3 and
-    Fallout: New Vegas.
-
-    Copyright (C) 2013-2014    WrinklyNinja
-
-    This file is part of LOOT.
-
-    LOOT is free software: you can redistribute
-    it and/or modify it under the terms of the GNU General Public License
-    as published by the Free Software Foundation, either version 3 of
-    the License, or (at your option) any later version.
-
-    LOOT is distributed in the hope that it will
-    be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with LOOT.  If not, see
-    <http://www.gnu.org/licenses/>.
-*/
-'use strict';
-
-/* Create a <plugin-menu> element type. */
-var pluginMenuProto = Object.create(HTMLElement.prototype, {
-
-    getPluginCard: {
-        value: function() {
-            return document.getElementById(this.getAttribute('data-for'));
-        }
-    },
-
-    onShowOnlyConflicts: {
-        value: function(evt) {
-            /* Depending on what was clicked, this function may be run before
-               the checkbox state has updated. Handle both cases. */
-            var activateFilter;
-            if (evt.currentTarget == evt.target) {
-                /* Clicked on the label, checkbox state isn't updated yet. */
-                activateFilter = !evt.target.firstElementChild.checked;
-            } else {
-                /* Clicked on the checkbox. */
-                activateFilter = evt.target.checked;
-            }
-            if (activateFilter) {
-                /* Un-highlight any existing filter plugin. */
-                var cards = document.getElementsByTagName('main')[0].getElementsByTagName('plugin-card');
-                for (var i = 0; i < cards.length; ++i) {
-                    cards[i].classList.toggle('highlight', false);
-                }
-                evt.currentTarget.parentNode.host.getPluginCard().classList.toggle('highlight', true);
-                document.body.setAttribute('data-conflicts', evt.currentTarget.parentNode.host.getPluginCard().getName());
-            } else {
-                evt.currentTarget.parentNode.host.getPluginCard().classList.toggle('highlight', false);
-                document.body.removeAttribute('data-conflicts');
-            }
-            applyFilters(evt);
-        }
-    },
-
-    onEditMetadata: {
-        value: function(evt) {
-            evt.target.parentNode.host.getPluginCard().showEditor();
-        }
-    },
-
-    onCopyMetadata: {
-        value: function(evt) {
-            var request = JSON.stringify({
-                name: 'copyMetadata',
-                args: [
-                    evt.target.parentNode.host.getPluginCard().getName()
-                ]
-            });
-
-            loot.query(request).catch(processCefError);
-        }
-    },
-
-    onClearMetadata: {
-        value: function(evt) {
-            var pluginCard = evt.target.parentNode.host.getPluginCard();
-
-            showMessageDialog('Clear Plugin Metadata', 'Are you sure you want to clear all existing user-added metadata from "' + pluginCard.getName() + '"?', function(result){
-                if (result) {
-                    var request = JSON.stringify({
-                        name: 'clearPluginMetadata',
-                        args: [
-                            pluginCard.getName()
-                        ]
-                    });
-
-                    loot.query(request).then(JSON.parse).then(function(result){
-                        if (result) {
-                            /* Need to empty the UI-side user metadata. */
-                            for (var i = 0; i < loot.game.plugins.length; ++i) {
-                                if (loot.game.plugins[i].id == pluginCard.id) {
-                                    loot.game.plugins[i].userlist = undefined;
-
-                                    loot.game.plugins[i].modPriority = result.modPriority;
-                                    loot.game.plugins[i].isGlobalPriority = result.isGlobalPriority;
-                                    loot.game.plugins[i].messages = result.messages;
-                                    loot.game.plugins[i].tags = result.tags;
-                                    loot.game.plugins[i].isDirty = result.isDirty;
-
-                                    break;
-                                }
-                            }
-                        }
-                    }).catch(processCefError);
-                }
-            });
-        }
-    },
-
-    createdCallback: {
-        value: function() {
-
-            var template = document.getElementById('pluginMenu');
-            var clone = document.importNode(template.content, true);
-
-            this.createShadowRoot().appendChild(clone);
-        }
-    },
-
-    attachedCallback: {
-        value: function() {
-            /* Add event listeners for the menu items. */
-            /* For some reason clicking on the label is processed slower
-               than the checkbox state, and in the time difference the menu
-               gets closed, so that the conflicts filter never gets applied.
-               To get around this, listen for a click on the label rather
-               than for checkbox state change. */
-            if (document.body.getAttribute('data-conflicts') == this.getPluginCard().getName()) {
-                this.shadowRoot.getElementById('showOnlyConflicts').checked = true;
-            }
-            this.shadowRoot.getElementById('showOnlyConflicts').parentElement.addEventListener('click', this.onShowOnlyConflicts, false);
-            this.shadowRoot.getElementById('editMetadata').addEventListener('click', this.onEditMetadata, false);
-            this.shadowRoot.getElementById('copyMetadata').addEventListener('click', this.onCopyMetadata, false);
-            this.shadowRoot.getElementById('clearMetadata').addEventListener('click', this.onClearMetadata, false);
-        }
-    },
-
-    detachedCallback: {
-        value: function() {
-            /* Remove event listeners for the menu items. */
-            /* Nothing happens if we try to remove a listener that doesn't exist,
-               so don't bother checking first. */
-            this.shadowRoot.getElementById('showOnlyConflicts').parentElement.removeEventListener('click', this.onShowOnlyConflicts, false);
-            this.shadowRoot.getElementById('editMetadata').removeEventListener('click', this.onEditMetadata, false);
-            this.shadowRoot.getElementById('copyMetadata').removeEventListener('click', this.onCopyMetadata, false);
-            this.shadowRoot.getElementById('clearMetadata').removeEventListener('click', this.onClearMetadata, false);
-
-        }
+<template id="pluginCard">
+    <style>
+    @import 'css/font-awesome.min.css';
+    :host {
+        display: block;
+        background:white;
+        margin:1em;
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+        padding:1em;
+        position: relative;
+        overflow:visible;
+        transition: 0.6s;
+        transform-style: preserve-3d;
+    }
+    :host([data-active=false]) #activeTick {
+        visibility: hidden;
+    }
+    :host([data-bsa=false]) #icons #loadsBSA {
+        display: none;
+    }
+    :host([data-dummy=false]) #icons #dummyPlugin {
+        display: none;
+    }
+    :host([data-edits=false]) #icons #hasUserEdits {
+        display: none;
     }
 
+    #front, #editor {
+        display: block;
+    }
 
-});
-var PluginMenu = document.registerElement('plugin-menu', {prototype: pluginMenuProto});
+    #editor {
+        transform: rotateY(180deg) translateZ(1px);
+        display:none;
+    }
+
+    :host(.flip) {
+        transform: rotateY(180deg);
+    }
+
+    :host(.flip) #front  {
+        display: none;
+    }
+
+    :host(.flip) #editor  {
+        display: block;
+    }
+
+    #icons {
+        background: transparent;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        position: absolute;
+        top: 1em;
+        right: 0.5em;
+        overflow:visible;
+    }
+    #icons .fa {
+        color: grey;
+        text-align: center;
+        display: inline-block;
+        margin: 0.2em;
+    }
+    #icons > li:hover {
+        color: black;
+    }
+    #menuButton {
+        width: 1.5em;
+        text-align: center;
+        margin: 0.2em;
+        cursor: pointer;
+    }
+    ::content h1, h1 {
+        margin: 0;
+        font-weight: normal;
+        font-size: 1.2em;
+        display: inline-block;
+    }
+    ::content .version, .version {
+        display: inline-block;
+        margin-left: 1em;
+        color:#6394F8;
+    }
+    ::content .crc, .crc {
+        display: inline-block;
+        margin-left: 1em;
+        color:#BC8923;
+    }
+    .hidden, ::content .hidden {
+        display: none;
+    }
+    #activeTick {
+        color: green;
+        padding-right: 0.5em;
+    }
+
+    #tableTabs {
+        margin: 1.5em 1em;
+        display: table;
+    }
+    #tableTabs > span {
+        display: inline-block;
+        padding: 0.5em;
+        border: 1px black solid;
+        border-bottom: none;
+        background: #e3e3e3;
+        cursor: pointer;
+    }
+    #tableTabs > span:not(:first-child) {
+        border-left: none;
+    }
+    #tableTabs > span:hover, #tableTabs span.selected {
+        background: #f8f8f8;
+    }
+    #tableTabs .editable {
+        margin: 0;
+        border-collapse: collapse;
+        border: 1px black solid;
+        width: 100%;
+    }
+
+    #enableEdits {
+        margin-bottom: 1em;
+    }
+    label[for=priorityValue] {
+        margin-left: 0.5em;
+    }
+    .buttons {
+        text-align: right;
+    }
+    input[readonly] {
+        border: none;
+        -webkit-user-select: none;
+    }
+    input:invalid {
+        background-color: pink;
+        color: white;
+    }
+    td input {
+        width: 100%;
+        text-overflow: ellipsis;
+    }
+    td:last-child {
+        cursor: pointer;
+    }
+    td:last-child:hover {
+        color: red;
+    }
+    table {
+        margin: 3em 1em;
+        border-collapse: collapse;
+    }
+    td, th {
+        vertical-align: top;
+        text-align: left;
+        padding: 0.5em;
+    }
+    th {
+        border-bottom: 1px black solid;
+    }
+    tbody tr:last-child {
+        cursor: pointer;
+        color: grey;
+    }
+    tbody tr:last-child:hover {
+        color: black;
+    }
+    input[type='checkbox'] {
+        position:relative;
+        top:0.15em;
+        margin-left:0.5em;
+    }
+    </style>
+
+    <section id="front">
+        <span id="activeTick" class="fa fa-check" title="Active Plugin"></span>
+        <content select="h1"></content>
+        <content select=".version"></content>
+        <content select=".crc"></content>
+        <content select=".tag.add"></content>
+        <content select=".tag.remove"></content>
+        <content select="ul"></content>
+        <ol id="icons">
+            <li id="dummyPlugin" class="fa fa-eye-slash" title="Dummy Plugin"></li>
+            <li id="loadsBSA" class="fa fa-paperclip" title="Loads BSA"></li>
+            <li id="hasUserEdits" class="fa fa-user" title="Has User Metadata"></li>
+            <li id="menuButton" class="fa fa-ellipsis-v fa-lg" title="Click to open the plugin menu.">
+            </li>
+        </ol>
+    </section>
+    <section id="editor">
+        <h1></h1>
+        <span class="version"></span>
+        <span class="crc"></span>
+        <div>
+            <input type="checkbox" id="enableEdits">
+            <label for="enableEdits">Enable Edits</label><br>
+            <input type="checkbox" id="globalPriority">
+            <label for="globalPriority" title="Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins.">Global Priority</label><br>
+            <label for="priorityValue">Priority Value</label>
+            <input id="priorityValue" type="number" max="999999" min="-999999" step="1" value="0">
+        </div>
+        <div id="tableTabs">
+            <span class="selected" data-for="loadAfter">Load After</span>
+            <span data-for="req">Requirements</span>
+            <span data-for="inc">Incompatibilities</span>
+            <span data-for="message">Messages</span>
+            <span data-for="tags">Bash Tags</span>
+            <span data-for="dirty">Dirty Info</span>
+            <span data-for="locations">Locations</span>
+
+            <table is="editable-table" id="loadAfter" data-template="fileRow">
+                <thead>
+                    <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
+                </thead>
+                <tbody>
+                    <!-- File rows go here. -->
+                    <tr><td colspan="4">Add new row...</td><td></td></tr>
+                </tbody>
+            </table>
+            <table is="editable-table" id="req" class="hidden" data-template="fileRow">
+                <thead>
+                    <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
+                </thead>
+                <tbody>
+                    <!-- File rows go here. -->
+                    <tr><td colspan="4">Add new row...</td><td></td></tr>
+                </tbody>
+            </table>
+            <table is="editable-table" id="inc" class="hidden" data-template="fileRow">
+                <thead>
+                    <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
+                </thead>
+                <tbody>
+                    <!-- File rows go here. -->
+                    <tr><td colspan="4">Add new row...</td><td></td></tr>
+                </tbody>
+            </table>
+            <table is="editable-table" id="message" class="hidden" data-template="messageRow">
+                <thead>
+                    <tr><th>Type</th><th>Content</th><th>Condition</th><th>Language</th><th></th></tr>
+                </thead>
+                <tbody>
+                    <!-- Message rows go here. -->
+                    <tr><td colspan="4">Add new row...</td><td></td></tr>
+                </tbody>
+            </table>
+            <table is="editable-table" id="tags" class="hidden" data-template="tagRow">
+                <thead>
+                    <tr><th>Add/Remove</th><th>Bash Tag</th><th>Condition</th><th></th></tr>
+                </thead>
+                <tbody>
+                    <!-- Bash Tag rows go here. -->
+                    <tr><td colspan="4">Add new row...</td><td></td></tr>
+                </tbody>
+            </table>
+            <table is="editable-table" id="dirty" class="hidden" data-template="dirtyInfoRow">
+                <thead>
+                    <tr><th>CRC</th><th>ITM Count</th><th>Deleted References</th><th>Deleted Navmeshes</th><th>Cleaning Utility</th><th></th></tr>
+                </thead>
+                <tbody>
+                    <!-- Dirty info rows go here. -->
+                    <tr><td colspan="4">Add new row...</td><td></td></tr>
+                </tbody>
+            </table>
+            <table is="editable-table" id="locations" class="hidden" data-template="locationRow">
+                <thead>
+                    <tr><th>URL</th><th>Version</th><th></th></tr>
+                </thead>
+                <tbody>
+                    <!-- Location rows go here. -->
+                    <tr><td colspan="3">Add new row...</td><td></td></tr>
+                </tbody>
+            </table>
+        </div>
+        <hr>
+        <div id="buttons">
+            <button id="accept">Apply</button>
+            <button id="cancel">Cancel</button>
+        </div>
+    </section>
+</template>
+
+<script>
+'use strict';
+// Record this document.
+var pluginCardImportDoc = document.currentScript.ownerDocument;
 
 /* Create a <plugin-card> element type. */
 var pluginCardProto = Object.create(HTMLElement.prototype, {
@@ -582,7 +711,7 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
 
         value: function() {
 
-            var template = document.getElementById('pluginCard');
+            var template = pluginCardImportDoc.getElementById('pluginCard');
             var clone = document.importNode(template.content, true);
 
             this.createShadowRoot().appendChild(clone);
@@ -634,3 +763,5 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
 
 });
 var PluginCard = document.registerElement('plugin-card', {prototype: pluginCardProto});
+
+</script>
\ No newline at end of file
diff --git a/resources/report/html/plugin-menu.html b/resources/report/html/plugin-menu.html
new file mode 100644
index 00000000..770697aa
--- /dev/null
+++ b/resources/report/html/plugin-menu.html
@@ -0,0 +1,195 @@
+<!--
+<plugin-menu> element. Intended for use inside a <plugin-card> element. Clicking on menu items fires custom events:
+
+showConflicts:
+  bubbles: true,
+  detail: {
+    activate: <boolean> // true if the filter should be activated, false if it should be deactivated.
+  }
+
+-->
+<template id="pluginMenu">
+    <style>
+    @import 'css/font-awesome.min.css';
+    :host {
+        background: white;
+        box-shadow:0 0 3px 0px rgba(0,0,0,0.5);
+        font:10pt/1.5 Helvetica,sans-serif;
+        position: absolute;
+        z-index: 5;
+        width: 14em;
+        text-align: left;
+        padding:0;
+    }
+    div, label {
+        padding: 0.2em 0.5em;
+        cursor: pointer;
+        display: block;
+    }
+    div:hover, label:hover {
+        background: #e3e3e3;
+    }
+    span {
+        padding-right: 0.4em;
+    }
+    input {
+        position: relative;
+        top: 0.15em;
+        margin: 0em 0.3em 0 0.1em;
+    }
+    .disabled {
+        cursor: default;
+        color: #999;
+    }
+    </style>
+
+    <label><input type="checkbox" id="showOnlyConflicts" class="fa-fw">Show Only Conflicts</label>
+    <div id="editMetadata"><span class="fa fa-pencil fa-fw"></span>Edit Metadata</div>
+    <div id="copyMetadata"><span class="fa fa-copy fa-fw"></span>Copy Metadata As Text</div>
+    <div id="clearMetadata"><span class="fa fa-trash-o fa-fw"></span>Clear User Metadata</div>
+</template>
+
+<script>
+'use strict';
+// Record this document.
+var pluginMenuImportDoc = document.currentScript.ownerDocument;
+
+/* Create a <plugin-menu> element type. */
+var pluginMenuProto = Object.create(HTMLElement.prototype, {
+
+    onShowOnlyConflicts: {
+        value: function(evt) {
+            /* Depending on what was clicked, this function may be run before
+               the checkbox state has updated. Handle both cases. */
+            var activateFilter;
+            if (evt.currentTarget == evt.target) {
+                /* Clicked on the label, checkbox state isn't updated yet. */
+                activateFilter = !evt.target.firstElementChild.checked;
+            } else {
+                /* Clicked on the checkbox. */
+                activateFilter = evt.target.checked;
+            }
+            // Fire a custom event. It will appear to originate from the <plugin-menu> element.
+            evt.target.dispatchEvent(new CustomEvent('showConflicts', {
+                bubbles: true,
+                detail: {
+                    activate: activateFilter
+                }
+            }));
+            if (activateFilter) {
+                /* Un-highlight any existing filter plugin. */
+                var cards = document.getElementsByTagName('main')[0].getElementsByTagName('plugin-card');
+                for (var i = 0; i < cards.length; ++i) {
+                    cards[i].classList.toggle('highlight', false);
+                }
+                evt.currentTarget.parentNode.host.getPluginCard().classList.toggle('highlight', true);
+                document.body.setAttribute('data-conflicts', evt.currentTarget.parentNode.host.getPluginCard().getName());
+            } else {
+                evt.currentTarget.parentNode.host.getPluginCard().classList.toggle('highlight', false);
+                document.body.removeAttribute('data-conflicts');
+            }
+            applyFilters(evt);
+        }
+    },
+
+    onEditMetadata: {
+        value: function(evt) {
+            evt.target.parentNode.host.getPluginCard().showEditor();
+        }
+    },
+
+    onCopyMetadata: {
+        value: function(evt) {
+            var request = JSON.stringify({
+                name: 'copyMetadata',
+                args: [
+                    evt.target.parentNode.host.getPluginCard().getName()
+                ]
+            });
+
+            loot.query(request).catch(processCefError);
+        }
+    },
+
+    onClearMetadata: {
+        value: function(evt) {
+            var pluginCard = evt.target.parentNode.host.getPluginCard();
+
+            showMessageDialog('Clear Plugin Metadata', 'Are you sure you want to clear all existing user-added metadata from "' + pluginCard.getName() + '"?', function(result){
+                if (result) {
+                    var request = JSON.stringify({
+                        name: 'clearPluginMetadata',
+                        args: [
+                            pluginCard.getName()
+                        ]
+                    });
+
+                    loot.query(request).then(JSON.parse).then(function(result){
+                        if (result) {
+                            /* Need to empty the UI-side user metadata. */
+                            for (var i = 0; i < loot.game.plugins.length; ++i) {
+                                if (loot.game.plugins[i].id == pluginCard.id) {
+                                    loot.game.plugins[i].userlist = undefined;
+
+                                    loot.game.plugins[i].modPriority = result.modPriority;
+                                    loot.game.plugins[i].isGlobalPriority = result.isGlobalPriority;
+                                    loot.game.plugins[i].messages = result.messages;
+                                    loot.game.plugins[i].tags = result.tags;
+                                    loot.game.plugins[i].isDirty = result.isDirty;
+
+                                    break;
+                                }
+                            }
+                        }
+                    }).catch(processCefError);
+                }
+            });
+        }
+    },
+
+    createdCallback: {
+        value: function() {
+
+            var template = pluginMenuImportDoc.querySelector('#pluginMenu');
+            var clone = document.importNode(template.content, true);
+
+            this.createShadowRoot().appendChild(clone);
+        }
+    },
+
+    attachedCallback: {
+        value: function() {
+            /* Add event listeners for the menu items. */
+            /* For some reason clicking on the label is processed slower
+               than the checkbox state, and in the time difference the menu
+               gets closed, so that the conflicts filter never gets applied.
+               To get around this, listen for a click on the label rather
+               than for checkbox state change. */
+            if (document.body.getAttribute('data-conflicts') == this.getPluginCard().getName()) {
+                this.shadowRoot.getElementById('showOnlyConflicts').checked = true;
+            }
+            this.shadowRoot.getElementById('showOnlyConflicts').parentElement.addEventListener('click', this.onShowOnlyConflicts, false);
+            this.shadowRoot.getElementById('editMetadata').addEventListener('click', this.onEditMetadata, false);
+            this.shadowRoot.getElementById('copyMetadata').addEventListener('click', this.onCopyMetadata, false);
+            this.shadowRoot.getElementById('clearMetadata').addEventListener('click', this.onClearMetadata, false);
+        }
+    },
+
+    detachedCallback: {
+        value: function() {
+            /* Remove event listeners for the menu items. */
+            /* Nothing happens if we try to remove a listener that doesn't exist,
+               so don't bother checking first. */
+            this.shadowRoot.getElementById('showOnlyConflicts').parentElement.removeEventListener('click', this.onShowOnlyConflicts, false);
+            this.shadowRoot.getElementById('editMetadata').removeEventListener('click', this.onEditMetadata, false);
+            this.shadowRoot.getElementById('copyMetadata').removeEventListener('click', this.onCopyMetadata, false);
+            this.shadowRoot.getElementById('clearMetadata').removeEventListener('click', this.onClearMetadata, false);
+
+        }
+    }
+
+
+});
+var PluginMenu = document.registerElement('plugin-menu', {prototype: pluginMenuProto});
+
+</script>
diff --git a/resources/report/js/l10n.js b/resources/report/js/l10n.js
index 66d4e9c2..b5811f23 100644
--- a/resources/report/js/l10n.js
+++ b/resources/report/js/l10n.js
@@ -40,7 +40,7 @@
 
         translateStaticText: function(l10n) {
             /* Plugin card template. */
-            var pluginCard = document.getElementById('pluginCard').content;
+            var pluginCard = pluginCardImportDoc.querySelector('#pluginCard').content;
             pluginCard.getElementById('activeTick').title = l10n.translate("Active Plugin").fetch();
             pluginCard.getElementById('dummyPlugin').title = l10n.translate("Dummy Plugin").fetch();
             pluginCard.getElementById('loadsBSA').title = l10n.translate("Loads BSA").fetch();
@@ -103,7 +103,7 @@
             pluginLI.querySelector('.hasGlobalPriority').title = l10n.translate("Priority Is Global").fetch();
 
             /* Plugin menu template */
-            var pluginMenu = document.getElementById('pluginMenu').content;
+            var pluginMenu = pluginMenuImportDoc.querySelector('#pluginMenu').content;
             pluginMenu.getElementById('showOnlyConflicts').nextSibling.textContent = l10n.translate("Show Only Conflicts").fetch();
             pluginMenu.getElementById('editMetadata').firstChild.nextSibling.textContent = l10n.translate("Edit Metadata").fetch();
             pluginMenu.getElementById('copyMetadata').firstChild.nextSibling.textContent = l10n.translate("Copy Metadata As Text").fetch();
diff --git a/resources/report/js/script.js b/resources/report/js/script.js
index ac37476f..6f2a613a 100644
--- a/resources/report/js/script.js
+++ b/resources/report/js/script.js
@@ -1485,7 +1485,7 @@ function onFocus(evt) {
 require.config({
     baseUrl: "js",
   });
-require(['marked', 'l10n', 'custom', 'plugin'], function(markedResponse, l10nResponse) {
+require(['marked', 'l10n', 'plugin'], function(markedResponse, l10nResponse) {
     marked = markedResponse;
     l10n = l10nResponse;
     /* Make sure settings are what I want. */
diff --git a/resources/report/report.html b/resources/report/report.html
index 8ac04ccb..a564939c 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -6,337 +6,13 @@
     <link rel="stylesheet" href="css/font-awesome.min.css" />
     <link rel="import" href="loot://import/message-dialog.html">
     <link rel="import" href="loot://import/plugin-li.html">
+    <link rel="import" href="loot://import/plugin-card.html">
+    <link rel="import" href="loot://import/plugin-menu.html">
     <link rel="import" href="loot://import/editable-table.html">
     <script src="js/require.js"></script>
 </head>
 <!-- oncontextmenu attribute disables the right-click menu. -->
 <body oncontextmenu="return false">
-    <template id="pluginCard">
-
-        <style>
-        @import 'css/font-awesome.min.css';
-        :host {
-            display: block;
-            background:white;
-            margin:1em;
-            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-            padding:1em;
-            position: relative;
-            overflow:visible;
-            transition: 0.6s;
-            transform-style: preserve-3d;
-        }
-        :host([data-active=false]) #activeTick {
-            visibility: hidden;
-        }
-        :host([data-bsa=false]) #icons #loadsBSA {
-            display: none;
-        }
-        :host([data-dummy=false]) #icons #dummyPlugin {
-            display: none;
-        }
-        :host([data-edits=false]) #icons #hasUserEdits {
-            display: none;
-        }
-
-        #front, #editor {
-            display: block;
-        }
-
-        #editor {
-            transform: rotateY(180deg) translateZ(1px);
-            display:none;
-        }
-
-        :host(.flip) {
-            transform: rotateY(180deg);
-        }
-
-        :host(.flip) #front  {
-            display: none;
-        }
-
-        :host(.flip) #editor  {
-            display: block;
-        }
-
-        #icons {
-            background: transparent;
-            margin: 0;
-            padding: 0;
-            list-style-type: none;
-            position: absolute;
-            top: 1em;
-            right: 0.5em;
-            overflow:visible;
-        }
-        #icons .fa {
-            color: grey;
-            text-align: center;
-            display: inline-block;
-            margin: 0.2em;
-        }
-        #icons > li:hover {
-            color: black;
-        }
-        #menuButton {
-            width: 1.5em;
-            text-align: center;
-            margin: 0.2em;
-            cursor: pointer;
-        }
-        ::content h1, h1 {
-            margin: 0;
-            font-weight: normal;
-            font-size: 1.2em;
-            display: inline-block;
-        }
-        ::content .version, .version {
-            display: inline-block;
-            margin-left: 1em;
-            color:#6394F8;
-        }
-        ::content .crc, .crc {
-            display: inline-block;
-            margin-left: 1em;
-            color:#BC8923;
-        }
-        .hidden, ::content .hidden {
-            display: none;
-        }
-        #activeTick {
-            color: green;
-            padding-right: 0.5em;
-        }
-
-        #tableTabs {
-            margin: 1.5em 1em;
-            display: table;
-        }
-        #tableTabs > span {
-            display: inline-block;
-            padding: 0.5em;
-            border: 1px black solid;
-            border-bottom: none;
-            background: #e3e3e3;
-            cursor: pointer;
-        }
-        #tableTabs > span:not(:first-child) {
-            border-left: none;
-        }
-        #tableTabs > span:hover, #tableTabs span.selected {
-            background: #f8f8f8;
-        }
-        #tableTabs .editable {
-            margin: 0;
-            border-collapse: collapse;
-            border: 1px black solid;
-            width: 100%;
-        }
-
-        #enableEdits {
-            margin-bottom: 1em;
-        }
-        label[for=priorityValue] {
-            margin-left: 0.5em;
-        }
-        .buttons {
-            text-align: right;
-        }
-        input[readonly] {
-            border: none;
-            -webkit-user-select: none;
-        }
-        input:invalid {
-            background-color: pink;
-            color: white;
-        }
-        td input {
-            width: 100%;
-            text-overflow: ellipsis;
-        }
-        td:last-child {
-            cursor: pointer;
-        }
-        td:last-child:hover {
-            color: red;
-        }
-        table {
-            margin: 3em 1em;
-            border-collapse: collapse;
-        }
-        td, th {
-            vertical-align: top;
-            text-align: left;
-            padding: 0.5em;
-        }
-        th {
-            border-bottom: 1px black solid;
-        }
-        tbody tr:last-child {
-            cursor: pointer;
-            color: grey;
-        }
-        tbody tr:last-child:hover {
-            color: black;
-        }
-        input[type='checkbox'] {
-            position:relative;
-            top:0.15em;
-            margin-left:0.5em;
-        }
-        </style>
-
-        <section id="front">
-            <span id="activeTick" class="fa fa-check" title="Active Plugin"></span>
-            <content select="h1"></content>
-            <content select=".version"></content>
-            <content select=".crc"></content>
-            <content select=".tag.add"></content>
-            <content select=".tag.remove"></content>
-            <content select="ul"></content>
-            <ol id="icons">
-                <li id="dummyPlugin" class="fa fa-eye-slash" title="Dummy Plugin"></li>
-                <li id="loadsBSA" class="fa fa-paperclip" title="Loads BSA"></li>
-                <li id="hasUserEdits" class="fa fa-user" title="Has User Metadata"></li>
-                <li id="menuButton" class="fa fa-ellipsis-v fa-lg" title="Click to open the plugin menu.">
-                </li>
-            </ol>
-        </section>
-        <section id="editor">
-            <h1></h1>
-            <span class="version"></span>
-            <span class="crc"></span>
-            <div>
-                <input type="checkbox" id="enableEdits">
-                <label for="enableEdits">Enable Edits</label><br>
-                <input type="checkbox" id="globalPriority">
-                <label for="globalPriority" title="Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins.">Global Priority</label><br>
-                <label for="priorityValue">Priority Value</label>
-                <input id="priorityValue" type="number" max="999999" min="-999999" step="1" value="0">
-            </div>
-            <div id="tableTabs">
-                <span class="selected" data-for="loadAfter">Load After</span>
-                <span data-for="req">Requirements</span>
-                <span data-for="inc">Incompatibilities</span>
-                <span data-for="message">Messages</span>
-                <span data-for="tags">Bash Tags</span>
-                <span data-for="dirty">Dirty Info</span>
-                <span data-for="locations">Locations</span>
-
-                <table is="editable-table" id="loadAfter" data-template="fileRow">
-                    <thead>
-                        <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
-                    </thead>
-                    <tbody>
-                        <!-- File rows go here. -->
-                        <tr><td colspan="4">Add new row...</td><td></td></tr>
-                    </tbody>
-                </table>
-                <table is="editable-table" id="req" class="hidden" data-template="fileRow">
-                    <thead>
-                        <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
-                    </thead>
-                    <tbody>
-                        <!-- File rows go here. -->
-                        <tr><td colspan="4">Add new row...</td><td></td></tr>
-                    </tbody>
-                </table>
-                <table is="editable-table" id="inc" class="hidden" data-template="fileRow">
-                    <thead>
-                        <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
-                    </thead>
-                    <tbody>
-                        <!-- File rows go here. -->
-                        <tr><td colspan="4">Add new row...</td><td></td></tr>
-                    </tbody>
-                </table>
-                <table is="editable-table" id="message" class="hidden" data-template="messageRow">
-                    <thead>
-                        <tr><th>Type</th><th>Content</th><th>Condition</th><th>Language</th><th></th></tr>
-                    </thead>
-                    <tbody>
-                        <!-- Message rows go here. -->
-                        <tr><td colspan="4">Add new row...</td><td></td></tr>
-                    </tbody>
-                </table>
-                <table is="editable-table" id="tags" class="hidden" data-template="tagRow">
-                    <thead>
-                        <tr><th>Add/Remove</th><th>Bash Tag</th><th>Condition</th><th></th></tr>
-                    </thead>
-                    <tbody>
-                        <!-- Bash Tag rows go here. -->
-                        <tr><td colspan="4">Add new row...</td><td></td></tr>
-                    </tbody>
-                </table>
-                <table is="editable-table" id="dirty" class="hidden" data-template="dirtyInfoRow">
-                    <thead>
-                        <tr><th>CRC</th><th>ITM Count</th><th>Deleted References</th><th>Deleted Navmeshes</th><th>Cleaning Utility</th><th></th></tr>
-                    </thead>
-                    <tbody>
-                        <!-- Dirty info rows go here. -->
-                        <tr><td colspan="4">Add new row...</td><td></td></tr>
-                    </tbody>
-                </table>
-                <table is="editable-table" id="locations" class="hidden" data-template="locationRow">
-                    <thead>
-                        <tr><th>URL</th><th>Version</th><th></th></tr>
-                    </thead>
-                    <tbody>
-                        <!-- Location rows go here. -->
-                        <tr><td colspan="3">Add new row...</td><td></td></tr>
-                    </tbody>
-                </table>
-            </div>
-            <hr>
-            <div id="buttons">
-                <button id="accept">Apply</button>
-                <button id="cancel">Cancel</button>
-            </div>
-        </section>
-    </template>
-
-    <template id="pluginMenu">
-        <style>
-        @import 'css/font-awesome.min.css';
-        :host {
-            background: white;
-            box-shadow:0 0 3px 0px rgba(0,0,0,0.5);
-            font:10pt/1.5 Helvetica,sans-serif;
-            position: absolute;
-            z-index: 5;
-            width: 14em;
-            text-align: left;
-            padding:0;
-        }
-        div, label {
-            padding: 0.2em 0.5em;
-            cursor: pointer;
-            display: block;
-        }
-        div:hover, label:hover {
-            background: #e3e3e3;
-        }
-        span {
-            padding-right: 0.4em;
-        }
-        input {
-            position: relative;
-            top: 0.15em;
-            margin: 0em 0.3em 0 0.1em;
-        }
-        .disabled {
-            cursor: default;
-            color: #999;
-        }
-        </style>
-
-        <label><input type="checkbox" id="showOnlyConflicts" class="fa-fw">Show Only Conflicts</label>
-        <div id="editMetadata"><span class="fa fa-pencil fa-fw"></span>Edit Metadata</div>
-        <div id="copyMetadata"><span class="fa fa-copy fa-fw"></span>Copy Metadata As Text</div>
-        <div id="clearMetadata"><span class="fa fa-trash-o fa-fw"></span>Clear User Metadata</div>
-    </template>
-
     <header>
         <div id="headerOverlay"></div>
         <img src="../icon.ico">