diff --git a/inc/user.css b/inc/user.css
deleted file mode 100644
index e69de29..0000000
diff --git a/shaarli_version.txt b/shaarli_version.txt
deleted file mode 100644
index 0664a8f..0000000
--- a/shaarli_version.txt
+++ /dev/null
@@ -1 +0,0 @@
-1.1.6
diff --git a/tpl/myShaarli/addlink.html b/tpl/myShaarli/addlink.html
index 71b0202..2f956e0 100644
--- a/tpl/myShaarli/addlink.html
+++ b/tpl/myShaarli/addlink.html
@@ -1,18 +1,24 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    {include="includes"}
-  </head>
-  <body>
-    <div id="pageheader">
-      {include="page.header"}
-      <div id="headerform">
-        <form method="get" name="addform" class="addform">
-          <input type="text" name="post" autofocus>
-          <input type="submit" value="Add link" class="bigbutton">
-        </form>
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+<div class="pure-g">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div id="addlink-form" class="page-form  page-form-light pure-u-lg-1-3 pure-u-22-24">
+    <h2 class="window-title">{"Shaare a new link"|t}</h2>
+    <form method="GET" action="#" name="addform" class="addform">
+      <div>
+        <input type="text" name="post" placeholder="{'URL or leave empty to post a note'|t}" class="autofocus">
       </div>
-    </div>
-    {include="page.footer"}
-  </body>
-</html>
\ No newline at end of file
+      <div>
+        <input type="submit" value="{'Add link'|t}">
+      </div>
+    </form>
+  </div>
+</div>
+{include="page.footer"}
+</body>
+</html>
diff --git a/tpl/myShaarli/changepassword.html b/tpl/myShaarli/changepassword.html
index 35e427f..2d15c92 100644
--- a/tpl/myShaarli/changepassword.html
+++ b/tpl/myShaarli/changepassword.html
@@ -1,26 +1,28 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    {include="includes"}
-  </head>
-  <body>
-    <div id="pageheader">
-      {include="page.header"}
-      <form method="post" name="changepasswordform" id="changepasswordform">
-        <p>
-          <label for="oldpassword">Old password:</label>
-          <input type="password" name="oldpassword" id="oldpassword" autofocus/>
-        </p>
-        <p>
-          <label for="setpassword">New password:</label>
-          <input type="password" name="setpassword" id="setpassword">
-        </p>
-        <p>
-          <input type="hidden" name="token" value="{$token}">
-          <input type="submit" name="Save" value="Save password" class="bigbutton">
-        </p>
-      </form>
-    </div>
-    {include="page.footer"}
-  </body>
-</html>
\ No newline at end of file
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+<div class="pure-g">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div id="addlink-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-22-24">
+    <h2 class="window-title">{"Change password"|t}</h2>
+    <form method="POST" action="#" name="changepasswordform" id="changepasswordform">
+      <div>
+        <input type="password" name="oldpassword" placeholder="{'Current password'|t}" class="autofocus">
+      </div>
+      <div>
+        <input type="password" name="setpassword" placeholder="{'New password'|t}">
+      </div>
+      <input type="hidden" name="token" value="{$token}">
+      <div>
+        <input type="submit" value="{'Change'|t}">
+      </div>
+    </form>
+  </div>
+</div>
+{include="page.footer"}
+</body>
+</html>
diff --git a/tpl/myShaarli/changetag.html b/tpl/myShaarli/changetag.html
index a5f7e97..6606c4f 100644
--- a/tpl/myShaarli/changetag.html
+++ b/tpl/myShaarli/changetag.html
@@ -1,67 +1,40 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    {include="includes"}
-    {if="empty($GLOBALS['disablejquery'])"}
-    <script src="inc/jquery.min.js#"></script>
-    <script src="inc/jquery-ui.min.js#"></script>
-    {/if}
-  </head>
-  <body>
-    <div id="pageheader">
-      {include="page.header"}
-      <form method="post" name="changetag" id="editlinkform">
-        <fieldset>
-          <legend>
-            Rename tag
-          </legend>
-          <p>
-            <label for="">Old tag :</label>
-            <input type="text" name="fromtag" class="fromtag" autofocus>
-            (Case sensitive)
-          </p>
-          <p>
-            <label>New tag :</label>
-            <input type="text" name="totag" class="fromtag">
-          </p>
-          <p class="submitButton">
-            <input type="submit" name="renametag" value="Rename tag" class="bigbutton">
-          </p>
-        </fieldset>
-        <fieldset>
-          <legend>
-            Delete tag
-          </legend>
-          <p>
-            <label for="">Tag :</label>
-            <input type="text" name="tagToDelete" class="fromtag">
-            (Case sensitive)
-          </p>
-          <p class="submitButton">
-            <input type="hidden" name="token" value="{$token}">
-            <input type="submit" name="deletetag" value="Delete tag" class="bigbutton" onClick="return confirmDeleteTag();">
-          </p>
-        </fieldset>
-      </form>
-    </div>
-    {include="page.footer"}
-    {if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn()) && empty($GLOBALS['disablejquery'])"}
-    <script>
-      $(document).ready(function() {
-        $('.fromtag').autocomplete({
-          source : '{$source}?ws=singletag',
-          minLength : 1
-        });
-        function confirmDeleteTag() {
-          var agree = confirm("Are you sure you want to delete this tag from all links ?");
-          if (agree) {
-            return true;
-          } else {
-            return false;
-          }
-        }
-      });
-    </script>
-    {/if}
-  </body>
-</html>
\ No newline at end of file
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+<div class="pure-g">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div id="addlink-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-22-24">
+    <h2 class="window-title">{"Manage tags"|t}</h2>
+    <form method="POST" action="#" name="changetag" id="changetag">
+      <div>
+        <input type="text" name="fromtag" placeholder="{'Tag'|t}" value="{$fromtag}"
+               list="tagsList" autocomplete="off" class="awesomplete autofocus" data-minChars="1">
+        <datalist id="tagsList">
+          {loop="$tags"}<option>{$key}</option>{/loop}
+        </datalist>
+      </div>
+      <div>
+        <input type="text" name="totag" placeholder="{'New name'|t}"
+               list="toTagsList" autocomplete="off" class="awesomplete" data-minChars="1">
+        <datalist id="toTagsList">
+          {loop="$tags"}<option>{$key}</option>{/loop}
+        </datalist>
+      </div>
+      <div><i class="fa fa-info-circle"></i> {'Case sensitive'|t}</div>
+      <input type="hidden" name="token" value="{$token}">
+      <div>
+        <input type="submit" value="{'Rename'|t}" name="renametag">
+        <input type="submit" value="{'Delete'|t}" name="deletetag" class="button button-red confirm-delete">
+      </div>
+    </form>
+
+    <p>{'You can also edit tags in the'|t} <a href="?do=taglist&sort=usage">{'tag list'|t}</a>.</p>
+  </div>
+</div>
+{include="page.footer"}
+</body>
+</html>
diff --git a/tpl/myShaarli/configure.html b/tpl/myShaarli/configure.html
index 68a44f2..a63c7ad 100644
--- a/tpl/myShaarli/configure.html
+++ b/tpl/myShaarli/configure.html
@@ -1,146 +1,256 @@
 <!DOCTYPE html>
 <html>
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
 
-    <head>
-        {include="includes"}
-        <link type="text/css" rel="stylesheet" href="myShaarli.css?version={$version|urlencode}" />
-    </head>
+{$ratioLabel='5-12'}
+{$ratioLabelMobile='7-8'}
+{$ratioInput='7-12'}
+{$ratioInputMobile='1-8'}
 
-    <body>
-        <div id="pageheader">
-            {include="page.header"} {$timezone_js}
+<form method="POST" action="#" name="configform" id="configform">
+  <div class="pure-g">
+    <div class="pure-u-lg-1-8 pure-u-1-24"></div>
+    <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-complete">
+      <h2 class="window-title">{'Configure'|t}</h2>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-label">
+            <label for="title">
+              <span class="label-name">Shaarli {'title'|t}</span>
+            </label>
+          </div>
         </div>
-        <div>
-            <form method="post" action="" name="configform" id="configform">
-                <ul class="tabs">
-                    <li>
-                        <input type="radio" checked name="tabs" id="tab1">
-                        <label class="tabsLabel" for="tab1">&#9658; General</label>
-                        <div id="tab-content1" class="tab-content">
-                            <p>
-                                <label for="title">Page title :</label>
-                                <input type="text" name="title" id="title" value="{$title}" autofocus>
-                            </p>
-                            <p>
-                                <label for="titleLink">Title link :</label>
-                                <input type="text" name="titleLink" id="titleLink" value="{$titleLink}">
-                            </p>
-                            <p>
-                                <label for="contactLink">Contact link in footer: </label>
-                                <input type="text" name="contactLink" id="contactLink" value="{$GLOBALS['config']['contactLink']}" />
-                                <span>Example : http://example.com/contact.php or mailo:contact@example.com</span>
-                            </p>
-                            <p>
-                                <label>Timezone : </label>
-                                {$timezone_form}
-                            </p>
-                            <p>
-                                <label for="redirector">Redirector : </label>
-                                <input type="text" name="redirector" id="redirector" value="{$redirector}"> (e.g. <i>http://anonym.to/?</i> will mask the HTTP_REFERER)
-                            </p>
-                            <p>
-                                <label for="enableCache">Enable local cache : </label>
-                                <input type="checkbox" name="enableCache" id="enableCache" {if="!empty($GLOBALS['config']['ENABLE_LOCALCACHE'])"}checked{/if}/>
-                            </p>
-                        </div>
-                    </li>
-                    <li>
-                        <input type="radio" name="tabs" id="tab2">
-                        <label class="tabsLabel" for="tab2">&#9658; Security</label>
-                        <div id="tab-content2" class="tab-content">
-                            <p>
-                                <label for="disablesessionprotection">Security :</label>
-                                <input type="checkbox" name="disablesessionprotection" id="disablesessionprotection" {if="!empty($GLOBALS['disablesessionprotection'])"}checked{/if}>
-                                <label for="disablesessionprotection">&nbsp;Disable session cookie hijacking protection (Check this if you get disconnected often or if your IP address changes often.)</label>
-                            </p>
-                            <p>
-                                <label for="banAfter">Ban after : </label>
-                                <input type="text" name="banAfter" id="banAfter" value="{$GLOBALS['config']['BAN_AFTER']}" />
-                            </p>
-                            <p>
-                                <label for="banDuration">Ban time : </label>
-                                <input type="text" name="banDuration" id="banDuration" value="{$GLOBALS['config']['BAN_DURATION']}" /> in second
-                            </p>
-                            <p>
-                                <label for="updateCheck">Update :</label>
-                                <input type="checkbox" name="updateCheck" id="updateCheck" {if="!empty($GLOBALS['config']['ENABLE_UPDATECHECK'])"}checked{/if}/>
-                                <label for="updateCheck">&nbsp;Notify me when a new release is ready</label>
-                            </p>
-                        </div>
-                    </li>
-                    <li>
-                        <input type="radio" name="tabs" id="tab3">
-                        <label class="tabsLabel" for="tab3">&#9658; Display</label>
-                        <div id="tab-content3" class="tab-content">
-                            <p>
-                                <label for="theme">Theme : </label>
-                                <select name="theme" id="theme">
-                                    {loop="themes"}
-                                    <option {if="$GLOBALS['config']['THEME']==$value"}selected{/if} value="{$value}">{$value|ucfirst}</option>
-                                    {/loop}
-                                </select>
-                            </p>
-                            <p>
-                                <label for="linkPerPage">Link per page : </label>
-                                <input type="text" name="linkPerPage" id="linkPerPage" value="{$GLOBALS['config']['LINKS_PER_PAGE']}" />
-                            </p>
-                            <p>
-                                <label for="hideTimestamps">Hide timestamps : </label>
-                                <input type="checkbox" name="hideTimestamps" id="hideTimestamps" {if="!empty($GLOBALS['config']['HIDE_TIMESTAMPS'])"}checked{/if}/>
-                            </p>
-                            <p>
-                                <label for="dateFormat">Date Format : </label>
-                                <input type="text" name="dateFormat" id="dateFormat" value="{$GLOBALS['config']['DATE_FORMAT']}" />
-                                <label>See <a href="http://php.net/manual/en/function.strftime.php">PHP documentation</a></label>
-                            </p>
-                        </div>
-                    </li>
-                    <li>
-                        <input type="radio" name="tabs" id="tab4">
-                        <label class="tabsLabel" for="tab4">&#9658; Extra</label>
-                        <div id="tab-content4" class="tab-content">
-                            <p>
-                                <label for="privateLinkByDefault">New link:</label>
-                                <input type="checkbox" name="privateLinkByDefault" id="privateLinkByDefault" {if="!empty($GLOBALS['privateLinkByDefault'])"}checked{/if}/>
-                                <label for="privateLinkByDefault">&nbsp;All new link are private by default</label>
-                            </p>
-                            <p>
-                                <label for="enableMarkdown">Enable Markdown : </label>
-                                <input type="checkbox" name="enableMarkdown" id="enableMarkdown" {if="!empty($GLOBALS['config']['ENABLE_MARKDOWN'])"}checked{/if}/>
-                            </p>
-                            <p>
-                                <label for="enableThumbnails">Enable thumbnail : </label>
-                                <input type="checkbox" name="enableThumbnails" id="enableThumbnails" {if="!empty($GLOBALS['config']['ENABLE_THUMBNAILS'])"}checked{/if}/>
-                            </p>
-                            <p>
-                                <label for="externalThumbshot">External thumbnailer : </label>
-                                <input type="text" name="externalThumbshot" id="externalThumbshot" value="{$GLOBALS['config']['externalThumbshot']}">
-                            </p>
-                            <p>
-                                <label for="enableFavicon">Enable favicon : </label>
-                                <input type="checkbox" name="enableFavicon" id="enableFavicon" {if="!empty($GLOBALS['config']['ENABLE_FAVICON'])"}checked{/if}/>
-                            </p>
-                            <p>
-                                <label for="wallabagUrl">Wallabag URL : </label>
-                                <input type="text" name="wallabagUrl" id="wallabagUrl" value="{$GLOBALS['config']['WALLABAG_URL']}">
-                            </p>
-                            <p>
-                                <label for="wallabagVersion">Wallabag version : </label>
-                                <select name="wallabagVersion" id="wallabagVersion">
-                                    <option {if="$GLOBALS['config']['WALLABAG_VERSION']===1"}selected{/if} value="1">v1</option>
-                                    <option {if="$GLOBALS['config']['WALLABAG_VERSION']===2"}selected{/if} value="2">v2</option>
-                                </select>
-                            </p>
-                        </div>
-                    </li>
-                </ul>
-                <p>
-                    <input type="hidden" name="token" value="{$token}">
-                    <input type="submit" name="Save" value="Save config" class="bigbutton">
-                </p>
-            </form>
+        <div class="pure-u-lg-7-12 pure-u-1">
+          <div class="form-input">
+            <input type="text" name="title" id="title" size="50" value="{$title}">
+          </div>
         </div>
-        {include="page.footer"}
-    </body>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-label">
+            <label for="titleLink">
+              <span class="label-name">{'Home link'|t}</span><br>
+              <span class="label-desc">{'Default value'|t}: ?</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-1">
+          <div class="form-input">
+            <input type="text" name="titleLink" id="titleLink" size="50" value="{$titleLink}">
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-label">
+            <label for="titleLink">
+              <span class="label-name">{'Theme'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-1">
+          <div class="form-input">
+            <select name="theme" id="theme" class="align">
+              {loop="$theme_available"}
+                <option value="{$value}"
+                  {if="$value===$theme"}
+                    selected="selected"
+                  {/if}
+                >
+                  {$value|ucfirst}
+                </option>
+              {/loop}
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-label">
+            <label for="language">
+              <span class="label-name">{'Language'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-1">
+          <div class="form-input">
+            <select name="language" id="language" class="align">
+              {loop="$languages"}
+                <option value="{$key}"
+                      {if="$key===$language"}
+                      selected="selected"
+                      {/if}
+                >
+                  {$value}
+                </option>
+              {/loop}
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
+          <div class="form-label">
+            <label>
+              <span class="label-name">{'Timezone'|t}</span><br>
+              <span class="label-desc">{'Continent'|t} &middot; {'City'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-1 ">
+          <div class="form-input">
+            <div class="timezone">
+              <select id="continent" name="continent">
+                {loop="$continents"}
+                  {if="$key !== 'selected'"}
+                    <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
+                      {$value}
+                    </option>
+                  {/if}
+                {/loop}
+              </select>
+              <select id="city" name="city">
+                {loop="$cities"}
+                  {if="$key !== 'selected'"}
+                    <option value="{$value.city}"
+                            {if="$cities.selected === $value.city"}selected{/if}
+                            data-continent="{$value.continent}">
+                      {$value.city}
+                    </option>
+                  {/if}
+                {/loop}
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="clear"></div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} ">
+          <div class="form-label">
+            <label for="disablesessionprotection">
+              <span class="label-name">{'Disable session cookie hijacking protection'|t}</span><br>
+               <span class="label-desc">
+                 {'Check this if you get disconnected or if your IP address changes often'|t}
+               </span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile} ">
+          <div class="form-input">
+            <input type="checkbox" name="disablesessionprotection" id="disablesessionprotection"
+                   {if="$session_protection_disabled"}checked{/if}>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} ">
+          <div class="form-label">
+            <label for="privateLinkByDefault">
+              <span class="label-name">{'Private links by default'|t}</span><br>
+              <span class="label-desc">{'All new links are private by default'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile} ">
+          <div class="form-input">
+            <input type="checkbox" name="privateLinkByDefault" id="privateLinkByDefault"
+                   {if="$private_links_default"}checked{/if}/>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} ">
+          <div class="form-label">
+            <label for="enableRssPermalinks">
+              <span class="label-name">{'RSS direct links'|t}</span><br>
+              <span class="label-desc">{'Check this to use direct URL instead of permalink in feeds'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile} ">
+          <div class="form-input">
+            <input type="checkbox" name="enableRssPermalinks" id="enableRssPermalinks"
+                 {if="$enable_rss_permalinks"}checked{/if}/>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
+          <div class="form-label">
+            <label for="hidePublicLinks">
+              <span class="label-name">{'Hide public links'|t}</span><br>
+              <span class="label-desc">{'Do not show any links if the user is not logged in'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
+          <div class="form-input">
+            <input type="checkbox" name="hidePublicLinks" id="hidePublicLinks"
+                   {if="$hide_public_links"}checked{/if}/>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
+          <div class="form-label">
+            <label for="hidePublicLinks">
+              <span class="label-name">{'Check updates'|t}</span><br>
+              <span class="label-desc">{'Notify me when a new release is ready'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
+          <div class="form-input">
+            <input type="checkbox" name="updateCheck" id="updateCheck"
+                 {if="$enable_update_check"}checked{/if}/>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
+          <div class="form-label">
+            <label for="enableApi">
+              <span class="label-name">{'Enable REST API'|t}</span><br>
+              <span class="label-desc">{'Allow third party software to use Shaarli such as mobile application'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
+          <div class="form-input">
+            <input type="checkbox" name="enableApi" id="enableApi"
+                 {if="$api_enabled"}checked{/if}/>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-label">
+            <label for="apiSecret">
+              <span class="label-name">{'API secret'|t}</span><br>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-input">
+            <input type="text" name="apiSecret" id="apiSecret" size="50" value="{$api_secret}">
+          </div>
+        </div>
+      </div>
+      <div class="center">
+        <input type="submit" value="{'Save'|t}" name="save">
+      </div>
+    </div>
+  </div>
+  <input type="hidden" name="token" value="{$token}">
+</form>
 
+{include="page.footer"}
+</body>
 </html>
+
diff --git a/tpl/myShaarli/daily.html b/tpl/myShaarli/daily.html
index e011d63..29d845d 100644
--- a/tpl/myShaarli/daily.html
+++ b/tpl/myShaarli/daily.html
@@ -1,63 +1,113 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}</head>
+<head>
+  {include="includes"}
+</head>
 <body>
-<div id="pageheader">{include="page.header"}</div>
-<div class="daily">
-    <div class="dailyAbout">
-      All links of one day<br>in a single page.<br>
-	  {if="$previousday"} <a href="?do=daily&day={$previousday}"><b>&lt;</b>Previous day</a>{else}<b>&lt;</b>Previous day{/if}
-	  -
-	  {if="$nextday"}<a href="?do=daily&day={$nextday}">Next day<b>&gt;</b></a>{else}Next day<b>&gt;</b>{/if}
-      <br><br>
-	  <a href="?do=dailyrss" title="1 RSS entry per day"><img src="images/feed-icon-14x14.png#" width="14" height="14" style="position:relative;top:3px; margin-right:4px;">Daily RSS Feed</a>
+{include="page.header"}
+
+<div class="pure-g">
+  <div class="pure-u-lg-1-6 pure-u-1-24"></div>
+  <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor" id="daily">
+    <h2 class="window-title">
+      {'The Daily Shaarli'|t}
+      <a href="?do=dailyrss" title="{'1 RSS entry per day'|t}"><i class="fa fa-rss"></i></a>
+    </h2>
+
+    <div id="plugin_zone_start_daily" class="plugin_zone">
+      {loop="$plugin_start_zone"}
+        {$value}
+      {/loop}
     </div>
-    <div class="dailyTitle"><img src="images/floral_left.png#" width="51" height="50" class="nomobile"> The Daily Shaarli <img src="images/floral_right.png#" width="51" height="50" class="nomobile"></div>
-    <div class="dailyDate"><span class="nomobile">&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;</span> {$day} <span class="nomobile">&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;</span></div>
-    <div style="clear:both;"></div>
+
+    <div class="daily-about">
+
+      <div class="pure-g">
+        <div class="pure-u-lg-1-3 pure-u-1 center">
+          {if="$previousday"}
+            <a href="?do=daily&amp;day={$previousday}">
+              <i class="fa fa-arrow-left"></i>
+              {'Previous day'|t}
+            </a>
+          {/if}
+        </div>
+        <div class="daily-desc pure-u-lg-1-3 pure-u-1 center">
+          {'All links of one day in a single page.'|t}
+        </div>
+        <div class="pure-u-lg-1-3 pure-u-1 center">
+          {if="$nextday"}
+            <a href="?do=daily&amp;day={$nextday}">
+              {'Next day'|t}
+              <i class="fa fa-arrow-right"></i>
+            </a>
+          {/if}
+        </div>
+      </div>
+      <div>
+        <h3 class="window-subtitle">{function="format_date($dayDate, false)"}</h3>
+
+        <div id="plugin_zone_about_daily" class="plugin_zone">
+          {loop="$daily_about_plugin"}
+            {$value}
+          {/loop}
+        </div>
+      </div>
+    </div>
+
 
     {if="$linksToDisplay"}
-        <div id="daily_col1">
-        {loop="col1"}
-        <div class="dailyEntry">
-            <div style="float:right;position:relative;top:-1px;"><a href="?{$value.linkdate|smallHash}"><img src="images/squiggle2.png#" width="25" height="26" title="permalink" alt="permalink"></a></div>
-            {if="$value.tags"}<div class="dailyEntryTags">{loop="value.taglist"}{$value|htmlspecialchars} - {/loop}</div>{/if}
-            <div class="dailyEntryTitle"><a href="{$value.url}">{$value.title|htmlspecialchars}</a></div>
-            {if="$value.thumbnail"}<div class="dailyEntryThumbnail">{$value.thumbnail}</div>{/if}
-            <div class="dailyEntryDescription">{$value.formatedDescription}</div>
-        </div>
+      <div class="pure-g">
+        {loop="$cols"}
+          {if="isset($value[0])"}
+            <div class="pure-u-lg-1-3 pure-u-1">
+              {loop="value"}
+                {$link=$value}
+                <div class="daily-entry">
+                  <div class="daily-entry-title center">
+                    <a href="?{$link.shorturl}" title="{'Permalink'|t}">
+                      <i class="fa fa-link"></i>
+                    </a>
+                    <a href="{$link.real_url}">{$link.title}</a>
+                  </div>
+                  {$thumb=thumbnail($value.url)}
+                  {if="$thumb!=false"}
+                    <div class="daily-entry-thumbnail">{$thumb}</div>
+                  {/if}
+                  <div class="daily-entry-description">{$link.formatedDescription}</div>
+                  {if="$link.tags"}
+                    <div class="daily-entry-tags center">
+                      {loop="link.taglist"}
+                        <span class="label label-tag" title="Add tag">
+                          {$value}
+                        </span>
+                      {/loop}
+                    </div>
+                  {/if}
+                  <div class="dailyEntryFooter">
+                    {loop="$link.link_plugin"}
+                      {$value}
+                    {/loop}
+                  </div>
+                </div>
+              {/loop}
+            </div>
+          {/if}
         {/loop}
-        </div>
-
-        <div id="daily_col2">
-        {loop="col2"}
-        <div class="dailyEntry">
-            <div style="float:right;position:relative;top:-1px;"><a href="?{$value.linkdate|smallHash}"><img src="images/squiggle2.png#" width="25" height="26" title="permalink" alt="permalink"></a></div>
-            {if="$value.tags"}<div class="dailyEntryTags">{loop="value.taglist"}{$value|htmlspecialchars} - {/loop}</div>{/if}
-            <div class="dailyEntryTitle"><a href="{$value.url}">{$value.title|htmlspecialchars}</a></div>
-            {if="$value.thumbnail"}<div class="dailyEntryThumbnail">{$value.thumbnail}</div>{/if}
-            <div class="dailyEntryDescription">{$value.formatedDescription}</div>
-        </div>
-        {/loop}
-        </div>
-
-        <div id="daily_col3">
-        {loop="col3"}
-        <div class="dailyEntry">
-            <div style="float:right;position:relative;top:-1px;"><a href="?{$value.linkdate|smallHash}"><img src="images/squiggle2.png#" width="25" height="26" title="permalink" alt="permalink"></a></div>
-            {if="$value.tags"}<div class="dailyEntryTags">{loop="value.taglist"}{$value|htmlspecialchars} - {/loop}</div>{/if}
-            <div class="dailyEntryTitle"><a href="{$value.url}">{$value.title|htmlspecialchars}</a></div>
-            {if="$value.thumbnail"}<div class="dailyEntryThumbnail">{$value.thumbnail}</div>{/if}
-            <div class="dailyEntryDescription">{$value.formatedDescription}</div>
-        </div>
-        {/loop}
-        </div>
+      </div>
     {else}
-         <div style="text-align:center; padding:40px 0px 90px 0px;">No articles on this day.</div>
+      <div class="dailyNoEntry">No articles on this day.</div>
     {/if}
-    <div style="clear:both;"></div>
-    <div style="text-align:center; padding-bottom:20px;"><img src="images/squiggle_closing.png#" width="66" height="61" alt="-"></div>
+
+    <div class="clear"></div>
+
+    <div id="plugin_zone_end_picwall" class="plugin_zone">
+      {loop="$plugin_end_zone"}
+        {$value}
+      {/loop}
+    </div>
+  </div>
 </div>
 {include="page.footer"}
 </body>
-</html>
\ No newline at end of file
+</html>
+
diff --git a/tpl/myShaarli/dailyrss.html b/tpl/myShaarli/dailyrss.html
index 436e1cd..b14a385 100644
--- a/tpl/myShaarli/dailyrss.html
+++ b/tpl/myShaarli/dailyrss.html
@@ -1,8 +1,16 @@
-{loop="links"}
-	<h3><a href="{$value.url}">{$value.title|htmlspecialchars}</a></h3>
-	<small>{if="!$GLOBALS['config']['HIDE_TIMESTAMPS']"}{$value.localdate|htmlspecialchars} - {/if}{if="$value.tags"}{$value.tags|htmlspecialchars}{/if}<br>
-	{$value.url|htmlspecialchars}</small><br>
-	{if="$value.thumbnail"}{$value.thumbnail}{/if}<br>
-	{if="$value.description"}{$value.formatedDescription}{/if}
-	<br><br><hr>
-{/loop}
\ No newline at end of file
+<item>
+    <title>{$title} - {function="strftime('%A %e %B %Y', $daydate)"}</title>
+    <guid>{$absurl}</guid>
+    <link>{$absurl}</link>
+    <pubDate>{$rssdate}</pubDate>
+    <description><![CDATA[
+        {loop="links"}
+        	<h3><a href="{$value.url}">{$value.title}</a></h3>
+        	<small>{if="!$hide_timestamps"}{function="strftime('%c', $value.timestamp)"} - {/if}{if="$value.tags"}{$value.tags}{/if}<br>
+        	{$value.url}</small><br>
+        	{if="$value.thumbnail"}{$value.thumbnail}{/if}<br>
+        	{if="$value.description"}{$value.formatedDescription}{/if}
+        	<br><br><hr>
+        {/loop}
+    ]]></description>
+</item>
diff --git a/tpl/myShaarli/editlink.html b/tpl/myShaarli/editlink.html
index ef4eb7f..d03fd72 100644
--- a/tpl/myShaarli/editlink.html
+++ b/tpl/myShaarli/editlink.html
@@ -1,84 +1,80 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    {include="includes"}
-    {if="empty($GLOBALS['disablejquery'])"}
-    <script src="inc/jquery.min.js#"></script>
-    <script src="inc/jquery-ui.min.js#"></script>
-    {/if}
-  </head>
-  <body
-  {if condition="$link.title==''"}onload="document.linkform.lf_title.focus();"
-  {elseif condition="$link.description==''"}onload="document.linkform.lf_description.focus();"
-  {else}onload="document.linkform.lf_tags.focus();"{/if} >
-    <div id="pageheader">
-      {if="$source !== 'firefoxsocialapi'"}
-        {include="page.header"}
+<head>
+  {include="includes"}
+</head>
+<body>
+  {include="page.header"}
+  <div id="editlinkform" class="pure-g">
+    <div class="pure-u-lg-1-5 pure-u-1-24"></div>
+    <form method="post" name="linkform" class="page-form pure-u-lg-3-5 pure-u-22-24 page-form page-form-light">
+      <h2 class="window-title">
+        {if="!$link_is_new"}{'Edit'|t}{/if}
+        {'Shaare'|t}
+      </h2>
+      <input type="hidden" name="lf_linkdate" value="{$link.linkdate}">
+      {if="isset($link.id)"}
+        <input type="hidden" name="lf_id" value="{$link.id}">
       {/if}
-      <div id="editlinkform">
-        <form method="post" name="linkform">
-          <p>
-            <label for="lf_url">URL</label>
-            <input type="text" id="lf_url" name="lf_url" value="{$link.url|htmlspecialchars}">
-          </p>
-          <p>
-            <label for="lf_title">Title</label>
-            <input type="text" id="lf_title" name="lf_title" value="{$link.title|htmlspecialchars}">
-          </p>
-          <p>
-            <label for="lf_description">Description</label><a href="doc/markdown.php" id="help"><img src="images/help_icon.png#" alt="help icon"/></a>
-            <textarea id="lf_description" name="lf_description" rows="4" cols="25">{$link.description|htmlspecialchars}</textarea>
-          </p>
-          <p>
-            <label for="lf_tags">Tags</label>
-            <input type="text" id="lf_tags" name="lf_tags" value="{$link.tags|htmlspecialchars}">
-          </p>
-          <p>
-            <label for="lf_via">Origine</label>
-            <input type="text" id="lf_via" name="lf_via" value="{$link.via|htmlspecialchars}">
-          </p>
-          {if condition="($link_is_new && $GLOBALS['privateLinkByDefault']==true) || $link.private == true"}
-          <p>
-            <input type="checkbox" checked="checked" name="lf_private" id="lf_private">
-            &nbsp;<label for="lf_private">Private</label>
-          </p>
-          {else}
-          <p>
-            <input type="checkbox"  name="lf_private" id="lf_private">
-            &nbsp;<label for="lf_private">Private</label>
-          </p>
-          {/if}
-          <p class="submitButton">
-            <input type="hidden" id="lf_linkdate" name="lf_linkdate" value="{$link.linkdate}">
-            <input type="submit" value="Save" name="save_edit" class="bigbutton">
-            <input type="submit" value="Cancel" name="cancel_edit" class="bigbutton">
-            {if condition="!$link_is_new"}
-            <input type="submit" value="Delete" name="delete_link" class="bigbutton" onClick="return confirmDeleteLink();">
-            {/if}
-            <input type="hidden" name="token" value="{$token}">
-            {if condition="$http_referer"}
-            <input type="hidden" name="returnurl" value="{$http_referer|htmlspecialchars}">
-            {/if}
-          </p>
-        </form>
+      {if="!$link_is_new"}<div class="created-date">{'Created:'|t} {$link.created|format_date}</div>{/if}
+      <div>
+        <label for="lf_url">{'URL'|t}</label>
       </div>
-    </div>
-    {if="$source !== 'firefoxsocialapi'"}
-      {include="page.footer"}
-    {/if}
-    {if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn()) && empty($GLOBALS['disablejquery'])"}
-    <script>
-      $(document).ready(function() {
-        $('#lf_tags').autocomplete({
-          source : '{$source}?ws=tags',
-          minLength : 1
-        });
-        $("#help").click(function() {
-          window.open("doc/markdown.php", "myWindow","scrollbars=1, width=400, height=400");
-          return false;
-        });
-      });
-    </script>
-    {/if}
-  </body>
-</html>
\ No newline at end of file
+      <div>
+        <input type="text" name="lf_url" id="lf_url" value="{$link.url}" class="lf_input autofocus">
+      </div>
+      <div>
+      <label for="lf_title">{'Title'|t}</label>
+      </div>
+      <div>
+        <input type="text" name="lf_title" id="lf_title" value="{$link.title}" class="lf_input autofocus">
+      </div>
+      <div>
+        <label for="lf_description">{'Description'|t}</label>
+      </div>
+      <div>
+        <textarea name="lf_description" id="lf_description" class="autofocus">{$link.description}</textarea>
+      </div>
+      <div>
+        <label for="lf_tags">{'Tags'|t}</label>
+      </div>
+      <div>
+        <input type="text" name="lf_tags" id="lf_tags" value="{$link.tags}" class="lf_input autofocus"
+          data-list="{loop="$tags"}{$key}, {/loop}" data-multiple data-autofirst autocomplete="off" >
+      </div>
+
+      <div>
+        <input type="checkbox"  name="lf_private" id="lf_private"
+        {if="($link_is_new && $default_private_links || $link.private == true)"}
+          checked="checked"
+        {/if}>
+        &nbsp;<label for="lf_private">{'Private'|t}</label>
+      </div>
+
+      <div id="editlink-plugins">
+        {loop="$edit_link_plugin"}
+          {$value}
+        {/loop}
+      </div>
+
+
+      <div class="submit-buttons center">
+        <input type="submit" name="save_edit" class="" id="button-save-edit"
+               value="{if="$link_is_new"}{'Save'|t}{else}{'Apply Changes'|t}{/if}">
+        {if="!$link_is_new"}
+        <a href="?delete_link&amp;lf_linkdate={$link.id}&amp;token={$token}"
+           title="" name="delete_link" class="button button-red confirm-delete">
+          {'Delete'|t}
+        </a>
+        {/if}
+      </div>
+
+      <input type="hidden" name="token" value="{$token}">
+      {if="$http_referer"}
+        <input type="hidden" name="returnurl" value="{$http_referer}">
+      {/if}
+    </form>
+  </div>
+  {include="page.footer"}
+</body>
+</html>
diff --git a/tpl/myShaarli/export.html b/tpl/myShaarli/export.html
index 5e41a52..af1d6e3 100644
--- a/tpl/myShaarli/export.html
+++ b/tpl/myShaarli/export.html
@@ -1,28 +1,68 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    {include="includes"}
-  </head>
-  <body>
-    <div id="pageheader">
-      {include="page.header"}
-      <div id="toolsdiv">
-        <ul>
-          <li>
-            <a href="?do=export&what=all">Export all <span>: Export all links</span></a>
-          </li>
-          <li>
-            <a href="?do=export&what=public">Export public <span>: Export public links only</span></a>
-          </li>
-          <li>
-            <a href="?do=export&what=private">Export private <span>: Export private links only</span></a>
-          </li>
-        </ul>
-        <div class="clearFix">
-          &nbsp;
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+
+<form method="GET" action="#" name="exportform" id="exportform">
+  <div class="pure-g">
+    <div class="pure-u-lg-1-4 pure-u-1-24"></div>
+    <div class="pure-u-lg-1-2 pure-u-22-24 page-form page-form-complete">
+      <div>
+        <h2 class="window-title">{"Export Database"|t}</h2>
+      </div>
+      <input type="hidden" name="do" value="export">
+      <input type="hidden" name="token" value="{$token}">
+
+      <div class="pure-g">
+        <div class="pure-u-lg-1-2 pure-u-1">
+          <div class="form-label">
+            <label><span class="label-name">{'Selection'|t}</span></label>
+          </div>
+        </div>
+        <div class="pure-u-lg-1-2 pure-u-1">
+          <div class="radio-buttons">
+            <div>
+              <input type="radio" name="selection" value="all" checked="checked">
+              {'All'|t}
+            </div>
+            <div>
+              <input type="radio" name="selection" value="private">
+              {'Private'|t}
+            </div>
+            <div>
+              <input type="radio" name="selection" value="public">
+              {'Public'|t}
+            </div>
+          </div>
         </div>
       </div>
+
+      <div class="pure-g">
+        <div class="pure-u-lg-1-2 pure-u-7-8">
+          <div class="form-label">
+            <label for="prepend_note_url">
+              <span class="label-name">{'Prepend note permalinks with this Shaarli instance\'s URL'|t}</span><br>
+              <span class="label-desc">{'Useful to import bookmarks in a web browser'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-1-2 pure-u-1-8">
+          <div class="form-input">
+            <input type="checkbox" name="prepend_note_url" id="prepend_note_url">
+          </div>
+        </div>
+      </div>
+
+      <div class="center">
+        <input type="submit" value="{'Export'|t}">
+      </div>
     </div>
-    {include="page.footer"}
-  </body>
-</html>
\ No newline at end of file
+  </div>
+</form>
+
+{include="page.footer"}
+</body>
+</html>
diff --git a/tpl/myShaarli/import.html b/tpl/myShaarli/import.html
index 8dc1739..000a50a 100644
--- a/tpl/myShaarli/import.html
+++ b/tpl/myShaarli/import.html
@@ -1,33 +1,86 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    {include="includes"}
-  </head>
-  <body onload="document.uploadform.filetoupload.focus();">
-    <div id="pageheader">
-      {include="page.header"}
-      <div id="uploaddiv">
-        Import Netscape html bookmarks (as exported from Firefox/Chrome/Opera/delicious/diigo...) (Max: {$maxfilesize|htmlspecialchars} bytes).
-        <form method="post" action="?do=upload" enctype="multipart/form-data" name="uploadform" id="uploadform">
-          <p>
-            <input type="file" name="filetoupload" size="80">
-          </p>
-          <p>
-            <input type="checkbox" name="private" id="private">
-            <label for="private">&nbsp;Import all links as private</label>
-          </p>
-          <p>
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+
+<form method="POST" action="?do=import" enctype="multipart/form-data" name="uploadform" id="uploadform">
+  <div class="pure-g">
+    <div class="pure-u-lg-1-4 pure-u-1-24"></div>
+    <div class="pure-u-lg-1-2 pure-u-22-24 page-form page-form-complete">
+      <div>
+        <h2 class="window-title">{"Import Database"|t}</h2>
+      </div>
+
+      <input type="hidden" name="token" value="{$token}">
+      <div class="center" id="import-field">
+        <input type="hidden" name="MAX_FILE_SIZE" value="{$maxfilesize}">
+        <input type="file" name="filetoupload">
+        <p><br>{'Maximum size allowed:'|t} <strong>{$maxfilesizeHuman}</strong></p>
+      </div>
+
+      <div class="pure-g">
+        <div class="pure-u-lg-1-3 pure-u-1">
+          <div class="form-label">
+            <label><span class="label-name">{'Visibility'|t}</span></label>
+          </div>
+        </div>
+        <div class="pure-u-lg-2-3 pure-u-1">
+          <div class="radio-buttons">
+            <div>
+              <input type="radio" name="privacy" value="default" checked="checked">
+              {'Use values from the imported file, default to public'|t}
+            </div>
+            <div>
+              <input type="radio" name="privacy" value="private">
+              {'Import all bookmarks as private'|t}
+            </div>
+            <div>
+              <input type="radio" name="privacy" value="public">
+              {'Import all bookmarks as public'|t}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="pure-g">
+        <div class="pure-u-lg-1-3 pure-u-7-8">
+          <div class="form-label">
+            <label for="overwrite">
+              <span class="label-name">{'Overwrite existing bookmarks'|t}</span><br>
+              <span class="label-desc">{'Duplicates based on URL'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-2-3 pure-u-1-8">
+          <div class="form-input">
             <input type="checkbox" name="overwrite" id="overwrite">
-            <label for="overwrite">&nbsp;Overwrite existing links</label>
-          </p>
-          <p>
-            <input type="hidden" name="MAX_FILE_SIZE" value="{$maxfilesize|htmlspecialchars}">
-            <input type="hidden" name="token" value="{$token}">
-            <input type="submit" name="import_file" value="Import" class="bigbutton">
-          </p>
-        </form>
+          </div>
+        </div>
+      </div>
+
+      <div class="pure-g">
+        <div class="pure-u-lg-1-3 pure-u-1">
+          <div class="form-label">
+            <label for="default_tags"><span class="label-name">{'Add default tags'|t}</span></label>
+          </div>
+        </div>
+        <div class="pure-u-lg-2-3 pure-u-1">
+          <div class="form-input">
+            <input type="text" name="default_tags" id="default_tags" placeholder="{'Tag'|t}">
+          </div>
+        </div>
+      </div>
+
+      <div class="center">
+        <input type="submit" name="import_file" value="{'Import'|t}">
       </div>
     </div>
-    {include="page.footer"}
-  </body>
-</html>
\ No newline at end of file
+  </div>
+</form>
+
+{include="page.footer"}
+</body>
+</html>
diff --git a/tpl/myShaarli/includes.html b/tpl/myShaarli/includes.html
index f538185..53d3fc7 100644
--- a/tpl/myShaarli/includes.html
+++ b/tpl/myShaarli/includes.html
@@ -1,13 +1,22 @@
 <title>{$pagetitle}</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="format-detection" content="telephone=no" />
-<meta name="viewport" content="width=device-width,initial-scale=1.0" />
-<link rel="alternate" type="application/rss+xml" href="{$feedurl}?do=rss{$searchcrits}#" title="RSS Feed" />
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="alternate" type="application/atom+xml" href="{$feedurl}?do=atom{$searchcrits}#" title="ATOM Feed" />
-<!--<link href="images/favicon.ico#" rel="shortcut icon" type="image/x-icon" />-->
-<link rel="icon" type="image/png" sizes="128x128" href="images/favicon_128.png#" />
-<link rel="icon" type="image/png" sizes="64x64" href="images/favicon_64.png#" />
-<link rel="icon" type="image/png" sizes="32x32" href="images/favicon_32.png#" />
-<link rel="icon" type="image/png" sizes="16x16" href="images/favicon_16.png#" />
-<link type="text/css" rel="stylesheet" href="myShaarli.css?version={$version|urlencode}" />
-<link rel="search" type="application/opensearchdescription+xml" href="?do=opensearch#" title="Shaarli search - {$shaarlititle|htmlspecialchars}" />
+<link rel="alternate" type="application/rss+xml" href="{$feedurl}?do=rss{$searchcrits}#" title="RSS Feed" />
+<link href="img/favicon.png" rel="shortcut icon" type="image/png" />
+<link href="img/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
+<link type="text/css" rel="stylesheet" href="css/pure.min.css?v={$version_hash}" />
+<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css?v={$version_hash}">
+<link type="text/css" rel="stylesheet" href="css/pure-extras.css?v={$version_hash}">
+<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css?v={$version_hash}" />
+<link type="text/css" rel="stylesheet" href="inc/awesomplete.css?v={$version_hash}#" />
+<!--<link type="text/css" rel="stylesheet" href="css/shaarli.css?v={$version_hash}" />-->
+<link type="text/css" rel="stylesheet" href="css/myShaarli.css?v={$version_hash}" />
+{if="is_file('data/user.css')"}
+  <link type="text/css" rel="stylesheet" href="data/user.css#" />
+{/if}
+{loop="$plugins_includes.css_files"}
+  <link type="text/css" rel="stylesheet" href="{$value}?v={$version_hash}#"/>
+{/loop}
+<link rel="search" type="application/opensearchdescription+xml" href="?do=opensearch#" title="Shaarli search - {$shaarlititle}"/>
diff --git a/tpl/myShaarli/install.html b/tpl/myShaarli/install.html
index 05fd482..6199b33 100644
--- a/tpl/myShaarli/install.html
+++ b/tpl/myShaarli/install.html
@@ -1,43 +1,168 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    {include="includes"}{$timezone_js}
-  </head>
-  <body>
-    <div id="logo" title="Share your links !"></div>
-    <div id="pageheader">
-      <form method="post" action="?" name="installform" id="configform">
-        <p>
-          <h3>It looks like it's the first time you run Shaarli. Please configure it:</h3>
-        </p>
-        <p>
-          <label>Login : </label>
-          <input type="text" name="setlogin" autofocus="autofocus"/>
-        </p>
-        <p>
-          <label>Password : </label>
-          <input type="password" name="setpassword"/>
-        </p>
-        <p>
-          {$timezone_html}
-        </p>
-        <p>
-          <label>Page title : </label>
-          <input type="text" name="title" />
-        </p>
-        <p>
-          <label>Update : </label>
-          <input type="checkbox" name="updateCheck" id="updateCheck" checked="checked"/>
-          <label for="updateCheck">&nbsp;Notify me when a new release is ready</label>
-        </p>
-        <p>
-          More option avaible in my Shaarli configuration page.
-        </p>
-        <p>
-          <input type="submit" name="Save" value="Save config" class="bigbutton">
-        </p>
-      </form>
+<head>
+  {include="includes"}
+</head>
+<body>
+
+{$ratioLabel='1-4'}
+{$ratioInput='3-4'}
+{$ratioLabelMobile='7-8'}
+{$ratioInputMobile='1-8'}
+
+<form method="POST" action="#" name="installform" id="installform">
+<div class="pure-g">
+  <div class="pure-u-lg-1-6 pure-u-1-24"></div>
+  <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-form-complete">
+    <h2 class="window-title">{'Install Shaarli'|t}</h2>
+
+    <div class="center">
+      {'It looks like it\'s the first time you run Shaarli. Please configure it.'|t}
     </div>
-    {include="page.footer"}
-  </body>
-</html>
\ No newline at end of file
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+        <div class="form-label">
+          <label for="username">
+            <span class="label-name">{'Username'|t}</span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1">
+        <div class="form-input">
+          <input type="text" name="setlogin" id="username">
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+        <div class="form-label">
+          <label for="password">
+            <span class="label-name">{'Password'|t}</span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1">
+        <div class="form-input">
+          <input type="password" name="setpassword" id="password">
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+        <div class="form-label">
+          <label for="title">
+            <span class="label-name">{'Shaarli title'|t}</span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1">
+        <div class="form-input">
+          <input type="text" name="title" id="title" placeholder="{'My links'|t}">
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+        <div class="form-label">
+          <label for="language">
+            <span class="label-name">{'Language'|t}</span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1">
+        <div class="form-input">
+          <select name="language" id="language" class="align">
+            {loop="$languages"}
+              <option value="{$key}">
+                {$value}
+              </option>
+            {/loop}
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+        <div class="form-label">
+          <label>
+            <span class="label-name">{'Timezone'|t}</span><br>
+            <span class="label-desc">{'Continent'|t} &middot; {'City'|t}</span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1">
+        <div class="form-input">
+          <div class="timezone">
+            <select id="continent" name="continent">
+              {loop="$continents"}
+                {if="$key !== 'selected'"}
+                  <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
+                    {$value}
+                  </option>
+                {/if}
+              {/loop}
+            </select>
+            <select id="city" name="city">
+              {loop="$cities"}
+                {if="$key !== 'selected'"}
+                  <option value="{$value.city}"
+                          {if="$cities.selected === $value.city"}selected{/if}
+                          data-continent="{$value.continent}">
+                    {$value.city}
+                  </option>
+                {/if}
+              {/loop}
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-7-8">
+        <div class="form-label">
+          <label for="update">
+            <span class="label-name">{'Check updates'|t}</span><br>
+            <span class="label-desc">
+              {'Notify me when a new release is ready'|t}
+            </span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1-8">
+        <div class="form-input">
+          <input type="checkbox" name="updateCheck" id="update" checked="checked">
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
+        <div class="form-label">
+          <label for="enableApi">
+            <span class="label-name">{'Enable REST API'|t}</span><br>
+            <span class="label-desc">{'Allow third party software to use Shaarli such as mobile application'|t}</span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
+        <div class="form-input">
+          <input type="checkbox" name="enableApi" id="enableApi" checked />
+        </div>
+      </div>
+    </div>
+
+    <div class="center">
+      <input type="submit" value="{'Install'|t}" name="Save">
+    </div>
+  </div>
+</div>
+</form>
+{include="page.footer"}
+</body>
+</html>
diff --git a/tpl/myShaarli/linklist.html b/tpl/myShaarli/linklist.html
index 63ca51e..c666e30 100644
--- a/tpl/myShaarli/linklist.html
+++ b/tpl/myShaarli/linklist.html
@@ -1,162 +1,273 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    {include="includes"}
-    {if="empty($GLOBALS['disablejquery'])"}
-    <script src="inc/jquery.min.js#"></script>
-    <script src="inc/jquery-ui.min.js#"></script>
-    {/if}
-  </head>
-  <body>
-    <div id="pageheader">
-      {include="page.header"}
-      <div id="headerform">
-        <form method="get" class="searchform" name="searchform">
-          <input type="text" id="searchform_value" name="searchterm" value="" placeholder="Search text"/>
-          <input type="submit" value="Search" class="bigbutton"/>
-        </form>
-        <form method="get" class="tagfilter" name="tagfilter">
-          <input type="text" name="searchtags" id="tagfilter_value" value="{loop="search_crits"}{$value|htmlspecialchars} {/loop}" placeholder="Filter by tag"/>
-          <input type="submit" value="Filter by tag" class="bigbutton"/>
-        </form>
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+
+<div class="linkcount pure-u-0 pure-u-lg-visible">
+  {if="!empty($linkcount)"}
+  <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
+  {if="$privateLinkcount>0"}
+  <br><span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
+  {/if}
+  {/if}
+</div>
+
+<input type="hidden" name="token" value="{$token}">
+
+<div id="search-linklist">
+
+  <form method="GET" class="pure-form searchform" name="searchform">
+    <input type="text" tabindex="1" name="searchterm" class="searchterm" placeholder="{'Search text'|t}"
+           {if="!empty($search_term)"}
+           value="{$search_term}"
+           {/if}
+    >
+    <input type="text" tabindex="2" name="searchtags" class="searchtags" placeholder="{'Filter by tag'|t}"
+           {if="!empty($search_tags)"}
+           value="{$search_tags}"
+           {/if}
+    autocomplete="off" data-multiple data-autofirst data-minChars="1"
+    data-list="{loop="$tags"}{$key}, {/loop}"
+    >
+    <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+  </form>
+</div>
+
+{loop="$plugins_header.fields_toolbar"}
+  <form
+    {loop="$value.attr"}
+      {$key}="{$value}"
+    {/loop}>
+    <div class="toolbar-plugin pure-u-lg-1">
+      {loop="$value.inputs"}
+        <input
+          {loop="$value"}
+          {$key}="{$value}"
+          {/loop}>
+      {/loop}
+    </div>
+  </form>
+{/loop}
+
+<div id="linklist">
+  <div id="link-count-block" class="pure-g">
+    <div class="pure-u-lg-2-24 pure-u-1-24"></div>
+    <div id="link-count-content" class="pure-u-lg-20-24 pure-u-22-24">
+      <div class="linkcount pure-u-lg-0 center">
+        {if="!empty($linkcount)"}
+        <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
+        {if="$privateLinkcount>0"}
+        &middot; <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
+        {/if}
+        {/if}
+      </div>
+
+      {include="linklist.paging"}
+
+      <div id="plugin_zone_start_linklist" class="plugin_zone">
+        {loop="$plugin_start_zone"}
+          {$value}
+        {/loop}
       </div>
     </div>
-    <div id="linklist">
-      {include="linklist.paging"}
-      {if="count($links)==0"}
-      <div id="searchcriteria" class="tags">
-        Nothing found.
+  </div>
+
+  {if="count($links)==0"}
+    <div id="search-result-block" class="pure-g pure-alert pure-alert-error search-result">
+      <div class="pure-u-2-24"></div>
+      <div id="search-result-content" class="pure-u-20-24">
+        <div id="searchcriteria">{'Nothing found.'|t}</div>
       </div>
-      {else}
-      {if="$search_type=='fulltext'"}
-      <div id="searchcriteria" class="tags">
-        {$result_count} results for <i>{$search_crits}</i>
+    </div>
+  {elseif="!empty($search_term) or $search_tags !== '' or !empty($visibility) or $untaggedonly"}
+    <div id="search-result-block" class="pure-g pure-alert pure-alert-success search-result">
+      <div class="pure-u-2-24"></div>
+      <div id="search-result-content" class="pure-u-20-24 search-result-main">
+        {function="sprintf(t('%s result', '%s results', $result_count), $result_count)"}
+        {if="!empty($search_term)"}
+          {'for'|t} <em><strong>{$search_term}</strong></em>
+        {/if}
+        {if="!empty($search_tags)"}
+          {$exploded_tags=explode(' ', $search_tags)}
+          {'tagged'|t}
+          {loop="$exploded_tags"}
+              <span class="label label-tag" title="{'Remove tag'|t}">
+                <a href="?removetag={function="urlencode($value)"}">{$value}<span class="remove"><i class="fa fa-times"></i></span></a>
+              </span>
+          {/loop}
+        {/if}
+        {if="!empty($visibility)"}
+          {'with status'|t}
+          <span class="label label-private">
+            {$visibility|t}
+          </span>
+        {/if}
+        {if="$untaggedonly"}
+          <span class="label label-private">
+            {'without any tag'|t}
+          </span>
+        {/if}
       </div>
-      {/if}
-      {if="$search_type=='tags'"}
-      <div id="searchcriteria" class="tags">
-        {$result_count} results for tags <i> {loop="search_crits"} <a href="?removetag={$value|htmlspecialchars}">{$value|htmlspecialchars} <span class="removeTag">x</span></a> {/loop}</i>
-      </div>
-      {/if}
-      {/if}
-      <ul class="linkList">
-        {loop="links"}
-        <li {if="$value.class"} class="{$value.class}"{/if} >
-          <!--<a name="{$value.linkdate|smallHash}" id="{$value.linkdate|smallHash}"></a>-->
-          {if="$GLOBALS['config']['ENABLE_THUMBNAILS']"}
-          <div class="thumbnail">
-            {$value.url|thumbnail}
-          </div>
-          {/if}
-          <div class="linkcontainer {if="$GLOBALS['config']['ENABLE_THUMBNAILS']"}linkcontainerThumb{/if}">
-            {if="isLoggedIn()"}
-            <div class="linkeditbuttons">
-              <form method="get" class="buttoneditform">
-                <input type="hidden" name="edit_link" value="{$value.linkdate}">
-                <input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit">
-              </form>
-              <br>
-              <form method="post" class="buttoneditform">
-                <input type="hidden" name="lf_linkdate" value="{$value.linkdate}">
-                <input type="hidden" name="token" value="{$token}">
-                <input type="hidden" name="delete_link">
-                <input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete" class="button_delete" onClick="return confirmDeleteLink();">
-              </form>
-            </div>
+    </div>
+  {/if}
+
+  <div id="linklist-loop-block" class="pure-g">
+    <div class="pure-u-lg-2-24 pure-u-1-24"></div>
+    <div id="linklist-loop-content" class="pure-u-lg-20-24 pure-u-22-24">
+      {ignore}Set translation here, for performances{/ignore}
+      {$strPrivate=t('Private')}
+      {$strEdit=t('Edit')}
+      {$strDelete=t('Delete')}
+      {$strFold=t('Fold')}
+      {$strEdited=t('Edited: ')}
+      {$strPermalink=t('Permalink')}
+      {$strPermalinkLc=t('permalink')}
+      {$strAddTag=t('Add tag')}
+      {ignore}End of translations{/ignore}
+      {loop="links"}
+        <div class="anchor" id="{$value.shorturl}"></div>
+
+        <div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
+          <div class="linklist-item-title">
+            {$thumb=thumbnail($value.url)}
+            {if="$thumb!=false"}
+              <div class="linklist-item-thumbnail">{$thumb}</div>
             {/if}
-            <h3 class="linktitle">{function="returnFavicon($value.url)"}<a href="{$redirector}{$value.url|htmlspecialchars}">{$value.title|htmlspecialchars}</a></h3>
-            {if="$value.description"}
-            <div class="linkdescription" {if condition="$search_type=='permalink'"}{/if}>
+
+            {if="isLoggedIn()"}
+              <div class="linklist-item-editbuttons">
+                {if="$value.private"}
+                  <span class="label label-private">{$strPrivate}</span>
+                {/if}
+              </div>
+            {/if}
+
+            <h2>
+              <a href="{$value.real_url}">
+                {if="strpos($value.url, $value.shorturl) === false"}
+                  <i class="fa fa-external-link"></i>
+                {else}
+                  <i class="fa fa-sticky-note"></i>
+                {/if}
+
+                <span class="linklist-link">{$value.title}</span>
+              </a>
+            </h2>
+          </div>
+
+          {if="$value.description"}
+            <div class="linklist-item-description">
               {$value.description}
             </div>
-            {/if}
-            {if condition="isset($value.via) && !empty($value.via)"}
-            <div>
-              <a href="{$value.via}">Origine => {$value.via|getJustDomain}</a>
-            </div>{/if}
-            {if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"}
-            <span class="linkdate linkBottom" title="Permalink"><a href="?{$value.linkdate|smallHash}">{function="ucfirst(htmlspecialchars($value.localdate))"} - permalink</a> - </span>
-            {else}
-            <span class="linkdate linkBottom" title="Short link here"><a href="?{$value.linkdate|smallHash}">permalink</a> - </span>
-            {/if}
-            <span class="linkarchive linkBottom"><a href="https://web.archive.org/web/{$value.url|htmlspecialchars}">Archive.org</a> - </span>
-            {if="$GLOBALS['config']['WALLABAG_URL'] && isLoggedIn() && $GLOBALS['config']['WALLABAG_VERSION']===1"}
-            <span class="linkWallabag linkBottom"><a href="{$GLOBALS['config']['WALLABAG_URL']}/?plainurl={$value.url|htmlspecialchars}">Save to Wallabag</a> - </span>
-            {/if}
-            {if="$GLOBALS['config']['WALLABAG_URL'] && isLoggedIn() && $GLOBALS['config']['WALLABAG_VERSION']===2"}
-            <span class="linkWallabag linkBottom"><a href="{$GLOBALS['config']['WALLABAG_URL']}/bookmarklet?url={$value.url|htmlspecialchars}">Save to Wallabag</a> - </span>
-            {/if}
-            <span><a href="http://qrfree.kaywa.com/?l=1&amp;s=8&d={$scripturl|urlencode}%3F{$value.linkdate|smallHash}"
-              onclick="showQrCode(this); return false;" class="qrcode" data-permalink="{$scripturl}?{$value.linkdate|smallHash}"><img src="images/qrcode.png#" title="QR-Code" alt="qrcode logo"></a></span> - <span class="linkurl" title="Short link">{$value.url|htmlspecialchars}</span>
-            <br>
+          {/if}
+
+          <div class="linklist-item-infos clear">
             {if="$value.tags"}
-            <div class="tags">
-              {loop="value.taglist"}<a href="?addtag={$value|urlencode}">{$value|htmlspecialchars}</a> {/loop}
-            </div>
+              <div class="linklist-item-tags">
+                <i class="fa fa-tags"></i>
+                {$tag_counter=count($value.taglist)}
+                {loop="value.taglist"}
+                  <span class="label label-tag" title="{$strAddTag}">
+                    <a href="?addtag={$value|urlencode}">{$value}</a>
+                  </span>
+                  {if="$tag_counter - 1 != $counter"}&middot;{/if}
+                {/loop}
+              </div>
             {/if}
+
+            <div class="linklist-item-infos-date-url-block pure-g">
+              <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1">
+                {if="isLoggedIn()"}
+                  <div class="linklist-item-infos-controls-group pure-u-0 pure-u-lg-visible">
+                    <span class="linklist-item-infos-controls-item ctrl-checkbox">
+                      <input type="checkbox" class="delete-checkbox" value="{$value.id}">
+                    </span>
+                    <span class="linklist-item-infos-controls-item ctrl-edit">
+                      <a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
+                    </span>
+                    <span class="linklist-item-infos-controls-item ctrl-delete">
+                      <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
+                         title="{$strDelete}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete">
+                        <i class="fa fa-trash"></i>
+                      </a>
+                    </span>
+                  </div>
+                {/if}
+                <a href="?{$value.shorturl}" title="{$strPermalink}">
+                  {if="!$hide_timestamps || isLoggedIn()"}
+                    {$updated=$value.updated_timestamp ? $strEdited. format_date($value.updated) : $strPermalink}
+                    <span class="linkdate" title="{$updated}">
+                      <i class="fa fa-clock-o"></i>
+                      {$value.created|format_date}
+                      {if="$value.updated_timestamp"}*{/if}
+                      &middot;
+                    </span>
+                  {/if}
+                  {$strPermalinkLc}
+                </a>
+
+                <div class="pure-u-0 pure-u-lg-visible">
+                  {if="isset($value.link_plugin)"}
+                    &middot;
+                    {$link_plugin_counter=count($value.link_plugin)}
+                    {loop="$value.link_plugin"}
+                      {$value}
+                      {if="$link_plugin_counter - 1 != $counter"}&middot;{/if}
+                    {/loop}
+                  {/if}
+                </div>
+              </div><div
+                {ignore}do not add space or line break between these div - Firefox issue{/ignore}
+                class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1">
+                <a href="{$value.real_url}" title="{$value.title}">
+                  <i class="fa fa-link"></i> {$value.url}
+                </a>
+                <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible">
+                  <a href="#" title="{$strFold}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
+                </div>
+              </div>
+              <div class="mobile-buttons pure-u-1 pure-u-lg-0">
+                {if="isset($value.link_plugin)"}
+                  {$link_plugin_counter=count($value.link_plugin)}
+                  {loop="$value.link_plugin"}
+                    {$value}
+                    {if="$link_plugin_counter - 1 != $counter"}&middot;{/if}
+                  {/loop}
+                {/if}
+                {if="isLoggedIn()"}
+                  &middot;
+                  <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
+                     title="{$strDelete}" class="delete-link confirm-delete">
+                    <i class="fa fa-trash"></i>
+                  </a>
+                  &middot;
+                  <a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
+                {/if}
+              </div>
+            </div>
           </div>
-          <span class="clearFix">&nbsp;</span>
-          </li>
-          {/loop}
-      </ul>
-      {include="linklist.paging"}
+        </div>
+      {/loop}
     </div>
-    {include="page.footer"}
-    <script>
-      $('#tagfilter_value').autocomplete({
-        source : '{$source}?ws=tags',
-        minLength : 1
-      });
-      // Remove any displayed QR-Code
-      function remove_qrcode() {
-        var elem = document.getElementById("permalinkQrcode");
-        if (elem)
-          elem.parentNode.removeChild(elem);
-        return false;
-      }
-      // Show the QR-Code of a permalink (when the QR-Code icon is clicked).
-      function showQrCode(caller,loading=false) {
-        // Dynamic javascript lib loading: We only load qr.js if the QR code icon is clicked:
-        if ( typeof (qr) == 'undefined')// Load qr.js only if not present.
-        {
-          if (!loading)// If javascript lib is still loading, do not append script to body.
-          {
-            var element = document.createElement("script");
-            element.src = "inc/qr.min.js";
-            document.body.appendChild(element);
-          }
-          setTimeout(function() {
-            showQrCode(caller, true);
-          }, 200);
-          // Retry in 200 milliseconds.
-          return false;
-        }
-        // Remove previous qrcode if present.
-        remove_qrcode();
-        // Build the div which contains the QR-Code:
-        var element = document.createElement('div');
-        element.id = "permalinkQrcode";
-        // Make QR-Code div commit sepuku when clicked:
-        if (element.attachEvent) {
-          element.attachEvent('onclick', 'this.parentNode.removeChild(this);');
-        }// Damn IE
-        else {
-          element.setAttribute('onclick', 'this.parentNode.removeChild(this);');
-        }
-        // Build the QR-Code:
-        var image = qr.image({
-          size : 8,
-          value : caller.dataset.permalink
-        });
-        if (image) {
-          element.appendChild(image);
-          element.innerHTML += "<br>Click to close";
-          caller.parentNode.appendChild(element);
-        } else {
-          element.innerHTML = "Your browser does not seem to be HTML5 compatible.";
-        }
-        return false;
-      }
-    </script>
-  </body>
+  </div>
+</div>
+
+  <div id="plugin_zone_end_linklist" class="plugin_zone">
+    {loop="$plugin_end_zone"}
+    {$value}
+    {/loop}
+  </div>
+
+<div id="linklist-paging-bottom-block" class="pure-g">
+  <div class="pure-u-lg-2-24 pure-u-1-24"></div>
+  <div id="linklist-paging-bottom-content" class="pure-u-lg-20-24 pure-u-22-24">
+    {include="linklist.paging"}
+  </div>
+</div>
+
+{include="page.footer"}
+</body>
 </html>
diff --git a/tpl/myShaarli/linklist.paging.html b/tpl/myShaarli/linklist.paging.html
index 27fe746..347b3d1 100644
--- a/tpl/myShaarli/linklist.paging.html
+++ b/tpl/myShaarli/linklist.paging.html
@@ -1,24 +1,61 @@
-<div class="paging">
-  {if="isLoggedIn()"}
-  <div class="paging_privatelinks">
-    <a href="?privateonly"> {if="$privateonly"} <img src="images/private_16x16_active.png#" width="16" height="16" title="Click to see all links" alt="Click to see all links"> {else} <img src="images/private_16x16.png#" width="16" height="16" title="Click to see only private links" alt="Click to see only private links"> {/if} </a>
-  </div>
-  {/if}
-  <div class="paging_linksperpage">
-    Links per page: <a href="?linksperpage=20">20</a><a href="?linksperpage=50">50</a><a href="?linksperpage=100">100</a>
-    <form method="GET" class="linksperpage">
-      <input type="text" name="linksperpage">
-    </form>
-  </div>
-  <div class="paginNavigation">
-    {if="$previous_page_url"}
-    <a href="{$previous_page_url}" class="paging_older">&#x25C4;Older</a>
-    {/if}
-    <div class="paging_current">
-      page {$page_current} / {$page_max}
+<div class="linklist-paging">
+  <div class="paging pure-g">
+    <div class="linklist-filters pure-u-1-3">
+      {if="isLoggedIn() or !empty($action_plugin)"}
+        <span class="linklist-filters-text pure-u-0 pure-u-lg-visible">
+          {'Filters'|t}
+        </span>
+        {if="isLoggedIn()"}
+        <a href="?privateonly" title="{'Filter private links'|t}"
+           class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
+        ><i class="fa fa-key"></i></a>
+        {/if}
+        <a href="?untaggedonly" title="{'Filter untagged links'|t}"
+           class={if="$untaggedonly"}"filter-on"{else}"filter-off"{/if}
+        ><i class="fa fa-tag"></i></a>
+        <a href="#" class="filter-off fold-all pure-u-lg-0" title="{'Fold all'|t}">
+          <i class="fa fa-chevron-up"></i>
+        </a>
+        {loop="$action_plugin"}
+          {$value.attr.class=isset($value.attr.class) ? $value.attr.class : ''}
+          {$value.attr.class=!empty($value.on) ? $value.attr.class .' filter-on' : $value.attr.class .' filter-off'}
+          <a
+            {loop="$value.attr"}
+              {$key}="{$value}"
+            {/loop}>
+            {$value.html}
+          </a>
+        {/loop}
+      {/if}
+    </div>
+
+
+    <div class="linklist-pages pure-u-1-3">
+      {if="$next_page_url"}
+        <a href="{$next_page_url}" class="paging_newer">
+          <i class="fa fa-arrow-circle-left"></i>
+        </a>
+      {/if}
+      {if="$page_max>1"}<span class="strong">{$page_current} / {$page_max}</span>{/if}
+      {if="$previous_page_url"}
+        <a href="{$previous_page_url}" class="paging_older">
+          <i class="fa fa-arrow-circle-right"></i>
+        </a>
+      {/if}
+
+    </div>
+
+    <div class="linksperpage pure-u-1-3">
+      <div class="pure-u-0 pure-u-lg-visible">{'Links per page'|t}</div>
+      <a href="?linksperpage=20">20</a>
+      <a href="?linksperpage=50">50</a>
+      <a href="?linksperpage=100">100</a>
+      <form method="GET" class="pure-u-0 pure-u-lg-visible">
+        <input type="text" name="linksperpage" placeholder="133">
+      </form>
+      <a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" title="{'Fold all'|t}">
+        <i class="fa fa-chevron-up"></i>
+      </a>
     </div>
-    {if="$next_page_url"}
-    <a href="{$next_page_url}" class="paging_newer">Newer&#x25BA;</a>
-    {/if}
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/tpl/myShaarli/loginform.html b/tpl/myShaarli/loginform.html
index 1cd3f2d..5777a21 100644
--- a/tpl/myShaarli/loginform.html
+++ b/tpl/myShaarli/loginform.html
@@ -1,37 +1,51 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    {include="includes"}
-  </head>
-  <body>
-    <div id="pageheader">
-      {include="page.header"}
-      <div id="headerform">
-        {if="!ban_canLogin()"}
-        You have been banned from login after too many failed attempts. Try later.
-        {else}
-        <form method="post" id="configform" class="configform">
-          <p>
-            <label for="login">Login :</label>
-            <input type="text" name="login" id="login" tabindex="1" autofocus />
-            <label for="password">Password :</label>
-            <input type="password" name="password" id="password" tabindex="2">
-          </p>
-          <p>
-            <input type="checkbox" name="longlastingsession" id="longlastingsession" tabindex="3">
-            <label for="longlastingsession">&nbsp;Stay signed in (Do not check on public computers)</label>
-          </p>
-          <p>
-            {if="$returnurl"}
-            <input type="hidden" name="returnurl" value="{$returnurl|htmlspecialchars}">
-            {/if}
-            <input type="hidden" name="token" value="{$token}">
-            <input type="submit" value="Login" class="bigbutton" tabindex="4" />
-          </p>
-        </form>
-        {/if}
-      </div>
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+{if="!ban_canLogin($conf)"}
+<div class="pure-g pure-alert pure-alert-error pure-alert-closable center">
+  <div class="pure-u-2-24"></div>
+  <div class="pure-u-20-24">
+    {'You have been banned after too many failed login attempts. Try again later.'|t}
+  </div>
+  <div class="pure-u-2-24">
+    <i class="fa fa-times pure-alert-close"></i>
+  </div>
+</div>
+{else}
+  <div class="pure-g">
+    <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+    <div id="login-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-22-24">
+      <form method="post" name="loginform">
+        <h2 class="window-title">{'Login'|t}</h2>
+        <div>
+          <input type="text" name="login" placeholder="{'Username'|t}"
+             {if="!empty($username)"}value="{$username}"{/if} class="autofocus" tabindex="20">
+        </div>
+        <div>
+          <input type="password" name="password" placeholder="{'Password'|t}" class="autofocus" tabindex="21">
+        </div>
+        <div class="remember-me">
+          <input type="checkbox" name="longlastingsession" id="longlastingsessionform"
+             {if="$remember_user_default"}checked="checked"{/if}
+             tabindex="22">
+          <label for="longlastingsessionform">{'Remember me'|t}</label>
+        </div>
+        <div>
+          <input type="submit" value="{'Login'|t}" class="bigbutton" tabindex="23">
+        </div>
+        <input type="hidden" name="token" value="{$token}">
+        {if="$returnurl"}<input type="hidden" name="returnurl" value="{$returnurl}">{/if}
+      </form>
     </div>
-    {include="page.footer"}
-  </body>
-</html>
\ No newline at end of file
+    <div class="pure-u-lg-1-3 pure-u-1-8"></div>
+  </div>
+{/if}
+
+{include="page.footer"}
+</body>
+</html>
+
diff --git a/tpl/myShaarli/myShaarli.css b/tpl/myShaarli/myShaarli.css
deleted file mode 100644
index 1f87a11..0000000
--- a/tpl/myShaarli/myShaarli.css
+++ /dev/null
@@ -1,1268 +0,0 @@
-html {
-  background: linear-gradient(#434343,#cdcdcd) no-repeat transparent;
-  box-sizing: border-box;
-  color: #000;
-  overflow-y: scroll;
-}
-
-body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
-  margin: 0;
-  padding: 0;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-fieldset, img {
-  border: 0;
-}
-
-fieldset {
-  border: 1px solid #CDCDCD;
-  border-radius: .3em;
-  margin: .3em 0;
-  padding: .3em;
-}
-
-address, caption, cite, code, dfn, em, strong, th, var, optgroup {
-  font-style: inherit;
-  font-weight: inherit;
-}
-
-del, ins {
-  text-decoration: line-through;
-}
-
-li {
-  list-style: none;
-}
-
-caption, th {
-  text-align: left;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  color: #111;
-  font-size: 100%;
-  font-weight: normal;
-  line-height: 1em;
-  margin-bottom: .5em;
-}
-
-q:before, q:after {
-  content: '';
-}
-
-abbr, acronym {
-  border: 0;
-  font-variant: normal;
-}
-
-sup {
-  top: -.5em;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -.25em;
-  vertical-align: baseline;
-}
-
-legend {
-  color: #FFFFFF;
-  font-weight: bolder;
-  margin: 0 0 0 .6em;
-  padding: 0 .3em;
-}
-
-input, button, textarea, select, optgroup, option {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-}
-
-input, button, textarea, select {
-  font-size: 100%;
-}
-
-body {
-  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
-  font-size: .8em;
-  word-wrap: break-word;
-}
-
-img {
-  border: 0;
-  max-width: 100%;
-  vertical-align: middle;
-}
-
-input, textarea {
-  background: linear-gradient(#dedede,#ffffff);
-  background-color: #dedede;
-  border: none;
-  border-radius: 5px 5px 5px 5px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-  color: #000;
-  padding: 5px;
-}
-
-h1 {
-  font-size: 2.5em;
-  font-style: italic;
-  font-weight: bold;
-  margin-bottom: 20px;
-}
-
-h2 {
-  font-size: 2em;
-}
-
-h3 {
-  font-size: 1.5em;
-}
-
-h4 {
-  font-size: 1.2em;
-}
-
-h5 {
-  font-size: 1em;
-}
-
-h6 {
-  font-size: .9em;
-}
-
-p {
-  margin: 1em 0;
-}
-
-blockquote {
-  border-left: .5em #EEE solid;
-  color: #666666;
-  margin: 1.2em;
-  padding-left: .3em;
-}
-
-hr {
-  border: 0;
-  border-bottom: 1px solid #eee;
-  border-top: 1px solid #aaa;
-  display: block;
-  height: 2px;
-  margin: 1em 0;
-  padding: 0;
-}
-
-pre, code, kbd, samp {
-  _font-family: 'courier new', monospace;
-  color: #000;
-  font-family: monospace, monospace;
-  font-size: .98em;
-}
-
-pre {
-  background-color: #f7f7f7;
-  padding: .3em;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-pre code {
-  border-radius: 3px;
-  overflow-x: auto;
-  white-space: normal;
-}
-
-ins {
-  background: #ff9;
-  color: #000;
-  text-decoration: none;
-}
-
-mark {
-  background: #ff0;
-  color: #000;
-  font-style: italic;
-  font-weight: bold;
-}
-
-sub, sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-ul, ol {
-  margin: 0;
-  padding: 0 0 0 2em;
-}
-
-li p:last-child {
-  margin-bottom: 0;
-}
-
-li p:first-child {
-  margin: 0.6em 0;
-}
-
-dd {
-  margin: 0 0 0 2em;
-}
-
-td {
-  vertical-align: top;
-}
-
-a, .linkdescription a {
-  color: #E28E3F;
-  transition: all 100ms ease-in-out;
-}
-
-.bigbutton {
-  background: linear-gradient(#c0c0c0,#ffffff);
-  background-color: #c0c0c0;
-  border-radius: 3px 3px 3px 3px;
-  border-style: outset;
-  border-width: 1px;
-  box-shadow: 0 1px 1px rgba(0,0,0,0.5);
-  color: #606060;
-  cursor: pointer;
-  height: 24px;
-  margin-left: 5px;
-  padding: 0 5px;
-}
-
-.smallbutton {
-  background: linear-gradient(#c0c0c0,#ffffff);
-  background-color: #c0c0c0;
-  border-radius: 3px 3px 3px 3px;
-  border-style: outset;
-  border-width: 1px;
-  box-shadow: 0 1px 1px rgba(0,0,0,0.5);
-  color: #606060;
-  cursor: pointer;
-  height: 20px;
-  margin-left: 5px;
-  padding: 0 5px;
-}
-
-.button_edit, .button_delete {
-  background: none;
-  border-radius: 0;
-  border-style: none;
-  border-width: 0;
-  box-shadow: none;
-  padding: 0;
-}
-
-.linkeditbuttons {
-  background-color: inherit;
-  border-radius: 0 6px 6px 0;
-  float: right;
-  margin-right: .3em;
-  padding: 0;
-  position: relative;
-}
-
-#logo {
-  background-image: url(../../images/logo_myShaarli.png);
-  background-repeat: no-repeat;
-  cursor: pointer;
-  float: left;
-  height: 45px;
-  margin: 0 10px;
-  width: 120px;
-}
-
-#pageheader {
-  background: linear-gradient(#333333,#111111);
-  background-color: #333333;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-  margin: auto;
-  padding: 0 0 5px;
-  width: auto;
-}
-
-#pageheader a {
-  background: linear-gradient(#333333,#000000);
-  background-color: #333333;
-  border-radius: 5px 5px 5px 5px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-  color: #A2DD42;
-  float: left;
-  margin: 10px 3px 3px;
-  padding: 5px;
-  text-decoration: none;
-}
-
-#linkcount {
-  color: #bbb;
-  float: right;
-  font-style: italic;
-  padding: .5em;
-  text-align: right;
-}
-
-#toolsdiv a {
-  font-weight: bold;
-}
-
-#toolsdiv a span {
-  color: #ffffff;
-  font-weight: normal;
-}
-
-.linksperpage, .tagfilter, .searchform, .addform {
-  align-content: flex-start;
-  align-items: flex-start;
-  background: linear-gradient(#dedede,#ffffff);
-  background-color: #dedede;
-  border: none;
-  border-radius: 5px 5px 5px 5px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-  color: #cecece;
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  margin: 0;
-  padding: .3em;
-  text-align: left;
-}
-
-.searchform input:nth-child(1), .tagfilter input:nth-child(1), .addform input:nth-child(1) {
-  align-self: stretch;
-  flex: 1 0 auto;
-  order: 1;
-  width: 1em;
-}
-
-.searchform input:nth-child(2), .tagfilter input:nth-child(2), .addform input:nth-child(2) {
-  align-self: stretch;
-  flex: 0 0 20%;
-  order: 2;
-}
-
-.searchform {
-  width: 70%;
-}
-
-.tagfilter {
-  margin-left: .3em;
-  width: 30%;
-}
-
-.linksperpage {
-  box-shadow: 0 0 0 rgba(0,0,0,0.5);
-  display: inline;
-  padding: 3px;
-}
-
-.linksperpage input, .tagfilter input, .searchform input, .addform input {
-  background: none;
-  border: none;
-  box-shadow: none;
-  color: #606060;
-  padding: 5px;
-}
-
-.linksperpage input {
-  width: 2em;
-}
-
-.tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
-  background: linear-gradient(#dedede,#ffffff);
-  background-color: #dedede;
-  border-radius: 5px 5px 5px 5px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-  cursor: pointer;
-  height: auto;
-  margin: 0;
-  padding: 0;
-}
-
-#shaarli_title {
-  font-style: italic;
-  font-weight: bold;
-  margin-top: 0;
-}
-
-#shaarli_title a {
-  color: #fff !important;
-}
-
-#pageheader a:visited {
-  color: #98C943;
-  text-decoration: none;
-}
-
-#pageheader a:hover {
-  color: #FFFFC9;
-  text-decoration: none;
-}
-
-#pageheader a:active {
-  color: #bbb;
-  text-decoration: none;
-}
-
-#searchcriteria {
-  background-color: #fff;
-  border-radius: .3em;
-  font-weight: bold;
-  padding: 4px 0 5px 5px;
-  margin: 1em 0 0 0;
-}
-
-.paging {
-  background-color: #777;
-  border-radius: .3em;
-  clear: both;
-  color: #ccc;
-  padding: 5px;
-  text-align: center;
-}
-
-.paging a:link {
-  color: #ccc;
-  text-decoration: none;
-  margin: 0 0.2em;
-}
-
-.paging a:visited {
-  color: #ccc;
-}
-
-.paging a:hover {
-  color: #FFFFC9;
-}
-
-.paging a:active {
-  color: #fff;
-}
-
-.paging_privatelinks {
-  float: left;
-}
-
-.paging_linksperpage {
-  float: right;
-}
-
-.paging_current {
-  color: #fff;
-  display: inline;
-}
-
-.paging_older {
-  margin-right: 15px;
-}
-
-.paging_newer {
-  margin-left: 15px;
-}
-
-.paginNavigation {
-  margin: 0 auto;
-  width: 50%;
-}
-
-#headerform {
-  clear: both;
-  color: #ffffff;
-  display: flex;
-  margin: auto;
-  max-width: 80%;
-  padding: 5px;
-  text-align: center;
-  white-space: nowrap;
-}
-
-#editlinkform {
-  clear: left;
-  color: #ffffff;
-  height: 100%;
-  margin: 0 auto;
-  padding: 0;
-  width: 80%;
-}
-
-#editlinkform p {
-  margin: .3em 0;
-}
-
-#editlinkform a {
-  background: none;
-  border-radius: none;
-  box-shadow: none;
-  float: none;
-  margin: 0;
-  padding: 0;
-}
-
-.submitButton {
-  text-align: center;
-}
-
-.submitButton .bigbutton {
-  width: 25%;
-}
-
-#linklist, #cloudtag {
-  margin: 0 auto;
-  max-width: 80%;
-  padding: .3em;
-}
-
-#linklist li, #linklist li.private {
-  background-color: #fff;
-  border: 1px solid #cdcdcd;
-  border-radius: .3em;
-  clear: both;
-  margin: 1em 0;
-  padding: .3em;
-}
-
-#linklist li.private {
-  background-image: url('../../images/private_16x16.png');
-  background-repeat: no-repeat;
-  background-position: 10px center;
-  padding: .3em .3em .3em 32px;
-}
-
-#linklist li.publicLinkHightLight {
-  background: #ffffff;
-}
-
-#linklist li.private.linkeditbuttons {
-  background: url(../../images/private.png) no-repeat 10px center;
-  padding: 0 0 0 55px;
-}
-
-#linklist li .linkdescription li, .markdownHelp li {
-  border: none;
-  list-style-position: outside;
-  list-style-type: disc;
-  margin: 0;
-}
-
-#linklist li .linkdescription ol li, .markdownHelp ol li {
-  list-style: decimal;
-}
-
-#linklist li .linkdescription ol, .markdownHelp ol {
-  list-style: decimal outside;
-}
-
-.private .linktitle a {
-  color: #969696;
-}
-
-.linktitle, .linkeditbuttons {
-  font-size: 1.6em;
-  font-weight: bold;
-}
-
-.linktitle {
-  margin-bottom: 0;
-}
-
-.linktitle a {
-  color: #80AD48;
-  text-decoration: none;
-}
-
-.linkdate a, .linkarchive a {
-  color: #E28E3F;
-  text-decoration: none;
-}
-
-.linkWallabag a {
-  background-image: url(../../images/logo_wallabag.png);
-  background-repeat: no-repeat;
-}
-
-.linkarchive a {
-  background-image: url(../../images/logo_Archive.org.jpg);
-  background-repeat: no-repeat;
-}
-
-.linkdate a {
-  background-image: url(../../images/calendar.png);
-  background-repeat: no-repeat;
-}
-
-.linkBottom a {
-  color: #E28E3F;
-  line-height: 1.6em;
-  padding: 2px 0 3px 20px;
-  text-decoration: none;
-}
-
-.linkurl {
-  color: #4BAA74;
-  font-size: 8pt;
-}
-
-.linkdescription {
-  color: #000;
-  font-weight: normal;
-  margin-bottom: 0.3em;
-  margin-top: 0;
-  max-height: 400px;
-  overflow: auto;
-}
-
-.linkdescription a {
-  color: #3465A4;
-  text-decoration: none;
-}
-
-.tags a {
-	background: #777;
-  display: inline-block;
-	color: #fff;
-	text-decoration: none;
-	margin: .1em 0 .1em 1em;
-	padding: 2px 10px 1px;
-	border-top-right-radius: 3px;
-	border-bottom-right-radius: 3px;
-	position: relative;
-	transition: all .25s linear;
-	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
-	white-space: nowrap;
-	line-height: 21px;
-}
-
-.tags a:before {
-	content: "";
-	border-style: solid;
-	border-color: transparent #777 transparent transparent;
-	border-width: 12px 13px 12px 0;
-	position: absolute;
-	left: -13px;
-	top: 0;
-	transition: all .25s linear;
-}
-
-.tags a:after {
-    background: none repeat scroll 0 0 #FFFFFF;
-    border-radius: 50% 50% 50% 50%;
-    box-shadow: 0 1px 1px #737373 inset;
-    content: "";
-    height: 5px;
-    left: -1px;
-    position: absolute;
-    top: 10px;
-    width: 5px;
-}
-
-.tags a:hover {
-	background-color: #333;
-  color: #a2dd42;
-}
-.tags a:hover:before {
-	 border-color: transparent #333 transparent transparent;
-}
-
-.linkshort a {
-  color: #393964;
-  text-decoration: none;
-}
-
-.linkshort a:hover {
-  text-decoration: underline;
-}
-
-.removeTag {
-  border-left: 1px solid #aaa;
-  color: #6767A7;
-  padding-left: .2em;
-}
-
-.markdownHelp {
-  background-color: #FFFFFF;
-  padding: .3em;
-}
-
-.buttoneditform {
-  display: inline;
-}
-
-#footer {
-  clear: both;
-  color: #555555;
-  font-size: 8pt;
-  text-align: center;
-}
-
-#footer a {
-  color: #486D08;
-}
-
-#footer a:hover {
-  color: #000000;
-}
-
-#newversion {
-  background-color: #FFFFA0;
-  color: #000;
-  font-size: 9pt;
-  padding: 2px 7px;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-#cloudtag {
-  background-color: #ababab;
-  border-radius: .3em;
-}
-
-#cloudtag > span {
-  color: #fff;
-  font-size: .9em;
-  padding: 0 .3em;
-}
-
-#cloudtag a {
-  color: #000000;
-  font-weight: bold;
-  text-decoration: none;
-}
-
-#cloudtag a:hover {
-  color: #ffffc9;
-  font-weight: bold;
-  text-decoration: none;
-}
-
-.thumbnail {
-  float: left;
-  margin: 0;
-  min-height: 96px;
-  min-width: 120px;
-  padding: .1em;
-}
-
-.thumbnail img {
-  background-color: #fff;
-  border-radius: .3em;
-}
-
-.linkcontainerThumb {
-  margin-left: 130px;
-}
-
-.favicon {
-  height: 16px;
-  margin-right: .1em;
-  vertical-align: unset;
-  width: 16px;
-}
-
-.picwall_container {
-  background-color: #000;
-  margin: 0 auto;
-  padding: 0 6em;
-  width: auto;
-}
-
-.picwall_pictureframe {
-  background-color: #000;
-  display: inline-block;
-  float: none;
-  height: auto;
-  min-height: 90px;
-  min-width: 120px;
-  overflow: hidden;
-  padding: .3em;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: auto;
-  z-index: 5;
-}
-
-.picwall_pictureframe img {
-  background-color: #fff;
-  border-radius: .1em;
-  height: auto;
-  max-width: 100%;
-}
-
-.picwall_pictureframe a {
-  text-decoration: none;
-}
-
-.picwall_pictureframe:hover span.info {
-  background-color: rgba(0,0,0,0.6);
-  color: #fff;
-  display: block;
-  font-size: 8pt;
-  font-weight: bold;
-  left: 0;
-  padding: .3em;
-  position: absolute;
-  text-align: center;
-  text-shadow: 1px 1px 2px #000000;
-  top: 0;
-  width: 120px;
-}
-
-.ui-autocomplete {
-  background-color: #fff;
-  padding-left: 5px;
-  width: 50px;
-}
-
-.ui-state-hover {
-  background-color: #604dff;
-  color: #fff;
-}
-
-.highlight {
-  background-color: #FFFF33;
-}
-
-#permalinkQrcode {
-  background-color: #ffffff;
-  border: 1px solid #000000;
-  box-shadow: 2px 2px 20px 2px #333333;
-  font-size: 0.9em;
-  height: 220px;
-  left: calc(50% - 110px);
-  padding: 0.6em;
-  position: fixed;
-  text-align: center;
-  top: calc(50% - 110px);
-  width: 220px;
-  z-index: 50;
-}
-
-.daily {
-  background-color: #E6D6BE;
-  background-image: url(../../images/Paper_texture_v5_by_bashcorpo_w1000.jpg);
-  background-size: cover;
-  border-bottom: 2px solid black;
-  font-family: Georgia, 'DejaVu Serif', Norasi, serif;
-  position: relative;
-}
-
-#daily_col1 {
-  float: left;
-  padding-left: 1%;
-  position: relative;
-  width: 33%;
-}
-
-.dailyAbout {
-  border: 1px solid black;
-  float: left;
-  font-size: 8pt;
-  left: 10px;
-  padding: 5px;
-  position: absolute;
-  text-align: center;
-  top: 15px;
-}
-
-.dailyAbout a {
-  color: #890500;
-}
-
-.dailyTitle {
-  font-size: 44pt;
-  font-weight: bold;
-  padding: 10px 20px 0;
-  text-align: center;
-}
-
-.dailyDate {
-  font-size: 12pt;
-  font-weight: bold;
-  padding: 0 20px 30px;
-  text-align: center;
-}
-
-.dailyEntry {
-  border-top: 1px solid #555;
-  font-size: 11pt;
-  margin: 5px 10px 2px 5px;
-}
-
-.dailyEntry a {
-  color: #890500;
-  text-decoration: none;
-}
-
-.dailyEntryTags {
-  font-size: 7.75pt;
-}
-
-.dailyEntryTitle {
-  font-size: 18pt;
-  font-weight: bold;
-}
-
-.dailyEntryThumbnail {
-  background: url(../../images/50pc_transparent.png);
-  background-color: rgb(128,128,128);
-  padding: 4px 0 2px;
-  text-align: center;
-  width: 100%;
-}
-
-.dailyEntryDescription {
-  margin-bottom: 30px;
-  margin-top: 10px;
-  overflow: auto;
-  text-align: justify;
-}
-
-.clearFix {
-  clear: both;
-  display: block;
-  height: 0;
-  margin: 0;
-  min-height: 1px;
-  min-width: 1px;
-}
-
-h4, h5, h6, b, strong {
-  font-weight: bold;
-}
-
-dfn, em, #editlinkform label {
-  font-style: italic;
-}
-
-a:hover, .linkdescription a:hover, .linktitle a:hover, .linkWallabag a:hover, .linkdate a:hover, .linkarchive a:hover, .linkdescription a:hover {
-  color: #F57900;
-}
-
-#toolsdiv a, .clear {
-  clear: both;
-}
-
-.addform, #editlinkform input[type='text'], #editlinkform textarea {
-  width: 100%;
-}
-
-.linksperpage input, .linkList {
-  padding: 0;
-}
-
-#toolsdiv, #uploaddiv {
-  clear: left;
-  color: #ffffff;
-  padding: 5px;
-}
-
-.linkdate, .linkarchive, .linkWallabag, .linkshort {
-  color: #888;
-  font-size: .85em;
-}
-
-#changepasswordform, #changetag, #configform {
-  clear: left;
-  color: #ccc;
-  padding: 10px 5px;
-}
-
-#configform {
-  margin: 0 auto;
-  width: 70%;
-}
-
-#configform label {
-  font-weight: bold;
-}
-
-#configform h3 {
-  color: #ffffff;
-}
-
-.picwall_pictureframe span.info, .lazyimage {
-  display: none;
-}
-
-#daily_col2, #daily_col3 {
-  float: left;
-  position: relative;
-  width: 33%;
-}
-
-/*
- * Creating Content Tabs with Pure CSS
- * http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/
- */
-
-.tabs input[type=radio] {
-  left: -9999px;
-  position: absolute;
-  top: -9999px;
-}
-
-.tabs {
-  float: none;
-  list-style: none;
-  padding: 0;
-  position: relative;
-}
-
-.tabsLabel {
-  background: #333333 linear-gradient(#333333,#000000) repeat scroll 0 0;
-  border-radius: 5px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-  color: #a2dd42;
-  cursor: pointer;
-  display: block;
-  font-size: 1.1em;
-  padding: .3em .6em;
-  position: relative;
-  top: 3px;
-  transition: all .2s ease-in-out;
-}
-
-.tab-content {
-  -moz-animation-duration: .5s;
-  -o-animation-duration: .5s;
-  -webkit-animation-duration: .5s;
-  animation-duration: .5s;
-  border: .2em solid #ccc;
-  border-radius: .3em;
-  box-sizing: border-box;
-  display: none;
-  left: 0;
-  padding: 15px;
-  text-align: left;
-  width: 100%;
-  z-index: 2;
-}
-
-.tab-content input {
-  margin: 0 .2em;
-}
-
-.tab-content p {
-  align-content: center;
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-
-.tab-content input[type=text] {
-  align-items: center;
-  flex: 100 1 auto;
-  height: 1.1em;
-}
-
-.tab-content label {
-  align-items: center;
-  flex: 0 1 auto;
-  height: 1.1em;
-}
-
-.tabs li {
-  background: linear-gradient(#333333,#111111);
-  background-color: #333333;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-  border-radius: .4em;
-}
-
-.tabs li,[id^=tab]:checked ~
-[id^=tab-content] {
-  display: block;
-}
-
-.tabsLabel:hover, [id^=tab]:checked + .tabsLabel {
-  color: #ffffc9;
-}
-
-@media print {
-  html {
-    background: #fff !important;
-    border: none;
-    color: #000 !important;
-  }
-
-  body {
-    font-size: 12pt;
-    margin: auto !important;
-    width: auto !important;
-  }
-
-  p {
-    orphans: 3;
-    widows: 3;
-  }
-
-  a {
-    color: #000 !important;
-    text-decoration: none !important;
-  }
-
-  #pageheader, .paging, #linklist li form, #footer {
-    display: none;
-  }
-
-  #linklist li {
-    border-top: 2px solid #000;
-    clear: both;
-    padding: 2px 0 10px;
-  }
-
-  #linklist li.private {
-    background-color: none;
-    border-left: 0;
-  }
-
-  .linkdate {
-    line-height: 2;
-  }
-
-  .linkurl {
-    color: #000;
-  }
-
-  .linkdescription {
-    font-size: 10pt;
-  }
-
-  .linktag {
-    border: 1px solid black;
-    font-size: 8pt;
-    font-style: italic;
-  }
-}
-
-@media handheld, only screen and (max-width: 480px) , only screen and (max-device-width: 854px) {
-  #pageheader a {
-    border-radius: 5px 5px 5px 5px;
-    margin: 3px;
-    padding: 5px;
-  }
-
-  #headerform {
-    display: block;
-    max-width: 100%;
-    width: 100%;
-  }
-
-  .searchform, .tagfilter {
-    display: block;
-    height: 2em;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-  }
-
-  .searchform input, .tagfilter input {
-    display: inline;
-    height: 2em;
-    margin: 0;
-    padding: .1em;
-  }
-
-  .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
-    font-size: smaller;
-    height: 2em;
-    width: 30%;
-  }
-
-  div.qrcode {
-    float: left;
-    left: 0;
-    position: relative;
-    top: -10px;
-  }
-
-  .paging_linksperpage {
-    float: none;
-    font-size: smaller;
-    margin-bottom: 10px;
-  }
-
-  .paging_older, .paging_newer, .paging_linksperpage a {
-    background-color: #666;
-    border: 1px solid black;
-    border-radius: 5px 5px 5px 5px;
-    color: #fff;
-    padding: 3px 5px;
-  }
-
-  .thumbnail {
-    float: none;
-    height: auto;
-    margin: 0;
-    text-align: center;
-  }
-
-  #cloudtag {
-    padding: 0;
-  }
-
-  .dailyAbout {
-    clear: both;
-    float: none;
-    left: 0;
-    padding: 0;
-    position: relative;
-    top: 0;
-    width: 100%;
-  }
-
-  #daily_col1, #daily_col2, #daily_col3 {
-    float: none;
-    padding: 0;
-    width: 100%;
-  }
-
-  .dailyTitle {
-    font-size: 18pt;
-    margin-top: 5px;
-    padding: 0;
-  }
-
-  .dailyDate {
-    display: block;
-    font-size: 11pt;
-    padding: 0;
-  }
-
-  .dailyEntryTitle {
-    font-size: 16pt;
-    font-weight: bold;
-  }
-
-  .dailyEntryDescription {
-    font-size: 10pt;
-  }
-
-  #linklist {
-    margin: 0 auto;
-    max-width: 100%;
-    padding: .3em;
-  }
-
-  .linkcontainer {
-    margin: 0;
-  }
-
-  .nomobile, #logo {
-    display: none;
-  }
-
-  #searchform_value, #tagfilter_value {
-    width: 70%;
-  }
-}
diff --git a/tpl/myShaarli/opensearch.html b/tpl/myShaarli/opensearch.html
index 2eb9851..3fcc30b 100644
--- a/tpl/myShaarli/opensearch.html
+++ b/tpl/myShaarli/opensearch.html
@@ -1,15 +1,45 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
-    <ShortName>myShaarli search - {$pagetitle}</ShortName>
-    <Description>myShaarli search - {$pagetitle}</Description>
+    <ShortName>Shaarli search - {$pagetitle}</ShortName>
+    <Description>Shaarli search - {$pagetitle}</Description>
     <Url type="text/html" template="{$serverurl}?searchterm={searchTerms}" />
-    <Url type="application/atom+xml" template="{$serverurl}?do=atom&amp;searchterm={searchTerms}" />
-    <Url type="application/rss+xml" template="{$serverurl}?do=rss&amp;searchterm={searchTerms}" />
+    <Url type="application/atom+xml" template="{$serverurl}?do=atom&amp;searchterm={searchTerms}"/>
+    <Url type="application/rss+xml" template="{$serverurl}?do=rss&amp;searchterm={searchTerms}"/>
     <InputEncoding>UTF-8</InputEncoding>
-    <Developer>Knah Tsaeb myShaarly - https://github.com/Knah-Tsaeb/myShaarli</Developer>
-    <Image width="16" height="16">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAAAlwSFlz AAALEwAACxMBAJqcGAAAAAd0SU1FB98HEA4tDZmAhI0AAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0 ZWQgd2l0aCBHSU1QZC5lBwAAAhJJREFUOMuVUz1oU1EYPcm90iTNnxCTtImtD6VdoghShzq0xPLy
-        DEpEcdAuoUgVC4JDHERx6ioU0UVQC3VyU4dAMKb+pNI6qBTaQqnSxpBgan6qTZq89z6HWIkhofEs l3s45/B99/suQxPcuOdnWeOXEedBPnjsRNfcQjxH+B8cuqC7c3OG0+05ToeH+d1mOlZPDF62tZv3 KwMOQb7e0c2t7QaOHylFMLh2RdLzSqper6m9HBk2C66e0kL/kK7NuZfh8+wW7J0cboFj6VMZ0Wel 6Lv78vGmFVh6lNMXr1rPfk8QZqIlzL4uIrEiY3VJRt9RI8xWJih606O1j5v5bY+2NsBmND1/+vBn
-        4cA+Pc6f2wOPx4BOZxsujXZgIwPEX21Oxx9nVms9/wS8ncyu5xaFqXJei5eRAkJj3RgbcSPyYgOn BhxYz6hf69+A1xMqK71ZXt66EjzjxuSTFIp5DySfgm9rMlTSZHacQmIxO6/+6r3W5RrV6fP92K32 Qi73YXz8fcLuEE6ufEjuvA+iKBIRkd/vp2AwSEREXq+3oVHbkNRW6UKhoBaLRQCA3W6HJEmmlgL+ LolGo2Ws2uWfk7UUUKlUqmO12WCxWAAARI1b541IWZYT6XTaHQgEwDkHESGZTCIWi+Va+kiSJN0K
-        hUK0jYmJCRJFcaphm81CfD7fg0qlEmSMcQDTjLGhcDgs1+t+Ay6pzgTLZnNuAAAAAElFTkSuQmCC
+    <Developer>Shaarli Community - https://github.com/shaarli/Shaarli/</Developer>
+    <Image width="16" height="16">data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAHRklE
+        QVRIx5WWaWxU5xWG3++7986dfYYZb+MN2xiMDRiDFePUiQsNoiwpUNpAmhInJVEqpa0oQUlbJVKq
+        olaiqpLKUtOKhAJRm1BKRVWctuykpFjAgPcFx/uMl5mxPTOeuXPv3O3rjyiV0lIpfX+dc36c55xf
+        70vwP9TZ2fFpSQCwT5u6unX4f0QeNLx27RoMQwfRveTd11T23M+8S9w+Z3NRma1W4Hk6/nEimFpM
+        Xnun9Xpmz1MPY+feOhBi/fwAAOjq7iJEqmQqCZf5i7NvyNZ/bJPYgAjCiJc2Zmhyw68SM/T1+NlK
+        uf61BPoH+tHU1PT5ACMjI8RXvACvpZ5NT0+fmrG+2TKqtDLV0BgA2AUfXS3+UtfDX2ixCf73E+oA
+        rat92CTkv9fRBwEkSaLDt/JZR/v0Q7qjb8dQ5hjSqmYSOCkzBbogL+ij2RN8bik9wK88Al9tH4tG
+        ow88lvb19yEyPwfGGLq6OungYD9fUlosrqwoQVVVUeOU8qE/mU0ZTq6KNvreNort+5hugkayQUgY
+        qQld/u6qnVRhkciscOdOkNy5E0RnZ+e/AbwsZxAaHyORZA+prW01CTlnGppOqAcwUnCmlDAkAyin
+        Dapb2t7lNeRijpwvTGlJROXugoKS+upz/S19Kj9lJjxXGY1VU49tGevt7WOCSMHTeAXclePsQts9
+        Jq9oLR7rPVkHxpUYkK2c07ZDiieRNcAx3ZlNphcnsxbiMuEsXFSTZpabp+VVS17UNSV/8n7+gN75
+        +C1DM6VEjkgatiz/5IOCAheiUdeyr+198keKZXLzTKYjMDk/ZzGJhkV9AiPSdWaYIAY4U7TYNJMR
+        pugMqgHcXTiJqDK8ycMv2+TPWyWtKFw3KEdtJxNz8u8+/PNYIqeUgY/Oz+Z7q5X3gtqvG7qip8yM
+        HqdZg5kGgwGACoQQQkEMQ2DMIFnGE04xCRQTZFaexUT6jEEImJ2njjxx9fr13hfqfULTQ4apHept
+        lxf4mrqS3Tek0w1toTc1K6WcXfAwnyWH8kSkIueEhdhNrzUAv16fSCUzNwR3vr/G2lKWojMqbxF4
+        FWlLPDvBR+RBNpTsNqfkV7htuUe/UVq456qdzzvFh2KjdSH0I6ODs1ps9NHcw2jMfRYcEQyOCiox
+        aWR0fOQWVLFNUuOnrXJxfIPnpXLRKzocLpsJanhUU/bfjJ4gfwm/ys3JGX1cuS3UBvauLa/MBe9z
+        5c/xGRdSKpiVmhhN98JK/w4DGgg4uLh8u1NfPhWbmzszeH3G1rxv3dL7+qXyGaXHJi46s4QQophp
+        TKSDkHWGlAqmGCbAGAUA3sY5LlRZv3w44Dhnm0iFzbnsGfJR5E+EEsppTBVXuBptL5b8YQMlwnO+
+        Z2wtea4cl8Rc3KXJ4zShRm0CFaCaGhSDwGSMlbtLhSr7FnVhKhscC4+AO3L0x5PSFBdfE9i40SE6
+        xLSWRCIbJ6phIqEysqvk+2aJ0vhB1NK353zyaL3GS76NgRbVYykkt2OXuaQqMwuxkk0FT+OJpS+z
+        piXPRP1KzRvz4dRvO68PaWCMEQAIDcbqFiLJtyaSA/Ef3NnMGttgvHS7mUUWw7cTMemtY/cPsw3n
+        oe2+4mGXpt7VGWPJ6zOn1V2Xfaz5AxgvBzexodmeGWmCbWWTDOGpSZIIqeAe2/IYvnXgWbomUj2T
+        lNlwUP7bV64lzuRIeoodqDxi1OKRs/e0i08dH/6JPWtk6KKaZd3xj2jAXkY3BvZGK1xrhZvRNktP
+        fNA0ubQrxyxV4jHpSkWoXJPKYqBetxeRpgsMWwE5b/bxaYxUDSWmzCLbStqQuy02LY4/cWLsqH8i
+        HYNbyEeJczkJSzH2855DwsXp932F9hXEKQSQ1UHa568iRAa3uFyeNVolMBmeIrzT4cTXm37KMuvA
+        xb8XXTqiDELRgKg8h/dGWwP9iSDaIzcYJSCbA/uNR3N2sNahV/hbsSA70vEdW66tCOOpj8FRkIgU
+        Q5ybLUopiTzeTpFWUoTXdR3knwQMzLANOyQX50fWhDktLeAX3UcIA2EEQHPgi6TBsrWzaLGm7emC
+        H7bY+GPlV6YumiEpDhslxGBgROApz+yyhROzduIEzwngDh48iD3jO0nBRAUUXtHcoq+ZWbI5EWWa
+        WTieFjoKsaVoN92T88J4vlz+asXqpb+hEcdotbdueZ47vyiqhpA2UoRQwpoLtpNHxR0382jR8RzT
+        k8xYMyCMMfR33Uc8rxdrA9tpuHPyS7pPOTRPZ1arepa4rUsybiWnnU9a39ZXxdur+XoGAGMdoXLi
+        M789axnfNxDr8omiDcvF1f3OhPf18efjF/nfz6PGvv6zlrlwWwYBgcBZbKH4WKHODLHEURDxbHDF
+        QWGePftHUlZWjsy8guYnH2EgwORfZ5cuavEqgGhLnL6+sycvRP1Fbux/fheIn3wCCN4N/qdPMwA4
+        2fYOeoe7kc6kcfCbh8n+r7YwAOjs6QCl9DNx5t7dew+MOf8CcuqqoLxlhwgAAAAASUVORK5CYII=
     </Image>
 </OpenSearchDescription>
diff --git a/tpl/myShaarli/page.footer.html b/tpl/myShaarli/page.footer.html
index 6558b7b..659e8c7 100644
--- a/tpl/myShaarli/page.footer.html
+++ b/tpl/myShaarli/page.footer.html
@@ -1,21 +1,43 @@
-<div id="footer">
-    <a href="https://forge.leslibres.org/Knah-Tsaeb/MyShaarli">myShaarli are made by Knah Tsaeb</a> is based on <b><a href="http://sebsauvage.net/wiki/doku.php?id=php:shaarli">Shaarli 0.0.41 beta</a></b> - The personal, minimalist, super-fast, no-database
-    delicious clone. By <a href="http://sebsauvage.net" target="_blank">sebsauvage.net</a>.
-    <br/> Original theme by <a href="http://blog.idleman.fr" target="_blank">idleman.fr</a>.
-    <br/> {if="$GLOBALS['config']['contactLink']"} For contact me <a href="{$GLOBALS['config']['contactLink']}">use this link.</a>{/if}
 </div>
-{if="$newversion"}
-<div id="newversion">
-    &#x25CF;<a href="{$GLOBALS['config']['UPDATECHECK_DOWNLOAD']}">{$newversion|htmlspecialchars}</a>
+
+<div class="pure-g">
+  <div class="pure-u-2-24"></div>
+  <div id="footer" class="pure-u-20-24">
+    <strong><a href="https://github.com/shaarli/Shaarli">Shaarli</a></strong>
+    {if="isLoggedIn()===true"}
+      {$version}
+    {/if}
+    &middot;
+    {'The personal, minimalist, super-fast, database free, bookmarking service'|t} {'by the Shaarli community'|t} &middot;
+    <a href="doc/html/index.html" rel="nofollow">{'Documentation'|t}</a>
+      {loop="$plugins_footer.text"}
+          {$value}
+      {/loop}
+  </div>
+  <div class="pure-u-2-24"></div>
 </div>
-{/if} {if="isLoggedIn()"}
-<script>
-    function confirmDeleteLink() {
-        var agree = confirm("Are you sure you want to delete this link ?");
-        if (agree)
-            return true;
-        else
-            return false;
-    }
-</script>
-{/if}
+
+<input type="hidden" name="token" value="{$token}" id="token" />
+
+{loop="$plugins_footer.endofpage"}
+    {$value}
+{/loop}
+
+{loop="$plugins_footer.js_files"}
+	<script src="{$value}#"></script>
+{/loop}
+
+<div id="js-translations" class="hidden">
+  <span id="translation-fold">{'Fold'|t}</span>
+  <span id="translation-fold-all">{'Fold all'|t}</span>
+  <span id="translation-expand">{'Expand'|t}</span>
+  <span id="translation-expand-all">{'Expand all'|t}</span>
+  <span id="translation-delete-link">{'Are you sure you want to delete this link?'|t}</span>
+  <span id="translation-shaarli-desc">
+    {'The personal, minimalist, super-fast, database free, bookmarking service'|t} {'by the Shaarli community'|t}
+  </span>
+</div>
+
+<script src="js/shaarli.js?v={$version_hash}"></script>
+<script src="inc/awesomplete.js?v={$version_hash}#"></script>
+<script src="inc/awesomplete-multiple-tags.js?v={$version_hash}#"></script>
diff --git a/tpl/myShaarli/page.header.html b/tpl/myShaarli/page.header.html
index 32c3854..2411703 100644
--- a/tpl/myShaarli/page.header.html
+++ b/tpl/myShaarli/page.header.html
@@ -1,24 +1,172 @@
-<div id="logo" title="Share your links !" onclick="document.location='?';"></div>
-<div id="linkcount" class="nomobile">
-  Shaare
-  {if="!empty($linkcount)"}{$linkcount}{/if} links
+<div class="shaarli-menu pure-g" id="shaarli-menu">
+  <div class="pure-u-lg-0 pure-u-1">
+    <div class="pure-menu">
+      <a href="{$titleLink}" class="pure-menu-link">
+        <img src="img/icon.png" width="16" height="16" class="head-logo" alt="logo" />
+        {$shaarlititle}
+      </a>
+      <a href="#" class="menu-toggle" id="menu-toggle"><s class="bar"></s><s class="bar"></s></a>
+    </div>
+  </div>
+  <div class="pure-u-1">
+    <div class="pure-menu menu-transform pure-menu-horizontal pure-g">
+      <ul class="pure-menu-list pure-u-lg-5-6 pure-u-1">
+        <li class="pure-menu-item pure-u-0 pure-u-lg-visible">
+          <a href="{$titleLink}" class="pure-menu-link">
+            <img src="img/icon.png" width="16" height="16" class="head-logo" alt="logo" />
+            {$shaarlititle}
+          </a>
+        </li>
+        {if="isLoggedIn() || $openshaarli"}
+          <li class="pure-menu-item">
+            <a href="?do=addlink" class="pure-menu-link">
+              <i class="fa fa-plus" ></i> {'Shaare'|t}
+            </a>
+          </li>
+          <li class="pure-menu-item">
+            <a href="?do=tools" class="pure-menu-link">{'Tools'|t}</a>
+          </li>
+        {/if}
+        <li class="pure-menu-item">
+          <a href="?do=tagcloud" class="pure-menu-link">{'Tag cloud'|t}</a>
+        </li>
+        <li class="pure-menu-item">
+          <a href="?do=picwall{$searchcrits}" class="pure-menu-link">{'Picture wall'|t}</a>
+        </li>
+        <li class="pure-menu-item">
+          <a href="?do=daily" class="pure-menu-link">{'Daily'|t}</a>
+        </li>
+        {loop="$plugins_header.buttons_toolbar"}
+          <li class="pure-menu-item">
+            <a
+              {$value.attr.class=isset($value.class) ? $value.attr.class . ' pure-menu-link' : 'pure-menu-link'}
+              {loop="$value.attr"}
+                {$key}="{$value}"
+              {/loop}>
+              {$value.html}
+            </a>
+          </li>
+        {/loop}
+        <li class="pure-menu-item pure-u-lg-0">
+            <a href="?do={$feed_type}{$searchcrits}" class="pure-menu-link">{'RSS Feed'|t}</a>
+        </li>
+        {if="isLoggedIn()"}
+          <li class="pure-menu-item pure-u-lg-0">
+            <a href="?do=logout" class="pure-menu-link">{'Logout'|t}</a>
+          </li>
+        {else}
+          <li class="pure-menu-item pure-u-lg-0">
+            <a href="?do=login" class="pure-menu-link">{'Login'|t}</a>
+          </li>
+        {/if}
+      </ul>
+      <div class="header-buttons pure-u-lg-1-6 pure-u-0 pure-u-lg-visible">
+        <ul class="pure-menu-list">
+          <li class="pure-menu-item">
+            <a href="#" class="pure-menu-link subheader-opener"
+               data-open-id="search"
+               id="search-button" title="{'Search'|t}">
+              <i class="fa fa-search"></i>
+            </a>
+          </li>
+          <li class="pure-menu-item">
+            <a href="?do={$feed_type}{$searchcrits}" class="pure-menu-link" title="{'RSS Feed'|t}">
+              <i class="fa fa-rss"></i>
+            </a>
+          </li>
+          {if="!isLoggedIn()"}
+          <li class="pure-menu-item">
+            <a href="?do=login" class="pure-menu-link"
+               data-open-id="header-login-form"
+               id="login-button" title="{'Login'|t}">
+              <i class="fa fa-user"></i>
+            </a>
+          </li>
+          {else}
+          <li class="pure-menu-item">
+            <a href="?do=logout" class="pure-menu-link" title="{'Logout'|t}">
+              <i class="fa fa-sign-out"></i>
+            </a>
+          </li>
+          {/if}
+        </ul>
+      </div>
+    </div>
+  </div>
 </div>
-<span id="shaarli_title"><a href="{$titleLink}">{$shaarlititle|htmlspecialchars}</a></span>
-{if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}
-{ignore} When called as a popup from bookmarklet, do not display menu. {/ignore}
-{else}
-<a href="?" class="nomobile">Home</a>
-{if="isLoggedIn()"}
-<a href="?do=logout">Logout</a><a href="?do=tools">Tools</a><a href="?do=addlink"><b>Add link</b></a>
-{elseif="$GLOBALS['config']['OPEN_SHAARLI']"}
-<a href="?do=tools">Tools</a><a href="?do=addlink"><b>Add link</b></a>
-{else}
-<a href="?do=login">Login</a>
+
+<div id="content">
+  <div id="search" class="subheader-form">
+    <form method="GET" class="pure-form searchform" name="searchform">
+      <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="{'Search text'|t}"
+             {if="!empty($search_term)"}
+             value="{$search_term}"
+             {/if}
+      >
+      <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="{'Filter by tag'|t}"
+             {if="!empty($search_tags)"}
+             value="{$search_tags}"
+             {/if}
+      autocomplete="off" data-multiple data-autofirst data-minChars="1"
+      data-list="{loop="$tags"}{$key}, {/loop}"
+      >
+      <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+    </form>
+  </div>
+  <div id="actions" class="subheader-form">
+    <div class="pure-g">
+      <div class="pure-u-1">
+        <a href="" id="actions-delete" class="button">Delete</a>
+      </div>
+    </div>
+  </div>
+  {if="!isLoggedIn()"}
+    <form method="post" name="loginform">
+      <div class="subheader-form" id="header-login-form">
+        <input type="text" name="login" placeholder="{'Username'|t}" tabindex="3">
+        <input type="password" name="password" placeholder="{'Password'|t}" tabindex="5">
+        <div class="remember-me">
+          <input type="checkbox" name="longlastingsession" id="longlastingsession" tabindex="6" checked>
+          <label for="longlastingsession">{'Remember me'|t}</label>
+        </div>
+        <input type="hidden" name="token" value="{$token}">
+        <input type="hidden" name="returnurl">
+        <input type="submit" value="Login" tabindex="7">
+      </div>
+    </form>
+  {/if}
+{if="!empty($newVersion) || !empty($versionError)"}
+  <div class="pure-g new-version-message pure-alert pure-alert-warning pure-alert-closable">
+    <div class="pure-u-2-24"></div>
+    {if="$newVersion"}
+      <div class="pure-u-20-24">
+        Shaarli {$newVersion}
+        <a href="https://github.com/shaarli/Shaarli/releases">{'is available'|t}</a>.
+      </div>
+    {/if}
+    {if="$versionError"}
+      <div class="pure-u-20-24">
+        {'Error'|t}: {$versionError}
+      </div>
+    {/if}
+    <div class="pure-u-2-24">
+      <i id="new-version-dismiss" class="fa fa-times pure-alert-close"></i>
+    </div>
+  </div>
 {/if}
-<a href="{$feedurl}?do=rss{$searchcrits}" class="nomobile">RSS Feed</a>
-<a href="{$feedurl}?do=atom{$searchcrits}" style="padding-left:10px;" class="nomobile">ATOM Feed</a>
-<a href="?do=tagcloud">Tag cloud</a>
-<a href="?do=picwall{$searchcrits}">Picture wall</a>
-<a href="?do=daily">Daily</a>
+
+{if="!empty($plugin_errors) && isLoggedIn()"}
+  <div class="pure-g new-version-message pure-alert pure-alert-error pure-alert-closable">
+    <div class="pure-u-2-24"></div>
+    <div class="pure-u-20-24">
+        {loop="plugin_errors"}
+            <p>{$value}</p>
+        {/loop}
+    </div>
+    <div class="pure-u-2-24">
+      <i class="fa fa-times pure-alert-close"></i>
+    </div>
+  </div>
 {/if}
-<div class="clear"></div>
\ No newline at end of file
+
+  <div class="clear"></div>
diff --git a/tpl/myShaarli/page.html b/tpl/myShaarli/page.html
deleted file mode 100644
index 836e1bc..0000000
--- a/tpl/myShaarli/page.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    {include="includes"}
-  </head>
-  <body>
-    <div id="pageheader">
-      {include="page.header"}
-    </div>
-    You body goes here...
-    {include="page.footer"}
-  </body>
-</html>
\ No newline at end of file
diff --git a/tpl/myShaarli/picwall.html b/tpl/myShaarli/picwall.html
index 64fe04d..248e56d 100644
--- a/tpl/myShaarli/picwall.html
+++ b/tpl/myShaarli/picwall.html
@@ -1,31 +1,45 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    {include="includes"}
-    {if="empty($GLOBALS['disablejquery'])"}
-    <script src="inc/jquery.min.js#"></script>
-    <script src="inc/jquery-ui.min.js#"></script>
-    <script src="inc/jquery.lazyload.min.js#"></script>
-    {/if}
-  </head>
-  <body>
-    <div id="pageheader">
-      {include="page.header"}
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+
+<div class="pure-g">
+  <div class="pure-u-lg-1-6 pure-u-1-24"></div>
+  <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor">
+    {$countPics=count($linksToDisplay)}
+    <h2 class="window-title">{'Picture Wall'|t} - {$countPics} {'pics'|t}</h2>
+
+    <div id="plugin_zone_start_picwall" class="plugin_zone">
+      {loop="$plugin_start_zone"}
+        {$value}
+      {/loop}
     </div>
-      <div class="picwall_container">
-        {loop="linksToDisplay"}
+
+    <div id="picwall_container">
+      {loop="$linksToDisplay"}
         <div class="picwall_pictureframe">
-          {$value.thumbnail}<a href="{$value.permalink}"><span class="info">{$value.title|htmlspecialchars}</span></a>
+          {$value.thumbnail}<a href="{$value.real_url}"><span class="info">{$value.title}</span></a>
+          {loop="$value.picwall_plugin"}
+            {$value}
+          {/loop}
         </div>
-        {/loop}
-      </div>
-    {include="page.footer"}
-    {if="empty($GLOBALS['disablejquery'])"}
-    <script>
-      $(document).ready(function() {
-        $(".b-lazy").show().lazyload();
-      });
-    </script>
-    {/if}
-  </body>
-</html>
\ No newline at end of file
+      {/loop}
+      <div class="clear"></div>
+    </div>
+
+    <div id="plugin_zone_end_picwall" class="plugin_zone">
+      {loop="$plugin_end_zone"}
+        {$value}
+      {/loop}
+    </div>
+  </div>
+</div>
+
+{include="page.footer"}
+<script src="inc/blazy-1.3.1.min.js#"></script>
+</body>
+</html>
+
diff --git a/tpl/myShaarli/picwall2.html b/tpl/myShaarli/picwall2.html
deleted file mode 100644
index 44d08b0..0000000
--- a/tpl/myShaarli/picwall2.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>{include="includes"}</head>
-<body>
-<div id="pageheader">{include="page.header"}</div>
-<div style="background-color:#003;">
-    {loop="linksToDisplay"}
-    <div style="float:left;width:48%;border-right:2px solid white;height:120px;overflow:hide;">
-	    <div style="float:left;width:120px;text-align:center">{$value.thumbnail}</div>
-	    <a href="{$value.permalink}" style="color:yellow;font-weight:bold;text-decoration:none;">{$value.title|htmlspecialchars}</a><br>
-	    <span style="font-size:8pt;color:#eee;">{$value.description|htmlspecialchars}</span>
-	    <div style="clear:both;"></div>
-	</div><br>
-    {/loop}
-</div>
-
-{include="page.footer"}
-</body>
-</html>
\ No newline at end of file
diff --git a/tpl/myShaarli/readme.txt b/tpl/myShaarli/readme.txt
deleted file mode 100644
index b18deae..0000000
--- a/tpl/myShaarli/readme.txt
+++ /dev/null
@@ -1,42 +0,0 @@
-===== Shaarli template organisation =====
-
-Any Shaarli page should conform to this RainTPL template:
-
------------------------------------------------------
-<html>
-<head>{include="includes"}</head>
-<body>
-	<div id="pageheader">{include="page.header"}</div>
-    You body goes here...
-    {include="page.footer"}
-</body>
-</html>
------------------------------------------------------
-
-If you want to also add something in the page header (in the dark area), do it here:
-
-<div id="pageheader">{include="page.header"}My menu goes here...</div>
-
-
-Example: "Add new link" form:
------------------------------------------------------
-<html>
-<head>{include="includes"}</head>
-<body onload="document.addform.post.focus();">
-<div id="pageheader">
-	{include="page.header"}
-	<div id="headerform">
-		<form method="GET" action="" name="addform" class="addform">
-			<input type="text" name="post" style="width:50%;"> 
-			<input type="submit" value="Add link" class="bigbutton">
-		</form>
-	</div>
-</div>
-{include="page.footer"}
-</body>
-</html>
------------------------------------------------------
-
-
-
-
diff --git a/tpl/myShaarli/tagcloud.html b/tpl/myShaarli/tagcloud.html
deleted file mode 100644
index 1ff0eb1..0000000
--- a/tpl/myShaarli/tagcloud.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    {include="includes"}
-  </head>
-  <body>
-    <div id="pageheader">
-      {include="page.header"}
-    </div>
-    <div id="cloudtag">
-      {loop="tags"}
-      <span>{$value.count}</span><a href="?searchtags={$key|htmlspecialchars}" style="font-size:{$value.size}em;">{$key|htmlspecialchars}</a>
-      {/loop}
-    </div>
-    {include="page.footer"}
-  </body>
-</html>
\ No newline at end of file
diff --git a/tpl/myShaarli/tools.html b/tpl/myShaarli/tools.html
index dbba9fb..72fd58a 100644
--- a/tpl/myShaarli/tools.html
+++ b/tpl/myShaarli/tools.html
@@ -1,71 +1,166 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    {include="includes"}
-  </head>
-  <body>
-    <div id="pageheader">
-      {include="page.header"}
-      <div id="toolsdiv">
-        <ul>
-          <li>
-            <a href="{$GLOBALS['config']['UPDATECHECK_DOWNLOAD']}">Version : <span>myshaarli {#myShaarli_version#}</span></a>
-          </li>
-          {if="!$GLOBALS['config']['OPEN_SHAARLI']"}
-          <li>
-            <a href="?do=changepasswd">Change password : <span>Change your password.</span></a>
-          </li>
-          {/if}
-          <li>
-            <a href="?do=configure">Configure your Shaarli : <span>Change Title, timezone...</span></a>
-          </li>
-          <li>
-            <a href="?do=changetag">Rename/delete tags : <span>Rename or delete a tag in all links</span></a>
-          </li>
-          <li>
-            <a href="?do=import">Import : <span>Import Netscape html bookmarks (as exported from Firefox, Chrome, Opera, delicious...)</span></a>
-          </li>
-          <li>
-            <a href="?do=export">Export : <span>Export Netscape html bookmarks (which can be imported in Firefox, Chrome, Opera, delicious...)</span></a>
-          </li>
-          <li>
-            <a class="smallbutton" onclick="alert('Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link...');return false;" href="javascript:javascript:(function(){var%20url%20=%20location.href;var%20title%20=%20document.title%20||%20url;window.open('{$pageabsaddr}?post='%20+%20encodeURIComponent(url)+'&amp;title='%20+%20encodeURIComponent(title)+'&amp;description='%20+%20encodeURIComponent(document.getSelection())+'&amp;source=bookmarklet','_blank','menubar=no,height=450,width=600,toolbar=no,scrollbars=no,status=no,dialog=1');})();">✚Shaare link</a><a href="#" style="clear:none;"><span>&#x21D0; Drag this link to your bookmarks toolbar (or right-click it and choose Bookmark This Link....).
-              <br>
-              &nbsp;&nbsp;&nbsp;&nbsp;Then click "✚Shaare link" button in any page you want to share.</span></a>
-          </li>
-          <li>
-            <a class="smallbutton" onclick="alert('Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link...');return false;" href="?private=1&post=">✚Add Note</a><a href="#" style="clear:none;"><span>&#x21D0; Drag this link to your bookmarks toolbar (or right-click it and choose Bookmark This Link....).
-              <br>
-              &nbsp;&nbsp;&nbsp;&nbsp;Then click "✚Add Note" button anytime to start composing a (default private)  Note (text post) to your Shaarli.</span></a>
-          </li>
-          <li>
-            <a class="smallbutton" onclick="activateFirefoxSocial(this)">✚Add to Firefox social</a><a href="#" style="clear:none;"><span>&#x21D0; Click on this button to add Shaarli to the "Share this page" button in Firefox.</span></a>
-          </li>
-        </ul>
-        <div class="clear"></div>
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+
+<div class="pure-g">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div class="pure-u-lg-1-3 pure-u-22-24 page-form page-form-light">
+    <h2 class="window-title">{'Settings'|t}</h2>
+    <div class="tools-item">
+      <a href="?do=configure" title="{'Change Shaarli settings: title, timezone, etc.'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Configure your Shaarli'|t}</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a href="?do=pluginadmin" title="{'Enable, disable and configure plugins'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Plugin administration'|t}</span>
+      </a>
+    </div>
+    {if="!$openshaarli"}
+      <div class="tools-item">
+        <a href="?do=changepasswd" title="{'Change your password'|t}">
+          <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Change password'|t}</span>
+        </a>
+      </div>
+    {/if}
+    <div class="tools-item">
+      <a href="?do=changetag" title="{'Rename or delete a tag in all links'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Manage tags'|t}</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a href="?do=import"
+         title="{'Import Netscape HTML bookmarks (as exported from Firefox, Chrome, Opera, delicious...)'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Import links'|t}</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a href="?do=export"
+         title="{'Export Netscape HTML bookmarks (which can be imported in Firefox, Chrome, Opera, delicious...)'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Export database'|t}</span>
+      </a>
+    </div>
+
+    {loop="$tools_plugin"}
+      <div class="tools-item">
+        {$value}
+      </div>
+    {/loop}
+  </div>
+
+
+  <div class="clear"></div>
+</div>
+
+<div class="pure-g">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div class="pure-u-lg-1-3 pure-u-22-24 page-form page-form-light">
+    <h2 class="window-title">Bookmarklets</h2>
+    <p>
+      {'Drag one of these button to your bookmarks toolbar or right-click it and "Bookmark This Link"'|t},
+      {'then click on the bookmarklet in any page you want to share.'|t}
+    </p>
+    <div class="tools-item">
+      <a title="{'Drag this link to your bookmarks toolbar or right-click it and Bookmark This Link'|t},
+                {'then click ✚Shaare link button in any page you want to share'|t}"
+         class="bookmarklet-link"
+         href="javascript:(
+          function(){
+            var%20url%20=%20location.href;
+            var%20title%20=%20document.title%20||%20url;
+            var%20desc=document.getSelection().toString();
+            if(desc.length>4000){
+              desc=desc.substr(0,4000)+'...';
+              alert('{function="str_replace(' ', '%20', t('The selected text is too long, it will be truncated.'))"}');
+            }
+            window.open(
+              '{$pageabsaddr}?post='%20+%20encodeURIComponent(url)+
+              '&amp;title='%20+%20encodeURIComponent(title)+
+              '&amp;description='%20+%20encodeURIComponent(desc)+
+              '&amp;source=bookmarklet','_blank','menubar=no,height=800,width=600,toolbar=no,scrollbars=yes,status=no,dialog=1'
+            );
+          }
+        )();">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">✚ {'Shaare link'|t}</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a title="{'Drag this link to your bookmarks toolbar or right-click it and Bookmark This Link'|t},
+                {'Then click ✚Add Note button anytime to start composing a private Note (text post) to your Shaarli'|t}"
+         class="bookmarklet-link"
+         href="javascript:(
+          function(){
+            var%20desc=document.getSelection().toString();
+            if(desc.length>4000){
+              desc=desc.substr(0,4000)+'...';
+              alert('{function="str_replace(' ', '%20', t('The selected text is too long, it will be truncated.'))"}');
+            }
+            window.open(
+              '{$pageabsaddr}?private=1&amp;post='+
+              '&amp;description='%20+%20encodeURIComponent(desc)+
+              '&amp;source=bookmarklet','_blank','menubar=no,height=800,width=600,toolbar=no,scrollbars=yes,status=no,dialog=1'
+            );
+          }
+        )();">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">✚ {'Add Note'|t}</span>
+      </a>
+    </div>
+  </div>
+</div>
+
+{if="$sslenabled"}
+  <div class="pure-g">
+    <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+    <div class="pure-u-lg-1-3 pure-u-22-24 page-form page-form-light">
+      <h2 class="window-title">Firefox Social API</h2>
+      <p>{'You need to browse your Shaarli over <strong>HTTPS</strong> to use this functionality.'|t}</p>
+
+      <div class="tools-item">
+        <a title="{'Click on this button to add Shaarli to the 'Share this page' button in Firefox"
+           id="ff-social-button">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">✚ {'Add to'|t} Firefox Social</span>
+        </a>
       </div>
     </div>
-    {include="page.footer"}
-    <script>
-      function activateFirefoxSocial(node) {
-        var loc = location.href;
-        var baseURL = loc.substring(0, loc.lastIndexOf("/"));
-        // Keeping the data separated (ie. not in the DOM) so that it's maintainable and diffable.
-        var data = {
-          name : "{$shaarlititle}",
-          description : "The personal, minimalist, super-fast, no-database delicious clone.",
-          author : "Shaarli",
-          version : "1.0.0",
-          iconURL : baseURL + "/images/favicon.ico",
-          icon32URL : baseURL + "/images/favicon.ico",
-          icon64URL : baseURL + "/images/favicon.ico",
-          shareURL : baseURL + "{noparse}?post=%{url}&title=%{title}&description=%{description}&source=firefoxsocialapi{/noparse}",
-          homepageURL : baseURL
-        };
-        node.setAttribute("data-service", JSON.stringify(data));
-        var activate = new CustomEvent("ActivateSocialFeature");
-        node.dispatchEvent(activate);
-      }
-    </script>
-  </body>
-</html>
\ No newline at end of file
+  </div>
+{/if}
+
+<div class="pure-g">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div class="pure-u-lg-1-3 pure-u-22-24 page-form page-form-light">
+    <h2 class="window-title">{'3rd party'|t}</h2>
+    <div class="tools-item">
+      <a href="https://addons.mozilla.org/fr/firefox/addon/shaarli/" title="Firefox {'Plugin'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Firefox {'plugin'|t}</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a href="https://chrome.google.com/webstore/detail/shiny-shaarli/hajdfkmbdmadjmmpkkbbcnllepomekin"
+         title="Chrome {'Plugin'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Chrome {'plugin'|t}</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a href="https://play.google.com/store/apps/details?id=com.dimtion.shaarlier&hl=fr"
+         title="Android">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Android</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a href="https://itunes.apple.com/app/ShaarliOS/id1027441388?mt=8"
+         title="iOS">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">iOS</span>
+      </a>
+    </div>
+  </div>
+</div>
+
+{include="page.footer"}
+<input type="hidden" id="bookmarklet-alert"
+       value="{'Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link'|t}">
+</body>
+</html>
