diff --git a/docs/configuration.rst b/docs/configuration.rst
index 06327e6..d271ef3 100644
--- a/docs/configuration.rst
+++ b/docs/configuration.rst
@@ -49,6 +49,7 @@ entry like any other gallery.
 **NOTE**: expect the "static: " option to disappear quite soon for a more
 generic approach to "choose your page style".
 
+
 Global settings
 _______________
 
@@ -229,6 +230,14 @@ Is option can be use too in gallery settings if you use multi level gallery::
   reverse: true
 
 
+Password access
+~~~~~~~~~~~~~~~
+
+If you wanna protect all the website by password::
+
+  title: Gallery
+  password: my_super_password
+
 Gallery settings.yaml
 ---------------------
 
diff --git a/prosopopee/prosopopee.py b/prosopopee/prosopopee.py
index 52f3399..1a31ec8 100644
--- a/prosopopee/prosopopee.py
+++ b/prosopopee/prosopopee.py
@@ -17,8 +17,6 @@ import shutil
 import socketserver
 import http.server
 
-from subprocess import check_output
-
 import ruamel.yaml as yaml
 from docopt import docopt
 
@@ -27,7 +25,7 @@ from path import Path
 from jinja2 import Environment, FileSystemLoader
 
 from .cache import CACHE
-from .utils import error, warning, okgreen
+from .utils import error, warning, okgreen, makeform, encrypt
 
 
 DEFAULTS = {
@@ -446,7 +444,6 @@ def create_cover(gallery_name, gallery_settings, gallery_path):
 def build_gallery(settings, gallery_settings, gallery_path, template):
     gallery_index_template = template.get_template("gallery-index.html")
     page_template = template.get_template("page.html")
-    encrypted_template = template.get_template("encrypted.html")
 
     # this should probably be a factory
     Image.base_dir = Path(".").joinpath(gallery_path)
@@ -476,16 +473,9 @@ def build_gallery(settings, gallery_settings, gallery_path, template):
 
     open(Path("build").joinpath(gallery_path, "index.html"), "wb").write(html)
 
-    if gallery_settings.get("password"):
-        template_to_render = encrypted_template
-        password = gallery_settings.get("password")
-        index_plain = Path("build").joinpath(gallery_path, "index.html")
-        encrypted = check_output('cat %s | openssl enc -e -base64 -A -aes-256-cbc -pass pass:"%s"' % (index_plain, password), shell=True)
-        html = template_to_render.render(
-            settings=settings,
-            gallery=gallery_settings,
-            ciphertext=str(encrypted, 'utf-8'),
-        ).encode("Utf-8")
+    if gallery_settings.get("password") or settings.get("password"):
+        password = gallery_settings.get("password", settings.get("password"))
+        html = encrypt(password, template, gallery_path, settings, gallery_settings)
 
         open(Path("build").joinpath(gallery_path, "index.html"), "wb").write(html)
 
@@ -524,18 +514,10 @@ def build_gallery(settings, gallery_settings, gallery_path, template):
 
         open(Path("build").joinpath(gallery_light_path, "index.html"), "wb").write(html)
 
-        if gallery_settings.get("password"):
-            light_template_to_render = light_templates.get_template("encrypted.html")
-            template_to_render = encrypted_template
-            password = gallery_settings.get("password")
-            index_plain = Path("build").joinpath(gallery_light_path, "index.html")
-            encrypted = check_output('cat %s | openssl enc -e -base64 -A -aes-256-cbc -pass pass:"%s"' % (index_plain, password), shell=True)
-            html = light_template_to_render.render(
-                settings=settings,
-                gallery=gallery_settings,
-                ciphertext=str(encrypted, 'utf-8'),
-            ).encode("Utf-8")
-
+        if gallery_settings.get("password") or settings.get("password"):
+            from_template = light_templates.get_template("form.html")
+            html = encrypt(password, light_templates, gallery_light_path, settings, gallery_settings)
+            
             open(Path("build").joinpath(gallery_light_path, "index.html"), "wb").write(html)
 
 
@@ -565,6 +547,12 @@ def build_index(settings, galleries_cover, templates, gallery_path='', sub_index
 
     open(Path("build").joinpath(gallery_path, "index.html"), "wb").write(html)
 
+    if settings.get("password"):
+        password = settings.get("password")
+        html = encrypt(password, templates, gallery_path, settings, None)
+
+        open(Path("build").joinpath(gallery_path, "index.html"), "wb").write(html)
+
 
 def main():
     arguments = docopt(__doc__, version='0.6')
diff --git a/prosopopee/themes/exposure/static/css/encrypt.css b/prosopopee/themes/exposure/static/css/encrypt.css
new file mode 100644
index 0000000..650519c
--- /dev/null
+++ b/prosopopee/themes/exposure/static/css/encrypt.css
@@ -0,0 +1,93 @@
+.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: #FFF; /* fallback for old browsers */
+  font-family: "Arial", sans-serif;
+}
+
+.staticrypt-instructions {
+  margin-top: -1em;
+  margin-bottom: 1em;
+}
+
+.staticrypt-title {
+  font-size: 1.5em;
+}
+
+footer {
+  position: relative;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin-top: 6em;
+  text-align: center;
+  font-family: 'crimson', serif;
+  font-size: 11px;
+  color: #555;
+  background-color: #EEE;
+  border-top: solid 2px #DDD;
+  padding-bottom: 10px;
+  padding-top: 14px;
+}
+
+footer p {
+  margin: 0;
+}
+
+footer a {
+  text-decoration: none;
+  font-weight: 600;
+  font-family: 'montserrat', sans-serif;
+  color: #111;
+}
+
diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css
index db06902..e6b2ade 100644
--- a/prosopopee/themes/exposure/static/css/style-page.css
+++ b/prosopopee/themes/exposure/static/css/style-page.css
@@ -520,69 +520,3 @@ span.left img, span.right img {
 .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: #FFF; /* 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/exposure/templates/encrypted.html b/prosopopee/themes/exposure/templates/encrypted.html
index 8dd4f6a..270e65c 100644
--- a/prosopopee/themes/exposure/templates/encrypted.html
+++ b/prosopopee/themes/exposure/templates/encrypted.html
@@ -1,8 +1,13 @@
+{% if gallery %}
+{% set pathstatic = ".." %}
+{% else %}
+{% set pathstatic = "." %}
+{% endif %}
 <!doctype html>
 <html class="staticrypt-html">
   <head>
     <meta charset="utf-8">
-    <title>{{ gallery.title }} · {{ settings.title }}</title>
+    <title>{% if gallery %}{{ gallery.title }} · {% endif %}{{ settings.title }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- do not cache this page -->
@@ -11,55 +16,46 @@
     <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"/>
-    <link type="text/css" rel="stylesheet" href="../static/css/style-page.css"  media="screen,projection"/>
+    <link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/encrypt.css"  media="screen,projection"/>
+
   </head>
-
-  <body class="staticrypt-body">
-    <div class="staticrypt-page">
-      <div class="staticrypt-form">
-        <div class="staticrypt-instructions">
-          <img id="logo" src="./../static/img/logo.svg">
-          <p class="staticrypt-title">{{ gallery.title }}</p>
-        </div>
-
-        <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"/>
-        </form>
-      </div>
-
-    </div>
-     <footer style="position: absolute;">
-      <p>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> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
-    </footer>
-    <script type="text/javascript" src="../static/js/crypto-js.min.js" charset="utf-8"></script>
-
+  <body id="encrypt-body" class="staticrypt-body">
+    <script type="text/javascript" src="{{ pathstatic }}/static/js/crypto-js.min.js" charset="utf-8"></script>
     <script>
-document.getElementById('staticrypt-form').addEventListener('submit', function(e) {
-  e.preventDefault();
-
-  var passphrase = document.getElementById('staticrypt-password').value,
-  encryptedMsg = '{{ ciphertext }}';
-
-  try{
-    var plainHTML = CryptoJS.AES.decrypt(encryptedMsg, passphrase).toString(CryptoJS.enc.Utf8);
-  }
-  catch(err) {
-    document.getElementById("error").innerHTML = "Wrong keyword entry."
-    return;
-  }
+var form = '{{ form }}';
+var encryptedMsg = '{{ ciphertext }}';
 
+if (sessionStorage.getItem("password")) {
+  var passphrase = sessionStorage.getItem("password");
+  var plainHTML = CryptoJS.AES.decrypt(encryptedMsg, passphrase).toString(CryptoJS.enc.Utf8);
+  document.open();
   document.write(plainHTML);
   document.close();
-});
+} else {
+  var plainHTML = CryptoJS.enc.Base64.parse(form).toString(CryptoJS.enc.Utf8);
+  document.open();
+  document.write(plainHTML);
+  document.close();
+
+  document.getElementById('staticrypt-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    var passphrase = document.getElementById('staticrypt-password').value;
+
+    try{
+      var plainHTML = CryptoJS.AES.decrypt(encryptedMsg, passphrase).toString(CryptoJS.enc.Utf8);
+    }
+    catch(err) {
+      document.getElementById("error").innerHTML = "Wrong keyword entry.";
+      return;
+    }
+
+    sessionStorage.setItem("password", passphrase);
+    document.open();
+    document.write(plainHTML);
+    document.close();
+  });
+}
     </script>
   </body>
 </html>
diff --git a/prosopopee/themes/exposure/templates/form.html b/prosopopee/themes/exposure/templates/form.html
new file mode 100644
index 0000000..ab0d12c
--- /dev/null
+++ b/prosopopee/themes/exposure/templates/form.html
@@ -0,0 +1,21 @@
+<div class="staticrypt-page">
+  <div class="staticrypt-form">
+    <div class="staticrypt-instructions">
+      <img id="logo" src="./../static/img/logo.svg">
+      <p class="staticrypt-title">{% if gallery %}{{ gallery.title }}{% else %}{{ settings.title }}{% endif %}</p>
+    </div>
+    <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"/>
+    </form>
+  </div>
+</div>
+<footer style="position: absolute;">
+  <p>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> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
+</footer>
diff --git a/prosopopee/themes/light/static/css/style.css b/prosopopee/themes/light/static/css/style.css
index 0ace685..2d0298a 100644
--- a/prosopopee/themes/light/static/css/style.css
+++ b/prosopopee/themes/light/static/css/style.css
@@ -1,178 +1,185 @@
+html {
+  background: #efefef;
+}
+
 body {
-    color: #222;
-    font-family: 'montserrat', sans-serif;
-    background-color: #FBFBFB;
-    margin: 0;
+  background: #fff;
+  width: 800px;
+  max-width: 95%;
+  margin: 20px auto;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  margin-bottom: 100px;
+  font-family: sans-serif;
 }
 
 a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .galleries-grid {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    text-align: center;
-    margin: 0 auto;
-    padding: 0px;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  text-align: center;
+  margin: 0 auto;
+  padding: 0px;
 }
 
 .galleries-line {
-    width: 100%;
-    height: 100%;
-    margin-bottom: -4px; /* YOLO */
+  width: 100%;
+  height: 100%;
+  margin-bottom: -4px; /* YOLO */
 }
 
 .covers-1 .gallery-square {
-    width: 100%;
-    height: 100%;
-    margin: auto;
-    padding-bottom: 47%;
-    position: relative;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  padding-bottom: 47%;
+  position: relative;
 }
 
 .covers-2 .gallery-square {
-    width: 50%;
-    height: 100%;
-    margin: 0 0 0;
-    padding-bottom: 47%;
-    position: relative;
-    display: inline-block;
+  width: 50%;
+  height: 100%;
+  margin: 0 0 0;
+  padding-bottom: 47%;
+  position: relative;
+  display: inline-block;
 }
 
 .covers-3 .gallery-square {
-    width: 33.333333333%;
-    height: 100%;
-    margin: 0;
-    padding-bottom: 47%;
-    position: relative;
-    display: inline-block;
+  width: 33.333333333%;
+  height: 100%;
+  margin: 0;
+  padding-bottom: 47%;
+  position: relative;
+  display: inline-block;
 }
 
 .gallery-square > a {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    z-index: 555;
-    width: 100%;
-    height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 555;
+  width: 100%;
+  height: 100%;
 }
 
 @keyframes darken {
-    from {background-color: rgba(0, 0, 0, 0);}
-    to {background-color: rgba(0, 0, 0, 0.3);}
+  from {background-color: rgba(0, 0, 0, 0);}
+  to {background-color: rgba(0, 0, 0, 0.3);}
 }
 
 .gallery-square > a:hover {
-    animation-name: darken;
-    animation-duration: 0.15s;
-    animation-iteration-count: 1;
-    background-color: rgba(0, 0, 0, 0.3);
+  animation-name: darken;
+  animation-duration: 0.15s;
+  animation-iteration-count: 1;
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 .gallery-cover {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    background-position: center center;
-    background-size: cover;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background-position: center center;
+  background-size: cover;
 }
 
 .gallery-title {
-    color: white;
-    width: 100%;
-    position: absolute;
-    top: initial;
-    bottom: 0px;
-    text-align: center;
-    z-index: 3;
-    background: transparent linear-gradient(rgba(255, 255, 255, 0) 0%, transparent 1%, rgba(0, 0, 0, 0.07) 26%, rgba(0, 0, 0, 0.5) 71%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0% 0%;
-    padding: 20% 0 10px 0;
+  color: white;
+  width: 100%;
+  position: absolute;
+  top: initial;
+  bottom: 0px;
+  text-align: center;
+  z-index: 3;
+  background: transparent linear-gradient(rgba(255, 255, 255, 0) 0%, transparent 1%, rgba(0, 0, 0, 0.07) 26%, rgba(0, 0, 0, 0.5) 71%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0% 0%;
+  padding: 20% 0 10px 0;
 }
 
 .gallery-header {
-    text-align: center;
-    margin-top: 8em;
-    margin-bottom: 6.5em;
+  text-align: center;
+  margin-bottom: 6.5em;
 }
 
 .static-header {
-    margin-bottom: 0px;
+  margin-bottom: 0px;
 }
 
 #logo {
-    width: 10%;
+  width: 10%;
 }
 
 .gallery-header > h1 {
-    font-size: 2.6vw;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    margin-bottom: 0;
+  font-size: 2.6vw;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  margin-bottom: 0;
 }
 
 .gallery-header > h4 {
-    font-size: 1.4vw;
-    color: #444;
-    font-style: italic;
-    font-weight: normal;
-    font-family: 'crimson', serif;
-    margin-top: .5em;
+  font-size: 1.4vw;
+  color: #444;
+  font-style: italic;
+  font-weight: normal;
+  font-family: 'crimson', serif;
+  margin-top: .5em;
 }
 
 .gallery-header > hr {
-    width: 14%;
-    margin-top: 3.5em;
-    color: #BBB;
+  width: 14%;
+  margin-top: 3.5em;
+  color: #BBB;
 }
 
 .gallery-title > h2 {
-    text-transform: uppercase;
-    margin-bottom: .2em;
-    letter-spacing: 2px;
-    font-size: 1.7vw;
+  text-transform: uppercase;
+  margin-bottom: .2em;
+  letter-spacing: 2px;
+  font-size: 1.7vw;
 }
 
 .gallery-title > h3 {
-    font-style: italic;
-    margin-top: 0;
-    margin-bottom: .7em;
-    font-family: 'crimson', serif;
-    font-weight: normal;
+  font-style: italic;
+  margin-top: 0;
+  margin-bottom: .7em;
+  font-family: 'crimson', serif;
+  font-weight: normal;
 }
 
 .gallery-datetime {
-    font-family: 'crimson', serif;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 11px;
+  font-family: 'crimson', serif;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-size: 11px;
 }
 
 footer {
-    margin-top: 7em;
-    text-align: center;
-    position: relative;
-    font-family: 'crimson', serif;
-    font-size: 11px;
-    color: #555;
-    background-color: #EEE;
-    border-top: solid 2px #DDD;
-    padding-bottom: 10px;
-    padding-top: 14px;
+  margin-top: 7em;
+  text-align: center;
+  position: relative;
+  font-family: 'crimson', serif;
+  font-size: 11px;
+  color: #555;
+  background-color: #EEE;
+  border-top: solid 2px #DDD;
+  padding-bottom: 10px;
+  padding-top: 14px;
 }
 
 footer p {
-    margin: 0;
+  margin: 0;
 }
 
 footer a {
-    text-decoration: none;
-    font-weight: 600;
-    font-family: 'montserrat', sans-serif;
-    color: #111;
+  text-decoration: none;
+  font-weight: 600;
+  font-family: 'montserrat', sans-serif;
+  color: #111;
 }
 
 nav {
@@ -226,76 +233,76 @@ nav ul a {
 }
 
 nav ul li > a.item-menu::before {
-    content: "/";
-    margin-right: 22px;
-    font-size: 18px;
-    line-height: 1;
-    color: #ebebeb;
+  content: "/";
+  margin-right: 22px;
+  font-size: 18px;
+  line-height: 1;
+  color: #ebebeb;
 }
 
 .gallery-tag {
-   font-size: 13px;
-   text-transform: uppercase;
-   font-style: normal;
-   display: inline;
-   font-family: "adobe-garamond-pro", serif;
+  font-size: 13px;
+  text-transform: uppercase;
+  font-style: normal;
+  display: inline;
+  font-family: "adobe-garamond-pro", serif;
 }
 
 .gallery-tag span {
-    font-size: 12px;
-    border-bottom: solid 1px rgba(255,255,255,0.2);
-    display: inline-block;
-    margin: 0 0 0 3px;
-    font-weight: bold;
-    font-family: "europa", sans-serif;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    font-style: normal;
+  font-size: 12px;
+  border-bottom: solid 1px rgba(255,255,255,0.2);
+  display: inline-block;
+  margin: 0 0 0 3px;
+  font-weight: bold;
+  font-family: "europa", sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  font-style: normal;
 }
 
 .gallery-cover video.fillWidth {
-    height: 100%;
-    position: absolute;
-    top: 0px;
-    left: 0px;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
 }
 
 .gallery-cover img.fillWidth {
-    height: 100%;
+  height: 100%;
 }
 
 .back-to-home hr {
-    width: 14%;
-    color: #DDD;
+  width: 14%;
+  color: #DDD;
 }
 
 .back-to-home #logo {
-    background: transparent url("../img/logo.svg") no-repeat scroll center top / cover;
-    border-radius: 100em;
-    border: 7px solid black;
-    margin: auto;
-    margin-top: 1em;
-    height: 150px;
-    width: 150px;
-    color: transparent;
-    font-size: 40px;
+  background: transparent url("../img/logo.svg") no-repeat scroll center top / cover;
+  border-radius: 100em;
+  border: 7px solid black;
+  margin: auto;
+  margin-top: 1em;
+  height: 150px;
+  width: 150px;
+  color: transparent;
+  font-size: 40px;
 }
 
 .back-to-home a {
-    position: relative;
-    text-decoration: none;
-    color: transparent;
+  position: relative;
+  text-decoration: none;
+  color: transparent;
 }
 
 .back-to-home #logo:hover {
-    background-color: black;
-    text-decoration: none;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    text-transform: uppercase;
-    font-family: 'montserrat', sans-serif;
-    font-weight: bold;
+  background-color: black;
+  text-decoration: none;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  text-transform: uppercase;
+  font-family: 'montserrat', sans-serif;
+  font-weight: bold;
 }
diff --git a/prosopopee/themes/light/templates/encrypted.html b/prosopopee/themes/light/templates/encrypted.html
index cf25e47..e2307c0 100644
--- a/prosopopee/themes/light/templates/encrypted.html
+++ b/prosopopee/themes/light/templates/encrypted.html
@@ -7,7 +7,7 @@
 <html class="staticrypt-html">
   <head>
     <meta charset="utf-8">
-    <title>{{ gallery.title }} · {{ settings.title }}</title>
+    <title>{% if gallery %}{{ gallery.title }} · {% endif %}{{ settings.title }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- do not cache this page -->
@@ -18,52 +18,40 @@
     <meta http-equiv="pragma" content="no-cache"/>
     <link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/style-page.css"  media="screen,projection"/>
   </head>
-
   <body class="staticrypt-body">
-    <div class="staticrypt-page">
-      <div class="staticrypt-form">
-        <div class="staticrypt-instructions">
-          <p class="staticrypt-title">{{ gallery.title }}</p>
-        </div>
+  <script type="text/javascript" src="{{ pathstatic }}/static/js/crypto-js.min.js" charset="utf-8"></script>
+  <script>
+var form = '{{ form }}';
+var encryptedMsg = '{{ ciphertext }}';
 
-        <hr class="staticrypt-hr">
+if (sessionStorage.getItem("password")) {
+  var passphrase = sessionStorage.getItem("password");
+  var plainHTML = CryptoJS.AES.decrypt(encryptedMsg, passphrase).toString(CryptoJS.enc.Utf8);
+  document.write(plainHTML);
+  document.close();
+} else {
+  var plainHTML = CryptoJS.enc.Base64.parse(form).toString(CryptoJS.enc.Utf8);
+  document.write(plainHTML);
+  document.close();
+}
 
-        <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"/>
-        </form>
-      </div>
-
-    </div>
-     <footer>
-      <p>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> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
-    </footer>
-    <script type="text/javascript" src="{{ pathstatic }}/static/js/crypto-js.min.js" charset="utf-8"></script>
-
-    <script>
 document.getElementById('staticrypt-form').addEventListener('submit', function(e) {
   e.preventDefault();
 
-  var passphrase = document.getElementById('staticrypt-password').value,
-  encryptedMsg = '{{ ciphertext }}';
+  var passphrase = document.getElementById('staticrypt-password').value;
 
   try{
     var plainHTML = CryptoJS.AES.decrypt(encryptedMsg, passphrase).toString(CryptoJS.enc.Utf8);
   }
   catch(err) {
-    document.getElementById("error").innerHTML = "Wrong keyword entry."
+    document.getElementById("error").innerHTML = "Wrong keyword entry.";
     return;
   }
 
+  sessionStorage.setItem("password", passphrase);
   document.write(plainHTML);
   document.close();
 });
-    </script>
+  </script>
   </body>
 </html>
diff --git a/prosopopee/themes/light/templates/form.html b/prosopopee/themes/light/templates/form.html
new file mode 100644
index 0000000..885f8aa
--- /dev/null
+++ b/prosopopee/themes/light/templates/form.html
@@ -0,0 +1,24 @@
+<div class="staticrypt-page">
+  <div class="staticrypt-form">
+    <div class="staticrypt-instructions">
+      <p class="staticrypt-title">{% if gallery %}{{ gallery.title }}{% else %}{{ settings.title }}{% endif %}</p>
+    </div>
+
+    <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"/>
+    </form>
+  </div>
+
+</div>
+<footer>
+  <p>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> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
+</footer>
diff --git a/prosopopee/themes/light/templates/index.html b/prosopopee/themes/light/templates/index.html
index 04ee28c..b71717f 100644
--- a/prosopopee/themes/light/templates/index.html
+++ b/prosopopee/themes/light/templates/index.html
@@ -22,7 +22,7 @@
 
 {% block content %}
 <div class="galleries-grid">
-  {% for galleries_line in galleries|reverse|batch(3)|reverse %}
+  {% for galleries_line in galleries|reverse|batch(1)|reverse %}
   <div class="galleries-line covers-{{ galleries_line|length }}">
     {% for gallery in galleries_line|reverse %}<!-- comment tricks against space between inline-block
     --><div class="gallery-square">
diff --git a/prosopopee/themes/material/static/css/encrypt.css b/prosopopee/themes/material/static/css/encrypt.css
new file mode 100644
index 0000000..182ca33
--- /dev/null
+++ b/prosopopee/themes/material/static/css/encrypt.css
@@ -0,0 +1,72 @@
+.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;
+}
+
+#footer-enc {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
diff --git a/prosopopee/themes/material/static/css/style-page.css b/prosopopee/themes/material/static/css/style-page.css
index 071c962..9cd88e8 100644
--- a/prosopopee/themes/material/static/css/style-page.css
+++ b/prosopopee/themes/material/static/css/style-page.css
@@ -215,69 +215,3 @@ 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 1a6b118..0e98b31 100644
--- a/prosopopee/themes/material/templates/encrypted.html
+++ b/prosopopee/themes/material/templates/encrypted.html
@@ -1,8 +1,13 @@
+{% if gallery %}
+{% set pathstatic = ".." %}
+{% else %}
+{% set pathstatic = "." %}
+{% endif %}
 <!doctype html>
 <html class="staticrypt-html">
   <head>
     <meta charset="utf-8">
-    <title>{{ gallery.title }} · {{ settings.title }}</title>
+    <title>{% if gallery %}{{ gallery.title }} · {% endif %}{{ settings.title }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- do not cache this page -->
@@ -11,59 +16,43 @@
     <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"/>
-    <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"/>
+    <link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/encrypt.css"  media="screen,projection"/>
+    <link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/materialize.css"  media="screen,projection"/>
   </head>
-
   <body class="staticrypt-body">
-    <div class="staticrypt-page">
-      <div class="staticrypt-form">
-        <div class="staticrypt-instructions">
-          <p class="staticrypt-title">{{ gallery.title }}</p>
-        </div>
+  <script type="text/javascript" src="{{ pathstatic }}/static/js/crypto-js.min.js" charset="utf-8"></script>
+  <script>
+var form = '{{ form }}';
+var encryptedMsg = '{{ ciphertext }}';
 
-        <hr class="staticrypt-hr">
+if (sessionStorage.getItem("password")) {
+  var passphrase = sessionStorage.getItem("password");
+  var plainHTML = CryptoJS.AES.decrypt(encryptedMsg, passphrase).toString(CryptoJS.enc.Utf8);
+  document.write(plainHTML);
+  document.close();
+} else {
+  var plainHTML = CryptoJS.enc.Base64.parse(form).toString(CryptoJS.enc.Utf8);
+  document.write(plainHTML);
+  document.close();
+}
 
-        <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/>
-          <button class="btn waves-effect waves-light" type="submit" name="action">ENTER
-          </button>
-        </form>
-      </div>
-
-    </div>
-    <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>
 document.getElementById('staticrypt-form').addEventListener('submit', function(e) {
   e.preventDefault();
 
-  var passphrase = document.getElementById('staticrypt-password').value,
-  encryptedMsg = '{{ ciphertext }}';
+  var passphrase = document.getElementById('staticrypt-password').value;
 
   try{
     var plainHTML = CryptoJS.AES.decrypt(encryptedMsg, passphrase).toString(CryptoJS.enc.Utf8);
   }
   catch(err) {
-    document.getElementById("error").innerHTML = "Wrong keyword entry."
-      return;
+    document.getElementById("error").innerHTML = "Wrong keyword entry.";
+    return;
   }
 
+  sessionStorage.setItem("password", passphrase);
   document.write(plainHTML);
   document.close();
 });
-    </script>
+  </script>
   </body>
 </html>
diff --git a/prosopopee/themes/material/templates/form.html b/prosopopee/themes/material/templates/form.html
new file mode 100644
index 0000000..28e939a
--- /dev/null
+++ b/prosopopee/themes/material/templates/form.html
@@ -0,0 +1,29 @@
+<div class="staticrypt-page">
+  <div class="staticrypt-form">
+    <div class="staticrypt-instructions">
+      <p class="staticrypt-title">{% if gallery %}{{ gallery.title }}{% else %}{{ settings.title }}{% endif %}</p>
+    </div>
+
+    <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/>
+      <button class="btn waves-effect waves-light" type="submit" name="action">ENTER
+      </button>
+    </form>
+  </div>
+
+</div>
+<footer id="footer-enc" 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>
+
diff --git a/prosopopee/utils.py b/prosopopee/utils.py
index fcded92..d15a7fc 100644
--- a/prosopopee/utils.py
+++ b/prosopopee/utils.py
@@ -1,5 +1,13 @@
 import sys
+import base64
 
+from subprocess import check_output
+
+from path import Path
+
+from jinja2 import Environment, FileSystemLoader
+
+from builtins import str
 
 class bcolors:
     OKGREEN = '\033[92m'
@@ -25,3 +33,20 @@ def warning(logging, warning_message):
 def okgreen(logging, ok_message):
     sys.stderr.write("%s%s: %s%s" % (bcolors.OKGREEN, logging, bcolors.ENDC, ok_message))
     sys.stderr.write("\n")
+
+def makeform(template, settings, gallery_settings):
+    from_template = template.get_template("form.html")
+    form = base64.b64encode(from_template.render(settings=settings, gallery=gallery_settings).encode("Utf-8"))
+    return str(form, 'utf-8')
+
+def encrypt(password, template, gallery_path, settings, gallery_settings):
+    encrypted_template = template.get_template("encrypted.html")
+    index_plain = Path("build").joinpath(gallery_path, "index.html")
+    encrypted = check_output('cat %s | openssl enc -e -base64 -A -aes-256-cbc -pass pass:"%s"' % (index_plain, password), shell=True)
+    html = encrypted_template.render(
+        settings=settings,
+        form=makeform(template, settings, gallery_settings),
+        ciphertext=str(encrypted, 'utf-8'),
+        gallery=gallery_settings,
+    ).encode("Utf-8")
+    return html
diff --git a/setup.py b/setup.py
index 001aefd..a0e1141 100644
--- a/setup.py
+++ b/setup.py
@@ -12,7 +12,7 @@ except ImportError:
 
 
 setup(name='prosopopee',
-      version='0.6',
+      version='0.7',
       description='A static website generator that allows you to tell a story with your pictures',
       author='Laurent Peuch',
       long_description=read_md('README.md') + "\n\n\n" + open('docs/changelog.rst').read(),