diff --git a/prosopopee/themes/material/static/css/style-page.css b/prosopopee/themes/material/static/css/style-page.css
index 9cd88e8..071c962 100644
--- a/prosopopee/themes/material/static/css/style-page.css
+++ b/prosopopee/themes/material/static/css/style-page.css
@@ -215,3 +215,69 @@ span.right {
 .clear {
   clear: both;
 }
+
+.staticrypt-hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+}
+
+.staticrypt-page {
+  width: 360px;
+  padding: 8% 0 0;
+  margin: auto;
+  box-sizing: border-box;
+}
+
+.staticrypt-form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+
+.staticrypt-form input {
+  outline: 0;
+  background: #292525;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.staticrypt-form .staticrypt-decrypt-button {
+  text-transform: uppercase;
+  outline: 0;
+  background: #91C25F;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.staticrypt-html {
+  height: 100%;
+}
+
+.staticrypt-body {
+  background: #37474f; /* fallback for old browsers */
+  font-family: "Arial", sans-serif;
+}
+
+.staticrypt-instructions {
+  margin-top: -1em;
+  margin-bottom: 1em;
+}
+
+.staticrypt-title {
+  font-size: 1.5em;
+}
diff --git a/prosopopee/themes/material/templates/encrypted.html b/prosopopee/themes/material/templates/encrypted.html
index 1bea17a..1a6b118 100644
--- a/prosopopee/themes/material/templates/encrypted.html
+++ b/prosopopee/themes/material/templates/encrypted.html
@@ -11,106 +11,8 @@
     <meta http-equiv="expires" content="0"/>
     <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
     <meta http-equiv="pragma" content="no-cache"/>
-
-    <style>
-.staticrypt-hr {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border: 0;
-  border-top: 1px solid #eee;
-}
-
-.staticrypt-page {
-  width: 360px;
-  padding: 8% 0 0;
-  margin: auto;
-  box-sizing: border-box;
-}
-
-.staticrypt-form {
-  position: relative;
-  z-index: 1;
-  background: #FFFFFF;
-  max-width: 360px;
-  margin: 0 auto 100px;
-  padding: 45px;
-  text-align: center;
-  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
-}
-
-.staticrypt-form input {
-  outline: 0;
-  background: #f2f2f2;
-  width: 100%;
-  border: 0;
-  margin: 0 0 15px;
-  padding: 15px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.staticrypt-form .staticrypt-decrypt-button {
-  text-transform: uppercase;
-  outline: 0;
-  background: #4CAF50;
-  width: 100%;
-  border: 0;
-  padding: 15px;
-  color: #FFFFFF;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.staticrypt-form .staticrypt-decrypt-button:hover, .staticrypt-form .staticrypt-decrypt-button:active, .staticrypt-form .staticrypt-decrypt-button:focus {
-  background: #43A047;
-}
-
-.staticrypt-html {
-  height: 100%;
-}
-
-.staticrypt-body {
-  margin-bottom: 1em;
-  background: #76b852; /* fallback for old browsers */
-  background: -webkit-linear-gradient(right, #76b852, #8DC26F);
-  background: -moz-linear-gradient(right, #76b852, #8DC26F);
-  background: -o-linear-gradient(right, #76b852, #8DC26F);
-  background: linear-gradient(to left, #76b852, #8DC26F);
-  font-family: "Arial", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.staticrypt-instructions {
-  margin-top: -1em;
-  margin-bottom: 1em;
-}
-
-.staticrypt-title {
-  font-size: 1.5em;
-}
-
-.staticrypt-footer {
-  position: fixed;
-  height: 20px;
-  font-size: 16px;
-  padding: 2px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin-bottom: 0;
-}
-
-.staticrypt-footer p {
-  margin: 2px;
-  text-align: center;
-  float: right;
-}
-
-.staticrypt-footer a {
-  text-decoration: none;
-}
-    </style>
+    <link type="text/css" rel="stylesheet" href="../static/css/style-page.css"  media="screen,projection"/>
+    <link type="text/css" rel="stylesheet" href="../static/css/materialize.css"  media="screen,projection"/>
   </head>
 
   <body class="staticrypt-body">
@@ -123,21 +25,25 @@
         <hr class="staticrypt-hr">
 
         <form id="staticrypt-form" action="#" method="post">
+          <div id="error" style="color: red; padding-bottom: 10px; height: 20px;"></div>
           <input id="staticrypt-password"
                  type="password"
                  name="password"
                  placeholder="passphrase"
                  autofocus/>
-
-          <input type="submit" class="staticrypt-decrypt-button" value="ENTER"/>
+          <button class="btn waves-effect waves-light" type="submit" name="action">ENTER
+          </button>
         </form>
       </div>
 
     </div>
-    <footer class="staticrypt-footer">
-      <p class="pull-right">Created with <a href="https://robinmoisson.github.io/staticrypt">StatiCrypt</a></p>
+    <footer class="page-footer blue-grey darken-1">
+      <div class="footer-copyright blue-grey darken-2">
+        <div class="container center">
+          Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>
+        </div>
+      </div>
     </footer>
-
     <script type="text/javascript" src="../static/js/crypto-js.min.js" charset="utf-8"></script>
 
     <script>
@@ -151,8 +57,8 @@ document.getElementById('staticrypt-form').addEventListener('submit', function(e
     var plainHTML = CryptoJS.AES.decrypt(encryptedMsg, passphrase).toString(CryptoJS.enc.Utf8);
   }
   catch(err) {
-    alert('Bad passphrase !');
-    return;
+    document.getElementById("error").innerHTML = "Wrong keyword entry."
+      return;
   }
 
   document.write(plainHTML);