diff --git a/pages/01.administrate/02.install/10.images/images.ar.md b/pages/01.administrate/02.install/10.images/images.ar.md
index d47b94bf..9ef16d52 100644
--- a/pages/01.administrate/02.install/10.images/images.ar.md
+++ b/pages/01.administrate/02.install/10.images/images.ar.md
@@ -7,8 +7,10 @@ routes:
   default: '/images'
 ---
 
+<div class="hardware-image">
 <div id="cards-list">
 </div>
+</div>
 
 <script type="text/template" id="image-template">
 <div id="{id}" class="card panel panel-default">
@@ -16,12 +18,12 @@ routes:
             <h3>{name}</h3>
             <div class="card-comment">{comment}</div>
             <div class="card-desc text-center">
-<img src="/images/{image}" height=100 style="vertical-align:middle">
+<img src="/user/images/{image}" height=100 style="vertical-align:middle">
             </div>
         </div>
-        <div class="annotations">
-            <div class="col-sm-6 annotation"><a href="{file}.sha256sum"><span class="glyphicon glyphicon-barcode" aria-hidden="true"></span> Checksum</a></div>
-            <div class="col-sm-6 annotation"><a href="{file}.sig"><span class="glyphicon glyphicon-tag" aria-hidden="true"></span> Signature</a></div>
+        <div class="annotations flex-container">
+            <div class="flex-child annotation"><a href="{file}.sha256sum">[fa=barcode] Checksum</a></div>
+            <div class="flex-child annotation"><a href="{file}.sig">[fa=tag] Signature</a></div>
         </div>
         <div class="btn-group" role="group">
             <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> تنزيل <small>{version}</small></a>
@@ -29,60 +31,6 @@ routes:
 </div>
 </script>
 
-<style>
-/*
-###############################################################################
-  Style sheet for the cards
-###############################################################################
-*/
-#cards-list:after {
-    content:'';
-    display:block;
-    clear: both;
-}
-
-.card {
-    margin-bottom:20px;
-    width:270px;
-    float:left;
-    min-height: 1px;
-    margin-right: 10px;
-    margin-left: 10px;
-}
-
-.card .panel-body >  h3 {
-    margin-top:0;
-    margin-bottom:5px;
-    font-size:1.2em;
-}
-
-.card-desc {
-    height:100px;
-    overflow: hidden;
-}
-
-.card .btn-group {
-    width:100%;
-    margin-left: 0px;
-}
-.card > .btn-group > .btn{
-    border-bottom:0;
-}
-.card > .btn-group {   
-    border-left:0;
-    border-top-left-radius:0;
-    border-top-right-radius:0;
-    margin-left: 0px;
-}
-.card-comment {
-    font-size: 0.8em;
-    margin-top:-5px;
-}
-.card > .annotations {
-    text-align:center;
-    font-size:small;
-}
-</style>
 
 <script>
 /*
diff --git a/pages/01.administrate/02.install/10.images/images.es.md b/pages/01.administrate/02.install/10.images/images.es.md
index 778fd7be..e2a89e32 100644
--- a/pages/01.administrate/02.install/10.images/images.es.md
+++ b/pages/01.administrate/02.install/10.images/images.es.md
@@ -15,8 +15,10 @@ Esta página requiere que Javascript esté instalado par aparecer correctamente
 
 N.B. : Incluso si la imagen no corresponde con la última versión de YunoHost, puedes utilizarla y actualizarla después de la instalación !
 
+<div class="hardware-image">
 <div id="cards-list">
 </div>
+</div>
 
 <script type="text/template" id="image-template">
 <div id="{id}" class="card panel panel-default">
@@ -24,12 +26,12 @@ N.B. : Incluso si la imagen no corresponde con la última versión de YunoHost,
             <h3>{name}</h3>
             <div class="card-comment">{comment}</div>
             <div class="card-desc text-center">
-<img src="/images/{image}" height=100 style="vertical-align:middle">
+<img src="/user/images/{image}" height=100 style="vertical-align:middle">
             </div>
         </div>
-        <div class="annotations">
-            <div class="col-sm-6 annotation"><a href="{file}.sha256sum"><span class="glyphicon glyphicon-barcode" aria-hidden="true"></span> Checksum</a></div>
-            <div class="col-sm-6 annotation"><a href="{file}.sig"><span class="glyphicon glyphicon-tag" aria-hidden="true"></span> Signature</a></div>
+        <div class="annotations flex-container">
+            <div class="flex-child annotation"><a href="{file}.sha256sum">[fa=barcode] Checksum</a></div>
+            <div class="flex-child annotation"><a href="{file}.sig">[fa=tag] Signature</a></div>
         </div>
         <div class="btn-group" role="group">
             <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Télécharger <small>{version}</small></a>
@@ -37,60 +39,6 @@ N.B. : Incluso si la imagen no corresponde con la última versión de YunoHost,
 </div>
 </script>
 
-<style>
-/*
-###############################################################################
-  Style sheet for the cards
-###############################################################################
-*/
-#cards-list:after {
-    content:'';
-    display:block;
-    clear: both;
-}
-
-.card {
-    margin-bottom:20px;
-    width:270px;
-    float:left;
-    min-height: 1px;
-    margin-right: 10px;
-    margin-left: 10px;
-}
-
-.card .panel-body >  h3 {
-    margin-top:0;
-    margin-bottom:5px;
-    font-size:1.2em;
-}
-
-.card-desc {
-    height:100px;
-    overflow: hidden;
-}
-
-.card .btn-group {
-    width:100%;
-    margin-left: 0px;
-}
-.card > .btn-group > .btn{
-    border-bottom:0;
-}
-.card > .btn-group {   
-    border-left:0;
-    border-top-left-radius:0;
-    border-top-right-radius:0;
-    margin-left: 0px;
-}
-.card-comment {
-    font-size: 0.8em;
-    margin-top:-5px;
-}
-.card > .annotations {
-    text-align:center;
-    font-size:small;
-}
-</style>
 
 <script>
 /*
diff --git a/pages/01.administrate/02.install/10.images/images.fr.md b/pages/01.administrate/02.install/10.images/images.fr.md
index e1f892dd..80275d00 100644
--- a/pages/01.administrate/02.install/10.images/images.fr.md
+++ b/pages/01.administrate/02.install/10.images/images.fr.md
@@ -15,8 +15,10 @@ Cette page requiert que Javascript soit activé pour s'afficher correctement :s.
 
 N.B. : Même si l'image ne correspond pas à la dernière version de YunoHost, vous pouvez tout de même l'utiliser puis faire une mise à jour du système après l'installation !
 
+<div class="hardware-image">
 <div id="cards-list">
 </div>
+</div>
 
 <script type="text/template" id="image-template">
 <div id="{id}" class="card panel panel-default">
@@ -24,12 +26,12 @@ N.B. : Même si l'image ne correspond pas à la dernière version de YunoHost, v
             <h3>{name}</h3>
             <div class="card-comment">{comment}</div>
             <div class="card-desc text-center">
-<img src="/images/{image}" height=100 style="vertical-align:middle">
+<img src="/user/images/{image}" height=100 style="vertical-align:middle">
             </div>
         </div>
-        <div class="annotations">
-            <div class="col-sm-6 annotation"><a href="{file}.sha256sum"><span class="glyphicon glyphicon-barcode" aria-hidden="true"></span> Checksum</a></div>
-            <div class="col-sm-6 annotation"><a href="{file}.sig"><span class="glyphicon glyphicon-tag" aria-hidden="true"></span> Signature</a></div>
+        <div class="annotations flex-container">
+            <div class="flex-child annotation"><a href="{file}.sha256sum">[fa=barcode] Checksum</a></div>
+            <div class="flex-child annotation"><a href="{file}.sig">[fa=tag] Signature</a></div>
         </div>
         <div class="btn-group" role="group">
             <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Télécharger <small>{version}</small></a>
@@ -37,60 +39,6 @@ N.B. : Même si l'image ne correspond pas à la dernière version de YunoHost, v
 </div>
 </script>
 
-<style>
-/*
-###############################################################################
-  Style sheet for the cards
-###############################################################################
-*/
-#cards-list:after {
-    content:'';
-    display:block;
-    clear: both;
-}
-
-.card {
-    margin-bottom:20px;
-    width:270px;
-    float:left;
-    min-height: 1px;
-    margin-right: 10px;
-    margin-left: 10px;
-}
-
-.card .panel-body >  h3 {
-    margin-top:0;
-    margin-bottom:5px;
-    font-size:1.2em;
-}
-
-.card-desc {
-    height:100px;
-    overflow: hidden;
-}
-
-.card .btn-group {
-    width:100%;
-    margin-left: 0px;
-}
-.card > .btn-group > .btn{
-    border-bottom:0;
-}
-.card > .btn-group {   
-    border-left:0;
-    border-top-left-radius:0;
-    border-top-right-radius:0;
-    margin-left: 0px;
-}
-.card-comment {
-    font-size: 0.8em;
-    margin-top:-5px;
-}
-.card > .annotations {
-    text-align:center;
-    font-size:small;
-}
-</style>
 
 <script>
 /*
diff --git a/pages/01.administrate/02.install/10.images/images.md b/pages/01.administrate/02.install/10.images/images.md
index dceac56b..4dcc2f53 100644
--- a/pages/01.administrate/02.install/10.images/images.md
+++ b/pages/01.administrate/02.install/10.images/images.md
@@ -15,8 +15,10 @@ This page requires Javascript enabled to display properly :s.
 
 N.B. : Even if the image does not corresponds to the latest version of YunoHost, you can still use it and do a regular system upgrade after setting up!
 
+<div class="hardware-image">
 <div id="cards-list">
 </div>
+</div>
 
 <script type="text/template" id="image-template">
 <div id="{id}" class="card panel panel-default">
@@ -24,74 +26,19 @@ N.B. : Even if the image does not corresponds to the latest version of YunoHost,
             <h3>{name}</h3>
             <div class="card-comment">{comment}</div>
             <div class="card-desc text-center">
-<img src="/images/{image}" height=100 style="vertical-align:middle">
+<img src="/user/images/{image}" height=100 style="vertical-align:middle">
             </div>
         </div>
-        <div class="annotations">
-            <div class="col-sm-6 annotation"><a href="{file}.sha256sum"><span class="glyphicon glyphicon-barcode" aria-hidden="true"></span> Checksum</a></div>
-            <div class="col-sm-6 annotation"><a href="{file}.sig"><span class="glyphicon glyphicon-tag" aria-hidden="true"></span> Signature</a></div>
+        <div class="annotations flex-container">
+            <div class="flex-child annotation"><a href="{file}.sha256sum">[fa=barcode] Checksum</a></div>
+            <div class="flex-child annotation"><a href="{file}.sig">[fa=tag] Signature</a></div>
         </div>
         <div class="btn-group" role="group">
-            <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Download <small>{version}</small></a>
+            <a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12">[fa=download] Download <small>{version}</small></a>
         </div>
 </div>
 </script>
 
-<style>
-/*
-###############################################################################
-  Style sheet for the cards
-###############################################################################
-*/
-#cards-list:after {
-    content:'';
-    display:block;
-    clear: both;
-}
-
-.card {
-    margin-bottom:20px;
-    width:270px;
-    float:left;
-    min-height: 1px;
-    margin-right: 10px;
-    margin-left: 10px;
-}
-
-.card .panel-body >  h3 {
-    margin-top:0;
-    margin-bottom:5px;
-    font-size:1.2em;
-}
-
-.card-desc {
-    height:100px;
-    overflow: hidden;
-}
-
-.card .btn-group {
-    width:100%;
-    margin-left: 0px;
-}
-.card > .btn-group > .btn{
-    border-bottom:0;
-}
-.card > .btn-group {   
-    border-left:0;
-    border-top-left-radius:0;
-    border-top-right-radius:0;
-    margin-left: 0px;
-}
-.card-comment {
-    font-size: 0.8em;
-    margin-top:-5px;
-}
-.card > .annotations {
-    text-align:center;
-    font-size:small;
-}
-</style>
-
 <script>
 /*
 ###############################################################################
diff --git a/themes/yunohost-docs/css/custom.css b/themes/yunohost-docs/css/custom.css
index 462caa59..d15e0994 100644
--- a/themes/yunohost-docs/css/custom.css
+++ b/themes/yunohost-docs/css/custom.css
@@ -87,3 +87,70 @@ img#whitelogo {
     background-color: gray;
     padding: 10px;
 }
+
+
+/*
+###############################################################################
+  Style sheet for the cards
+###############################################################################
+*/
+.hardware-image #cards-list:after {
+    content:'';
+    display:block;
+    clear: both;
+}
+
+.hardware-image .card {
+    margin-bottom:20px;
+    width:270px;
+    float:left;
+    min-height: 1px;
+    margin-right: 10px;
+    margin-left: 10px;
+}
+
+.hardware-image .card .panel-body >  h3 {
+    margin-top:0;
+    margin-bottom:5px;
+    font-size:1.2em;
+}
+
+.hardware-image .card-desc {
+    height:135px;
+    overflow: hidden;
+}
+
+.hardware-image .card .btn-group {
+    width:100%;
+    margin-left: 0px;
+}
+.hardware-image .card > .btn-group > .btn{
+    border-bottom:0;
+}
+.hardware-image .card > .btn-group {   
+    border-left:0;
+    border-top-left-radius:0;
+    border-top-right-radius:0;
+    margin-left: 0px;
+}
+.hardware-image .card-comment {
+    font-size: 0.8em;
+    margin-top:-5px;
+}
+.hardware-image .card > .annotations {
+    text-align:center;
+    font-size:small;
+}
+.hardware-image .card img {
+    margin: 1rem auto;
+}
+.hardware-image .btn-group .btn.btn-info {
+    color: #ffffff;
+    background-color: #5bc0de;
+    border-color: #46b8da;
+}
+.hardware-image .btn-group .btn.btn-info:hover, .btn.btn-info:focus {
+    color: #ffffff;
+    background-color: #39b3d7;
+    border-color: #269abc;
+}