diff --git a/assets/img/qrcode.png b/assets/img/qrcode.png
new file mode 100644
index 0000000..f3ff58b
Binary files /dev/null and b/assets/img/qrcode.png differ
diff --git a/assets/img/qrcode_green.png b/assets/img/qrcode_green.png
new file mode 100644
index 0000000..be487b6
Binary files /dev/null and b/assets/img/qrcode_green.png differ
diff --git a/assets/scripts.js b/assets/scripts.js
index 13e4aac..a2e5f3e 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -193,6 +193,8 @@ async function verifyProofs(opts) {
 
 async function displayProfile(opts) {
     let keyData, keyLink, feedback = "", notation, isVerified, verifications = [];
+    let icon_qr = '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#ffffff" d="M3,11H5V13H3V11M11,5H13V9H11V5M9,11H13V15H11V13H9V11M15,11H17V13H19V11H21V13H19V15H21V19H19V21H17V19H13V21H11V17H15V15H17V13H15V11M19,19V15H17V19H19M15,3H21V9H15V3M17,5V7H19V5H17M3,3H9V9H3V3M5,5V7H7V5H5M3,15H9V21H3V15M5,17V19H7V17H5Z" /></svg>';
+
     try {
         keyData = await fetchKeys(opts);
     } catch (e) {
@@ -267,15 +269,18 @@ async function displayProfile(opts) {
     }
     feedback += `<div class="profileDataItem">`;
     feedback += `<div class="profileDataItem__label">fingerprint</div>`;
-    feedback += `<div class="profileDataItem__value"><a href="${keyLink}">${keyData.fingerprint}</a></div>`;
-    feedback += `</div>`;
-
+    feedback += `<div class="profileDataItem__value"><a href="${keyLink}">${keyData.fingerprint}</a>`;
     if (opts.mode == "hkp") {
-        feedback += `<div class="profileDataItem">`;
-        feedback += `<div class="profileDataItem__label">qrcode</div>`;
-        feedback += `<div class="profileDataItem__value"><a href="/util/qr/${encodeURIComponent(`OPENPGP4FPR:${keyData.fingerprint.toUpperCase()}`)}" target="_blank">fingerprint</a></div>`;
-        feedback += `</div>`;
+        feedback += `<a class="proofQR green" href="/util/qr/${encodeURIComponent(`OPENPGP4FPR:${keyData.fingerprint.toUpperCase()}`)}" target="_blank" title="QR Code">${icon_qr}</a>`;
     }
+    feedback += `</div></div>`;
+
+    // if (opts.mode == "hkp") {
+    //     feedback += `<div class="profileDataItem">`;
+    //     feedback += `<div class="profileDataItem__label">qrcode</div>`;
+    //     feedback += `<div class="profileDataItem__value"><a class="green" href="/util/qr/${encodeURIComponent(`OPENPGP4FPR:${keyData.fingerprint.toUpperCase()}`)}" target="_blank">fingerprint</a></div>`;
+    //     feedback += `</div>`;
+    // }
 
     if (keyData.notations.length > 0) {
         feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
@@ -339,7 +344,7 @@ async function displayProfile(opts) {
                 feedback += `<a class="proofUrl" href="${verifications[i].proofUrl}">unverified</a>`;
             }
             if (verifications[i].isVerified && verifications[i].qr) {
-                feedback += `<a class="proofQR proofUrl--verified" href="/util/qr/${encodeURIComponent(verifications[i].qr)}" target="_blank">QR</a>`;
+                feedback += `<a class="proofQR green" href="/util/qr/${encodeURIComponent(verifications[i].qr)}" target="_blank" title="QR Code">${icon_qr}</a>`;
             }
             feedback += `</div>`;
             feedback += `</div>`;
@@ -1052,10 +1057,10 @@ if (elUtilQR) {
 
     const elInput = document.body.querySelector("#input");
 
-    if (elInput.value) {
-        elInput.value = decodeURIComponent(elInput.value);
-        qrcode.makeCode(`${elInput.value}`);
-        document.body.querySelector("#qrcode--altLink").href = elInput.value;
+    if (elInput.innerText) {
+        elInput.innerText = decodeURIComponent(elInput.innerText);
+        qrcode.makeCode(`${elInput.innerText}`);
+        document.body.querySelector("#qrcode--altLink").href = elInput.innerText;
     } else {
         qrcode.clear();
     }
diff --git a/assets/styles.css b/assets/styles.css
index ff645d3..082a825 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -166,8 +166,8 @@ input[type="submit"][disabled="true"] {
 select {
     margin: 0 0 16px 0;
 }
-.green {
-    color: green;
+.green, a.proofUrl.proofUrl--verified {
+    color: #499539;
 }
 .red {
     color: red;
@@ -267,8 +267,13 @@ select {
 a.proofUrl {
     color: #777;
 }
-a.proofUrl.proofUrl--verified, a.proofQR {
-    color: #499539;
+a.proofQR {
+    line-height: 0;
+    background-color: #499539;
+    border-radius: 2px;
+}
+a.proofQR:hover {
+    background-color: #6abb5a;
 }
 
 #qrcode {
diff --git a/views/util/qr.php b/views/util/qr.php
index 4bf66eb..8b5a2af 100644
--- a/views/util/qr.php
+++ b/views/util/qr.php
@@ -3,7 +3,9 @@
 <div class="content">
     <h1>QR Code</h1>
     <form id="form-util-qr" method="post">
-        <input type="txt" name="input" id="input" class="full-width" readonly placeholder="Fingerprint" value="<?=$this->escape($input)?>">
+        <!-- <input type="txt" name="input" id="input" class="full-width" readonly value="<?=$this->escape($input)?>"> -->
+        <!-- <textarea name="input" id="input" class="full-width" readonly><?=$this->escape($input)?></textarea> -->
+        <code id="input" class="full-width"><?=$this->escape($input)?></code>
     </form>
     <div id="qrcode"></div>
     <a id="qrcode--altLink" href="#">Press this link to directly open the URI</a>