diff --git a/assets/scripts.js b/assets/scripts.js
index 82f3b89..53efa0e 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -98,13 +98,13 @@ async function verifySignature(opts) {
 
 async function encryptMessage(opts) {
     // Init
-    const elEnc = document.body.querySelector("#messageEncrypted");
+    const elEnc = document.body.querySelector("#message");
     const elRes = document.body.querySelector("#result");
+    const elBtn = document.body.querySelector("[name='submit']");
     let keyData, feedback, message, encrypted;
 
     // Reset feedback
     elRes.innerHTML = "";
-    elEnc.value = "";
 
     try {
         // Get key data
@@ -130,6 +130,8 @@ async function encryptMessage(opts) {
 
     // Display encrypted data
     elEnc.value = encrypted.data;
+    elEnc.toggleAttribute("readonly");
+    elBtn.setAttribute("disabled", "true");
 };
 
 async function verifyProofs(opts) {
@@ -151,6 +153,9 @@ async function verifyProofs(opts) {
         return;
     }
 
+    // Display feedback
+    elRes.innerHTML = "Verifying proofs…";
+
     let notation, isVerified, verifications = [];
     for (var i = 0; i < keyData.notations.length; i++) {
         notation = keyData.notations[i];
@@ -487,6 +492,15 @@ async function fetchKeys(opts) {
         sigContent: null
     };
 
+    // Autodetect mode
+    if (opts.mode == "auto") {
+        if (/.*@.*\..*/.test(opts.input)) {
+            opts.mode = "wkd";
+        } else {
+            opts.mode = "hkp";
+        }
+    }
+
     // Fetch keys depending on the input mode
     switch (opts.mode) {
         case "plaintext":
@@ -598,8 +612,20 @@ let elFormVerify = document.body.querySelector("#form-verify"),
     elFormProofs = document.body.querySelector("#form-proofs"),
     elProfileUid = document.body.querySelector("#profileUid"),
     elProfileMode = document.body.querySelector("#profileMode"),
+    elModeSelect = document.body.querySelector("#modeSelect"),
     elUtilWKD = document.body.querySelector("#form-util-wkd");
 
+if (elModeSelect) {
+    elModeSelect.onchange = function (evt) {
+        let elAllModes = document.body.querySelectorAll('.modes');
+        elAllModes.forEach(function(el) {
+            el.classList.remove('modes--visible');
+        });
+        document.body.querySelector(`.modes--${elModeSelect.value}`).classList.add('modes--visible');
+    }
+    elModeSelect.dispatchEvent(new Event("change"));
+}
+
 if (elFormVerify) {
     elFormVerify.onsubmit = function (evt) {
         evt.preventDefault();
@@ -612,20 +638,33 @@ if (elFormVerify) {
         };
 
         opts.signature = document.body.querySelector("#signature").value;
+        opts.mode = document.body.querySelector("#modeSelect").value;
 
-        if (document.body.querySelector("#publicKey").value != "") {
-            opts.input = document.body.querySelector("#publicKey").value;
-            opts.mode = "plaintext";
-        } else if (document.body.querySelector("#wkd").value != "") {
-            opts.input = document.body.querySelector("#wkd").value;
-            opts.mode = "wkd";
-        } else if (document.body.querySelector("#hkp_input").value != "") {
-            opts.input = document.body.querySelector("#hkp_input").value;
-            opts.server =  document.body.querySelector("#hkp_server").value;
-            opts.mode = "hkp";
-        } else {
+        switch (opts.mode) {
+            default:
+            case "auto":
+                opts.input = document.body.querySelector("#auto_input").value;
+                break;
+
+            case "wkd":
+                opts.input = document.body.querySelector("#wkd_input").value;
+                break;
+
+            case "hkp":
+                opts.input = document.body.querySelector("#hkp_input").value;
+                opts.server =  document.body.querySelector("#hkp_server").value;
+                break;
+
+            case "plaintext":
+                opts.input = document.body.querySelector("#plaintext_input").value;
+                break;
+        }
+
+        // If no input was detect
+        if (!opts.input) {
             opts.mode = "signature";
         }
+
         verifySignature(opts);
     };
 }
@@ -642,20 +681,28 @@ if (elFormEncrypt) {
         };
 
         opts.message = document.body.querySelector("#message").value;
+        opts.mode = document.body.querySelector("#modeSelect").value;
 
-        if (document.body.querySelector("#publicKey").value != "") {
-            opts.input = document.body.querySelector("#publicKey").value;
-            opts.mode = "plaintext";
-        } else if (document.body.querySelector("#wkd").value != "") {
-            opts.input = document.body.querySelector("#wkd").value;
-            opts.mode = "wkd";
-        } else if (document.body.querySelector("#hkp_input").value != "") {
-            opts.input = document.body.querySelector("#hkp_input").value;
-            opts.server =  document.body.querySelector("#hkp_server").value;
-            opts.mode = "hkp";
-        } else {
-            opts.mode = "signature";
+        switch (opts.mode) {
+            default:
+            case "auto":
+                opts.input = document.body.querySelector("#auto_input").value;
+                break;
+
+            case "wkd":
+                opts.input = document.body.querySelector("#wkd_input").value;
+                break;
+
+            case "hkp":
+                opts.input = document.body.querySelector("#hkp_input").value;
+                opts.server =  document.body.querySelector("#hkp_server").value;
+                break;
+
+            case "plaintext":
+                opts.input = document.body.querySelector("#plaintext_input").value;
+                break;
         }
+
         encryptMessage(opts);
     };
 }
@@ -670,19 +717,28 @@ if (elFormProofs) {
             server: null,
         };
 
-        if (document.body.querySelector("#publicKey").value != "") {
-            opts.input = document.body.querySelector("#publicKey").value;
-            opts.mode = "plaintext";
-        } else if (document.body.querySelector("#wkd").value != "") {
-            opts.input = document.body.querySelector("#wkd").value;
-            opts.mode = "wkd";
-        } else if (document.body.querySelector("#hkp_input").value != "") {
-            opts.input = document.body.querySelector("#hkp_input").value;
-            opts.server =  document.body.querySelector("#hkp_server").value;
-            opts.mode = "hkp";
-        } else {
-            opts.mode = null;
+        opts.mode = document.body.querySelector("#modeSelect").value;
+
+        switch (opts.mode) {
+            default:
+            case "auto":
+                opts.input = document.body.querySelector("#auto_input").value;
+                break;
+
+            case "wkd":
+                opts.input = document.body.querySelector("#wkd_input").value;
+                break;
+
+            case "hkp":
+                opts.input = document.body.querySelector("#hkp_input").value;
+                opts.server =  document.body.querySelector("#hkp_server").value;
+                break;
+
+            case "plaintext":
+                opts.input = document.body.querySelector("#plaintext_input").value;
+                break;
         }
+
         verifyProofs(opts);
     };
 }
diff --git a/assets/styles.css b/assets/styles.css
index c1450f3..449187d 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -96,6 +96,11 @@ input[type="radio"] {
 input[type="submit"] {
     width: 100%;
 }
+input[type="submit"][disabled="true"] {
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.3;
+}
 .green {
     color: green;
 }
@@ -106,6 +111,15 @@ input[type="submit"] {
     display: inline-block;
     margin: 0 0 8px;
 }
+.modesContainer {
+    margin-top: 16px;
+}
+.modes {
+    display: none;
+}
+.modes.modes--visible {
+    display: block;
+}
 
 .container--profile {
     margin-top: 64px;
diff --git a/index.php b/index.php
index cd92b82..6df7b7e 100644
--- a/index.php
+++ b/index.php
@@ -7,10 +7,14 @@ include_once 'server/functions.php';
 // Init router
 $router = new AltoRouter();
 
+// Init templating
+$templates = new League\Plates\Engine('views');
+
 // Router mapping
 $router->map('GET', '/', function() {}, 'index');
 $router->map('GET', '/guides', function() {}, 'guides');
 $router->map('GET', '/guides/[:id]', function() {}, 'guideId');
+$router->map('GET', '/util/[:id]', function() {}, 'util');
 $router->map('GET', '/faq', function() {}, 'faq');
 $router->map('GET', '/verify', function() {}, 'verify');
 $router->map('GET', '/encrypt', function() {}, 'encrypt');
@@ -21,12 +25,11 @@ $router->map('GET', '/proofs/hkp/[**:uid]', function() {}, 'proofsHKP');
 $router->map('GET', '/verify/wkd/[**:uid]', function() {}, 'verifyWKD');
 $router->map('GET', '/encrypt/wkd/[**:uid]', function() {}, 'encryptWKD');
 $router->map('GET', '/proofs/wkd/[**:uid]', function() {}, 'proofsWKD');
-$router->map('GET', '/verify/[:uid]', function() {}, 'verifyUid');
-$router->map('GET', '/encrypt/[:uid]', function() {}, 'encryptUid');
-$router->map('GET', '/proofs/[:uid]', function() {}, 'proofsUid');
+$router->map('GET', '/verify/[**:uid]', function() {}, 'verifyAUTO');
+$router->map('GET', '/encrypt/[**:uid]', function() {}, 'encryptAUTO');
+$router->map('GET', '/proofs/[**:uid]', function() {}, 'proofsAUTO');
 $router->map('GET', '/hkp/[**:uid]', function() {}, 'profileHKP');
 $router->map('GET', '/wkd/[**:uid]', function() {}, 'profileWKD');
-$router->map('GET', '/util/[:id]', function() {}, 'util');
 $router->map('GET', '/[**:uid]', function() {}, 'profile');
 
 // Router matching
@@ -36,129 +39,94 @@ $match = $router->match();
 if(is_array($match) && is_callable($match['target'])) {
     switch ($match['name']) {
         case 'index':
-            readfile('pages/index.html');
+            echo $templates->render('index');
             break;
 
         case 'verify':
-        case 'verifyUid':
+            echo $templates->render('verify', ['title' => 'Verify — ', 'mode' => 'auto']);
+            break;
+
+        case 'verifyAUTO':
+            echo $templates->render('verify', ['title' => 'Verify — ', 'mode' => 'auto', 'auto_input' => $match['params']['uid']]);
+            break;
+
         case 'verifyHKP':
-            $content = file_get_contents('pages/verify.html');
-            $content = str_replace('%HKP_UID%', (array_key_exists('uid', $match['params']) ? htmlspecialchars($match['params']['uid']) : ''), $content);
-            $content = str_replace('%WKD_UID%', '', $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
+            echo $templates->render('verify', ['title' => 'Verify — ', 'mode' => 'hkp', 'hkp_input' => $match['params']['uid']]);
             break;
 
         case 'verifyWKD':
-            $content = file_get_contents('pages/verify.html');
-            $content = str_replace('%HKP_UID%', '', $content);
-            $content = str_replace('%WKD_UID%', (array_key_exists('uid', $match['params']) ? htmlspecialchars($match['params']['uid']) : ''), $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
+            echo $templates->render('verify', ['title' => 'Verify — ', 'mode' => 'wkd', 'wkd_input' => $match['params']['uid']]);
             break;
 
         case 'encrypt':
-        case 'encryptUid':
+            echo $templates->render('encrypt', ['title' => 'Encrypt — ', 'mode' => 'auto']);
+            break;
+
+        case 'encryptAUTO':
+            echo $templates->render('encrypt', ['title' => 'Encrypt — ', 'mode' => 'auto', 'auto_input' => $match['params']['uid']]);
+            break;
+
         case 'encryptHKP':
-            $content = file_get_contents('pages/encrypt.html');
-            $content = str_replace('%HKP_UID%', (array_key_exists('uid', $match['params']) ? htmlspecialchars($match['params']['uid']) : ''), $content);
-            $content = str_replace('%WKD_UID%', '', $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
+            echo $templates->render('encrypt', ['title' => 'Encrypt — ', 'mode' => 'hkp', 'hkp_input' => $match['params']['uid']]);
             break;
 
         case 'encryptWKD':
-            $content = file_get_contents('pages/encrypt.html');
-            $content = str_replace('%HKP_UID%', '', $content);
-            $content = str_replace('%WKD_UID%', (array_key_exists('uid', $match['params']) ? htmlspecialchars($match['params']['uid']) : ''), $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
+            echo $templates->render('encrypt', ['title' => 'Encrypt — ', 'mode' => 'wkd', 'wkd_input' => $match['params']['uid']]);
             break;
 
         case 'proofs':
-        case 'proofsUid':
+            echo $templates->render('proofs', ['title' => 'Proofs — ', 'mode' => 'auto']);
+            break;
+
+        case 'proofsAUTO':
+            echo $templates->render('proofs', ['title' => 'Proofs — ', 'mode' => 'auto', 'auto_input' => $match['params']['uid']]);
+            break;
+
         case 'proofsHKP':
-            $content = file_get_contents('pages/proofs.html');
-            $content = str_replace('%HKP_UID%', (array_key_exists('uid', $match['params']) ? htmlspecialchars($match['params']['uid']) : ''), $content);
-            $content = str_replace('%WKD_UID%', '', $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
+            echo $templates->render('proofs', ['title' => 'Proofs — ', 'mode' => 'hkp', 'hkp_input' => $match['params']['uid']]);
             break;
 
         case 'proofsWKD':
-            $content = file_get_contents('pages/proofs.html');
-            $content = str_replace('%HKP_UID%', '', $content);
-            $content = str_replace('%WKD_UID%', (array_key_exists('uid', $match['params']) ? htmlspecialchars($match['params']['uid']) : ''), $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
+            echo $templates->render('proofs', ['title' => 'Proofs — ', 'mode' => 'wkd', 'wkd_input' => $match['params']['uid']]);
             break;
 
         case 'profile':
-            $content = file_get_contents('pages/profile.html');
-            $content = str_replace('%UID%', htmlspecialchars($match['params']['uid']), $content);
-            $content = str_replace('%MODE%', "auto", $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
+            echo $templates->render('profile', ['mode' => 'auto', 'uid' => htmlspecialchars($match['params']['uid'])]);
             break;
 
         case 'profileHKP':
-            $content = file_get_contents('pages/profile.html');
-            $content = str_replace('%UID%', htmlspecialchars($match['params']['uid']), $content);
-            $content = str_replace('%MODE%', "hkp", $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
+            echo $templates->render('profile', ['mode' => 'hkp', 'uid' => htmlspecialchars($match['params']['uid'])]);
             break;
 
         case 'profileWKD':
-            $content = file_get_contents('pages/profile.html');
-            $content = str_replace('%UID%', htmlspecialchars($match['params']['uid']), $content);
-            $content = str_replace('%MODE%', "wkd", $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
+            echo $templates->render('profile', ['mode' => 'wkd', 'uid' => htmlspecialchars($match['params']['uid'])]);
             break;
 
         case 'guides':
-            readfile('pages/guides.html');
+            echo $templates->render('guides');
             break;
 
         case 'guideId':
             $id = htmlspecialchars($match['params']['id']);
-            if (file_exists("pages/guides/$id.title.html")) {
-                $content = file_get_contents("pages/template.html");
-                $guideTitle = file_get_contents("pages/guides/$id.title.html");
-                $guideContent = file_get_contents("pages/guides/$id.content.html");
-                $guideContent = "<p><a href='/guides'>Back to guides</a></p>".$guideContent;
-                $content = str_replace('%TITLE%', $guideTitle, $content);
-                $content = str_replace('%CONTENT%', $guideContent, $content);
-                header('Content-Type: text/html; charset=utf-8');
-                echo($content);
+            if (file_exists("views/guides/$id.title.php")) {
+                $guideTitle = file_get_contents("views/guides/$id.title.php");
+                $guideContent = file_get_contents("views/guides/$id.content.php");
+                echo $templates->render('guide', ['guide_title' => $guideTitle, 'guide_content' => $guideContent]);
             } else {
-                $content = file_get_contents("pages/template.html");
-                $pageTitle = "Guide not found";
-                $pageContent = "<p>404 - This guide could not be found :(</p>";
-                $content = str_replace('%TITLE%', $pageTitle, $content);
-                $content = str_replace('%CONTENT%', $pageContent, $content);
-                header('Content-Type: text/html; charset=utf-8');
-                echo($content);
+                echo $templates->render("404");
             }
             break;
 
         case 'util':
             $id = htmlspecialchars($match['params']['id']);
-            readfile("pages/util/$id.html");
+            echo $templates->render("util/$id");
             break;
 
         case 'faq':
-            readfile("pages/faq.html");
+            echo $templates->render("faq");
             break;
     }
 } else {
     // No route was matched
-    $content = file_get_contents("pages/template.html");
-    $pageTitle = "404";
-    $pageContent = "<p>404 - This page could not be found :(</p>";
-    $content = str_replace('%TITLE%', $pageTitle, $content);
-    $content = str_replace('%CONTENT%', $pageContent, $content);
-    header('Content-Type: text/html; charset=utf-8');
-    echo($content);
+    echo $templates->render("404");
 }
diff --git a/views/404.php b/views/404.php
index 89df2a5..d3d6b65 100644
--- a/views/404.php
+++ b/views/404.php
@@ -1,43 +1,6 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>%TITLE% - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
+<?php $this->layout('template.base', ['title' => $title]) ?>
 
-        <div class="container">
-            <h1>%TITLE%</h1>
-            <div class="content">
-                %CONTENT%
-            </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
-        </div>
-
-    </body>
-</html>
+<h1>404</h1>
+<div class="content">
+    <p>The requested page could not be found :(</p>
+</div>
diff --git a/views/encrypt.php b/views/encrypt.php
index a73caac..809300e 100644
--- a/views/encrypt.php
+++ b/views/encrypt.php
@@ -1,74 +1,34 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>Encrypt - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
+<?php $this->layout('template.base', ['title' => $title]) ?>
 
-        <div class="container">
-            <h1>Encrypt</h1>
-            <div class="content">
-                <form id="form-encrypt" method="post">
-                    <h3>Recipient</h3>
-                    <label for="mode">Mode: </label>
-                    <select class="mode" name="mode" id="mode">
-                        <option value="auto" %MODE_AUTO%>Autodetect</option>
-                        <option value="wkd" %MODE_WKD%>Web Key Directory</option>
-                        <option value="hkp" %MODE_HKP%>Keyservers</option>
-                        <option value="plaintext" %MODE_PT%>Plaintext</option>
-                    </select>
-                    <div class="modes modes--auto modes--hkp" style="display: none">
-                        <input type="text" name="wkd" id="wkd" placeholder="Email / key id / fingerprint" value="%WKDUID%">
-                    </div>
-                    <div class="modes modes--auto modes--hkp" style="display: none">
-                        <input type="text" name="wkd" id="wkd" placeholder="Email / key id / fingerprint" value="%WKDUID%">
-                    </div>
-                    <h3>Message</h3>
-                    <textarea name="message" id="message"></textarea>
-                    <!-- <h3>Public Key (1: plaintext)</h3>
-                    <textarea name="publicKey" id="publicKey"></textarea>
-                    <h3>Public Key (2: web key directory)</h3>
-                    <input type="text" name="wkd" id="wkd" placeholder="name@domain.com" value="%WKD_UID%">
-                    <h3>Public Key (3: HKP server)</h3>
-                    <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/">
-                    <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="%HKP_UID%"> -->
-                    <!-- <h3>Result</h3>
-                    <textarea name="messageEncrypted" id="messageEncrypted" readonly></textarea> -->
-                    <p id="result"></p>
-                    <input type="submit" class="bigBtn" name="submit" value="ENCRYPT MESSAGE">
-                </form>
+<h1>Encrypt</h1>
+<div class="content">
+    <form id="form-encrypt" method="post">
+        <h3>Recipient</h3>
+        <label for="modeSelect">Mode: </label>
+        <select class="modeSelect" name="modeSelect" id="modeSelect">
+            <option value="auto" <?php if ($mode=="auto"): ?>selected<?php endif ?>>Autodetect</option>
+            <option value="wkd" <?php if ($mode=="wkd"): ?>selected<?php endif ?>>Web Key Directory</option>
+            <option value="hkp" <?php if ($mode=="hkp"): ?>selected<?php endif ?>>Keyserver</option>
+            <option value="plaintext" <?php if ($mode=="plaintext"): ?>selected<?php endif ?>>Plaintext</option>
+        </select>
+        <div class="modesContainer">
+            <div class='modes modes--auto <?php if ($mode=="auto"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="auto_input" id="auto_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($auto_input)?>">
+            </div>
+            <div class='modes modes--wkd <?php if ($mode=="wkd"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="wkd_input" id="wkd_input" placeholder="name@domain.org" value="<?=$this->escape($wkd_input)?>">
+            </div>
+            <div class='modes modes--hkp <?php if ($mode=="hkp"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($hkp_input)?>">
+                <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/ (default)">
+            </div>
+            <div class='modes modes--plaintext <?php if ($mode=="plaintext"): ?>modes--visible<?php endif ?>'>
+                <textarea name="plaintext_input" id="plaintext_input"></textarea>
             </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
         </div>
-
-
-    </body>
-    <script src="/assets/openpgp.min.js"></script>
-    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
-</html>
+        <h3>Message</h3>
+        <textarea name="message" id="message"></textarea>
+        <p id="result"></p>
+        <input type="submit" class="bigBtn" name="submit" value="ENCRYPT MESSAGE">
+    </form>
+</div>
diff --git a/views/faq.php b/views/faq.php
index 17f93d1..e441ba1 100644
--- a/views/faq.php
+++ b/views/faq.php
@@ -1,100 +1,63 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>FAQ - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
+<?php $this->layout('template.base', ['title' => $title]) ?>
 
-        <div class="container">
-            <h1>FAQ</h1>
-            <div class="content">
-                <h3 id="what-is-keyoxide"><a href="#what-is-keyoxide">#</a> What is Keyoxide?</h3>
-                <p><a href="/">Keyoxide</a> is a lightweight and FOSS solution to make basic cryptography operations accessible to regular humans. It is built to be privacy friendly and secure, it can even be selfhosted.</p>
+<h1>FAQ</h1>
+<div class="content">
+    <h3 id="what-is-keyoxide"><a href="#what-is-keyoxide">#</a> What is Keyoxide?</h3>
+    <p><a href="/">Keyoxide</a> is a lightweight and FOSS solution to make basic cryptography operations accessible to regular humans. It is built to be privacy friendly and secure, it can even be selfhosted.</p>
 
-                <h3 id="why-does-keyoxide-exist"><a href="#why-does-keyoxide-exist">#</a> Why does Keyoxide exist?</h3>
-                <p><a href="/">Keyoxide</a> provides a solution to a modern problem: we humans have developed advanced methods of encrypting data and signing it. Unfortunately, it requires complicated tools that demand a minimal level of understanding cryptography and how keypairs work to leverage these technologies.</p>
-                <p>Sadly, this means that true privacy and secrecy in this modern age of surveillance capitalism is reserved to a subset of the world population.</p>
-                <p>Luckily, there is one thing we can do. Some cryptographic operations are more accessible than others and less prone to leaking private data. By building a service around only those operations, we hope a wider general audience can benefit from modern cryptography.</p>
+    <h3 id="why-does-keyoxide-exist"><a href="#why-does-keyoxide-exist">#</a> Why does Keyoxide exist?</h3>
+    <p><a href="/">Keyoxide</a> provides a solution to a modern problem: we humans have developed advanced methods of encrypting data and signing it. Unfortunately, it requires complicated tools that demand a minimal level of understanding cryptography and how keypairs work to leverage these technologies.</p>
+    <p>Sadly, this means that true privacy and secrecy in this modern age of surveillance capitalism is reserved to a subset of the world population.</p>
+    <p>Luckily, there is one thing we can do. Some cryptographic operations are more accessible than others and less prone to leaking private data. By building a service around only those operations, we hope a wider general audience can benefit from modern cryptography.</p>
 
-                <h3 id="what-cryptographic-operations-can-keyoxide-handle"><a href="#what-cryptographic-operations-can-keyoxide-handle">#</a> What cryptographic operations can Keyoxide handle?</h3>
-                <p><a href="/">Keyoxide</a> can: <a href="/verify">verify signatures</a> and <a href="/encrypt">encrypt messages</a>.<br><a href="/">Keyoxide</a> can't: sign messages or decrypt messages.</p>
+    <h3 id="what-cryptographic-operations-can-keyoxide-handle"><a href="#what-cryptographic-operations-can-keyoxide-handle">#</a> What cryptographic operations can Keyoxide handle?</h3>
+    <p><a href="/">Keyoxide</a> can: <a href="/verify">verify signatures</a> and <a href="/encrypt">encrypt messages</a>.<br><a href="/">Keyoxide</a> can't: sign messages or decrypt messages.</p>
 
-                <h3 id="why-so-few-cryptographic-operations"><a href="#why-so-few-cryptographic-operations">#</a> Why so few cryptographic operations?</h3>
-                <p>Good question. First, what cryptographic operations are generally available? There's <strong>encryption</strong> and its counterpart, <strong>decryption</strong>, but also <strong>signing</strong> and its counterpart, <strong>signature verification</strong>.</p>
-                <p><strong>Decryption</strong> and <strong>signing</strong> require private keys. <strong>Encryption</strong> and <strong>signature verification</strong> only require public keys.</p>
-                <p>If you happen to be in possession of a private key, there is one thing you should know: that key is private! It shouldn't leave your computer and most certainly should never be uploaded to any website!</p>
-                <p>So yes, alternative services may offer more cryptographic operations but at the highest cost of surrendering your private keys to servers you generally shouldn't trust and companies that may be under geopolitical influence.</p>
-                <p><a href="/">Keyoxide</a> offers a simple solution to the trust issue: we don't want your keys, therefore you don't even need to trust us. Everything that this service offers is possible thanks to publicly available keys.</p>
+    <h3 id="why-so-few-cryptographic-operations"><a href="#why-so-few-cryptographic-operations">#</a> Why so few cryptographic operations?</h3>
+    <p>Good question. First, what cryptographic operations are generally available? There's <strong>encryption</strong> and its counterpart, <strong>decryption</strong>, but also <strong>signing</strong> and its counterpart, <strong>signature verification</strong>.</p>
+    <p><strong>Decryption</strong> and <strong>signing</strong> require private keys. <strong>Encryption</strong> and <strong>signature verification</strong> only require public keys.</p>
+    <p>If you happen to be in possession of a private key, there is one thing you should know: that key is private! It shouldn't leave your computer and most certainly should never be uploaded to any website!</p>
+    <p>So yes, alternative services may offer more cryptographic operations but at the highest cost of surrendering your private keys to servers you generally shouldn't trust and companies that may be under geopolitical influence.</p>
+    <p><a href="/">Keyoxide</a> offers a simple solution to the trust issue: we don't want your keys, therefore you don't even need to trust us. Everything that this service offers is possible thanks to publicly available keys.</p>
 
-                <h3 id="how-does-keyoxide-work-without-keys"><a href="#how-does-keyoxide-work-without-keys">#</a> How does Keyoxide work without keys?</h3>
-                <p>We still need keys, of course, but only the harmless public keys. And yes, we could have built a website where one can make an account and upload public keys, in a similar fashion as alternative services.</p>
-                <p>But why would we? There's already an entire infrastructure out there in the form of websites that host their own keys (plaintext or web key directory) or dedicated "HTTP Key Protocol" or HKP servers, designed specifically for public key hosting. Why reinvent the wheel?</p>
+    <h3 id="how-does-keyoxide-work-without-keys"><a href="#how-does-keyoxide-work-without-keys">#</a> How does Keyoxide work without keys?</h3>
+    <p>We still need keys, of course, but only the harmless public keys. And yes, we could have built a website where one can make an account and upload public keys, in a similar fashion as alternative services.</p>
+    <p>But why would we? There's already an entire infrastructure out there in the form of websites that host their own keys (plaintext or web key directory) or dedicated "HTTP Key Protocol" or HKP servers, designed specifically for public key hosting. Why reinvent the wheel?</p>
 
-                <h3 id="how-is-this-privacy-friendly-and-secure"><a href="#how-is-this-privacy-friendly-and-secure">#</a> How is this privacy friendly and secure?</h3>
-                <p>You can't make an account on <a href="/">Keyoxide</a> because for basic cryptographic operations, we don't need your data or your keys. By not knowing anything about you or using any trackers, this is as privacy-friendly as it gets.</p>
-                <p>As for secure, <a href="/">Keyoxide</a> does all the cryptographic processing on your device and never sends data to the server. Besides, it never uses private keys and should you ever enter those.</p>
+    <h3 id="how-is-this-privacy-friendly-and-secure"><a href="#how-is-this-privacy-friendly-and-secure">#</a> How is this privacy friendly and secure?</h3>
+    <p>You can't make an account on <a href="/">Keyoxide</a> because for basic cryptographic operations, we don't need your data or your keys. By not knowing anything about you or using any trackers, this is as privacy-friendly as it gets.</p>
+    <p>As for secure, <a href="/">Keyoxide</a> does all the cryptographic processing on your device and never sends data to the server. Besides, it never uses private keys and should you ever enter those.</p>
 
-                <h3 id="how-can-i-make-an-account"><a href="#how-can-i-make-an-account">#</a> How can I make an account?</h3>
-                <p>Well, you can't and that is the whole point of <a href="/">Keyoxide</a>. We don't wan't your data or your keys. Uploading your keys and/or data to our servers is required for any of the operations provided by <a href="/">Keyoxide</a>.</p>
+    <h3 id="how-can-i-make-an-account"><a href="#how-can-i-make-an-account">#</a> How can I make an account?</h3>
+    <p>Well, you can't and that is the whole point of <a href="/">Keyoxide</a>. We don't wan't your data or your keys. Uploading your keys and/or data to our servers is required for any of the operations provided by <a href="/">Keyoxide</a>.</p>
 
-                <h3 id="can-i-get-a-sweet-profile-page"><a href="#can-i-get-a-sweet-profile-page">#</a> Can I get a sweet profile page?</h3>
-                <p>That, we can help you with! Just append your fingerprint to the domain (like so: <a href="https://keyoxide.org/9F0048AC0B23301E1F77E994909F6BD6F80F485D">https://keyoxide.org/9F0048AC0B23301E1F77E994909F6BD6F80F485D</a>) to generate a profile page.</p>
+    <h3 id="can-i-get-a-sweet-profile-page"><a href="#can-i-get-a-sweet-profile-page">#</a> Can I get a sweet profile page?</h3>
+    <p>That, we can help you with! Just append your fingerprint to the domain (like so: <a href="https://keyoxide.org/9F0048AC0B23301E1F77E994909F6BD6F80F485D">https://keyoxide.org/9F0048AC0B23301E1F77E994909F6BD6F80F485D</a>) to generate a profile page.</p>
 
-                <h3 id="where-is-the-app"><a href="#where-is-the-app">#</a> Where is the app?</h3>
-                <p>There's no app. Why would you want yet another app for what is essentially just a form with a big blue button?</p>
+    <h3 id="where-is-the-app"><a href="#where-is-the-app">#</a> Where is the app?</h3>
+    <p>There's no app. Why would you want yet another app for what is essentially just a form with a big blue button?</p>
 
-                <h3 id="where-do-i-put-my-private-key"><a href="#where-do-i-put-my-private-key">#</a> Where do I put my private key?</h3>
-                <p><strong>DON'T</strong>! We don't want it!</p>
-                <p>Alternative services may ask you for your private keys so that they can offer additional functionality. Please understand that your private key is yours and ONLY yours. You should never upload it to any online service, in fact it should never leave your computer.</p>
+    <h3 id="where-do-i-put-my-private-key"><a href="#where-do-i-put-my-private-key">#</a> Where do I put my private key?</h3>
+    <p><strong>DON'T</strong>! We don't want it!</p>
+    <p>Alternative services may ask you for your private keys so that they can offer additional functionality. Please understand that your private key is yours and ONLY yours. You should never upload it to any online service, in fact it should never leave your computer.</p>
 
-                <h3 id="what-is-the-use-if-i-can't-decrypt-or-sign-messages"><a href="#what-is-the-use-if-i-can't-decrypt-or-sign-messages">#</a> What is the use if I can't decrypt or sign messages?</h3>
-                <p>If you want to be on the receiving end of securely encrypted messages, you should either learn the basics of modern cryptography and know your way around your computer's command line or switch to end-to-end encrypted instant messaging providers.</p>
-                <p>Simply put, if you have private keys, you probably won't be using <a href="/">Keyoxide</a>. You will benefit from using command line tools or GUIs like <a href="https://www.openpgp.org/software/kleopatra/">Kleopatra</a>.</p>
-                <p><a href="/">Keyoxide</a> is designed for those without extensive knowledge about cryptography and who wish to encrypt messages to, or verify the authenticity of messages coming from the people with that extensive knowledge.</p>
+    <h3 id="what-is-the-use-if-i-can't-decrypt-or-sign-messages"><a href="#what-is-the-use-if-i-can't-decrypt-or-sign-messages">#</a> What is the use if I can't decrypt or sign messages?</h3>
+    <p>If you want to be on the receiving end of securely encrypted messages, you should either learn the basics of modern cryptography and know your way around your computer's command line or switch to end-to-end encrypted instant messaging providers.</p>
+    <p>Simply put, if you have private keys, you probably won't be using <a href="/">Keyoxide</a>. You will benefit from using command line tools or GUIs like <a href="https://www.openpgp.org/software/kleopatra/">Kleopatra</a>.</p>
+    <p><a href="/">Keyoxide</a> is designed for those without extensive knowledge about cryptography and who wish to encrypt messages to, or verify the authenticity of messages coming from the people with that extensive knowledge.</p>
 
-                <h3 id="but-other-services-provide-a-social-network-function"><a href="#but-other-services-provide-a-social-network-function">#</a> But other services provide a social network function!</h3>
-                <p>It doesn't need to be centralized to have a "social network" function. <a href="/">Keyoxide</a> simply uses the already existing "social network" of websites hosting their own keys and servers dedicated to hosting large amounts of keys.</p>
+    <h3 id="but-other-services-provide-a-social-network-function"><a href="#but-other-services-provide-a-social-network-function">#</a> But other services provide a social network function!</h3>
+    <p>It doesn't need to be centralized to have a "social network" function. <a href="/">Keyoxide</a> simply uses the already existing "social network" of websites hosting their own keys and servers dedicated to hosting large amounts of keys.</p>
 
-                <h3 id="pgp-must-die"><a href="#pgp-must-die">#</a> PGP must die!</h3>
-                <p>Not a question but we get your point. While there are <a href="https://restoreprivacy.com/let-pgp-die/">legitimate reasons PGP should cease to exist</a>, it is still widely used and without any clear sign of imminent extinction, it needs proper tooling.</p>
-                <p>It should be noted that while PGP can indeed be harmful when applied to email encryption, there are other legitimate ways of leveraging PGP to encrypt and/or sign messages.</p>
-                <p>That being said, <a href="/">Keyoxide</a> aims to integrate different cryptographic technologies and therefore ease the transition away from PGP.</p>
+    <h3 id="pgp-must-die"><a href="#pgp-must-die">#</a> PGP must die!</h3>
+    <p>Not a question but we get your point. While there are <a href="https://restoreprivacy.com/let-pgp-die/">legitimate reasons PGP should cease to exist</a>, it is still widely used and without any clear sign of imminent extinction, it needs proper tooling.</p>
+    <p>It should be noted that while PGP can indeed be harmful when applied to email encryption, there are other legitimate ways of leveraging PGP to encrypt and/or sign messages.</p>
+    <p>That being said, <a href="/">Keyoxide</a> aims to integrate different cryptographic technologies and therefore ease the transition away from PGP.</p>
 
-                <h3 id="what-is-on-the-roadmap"><a href="#what-is-on-the-roadmap">#</a> What is on the roadmap?</h3>
-                <ul>
-                    <li>Support more decentralized proofs</li>
-                    <li>Write more guides</li>
-                    <li>Integrate other encryption programs</li>
-                </ul>
-            </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
-        </div>
-
-    </body>
-</html>
+    <h3 id="what-is-on-the-roadmap"><a href="#what-is-on-the-roadmap">#</a> What is on the roadmap?</h3>
+    <ul>
+        <li>Support more decentralized proofs</li>
+        <li>Write more guides</li>
+        <li>Integrate other encryption programs</li>
+    </ul>
+</div>
diff --git a/views/guide.php b/views/guide.php
new file mode 100644
index 0000000..792791e
--- /dev/null
+++ b/views/guide.php
@@ -0,0 +1,7 @@
+<?php $this->layout('template.base', ['title' => $title]) ?>
+
+<h1><?=$this->escape($guide_title)?></h1>
+<div class="content">
+    <p><a href='/guides'>Back to guides</a></p>
+    <?=$guide_content?>
+</div>
diff --git a/views/guides.php b/views/guides.php
index 86b67fc..41b3739 100644
--- a/views/guides.php
+++ b/views/guides.php
@@ -1,65 +1,28 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>Guides - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
+<?php $this->layout('template.base', ['title' => $title]) ?>
 
-        <div class="container">
-            <h1>Guides</h1>
-            <div class="content">
-                <h3>Using Keyoxide.org</h3>
-                <a href="/guides/verify">Verifying a signature</a><br>
-                <a href="/guides/encrypt">Encrypting a message</a><br>
-                <a href="/guides/proofs">Verifying identity proofs</a><br>
-                <a href="/guides/contributing">Contributing to Keyoxide</a><br>
-                <a href="/guides/migrating-from-keybase">Migrating from Keybase</a><br>
-                <a href="/guides/feature-comparison-keybase">Feature comparison with Keybase</a><br>
+<h1>Guides</h1>
+<div class="content">
+    <h3>Using Keyoxide.org</h3>
+    <a href="/guides/verify">Verifying a signature</a><br>
+    <a href="/guides/encrypt">Encrypting a message</a><br>
+    <a href="/guides/proofs">Verifying identity proofs</a><br>
+    <a href="/guides/contributing">Contributing to Keyoxide</a><br>
+    <a href="/guides/migrating-from-keybase">Migrating from Keybase</a><br>
+    <a href="/guides/feature-comparison-keybase">Feature comparison with Keybase</a><br>
 
-                <h3>Beyond Keyoxide.org</h3>
-                <a href="/guides/openpgp-proofs">How OpenPGP identity proofs work</a><br>
-                <a href="/guides/web-key-directory">Uploading keys using web key directory</a><br>
-                <a href="/guides/selfhosting-keyoxide">Selfhosting Keyoxide</a><br>
-                <a href="/guides/service-provider">Are you a service provider?</a><br>
+    <h3>Beyond Keyoxide.org</h3>
+    <a href="/guides/openpgp-proofs">How OpenPGP identity proofs work</a><br>
+    <a href="/guides/web-key-directory">Uploading keys using web key directory</a><br>
+    <a href="/guides/selfhosting-keyoxide">Selfhosting Keyoxide</a><br>
+    <a href="/guides/service-provider">Are you a service provider?</a><br>
 
-                <h3>Adding proofs</h3>
-                <a href="/guides/dns">Adding a DNS proof</a><br>
-                <a href="/guides/mastodon">Adding a Mastodon proof</a><br>
-                <a href="/guides/twitter">Adding a Twitter proof</a><br>
-                <a href="/guides/lobsters">Adding a Lobste.rs proof</a><br>
-                <a href="/guides/hackernews">Adding a Hackernews proof</a><br>
-                <a href="/guides/reddit">Adding a Reddit proof</a><br>
-                <a href="/guides/github">Adding a Github proof</a><br>
-                <a href="/guides/xmpp">Adding a XMPP proof</a><br>
-            </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
-        </div>
-
-    </body>
-</html>
+    <h3>Adding proofs</h3>
+    <a href="/guides/dns">Adding a DNS proof</a><br>
+    <a href="/guides/mastodon">Adding a Mastodon proof</a><br>
+    <a href="/guides/twitter">Adding a Twitter proof</a><br>
+    <a href="/guides/lobsters">Adding a Lobste.rs proof</a><br>
+    <a href="/guides/hackernews">Adding a Hackernews proof</a><br>
+    <a href="/guides/reddit">Adding a Reddit proof</a><br>
+    <a href="/guides/github">Adding a Github proof</a><br>
+    <a href="/guides/xmpp">Adding a XMPP proof</a><br>
+</div>
diff --git a/views/index.php b/views/index.php
index 21f65ef..766d124 100644
--- a/views/index.php
+++ b/views/index.php
@@ -1,66 +1,29 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
+<?php $this->layout('template.base', ['title' => $title]) ?>
 
-        <div class="container">
-            <h1>Keyoxide</h1>
-            <div class="content">
-                <h2>PGP actions</h2>
-                <p>
-                    <a class="bigBtn" href="/verify">verify signature</a>
-                    <a class="bigBtn" href="/encrypt">encrypt message</a>
-                    <a class="bigBtn" href="/proofs">verify proofs</a>
-                </p>
-                <h2>Utilities</h2>
-                <p>
-                    <a class="bigBtn" href="/util/wkd">wkd</a>
-                </p>
-                <h2>Getting started</h2>
-                <p>
-                    <a class="bigBtn" href="/guides">guides</a>
-                    <a class="bigBtn" href="/faq">FAQ</a>
-                </p>
-                <h2>About</h2>
-                <p><a href="/">Keyoxide</a> is a lightweight and FOSS solution to make basic cryptography operations accessible to regular humans.</p>
-                <p>
-                    Made by <a href="https://yarmo.eu">Yarmo Mackenbach</a>.
-                    <br>
-                    Code hosted on <a href="https://codeberg.org/yarmo/keyoxide">Codeberg</a> (<a href="https://drone.private.foss.best/yarmo/keyoxide/">drone CI/CD</a>).
-                    <br>
-                    Uses <a href="https://github.com/openpgpjs/openpgpjs">openpgp.js</a> (version <a href="https://github.com/openpgpjs/openpgpjs/releases/tag/v4.10.4">4.10.4</a>).
-                </p>
-            </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
-        </div>
-
-    </body>
-</html>
+<h1>Keyoxide</h1>
+<div class="content">
+    <h2>PGP actions</h2>
+    <p>
+        <a class="bigBtn" href="/verify">verify signature</a>
+        <a class="bigBtn" href="/encrypt">encrypt message</a>
+        <a class="bigBtn" href="/proofs">verify proofs</a>
+    </p>
+    <h2>Utilities</h2>
+    <p>
+        <a class="bigBtn" href="/util/wkd">wkd</a>
+    </p>
+    <h2>Getting started</h2>
+    <p>
+        <a class="bigBtn" href="/guides">guides</a>
+        <a class="bigBtn" href="/faq">FAQ</a>
+    </p>
+    <h2>About</h2>
+    <p><a href="/">Keyoxide</a> is a lightweight and FOSS solution to make basic cryptography operations accessible to regular humans.</p>
+    <p>
+        Made by <a href="https://yarmo.eu">Yarmo Mackenbach</a>.
+        <br>
+        Code hosted on <a href="https://codeberg.org/yarmo/keyoxide">Codeberg</a> (<a href="https://drone.private.foss.best/yarmo/keyoxide/">drone CI/CD</a>).
+        <br>
+        Uses <a href="https://github.com/openpgpjs/openpgpjs">openpgp.js</a> (version <a href="https://github.com/openpgpjs/openpgpjs/releases/tag/v4.10.4">4.10.4</a>).
+    </p>
+</div>
diff --git a/views/profile.php b/views/profile.php
index e7eb219..c895287 100644
--- a/views/profile.php
+++ b/views/profile.php
@@ -9,10 +9,9 @@
     </head>
     <body>
         <div class="container container--profile">
-            <!-- <h1 id="profileName"></h1> -->
             <div class="content">
-                <span id="profileUid" style="display: none;">%UID%</span>
-                <span id="profileMode" style="display: none;">%MODE%</span>
+                <span id="profileUid" style="display: none;"><?=$this->escape($uid)?></span>
+                <span id="profileMode" style="display: none;"><?=$this->escape($mode)?></span>
                 <div id="profileHeader">
                     <img id="profileAvatar" src="/assets/img/avatar_placeholder.png" alt="avatar" style="display: none">
                     <p id="profileName"></p>
@@ -21,9 +20,7 @@
             </div>
 
             <footer>
-                <p>
-                    Page generated by <a href="/">Keyoxide</a>.
-                </p>
+                <p>Page generated by <a href="/">Keyoxide</a>.</p>
             </footer>
         </div>
     </body>
diff --git a/views/proofs.php b/views/proofs.php
index d483134..37ffc40 100644
--- a/views/proofs.php
+++ b/views/proofs.php
@@ -1,58 +1,34 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>Profile - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
+<?php $this->layout('template.base', ['title' => $title]) ?>
 
-        <div class="container">
-            <h1>Proofs</h1>
-            <div class="content">
-                <form id="form-proofs" method="post">
-                    <h3>Public Key (1: plaintext)</h3>
-                    <textarea name="publicKey" id="publicKey"></textarea>
-                    <h3>Public Key (2: web key directory)</h3>
-                    <input type="text" name="wkd" id="wkd" placeholder="name@domain.com" value="%WKD_UID%">
-                    <h3>Public Key (3: HKP server)</h3>
-                    <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/">
-                    <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="%HKP_UID%">
-                    <h3>Result</h3>
-                    <p id="result">Click on the button below.</p>
-                    <p id="resultContent"></p>
-                    <input type="submit" class="bigBtn" name="submit" value="VERIFY PROOFS">
-                </form>
+<h1>Proofs</h1>
+<div class="content">
+    <form id="form-proofs" method="post">
+        <h3>Public key</h3>
+        <label for="modeSelect">Mode: </label>
+        <select class="modeSelect" name="modeSelect" id="modeSelect">
+            <option value="auto" <?php if ($mode=="auto"): ?>selected<?php endif ?>>Autodetect</option>
+            <option value="wkd" <?php if ($mode=="wkd"): ?>selected<?php endif ?>>Web Key Directory</option>
+            <option value="hkp" <?php if ($mode=="hkp"): ?>selected<?php endif ?>>Keyserver</option>
+            <option value="plaintext" <?php if ($mode=="plaintext"): ?>selected<?php endif ?>>Plaintext</option>
+        </select>
+        <div class="modesContainer">
+            <div class='modes modes--auto <?php if ($mode=="auto"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="auto_input" id="auto_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($auto_input)?>">
+            </div>
+            <div class='modes modes--wkd <?php if ($mode=="wkd"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="wkd_input" id="wkd_input" placeholder="name@domain.org" value="<?=$this->escape($wkd_input)?>">
+            </div>
+            <div class='modes modes--hkp <?php if ($mode=="hkp"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($hkp_input)?>">
+                <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/ (default)">
+            </div>
+            <div class='modes modes--plaintext <?php if ($mode=="plaintext"): ?>modes--visible<?php endif ?>'>
+                <textarea name="plaintext_input" id="plaintext_input"></textarea>
             </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
         </div>
-
-
-    </body>
-    <script src="/assets/openpgp.min.js"></script>
-    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
-</html>
+        <h3>Result</h3>
+        <p id="result"></p>
+        <p id="resultContent"></p>
+        <input type="submit" class="bigBtn" name="submit" value="VERIFY PROOFS">
+    </form>
+</div>
diff --git a/views/template.php b/views/template.base.php
similarity index 79%
rename from views/template.php
rename to views/template.base.php
index 89df2a5..cb7e8a8 100644
--- a/views/template.php
+++ b/views/template.base.php
@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="shortcut icon" href="/favicon.png">
-        <title>%TITLE% - Keyoxide</title>
+        <title><?=$this->e($title)?>Keyoxide</title>
         <link rel="stylesheet" href="/assets/styles.css">
     </head>
     <body>
@@ -21,10 +21,7 @@
         </header>
 
         <div class="container">
-            <h1>%TITLE%</h1>
-            <div class="content">
-                %CONTENT%
-            </div>
+            <?=$this->section('content')?>
 
             <footer>
                 <p>
@@ -40,4 +37,7 @@
         </div>
 
     </body>
+    <script src="/assets/openpgp.min.js"></script>
+    <script src="/assets/spark-md5.min.js"></script>
+    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
 </html>
diff --git a/views/util/wkd.php b/views/util/wkd.php
index 5f08da9..4c4eb4e 100644
--- a/views/util/wkd.php
+++ b/views/util/wkd.php
@@ -1,51 +1,12 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>WKD utilities - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
+<?php $this->layout('template.base', ['title' => $title]) ?>
 
-        <div class="container">
-            <h1>WKD Local Part</h1>
-            <div class="content">
-                <form id="form-util-wkd" method="post">
-                    <p>This tool computes the part of the URL that corresponds to the username when <a href="https://keyoxide.org/guides/web-key-directory">uploading keys using web key directory</a>.</p>
-                    <h3>Input</h3>
-                    <input type="text" name="input" id="input" placeholder="Username">
-                    <h3>Output</h3>
-                    <input type="text" name="output" id="output" placeholder="Waiting for input..." readonly>
-                </form>
-            </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
-        </div>
-
-
-    </body>
-    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
-</html>
+<h1>WKD Local Part</h1>
+<div class="content">
+    <form id="form-util-wkd" method="post">
+        <p>This tool computes the part of the URL that corresponds to the username when <a href="https://keyoxide.org/guides/web-key-directory">uploading keys using web key directory</a>.</p>
+        <h3>Input</h3>
+        <input type="text" name="input" id="input" placeholder="Username">
+        <h3>Output</h3>
+        <input type="text" name="output" id="output" placeholder="Waiting for input..." readonly>
+    </form>
+</div>
diff --git a/views/verify.php b/views/verify.php
index 7a4128f..f208f94 100644
--- a/views/verify.php
+++ b/views/verify.php
@@ -1,60 +1,36 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>Verify - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
+<?php $this->layout('template.base', ['title' => $title]) ?>
 
-        <div class="container">
-            <h1>Verify</h1>
-            <div class="content">
-                <form id="form-verify" method="post">
-                    <h3>Signature</h3>
-                    <textarea name="signature" id="signature"></textarea>
-                    <h3>Public Key (1: plaintext)</h3>
-                    <textarea name="publicKey" id="publicKey"></textarea>
-                    <h3>Public Key (2: web key directory)</h3>
-                    <input type="text" name="wkd" id="wkd" placeholder="name@domain.com" value="%WKD_UID%">
-                    <h3>Public Key (3: HKP server)</h3>
-                    <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/">
-                    <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="%HKP_UID%">
-                    <h3>Result</h3>
-                    <p id="result">Click on the button below.</p>
-                    <p id="resultContent"></p>
-                    <input type="submit" class="bigBtn" name="submit" value="VERIFY SIGNATURE">
-                </form>
+<h1>Verify</h1>
+<div class="content">
+    <form id="form-verify" method="post">
+        <h3>Signer</h3>
+        <label for="modeSelect">Mode: </label>
+        <select class="modeSelect" name="modeSelect" id="modeSelect">
+            <option value="auto" <?php if ($mode=="auto"): ?>selected<?php endif ?>>Autodetect</option>
+            <option value="wkd" <?php if ($mode=="wkd"): ?>selected<?php endif ?>>Web Key Directory</option>
+            <option value="hkp" <?php if ($mode=="hkp"): ?>selected<?php endif ?>>Keyserver</option>
+            <option value="plaintext" <?php if ($mode=="plaintext"): ?>selected<?php endif ?>>Plaintext</option>
+        </select>
+        <div class="modesContainer">
+            <div class='modes modes--auto <?php if ($mode=="auto"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="auto_input" id="auto_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($auto_input)?>">
+            </div>
+            <div class='modes modes--wkd <?php if ($mode=="wkd"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="wkd_input" id="wkd_input" placeholder="name@domain.org" value="<?=$this->escape($wkd_input)?>">
+            </div>
+            <div class='modes modes--hkp <?php if ($mode=="hkp"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($hkp_input)?>">
+                <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/ (default)">
+            </div>
+            <div class='modes modes--plaintext <?php if ($mode=="plaintext"): ?>modes--visible<?php endif ?>'>
+                <textarea name="plaintext_input" id="plaintext_input"></textarea>
             </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
         </div>
-
-
-    </body>
-    <script src="/assets/openpgp.min.js"></script>
-    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
-</html>
+        <h3>Signature</h3>
+        <textarea name="signature" id="signature"></textarea>
+        <h3>Result</h3>
+        <p id="result"></p>
+        <p id="resultContent"></p>
+        <input type="submit" class="bigBtn" name="submit" value="VERIFY SIGNATURE">
+    </form>
+</div>