diff --git a/package-lock.json b/package-lock.json
index 2ab8d16..5292dad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@highlightjs/vue-plugin": "^1.0.2",
         "core-js": "^3.6.5",
         "highlight.js": "^10.7.3",
-        "lib-iitc-manager": "^1.5.0",
+        "lib-iitc-manager": "^1.6.1",
         "scored-fuzzysearch": "^1.0.5",
         "vue": "^2.6.11"
       },
@@ -9295,9 +9295,9 @@
       }
     },
     "node_modules/lib-iitc-manager": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/lib-iitc-manager/-/lib-iitc-manager-1.5.0.tgz",
-      "integrity": "sha512-2ImrJRsaCwZY7n4/sTrk5EWTQhRvwAmltydvkIyV6kAK3a2E0ZoFtM1OuEXYo3Kfe+PLnkpHE2t569Eaota8gA==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/lib-iitc-manager/-/lib-iitc-manager-1.6.1.tgz",
+      "integrity": "sha512-lBKC6GlYkCvu3lT7peRPHtvrCPJN91CBuwwsi/JBJBzovFS3vZpJLQKZBhEUvDxo3m5VUr1YjvOkadqjPanzRQ==",
       "dependencies": {
         "xhr2": "^0.2.1"
       }
@@ -23460,9 +23460,9 @@
       }
     },
     "lib-iitc-manager": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/lib-iitc-manager/-/lib-iitc-manager-1.5.0.tgz",
-      "integrity": "sha512-2ImrJRsaCwZY7n4/sTrk5EWTQhRvwAmltydvkIyV6kAK3a2E0ZoFtM1OuEXYo3Kfe+PLnkpHE2t569Eaota8gA==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/lib-iitc-manager/-/lib-iitc-manager-1.6.1.tgz",
+      "integrity": "sha512-lBKC6GlYkCvu3lT7peRPHtvrCPJN91CBuwwsi/JBJBzovFS3vZpJLQKZBhEUvDxo3m5VUr1YjvOkadqjPanzRQ==",
       "requires": {
         "xhr2": "^0.2.1"
       }
diff --git a/package.json b/package.json
index 6e4ed05..7a3f4e0 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@highlightjs/vue-plugin": "^1.0.2",
     "core-js": "^3.6.5",
     "highlight.js": "^10.7.3",
-    "lib-iitc-manager": "^1.5.0",
+    "lib-iitc-manager": "^1.6.1",
     "scored-fuzzysearch": "^1.0.5",
     "vue": "^2.6.11"
   },
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 55226c0..2021d87 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -166,5 +166,23 @@
     },
     "searchBoxPlaceholder": {
         "message": "Search…"
+    },
+    "jsViewTitle": {
+        "message": "Installing script"
+    },
+    "jsViewDetailsNoDomains": {
+        "message": "This script did not ask for access rights to the sites. It seems to be an invalid plugin."
+    },
+    "jsViewDetailsAllDomains": {
+        "message": "This script requested access to all sites. Use it if you trust the author."
+    },
+    "jsViewDetailsDomainsLabel": {
+        "message": "The script will run on these sites:"
+    },
+    "jsViewDetailsShowDetails": {
+        "message": "Show details"
+    },
+    "jsViewDetailsHideDetails": {
+        "message": "Hide details"
     }
 }
diff --git a/public/assets/icons/favicon.ico b/public/assets/icons/favicon.ico
new file mode 100644
index 0000000..940e76c
Binary files /dev/null and b/public/assets/icons/favicon.ico differ
diff --git a/public/browser-extension.html b/public/browser-extension.html
index 2dbc525..6b38606 100644
--- a/public/browser-extension.html
+++ b/public/browser-extension.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" type="image/x-icon" href="/assets/icons/favicon.ico">
   <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
diff --git a/src/jsview/App.vue b/src/jsview/App.vue
index dd695a1..f70181c 100644
--- a/src/jsview/App.vue
+++ b/src/jsview/App.vue
@@ -1,75 +1,32 @@
 <!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
 <template>
-  <div>
-    <div class="addUserScript-wrapper">
-      <div id="addUserScript" class="row" v-bind:class="{ hide: !show_header }">
-        <div class="col">
-          <h3>{{ plugin_name }}</h3>
-          <span id="clickInstallPlugin">{{ _("clickInstallPlugin") }}</span>
-        </div>
-        <div id="install" class="btn" @click="install">{{ button_name }}</div>
-      </div>
-    </div>
+  <div class="page">
+    <Header ref="header" :meta="meta" :code="code"></Header>
     <Code :code="code" :status="status" />
   </div>
 </template>
 
 <script>
 import Code from "./Code";
-import { getUID, parseMeta } from "lib-iitc-manager";
 import { _ } from "@/i18n";
+import Header from "./Header";
+import { parseMeta } from "lib-iitc-manager";
 
 export default {
   name: "App",
   components: {
+    Header,
     Code
   },
   data() {
     return {
-      button_name: _("install"),
-      plugin_name: "",
       meta: {},
       code: "",
-      filename: "",
-      show_header: false,
       status: _("loading")
     };
   },
   methods: {
-    _: _,
-    install: async function() {
-      const script = [{ meta: this.meta, code: this.code }];
-      await browser.runtime.sendMessage({
-        type: "addUserScripts",
-        scripts: script
-      });
-      this.show_header = false;
-    },
-    checkIfInstalled: async function() {
-      await browser.runtime.sendMessage({
-        type: "getPluginInfo",
-        uid: getUID(this.meta)
-      });
-    },
-    setListeners: function() {
-      const self = this;
-      browser.runtime.onMessage.addListener(function(request) {
-        switch (request.type) {
-          case "resolveGetPluginInfo":
-            if (request.info) {
-              self.button_name = _("reinstall");
-            }
-            break;
-          case "resolveAddUserScripts":
-            Object.entries(request.scripts).map(([, script]) => {
-              const message =
-                _("addedUserScriptTo", [script["name"], script["category"]]) +
-                "\n";
-              alert(message);
-            });
-        }
-      });
-    }
+    _: _
   },
   async mounted() {
     const uniqId = new URL(window.location.href).searchParams.get("uniqId");
@@ -77,24 +34,17 @@ export default {
     const { url, code } = data[uniqId];
     await browser.storage.local.remove(uniqId);
 
-    this.code = code;
-    this.show_header = true;
-
     const meta = parseMeta(code);
     if (meta["name"] === undefined) return;
+    document.title = `${meta["name"]} — ${_("jsViewTitle")} — IITC Button`;
 
     meta["filename"] = url.substr(url.lastIndexOf("/") + 1);
     this.meta = meta;
-    this.plugin_name = meta["name"];
-
-    this.setListeners();
-    await this.checkIfInstalled();
+    this.code = code;
   }
 };
 </script>
 
-<style src="../../public/assets/roboto/roboto-font.css"></style>
-
 <style>
 body {
   background: #f0f0f0;
@@ -103,52 +53,14 @@ body {
 </style>
 
 <style scoped>
-.row {
+.page {
   display: flex;
   flex-direction: row;
 }
 
-.col {
-  display: flex;
-  flex-direction: column;
-}
-
-h3 {
-  margin: 0 0 0.7em 0;
-}
-
-.addUserScript-wrapper {
-  background: #0e3d4e;
-  color: #fff;
-  border-bottom: 3px solid #316577;
-}
-#addUserScript {
-  padding: 1.8em;
-  margin: auto;
-  width: 640px;
-  height: 68px;
-  font-size: 18px;
-  transition: opacity 0.1s linear;
-}
-#addUserScript.hide {
-  opacity: 0;
-}
-#addUserScript .col {
-  padding-right: 10px;
-}
-
-.btn {
-  cursor: pointer;
-  padding: 10px 22px;
-  background: #fff;
-  color: #222;
-  border-radius: 3px;
-  display: inline-block;
-  height: 22px;
-  margin: auto;
-}
-
-.btn:hover {
-  background: #efefef;
+@media (max-width: 1600px) {
+  .page {
+    flex-direction: column;
+  }
 }
 </style>
diff --git a/src/jsview/Code.vue b/src/jsview/Code.vue
index bf9bbe5..400be45 100644
--- a/src/jsview/Code.vue
+++ b/src/jsview/Code.vue
@@ -33,6 +33,8 @@ export default {
 <style>
 pre {
   margin: 0;
+  white-space: pre-wrap;
+  width: calc(100vw - 500px);
 }
 
 .hljs {
@@ -41,14 +43,29 @@ pre {
   font-size: 14px;
 }
 
+.hljs .line {
+  display: flex;
+}
+
 .hljs .line::before {
   content: attr(data-line-number);
   display: inline-block;
   width: 2.5rem;
+  min-width: 2.5rem;
   text-align: right;
   padding-right: 5px;
   color: #7f7f7f;
   border-right: 1px solid #555;
   margin-right: 20px;
 }
+
+.hljs .line div {
+  width: calc(100% - 2.5rem - 25px);
+}
+
+@media (max-width: 1600px) {
+  pre {
+    width: 100vw;
+  }
+}
 </style>
diff --git a/src/jsview/Header.vue b/src/jsview/Header.vue
new file mode 100644
index 0000000..4888de7
--- /dev/null
+++ b/src/jsview/Header.vue
@@ -0,0 +1,269 @@
+<template>
+  <div class="addUserScript-wrapper">
+    <div id="addUserScript" class="col" v-bind:class="{ hide: !show_header }">
+      <h3>{{ meta.name }}</h3>
+      <span v-if="meta.version" class="version">v{{ meta.version }}</span>
+      <span class="description">{{ meta.description }}</span>
+
+      <div class="row simple-details">
+        <span class="label" v-if="domains === null">{{
+          _("jsViewDetailsNoDomains")
+        }}</span>
+        <span class="label" v-if="domains === '<all_domains>'">{{
+          _("jsViewDetailsAllDomains")
+        }}</span>
+        <template v-if="typeof domains === 'object'">
+          <span class="label">{{ _("jsViewDetailsDomainsLabel") }}</span>
+          <span class="value" v-for="(domain, i) in domains" v-bind:key="i">
+            {{ domain }}</span
+          >
+        </template>
+      </div>
+
+      <div class="row details" :class="{ opened: show_details }">
+        <div
+          v-for="(key, ki) in [
+            'match',
+            'include',
+            'exclude-match',
+            'exclude',
+            'grant'
+          ]"
+          v-bind:key="ki"
+        >
+          <div class="col item" v-if="meta[key]">
+            <span class="label">@{{ key }}</span>
+            <span class="value" v-for="(el, i) in meta[key]" v-bind:key="i">
+              {{ el }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <a href="#" class="btn-more" @click.prevent="on_show_details">
+        {{
+          show_details
+            ? _("jsViewDetailsHideDetails")
+            : _("jsViewDetailsShowDetails")
+        }}
+      </a>
+
+      <div id="install" class="btn" @click="install">{{ button_name }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { _ } from "@/i18n";
+import { getUID, humanize_match } from "lib-iitc-manager";
+
+export default {
+  name: "Header",
+  props: {
+    meta: Object,
+    code: String
+  },
+  data() {
+    return {
+      show_header: false,
+      button_name: _("install"),
+      domains: null,
+      show_details: false
+    };
+  },
+  methods: {
+    _: _,
+    install: async function() {
+      const script = [{ meta: this.meta, code: this.code }];
+      await browser.runtime.sendMessage({
+        type: "addUserScripts",
+        scripts: script
+      });
+    },
+    checkIfInstalled: async function() {
+      await browser.runtime.sendMessage({
+        type: "getPluginInfo",
+        uid: getUID(this.meta)
+      });
+    },
+    setListeners: function() {
+      const self = this;
+      browser.runtime.onMessage.addListener(function(request) {
+        switch (request.type) {
+          case "resolveGetPluginInfo":
+            if (request.info) {
+              self.button_name = _("reinstall");
+            }
+            break;
+          case "resolveAddUserScripts":
+            Object.entries(request.scripts).map(([, script]) => {
+              const message =
+                _("addedUserScriptTo", [script["name"], script["category"]]) +
+                "\n";
+              alert(message);
+              self.button_name = _("reinstall");
+            });
+        }
+      });
+    },
+    on_show_details: async function() {
+      this.show_details = !this.show_details;
+      await browser.storage.local.set({
+        js_view_show_details: this.show_details
+      });
+    }
+  },
+  watch: {
+    meta: function() {
+      this.domains = humanize_match(this.meta);
+    },
+    code: async function() {
+      this.show_header = true;
+      this.setListeners();
+      await this.checkIfInstalled();
+    }
+  },
+  async mounted() {
+    browser.storage.local.get(["js_view_show_details"]).then(data => {
+      if (data["js_view_show_details"] === true) {
+        this.show_details = true;
+      }
+    });
+  }
+};
+</script>
+
+<style src="../../public/assets/roboto/roboto-font.css"></style>
+
+<style scoped>
+.row {
+  display: flex;
+  flex-direction: row;
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+}
+
+h3 {
+  margin: 0;
+}
+
+.addUserScript-wrapper {
+  display: flex;
+  background: #0e3d4e;
+  color: #fff;
+  border-right: 3px solid #316577;
+  width: 500px;
+}
+
+#addUserScript {
+  padding: 1.6em;
+  width: 100%;
+  font-size: 18px;
+  transition: opacity 0.1s linear;
+}
+#addUserScript.hide {
+  opacity: 0;
+}
+
+.description {
+  font-size: 16px;
+  line-height: 22px;
+  margin-top: 20px;
+}
+
+.btn {
+  cursor: pointer;
+  padding: 10px 22px;
+  background: #fff;
+  color: #222;
+  border-radius: 3px;
+  display: inline-block;
+  height: 22px;
+  margin: 20px auto 0 0;
+}
+
+.btn:hover {
+  background: #efefef;
+}
+
+.version {
+  font-size: 14px;
+  color: #bbb;
+  margin-top: 5px;
+}
+
+.details {
+  font-size: 12px;
+  height: 0;
+  flex-wrap: wrap;
+  overflow: hidden;
+  transition: margin 0.1s ease-in-out;
+}
+
+.details.opened {
+  margin: 10px 0;
+  height: auto;
+}
+
+.details .item {
+  margin-top: 5px;
+}
+
+.details .item span {
+  margin-right: 20px;
+}
+
+.details .label {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.simple-details {
+  font-size: 12px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+
+.simple-details .label {
+  padding: 5px 15px 5px 0;
+  margin: 2px 0;
+}
+
+.simple-details .value {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 5px 8px;
+  border-radius: 3px;
+  color: inherit;
+  text-decoration: none;
+  margin: 2px 4px 2px 0;
+}
+
+.btn-more {
+  margin: 4px auto 0 0;
+  font-size: 13px;
+  color: #fff;
+}
+
+@media (max-width: 1600px) {
+  .addUserScript-wrapper {
+    width: 100%;
+    border-bottom: 3px solid #316577;
+    border-right: none;
+  }
+  #addUserScript {
+    margin: auto;
+    width: 80%;
+    max-width: 800px;
+    padding: 1.8em;
+  }
+}
+
+@media (max-width: 600px) {
+  #addUserScript {
+    width: 100%;
+    padding: 1em;
+  }
+}
+</style>
diff --git a/src/jsview/highlightjs-lineToDiv.js b/src/jsview/highlightjs-lineToDiv.js
index f92340a..8678adc 100644
--- a/src/jsview/highlightjs-lineToDiv.js
+++ b/src/jsview/highlightjs-lineToDiv.js
@@ -55,7 +55,7 @@ export const plugin = result => {
       if (className !== undefined) {
         retString += `class="${className}"`;
       }
-      retString += `>${content}</div>`;
+      retString += `><div>${content}</div></div>`;
       return retString;
     })
     .join("");
