diff --git a/customize.dist/about.html b/customize.dist/about.html
index 3ce8dee6e..17575ad8d 100644
--- a/customize.dist/about.html
+++ b/customize.dist/about.html
@@ -24,7 +24,7 @@
         </a>
     </span>
 
-    <span class="slogan" data-localization="main_slogan"></span>
+    <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
     <span class="right">
@@ -42,11 +42,6 @@
 </div>
 
 
-    <a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
-<!-- Thanks! http://tholman.com/github-corners/ -->
-
-
-
     <center>
         <noscript>
           <p>
diff --git a/customize.dist/bg3.jpg b/customize.dist/bg3.jpg
new file mode 100644
index 000000000..81783e652
Binary files /dev/null and b/customize.dist/bg3.jpg differ
diff --git a/customize.dist/contact.html b/customize.dist/contact.html
index 83973aa3f..09c08c5e3 100644
--- a/customize.dist/contact.html
+++ b/customize.dist/contact.html
@@ -24,7 +24,7 @@
         </a>
     </span>
 
-    <span class="slogan" data-localization="main_slogan"></span>
+    <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
     <span class="right">
@@ -42,11 +42,6 @@
 </div>
 
 
-    <a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
-<!-- Thanks! http://tholman.com/github-corners/ -->
-
-
-
     <center>
         <noscript>
           <p>
diff --git a/customize.dist/index.html b/customize.dist/index.html
index d972da5f1..794c1aea9 100644
--- a/customize.dist/index.html
+++ b/customize.dist/index.html
@@ -24,7 +24,7 @@
         </a>
     </span>
 
-    <span class="slogan" data-localization="main_slogan"></span>
+    <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
     <span class="right">
@@ -42,11 +42,6 @@
 </div>
 
 
-    <a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
-<!-- Thanks! http://tholman.com/github-corners/ -->
-
-
-
     <center>
         <noscript>
           <p>
@@ -61,8 +56,14 @@
 
 
 
+<a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+<!-- Thanks! http://tholman.com/github-corners/ -->
+
+
+
 <div id="main">
     <div id="overlay"></div>
+    <div id="main-container">
     <div id="data">
       <p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
 
@@ -76,25 +77,24 @@
             <a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
             <a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
             <br>
-            <button class="btn btn-default nologin" data-localization="login_nologin"></button>
+            <button class="btn btn-success nologin" data-localization="login_nologin"></button>
         </div>
 
     </div>
 
     <div id="userForm">
-        <center>
+        <!--<center>
             <h1 data-localization="form_title"></h1>
-        </center>
-        <label for="name" data-localization="form_username"></label><br>
+        </center>-->
+        <!--<label for="name" data-localization="form_username"></label>-->
         <input type="text" id="name" name="name" data-localization-placeholder="login_username" autofocus><br>
 
-        <label for="password" data-localization="form_password"></label><br>
+        <!--<label for="password" data-localization="form_password"></label>--><br>
         <input type="password" id="password" name="password" data-localization-placeholder="login_password"><br>
-
-        <input type="checkbox" id="rememberme" checked="checked"><label for="rememberme" data-localization="login_remember"></label><br>
-        <br>
+        <span class="remember"><input type="checkbox" id="rememberme" checked="checked"><label for="rememberme" data-localization="login_remember"></label></span><br>
         <button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
     </div>
+    </div>
 </div>
 
 
diff --git a/customize.dist/main.css b/customize.dist/main.css
index 954138b65..3784e3318 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -3,7 +3,7 @@
 */
 .alertify-logs > * {
   padding: 12px 48px;
-  color: #fafafa;
+  color: #111;
   font-weight: bold;
   font-size: large;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
@@ -18,7 +18,7 @@
 }
 .alertify-logs > *.success {
   background: #46E981;
-  color: #302B28;
+  color: #f5f5f5;
 }
 .alertify {
   position: fixed;
@@ -79,8 +79,8 @@
 }
 .alertify .dialog input:not(.form-control),
 .alertify .alert input:not(.form-control) {
-  background-color: #302B28;
-  color: #fafafa;
+  background-color: #f5f5f5;
+  color: #111;
   border: 0px;
   border-radius: 5px;
   margin-bottom: 15px;
@@ -112,8 +112,8 @@
   font-size: 14px;
   text-decoration: none;
   cursor: pointer;
-  color: #fafafa;
-  border: 1px solid #302B28;
+  color: #111;
+  border: 1px solid #f5f5f5;
   border-radius: 5px;
 }
 .alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,
@@ -124,7 +124,7 @@
 }
 .alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus,
 .alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus {
-  border: 1px dotted #302B28;
+  border: 1px dotted #f5f5f5;
 }
 .alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner,
 .alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner {
@@ -210,7 +210,7 @@
   height: 2.5em;
   display: inline-block;
   width: 100%;
-  background: #302B28;
+  background: #f5f5f5;
   border-top: 1px solid #444;
 }
 .top-bar a,
@@ -226,7 +226,7 @@
   display: block;
   margin-left: 10px;
   padding-top: 3px;
-  color: #fafafa;
+  color: #111;
 }
 .top-bar img,
 .bottom-bar img {
@@ -305,7 +305,7 @@
   bottom: 0px;
   left: 0px;
   right: 0px;
-  background: #302B28;
+  background: #f5f5f5;
   text-align: center;
   font-size: 1.5em;
 }
@@ -461,8 +461,8 @@
 html.cp,
 .cp body {
   font-size: .875em;
-  background-color: #302B28;
-  color: #fafafa;
+  background-color: #f5f5f5;
+  color: #111;
   font-family: Georgia,Cambria,serif;
   height: 100%;
 }
@@ -501,7 +501,7 @@ html.cp,
 .cp h4,
 .cp h5,
 .cp h6 {
-  color: #fafafa;
+  color: #111;
   font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
   -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
   -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
@@ -592,16 +592,18 @@ html.cp,
   background-color: #d8d8d8;
 }
 .cp #main {
-  background-image: url('/customize/bg2.jpg');
+  background-image: url('/customize/bg3.jpg');
   background-size: cover;
   background-position: center center;
 }
+.cp #main_other {
+  padding: 0 15vw;
+}
 .cp #main,
 .cp #main_other {
   position: absolute;
   left: 0;
   right: 0;
-  padding: 0 15vw;
   height: calc(100vh - 50px);
   margin: auto;
   font-size: medium;
@@ -614,40 +616,67 @@ html.cp,
   right: 0;
   bottom: 0;
   background-color: #000;
-  opacity: 0.2;
+  opacity: 0.3;
+}
+.cp #main #main-container,
+.cp #main_other #main-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%);
+  margin-left: auto;
+  margin-right: auto;
+  display: inline-block;
+  width: 1000px;
+  max-width: 90%;
 }
 .cp #main #data,
 .cp #main_other #data {
+  width: 600px;
+  max-width: 60%;
   color: #fff;
   padding: 15px;
   box-sizing: border-box;
   position: absolute;
+  display: inline-block;
   top: 50%;
+  left: 0;
   transform: translateY(-50%);
-  width: calc(100% - 450px - 30vw);
 }
 .cp #main #data p,
 .cp #main_other #data p {
   margin: 0;
   padding: 0;
+  font-size: 20px;
+  line-height: 1.5em;
+}
+.cp #main #data h2,
+.cp #main_other #data h2 {
+  font-weight: normal;
+  font-size: 48px;
+  line-height: 1.2em;
+  color: #fff;
 }
 .cp #main #data h5,
 .cp #main_other #data h5 {
+  font-size: 1em;
   color: #fff;
 }
 .cp #main #data #tryit,
 .cp #main_other #data #tryit {
   margin-top: 20px;
+  margin-bottom: 5px;
 }
 .cp #main #userForm,
 .cp #main_other #userForm {
   position: absolute;
+  right: 0;
   top: 50%;
   transform: translateY(-50%);
-  right: 15vw;
   margin-left: 50px;
   display: inline-block;
-  width: 400px;
+  width: 350px;
+  max-width: 35%;
   padding: 10px;
   box-sizing: border-box;
   font-family: lato, Helvetica, sans-serif;
@@ -664,23 +693,29 @@ html.cp,
 .cp #main_other #userForm [type="password"] {
   width: 100%;
 }
+.cp #main #userForm .remember,
+.cp #main_other #userForm .remember {
+  vertical-align: middle;
+  line-height: 28px;
+  height: 28px;
+  display: inline-block;
+  margin: 10px 0 20px 0;
+}
 .cp #main #userForm [type="checkbox"],
 .cp #main_other #userForm [type="checkbox"] {
-  vertical-align: sub;
+  vertical-align: text-top;
   margin: 0;
-  margin-top: 10px;
   margin-right: 5px;
 }
 .cp #main #userForm label,
 .cp #main_other #userForm label {
   margin-bottom: 0;
-  margin-top: 0.5em;
 }
 .cp #main #userForm button,
 .cp #main_other #userForm button {
+  font-weight: bold;
   width: 100%;
   margin: 2px 0px;
-  text-transform: uppercase;
   cursor: pointer;
 }
 .cp #main #userForm button.half,
@@ -697,7 +732,7 @@ html.cp,
 }
 .cp #main .buttons button,
 .cp #main_other .buttons button {
-  text-transform: uppercase;
+  font-weight: bold;
   cursor: pointer;
   margin-top: 10px;
 }
@@ -754,7 +789,7 @@ html.cp,
   cursor: pointer;
 }
 .cp tbody tr:nth-child(odd) {
-  background-color: #685d56;
+  background-color: #ffffff;
 }
 .cp tbody tr th:first-of-type {
   border-left: 0px;
@@ -765,7 +800,7 @@ html.cp,
 }
 .cp tbody tr th,
 .cp tbody tr td {
-  color: #fafafa;
+  color: #111;
 }
 .cp tbody tr th.remove,
 .cp tbody tr td.remove {
@@ -836,7 +871,7 @@ html.cp,
 .cp form.realtime table tr td div.text-cell input[disabled],
 .cp div.realtime table tr td div.text-cell input[disabled] {
   background-color: transparent;
-  color: #fafafa;
+  color: #111;
   font-weight: bold;
 }
 .cp form.realtime table tr td.checkbox-cell,
@@ -871,7 +906,7 @@ html.cp,
 .cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover {
   font-weight: bold;
   background-color: #FF0073;
-  color: #302B28;
+  color: #f5f5f5;
   display: block;
 }
 .cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after,
@@ -901,13 +936,13 @@ html.cp,
 .cp form.realtime table input[type="text"],
 .cp div.realtime table input[type="text"] {
   height: auto;
-  border: 1px solid #302B28;
+  border: 1px solid #f5f5f5;
   width: 80%;
 }
 .cp form.realtime table thead td,
 .cp div.realtime table thead td {
   padding: 0px 5px;
-  background: #4c443f;
+  background: #ffffff;
   border-radius: 20px 20px 0 0;
   text-align: center;
 }
@@ -924,7 +959,7 @@ html.cp,
 }
 .cp form.realtime table tbody .text-cell,
 .cp div.realtime table tbody .text-cell {
-  background: #4c443f;
+  background: #ffffff;
 }
 .cp form.realtime table tbody .text-cell input[type="text"],
 .cp div.realtime table tbody .text-cell input[type="text"] {
@@ -957,7 +992,7 @@ html.cp,
 .cp form.realtime table thead tr th input[type="text"][disabled],
 .cp div.realtime table thead tr th input[type="text"][disabled] {
   background-color: transparent;
-  color: #fafafa;
+  color: #111;
   font-weight: bold;
 }
 .cp form.realtime table thead tr th .remove,
@@ -1020,7 +1055,7 @@ html.cp,
   width: 100%;
   height: 100vh;
   display: none;
-  background-color: #302B28;
+  background-color: #f5f5f5;
 }
 .cp div.modal #content,
 .cp div#modal #content {
@@ -1111,7 +1146,7 @@ html.cp,
   width: 80%;
   height: 80%;
   margin: auto;
-  border: 1px solid #685d56;
+  border: 1px solid #ffffff;
   text-align: center;
 }
 .cp div.modal.shown,
@@ -1127,7 +1162,7 @@ html.cp,
 .cp div#modal table input {
   height: 100%;
   width: 90%;
-  border: 3px solid #302B28;
+  border: 3px solid #f5f5f5;
 }
 .cp div.modal table tfoot tr td,
 .cp div#modal table tfoot tr td {
diff --git a/customize.dist/privacy.html b/customize.dist/privacy.html
index 1560b3d3f..cde377a98 100644
--- a/customize.dist/privacy.html
+++ b/customize.dist/privacy.html
@@ -24,7 +24,7 @@
         </a>
     </span>
 
-    <span class="slogan" data-localization="main_slogan"></span>
+    <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
     <span class="right">
@@ -42,11 +42,6 @@
 </div>
 
 
-    <a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
-<!-- Thanks! http://tholman.com/github-corners/ -->
-
-
-
     <center>
         <noscript>
           <p>
diff --git a/customize.dist/src/build.js b/customize.dist/src/build.js
index 294dccbaf..c063b3333 100644
--- a/customize.dist/src/build.js
+++ b/customize.dist/src/build.js
@@ -40,7 +40,12 @@ var fragments = {};
     var source = swap(template, {
        topbar: fragments.topbar,
        fork: fragments.fork,
-       main: fragments[page],
+       main: swap(fragments[page], {
+           topbar: fragments.topbar,
+           fork: fragments.fork,
+           logo: fragments.logo,
+           noscript: fragments.noscript,
+       }),
        logo: fragments.logo,
        noscript: fragments.noscript,
     });
diff --git a/customize.dist/src/fragments/index.html b/customize.dist/src/fragments/index.html
index e73da7400..849a8d5ac 100644
--- a/customize.dist/src/fragments/index.html
+++ b/customize.dist/src/fragments/index.html
@@ -1,36 +1,38 @@
+{{fork}}
+
 <div id="main">
     <div id="overlay"></div>
-    <div id="data">
-      <p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
-
-        <center>
-          <h5 id="tryit" data-localization="tryIt"></h5>
-        </center>
-
-        <div id="buttons" class="buttons">
-            <a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
-            <a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
-            <a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
-            <a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
-            <br>
-            <button class="btn btn-default nologin" data-localization="login_nologin"></button>
-        </div>
-
-    </div>
+    <div id="main-container">
+        <div id="data">
+          <p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
+
+            <center>
+              <h5 id="tryit" data-localization="tryIt"></h5>
+            </center>
+
+            <div id="buttons" class="buttons">
+                <a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
+                <a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
+                <a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
+                <a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
+                <br>
+                <button class="btn btn-success nologin" data-localization="login_nologin"></button>
+            </div>
 
-    <div id="userForm">
-        <center>
-            <h1 data-localization="form_title"></h1>
-        </center>
-        <label for="name" data-localization="form_username"></label><br>
-        <input type="text" id="name" name="name" data-localization-placeholder="login_username" autofocus><br>
-
-        <label for="password" data-localization="form_password"></label><br>
-        <input type="password" id="password" name="password" data-localization-placeholder="login_password"><br>
+        </div>
 
-        <input type="checkbox" id="rememberme" checked="checked"><label for="rememberme" data-localization="login_remember"></label><br>
-        <br>
-        <button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
+        <div id="userForm">
+            <!--<center>
+                <h1 data-localization="form_title"></h1>
+            </center>-->
+            <!--<label for="name" data-localization="form_username"></label>-->
+            <input type="text" id="name" name="name" data-localization-placeholder="login_username" autofocus><br>
+
+            <!--<label for="password" data-localization="form_password"></label>--><br>
+            <input type="password" id="password" name="password" data-localization-placeholder="login_password"><br>
+            <span class="remember"><input type="checkbox" id="rememberme" checked="checked"><label for="rememberme" data-localization="login_remember"></label></span><br>
+            <button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
+        </div>
     </div>
 </div>
 
diff --git a/customize.dist/src/fragments/topbar.html b/customize.dist/src/fragments/topbar.html
index b9185804f..efe184864 100644
--- a/customize.dist/src/fragments/topbar.html
+++ b/customize.dist/src/fragments/topbar.html
@@ -5,7 +5,7 @@
         </a>
     </span>
 
-    <span class="slogan" data-localization="main_slogan"></span>
+    <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
     <span class="right">
diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less
index 0ce6af9c9..559fb74b3 100644
--- a/customize.dist/src/less/cryptpad.less
+++ b/customize.dist/src/less/cryptpad.less
@@ -37,7 +37,7 @@ body {
 
 a.github-corner > svg {
     fill: @cp-blue;
-    color: @base;
+    color: @old-base;
 }
 
 .lato {
@@ -150,10 +150,13 @@ body.html {
     }
 }
 #main {
-    background-image: url('/customize/bg2.jpg');
+    background-image: url('/customize/bg3.jpg');
     background-size: cover;
     background-position: center center;
 }
+#main_other {
+    padding: 0 @main-border-width;
+}
 #main, #main_other {
     #overlay {
         position: absolute;
@@ -162,48 +165,75 @@ body.html {
         right: 0;
         bottom: 0;
         background-color: #000;
-        opacity: 0.2;
+        opacity: 0.3;
     }
     position: absolute;
     left: 0;
     right: 0;
-    padding: 0 @main-border-width;
+    //padding: 0;
     height: ~"calc(100vh - 50px)";
     margin: auto;
     //margin-top: 100px;
 
     font-size: medium;
 
+    #main-container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%);
+        margin-left: auto;
+        margin-right: auto;
+        display: inline-block;
+        width: 1000px;
+        max-width: 90%;
+    }
+
     #data {
         p {
             margin: 0;
             padding: 0;
+            font-size: 20px;
+            line-height: 1.5em;
+        }
+        h2 {
+            font-weight: normal;
+            font-size: 48px;
+            line-height: 1.2em;
+            color: @main-color;
         }
         h5 {
+            font-size: 1em;
             color: @main-color;
         }
+        width: 600px;
+        max-width: 60%;
         color: @main-color;
         padding: 15px;
         box-sizing: border-box;
         position: absolute;
+        display: inline-block;
         top: 50%;
+        left: 0;
         transform: translateY(-50%);
-        width: ~"calc(100% - 450px - 30vw)";
+       // width: ~"calc(100% - 450px - 30vw)";
 //        background-color: @main-block-bg;
 
         #tryit {
             margin-top: 20px;
+            margin-bottom: 5px;
         }
     }
 
     #userForm {
         position: absolute;
+        right: 0;
         top: 50%;
         transform: translateY(-50%);
-        right: @main-border-width;
         margin-left: 50px;
         display: inline-block;
-        width: 400px;
+        width: 350px;
+        max-width: 35%;
 //        background-color: @main-block-bg;
         padding: 10px;
         box-sizing: border-box;
@@ -219,22 +249,31 @@ body.html {
             width: 100%;
         }
 
+        .remember {
+            vertical-align: middle;
+            line-height: 28px;
+            height: 28px;
+            display: inline-block;
+            margin: 10px 0 20px 0;
+        }
+
+
         [type="checkbox"] {
-            vertical-align: sub;
+            vertical-align: text-top;
             margin: 0;
-            margin-top: 10px;
+            //margin-top: 10px;
             margin-right: 5px;
         }
 
         label {
             margin-bottom: 0;
-            margin-top: 0.5em;
+            //margin-top: 0.5em;
         }
 
         button {
+            font-weight: bold;
             width: 100%;
             margin: 2px 0px;
-            text-transform: uppercase;
             cursor: pointer;
             &.half {
                 width: ~"calc(50% - 4px)";
@@ -248,7 +287,7 @@ body.html {
     .buttons {
         text-align: center;
         button {
-            text-transform: uppercase;
+            font-weight: bold;
             cursor: pointer;
             margin-top: 10px;
         }
diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less
index 9f43fdff5..4409c1f50 100644
--- a/customize.dist/src/less/variables.less
+++ b/customize.dist/src/less/variables.less
@@ -1,7 +1,8 @@
-@base: #302B28;
+@base: #f5f5f5;
 @light-base: lighten(@base, 20%);
 @less-light-base: lighten(@base, 10%);
-@fore: #fafafa;
+@fore: #111;
+@old-base: #302B28;
 
 @cp-green: #46E981;
 @cp-accent: lighten(@cp-green, 20%);
diff --git a/customize.dist/src/template.html b/customize.dist/src/template.html
index e53476738..f285d3f2c 100644
--- a/customize.dist/src/template.html
+++ b/customize.dist/src/template.html
@@ -19,8 +19,6 @@
 <body class="html">
     {{topbar}}
 
-    {{fork}}
-
 {{noscript}}
 
 {{main}}
diff --git a/customize.dist/terms.html b/customize.dist/terms.html
index 226239225..bae563aec 100644
--- a/customize.dist/terms.html
+++ b/customize.dist/terms.html
@@ -24,7 +24,7 @@
         </a>
     </span>
 
-    <span class="slogan" data-localization="main_slogan"></span>
+    <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
     <span class="right">
@@ -42,11 +42,6 @@
 </div>
 
 
-    <a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
-<!-- Thanks! http://tholman.com/github-corners/ -->
-
-
-
     <center>
         <noscript>
           <p>
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index 9fa43247a..a2e1cb607 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -239,7 +239,7 @@ define(function () {
 
     // login
     out.login_login = "Connexion";
-    out.login_nologin = "Utiliser une session anonyme";
+    out.login_nologin = "Documents récents de ce navigateur";
     out.login_register = "Inscription";
     out.logoutButton = "Déconnexion";
 
@@ -276,7 +276,8 @@ define(function () {
 
     // index.html
 
-    out.main_p1 = 'CryptPad est l\'éditeur collaboratif en temps réel <strong>zero knowledge</strong>. Le chiffrement est effectué depuis votre navigateur, ce qui protège les données contre le serveur, le cloud, et la NSA. La clé de chiffrement est stockée dans l\'<a href="https://fr.wikipedia.org/wiki/Identificateur_de_fragment">identifieur de fragment</a> de l\'URL qui n\'est jamais envoyée au serveur mais est accessible depuis javascript, de sorte qu\'en partageant l\'URL, vous donnez l\'accès au pad à ceux qui souhaitent participer.';
+    //out.main_p1 = 'CryptPad est l\'éditeur collaboratif en temps réel <strong>zero knowledge</strong>. Le chiffrement est effectué depuis votre navigateur, ce qui protège les données contre le serveur, le cloud, et la NSA. La clé de chiffrement est stockée dans l\'<a href="https://fr.wikipedia.org/wiki/Identificateur_de_fragment">identifieur de fragment</a> de l\'URL qui n\'est jamais envoyée au serveur mais est accessible depuis javascript, de sorte qu\'en partageant l\'URL, vous donnez l\'accès au pad à ceux qui souhaitent participer.';
+    out.main_p1 = "<h2>Collaborez en tout confiance</h2><br>Développez vos idées collaborativement grâce à des documents partagés en temps-réel, tout en gardant vos données personnelles invisibles, même pour nous, avec la technologie <strong>Zero Knowledge</strong>.";
     out.main_p2 = 'Ce projet utilise l\'éditeur visuel (WYSIWYG) <a href="http://ckeditor.com/">CKEditor</a>, l\'éditeur de code source <a href="https://codemirror.net/">CodeMirror</a>, et le moteur temps-réel <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a>.';
     out.main_howitworks = 'Comment ça fonctionne';
     out.main_howitworks_p1 = 'CryptPad utilise une variante de l\'algorithme d\'<a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> qui est capable de trouver un consensus distribué en utilisant <a href="https://bitcoin.org/bitcoin.pdf">une chaîne de bloc Nakamoto</a>, un outil popularisé par le <a href="https://fr.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. De cette manière, l\'algorithme évite la nécessité d\'utiliser un serveur central pour résoudre les conflits d\'édition de l\'Operational Transformation, et sans ce besoin de résolution des conflits le serveur peut rester ignorant du contenu qui est édité dans le pad.';
@@ -290,10 +291,10 @@ define(function () {
     out.table_created = 'Créé le';
     out.table_last = 'Dernier accès';
 
-    out.button_newpad = 'NOUVEAU DOCUMENT TEXTE';
-    out.button_newcode = 'NOUVELLE PAGE DE CODE';
-    out.button_newpoll = 'NOUVEAU SONDAGE';
-    out.button_newslide = 'NOUVELLE PRÉSENTATION';
+    out.button_newpad = 'Nouveau document texte';
+    out.button_newcode = 'Nouvelle page de code';
+    out.button_newpoll = 'Nouveay sondage';
+    out.button_newslide = 'Nouvelle présentation';
 
     out.form_title = "Tous vos pads, partout où vous allez !";
     out.form_username = "Nom d'utilisateur";
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 2f466f246..3ce99605a 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -274,7 +274,9 @@ define(function () {
     // index.html
 
     //out.main_p1 = 'CryptPad is the <strong>zero knowledge</strong> realtime collaborative editor.  Encryption carried out in your web browser protects the data from the server, the cloud, and the NSA.  The secret encryption key is stored in the URL <a href="https://en.wikipedia.org/wiki/Fragment_identifier">fragment identifier</a> which is never sent to the server but is available to javascript so by sharing the URL, you give authorization to others who want to participate.';
-    out.main_p1 = "Type quick documents with friends and colleagues.<br>With <strong>Zero Knowledge</strong> technology, the server doesn't know what you're doing.";
+    //out.main_p1 = "Type quick documents with friends and colleagues.<br>With <strong>Zero Knowledge</strong> technology, the server doesn't know what you're doing.";
+    out.main_p1 = "<h2>Collaborate in Confidence</h2><br> Grow your ideas together with shared documents while <strong>Zero Knowledge</strong> technology secures your privacy; even from us.";
+
     out.main_p2 = 'This project uses the <a href="http://ckeditor.com/">CKEditor</a> Visual Editor, <a href="https://codemirror.net/">CodeMirror</a>, and the <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a> realtime engine.';
     out.main_howitworks = 'How It Works';
     out.main_howitworks_p1 = 'CryptPad uses a variant of the <a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> algorithm which is able to find distributed consensus using a <a href="https://bitcoin.org/bitcoin.pdf">Nakamoto Blockchain</a>, a construct popularized by <a href="https://en.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. This way the algorithm can avoid the need for a central server to resolve Operational Transform Edit Conflicts and without the need for resolving conflicts, the server can be kept unaware of the content which is being edited on the pad.';
@@ -288,10 +290,10 @@ define(function () {
     out.table_created = 'Created';
     out.table_last = 'Last Accessed';
 
-    out.button_newpad = 'NEW RICH TEXT PAD';
-    out.button_newcode = 'NEW CODE PAD';
-    out.button_newpoll = 'NEW POLL';
-    out.button_newslide = 'NEW PRESENTATION';
+    out.button_newpad = 'New Rich Text pad';
+    out.button_newcode = 'New Code pad';
+    out.button_newpoll = 'New Poll';
+    out.button_newslide = 'New Presentation';
 
     out.form_title = "All your pads, everywhere!";
     out.form_username = "Username";