diff --git a/data/images/navbar/menu-buy.png b/data/images/navbar/menu-buy.png
new file mode 100644
index 0000000000000000000000000000000000000000..298bdfede49589866e76e73b66ad9b3ee6381723
Binary files /dev/null and b/data/images/navbar/menu-buy.png differ
diff --git a/data/images/navbar/menu-comm.svg b/data/images/navbar/menu-comm.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7988d6554a9420ca0d14faee6c40c9ffc385f781
--- /dev/null
+++ b/data/images/navbar/menu-comm.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="38px" viewBox="0 0 64 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>RealmsButtonStatic</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="RealmsButtonStatic" transform="translate(-3.000000, -7.000000)" fill-rule="nonzero">
+            <polygon id="Shape" fill-opacity="0" fill="#000000" points="0 0 70 0 70 45 53 45 53 30 65 30 65 23 61 23 61 15 63 15 63 17 67 17 67 15 65 15 65 13 57 13 57 15 55 15 55 7 15 7 15 15 13 15 13 13 5 13 5 15 3 15 3 17 7 17 7 15 9 15 9 23 5 23 5 30 17 30 17 45 0 45"></polygon>
+            <polygon id="Shape" fill="#A05307" points="15 7 31 7 31 13 29 13 29 11 17 11 17 13 15 13"></polygon>
+            <polygon id="Shape" fill="#882F05" points="31 7 33 7 33 19 31 19"></polygon>
+            <polygon id="Shape" fill="#E4772A" points="33 7 39 7 39 17 37 17 37 21 39 21 39 23 33 23"></polygon>
+            <polygon id="Shape" fill="#F69F3A" points="39 7 55 7 55 15 53 15 53 13 51 13 51 11 47 11 47 13 45 13 45 15 39 15"></polygon>
+            <polygon id="Shape" fill="#FAC28C" points="17 11 29 11 29 13 31 13 31 23 27 23 27 19 25 19 25 17 21 17 21 15 17 15 17 17 21 17 21 19 19 19 19 23 15 23 15 13 17 13"></polygon>
+            <polygon id="Shape" fill="#FCD8B0" points="47 11 51 11 51 13 53 13 53 15 49 15 49 17 53 17 53 15 55 15 55 23 39 23 39 15 41 15 41 17 45 17 45 13 47 13"></polygon>
+            <polygon id="Shape" fill="#0980B0" points="5 13 7 13 7 15 5 15"></polygon>
+            <polygon id="Shape" fill="#41C7C5" points="7 13 13 13 13 15 7 15"></polygon>
+            <polygon id="Shape" fill="#41C7C5" points="57 13 63 13 63 15 57 15"></polygon>
+            <polygon id="Shape" fill="#0980B0" points="63 13 65 13 65 15 63 15"></polygon>
+            <polygon id="Shape" fill="#0980B0" points="3 15 5 15 5 17 3 17"></polygon>
+            <polygon id="Shape" fill="#41C7C5" points="5 15 7 15 7 17 5 17"></polygon>
+            <polygon id="Shape" fill="#882F05" points="9 15 11 15 11 23 9 23"></polygon>
+            <polygon id="Shape" fill="#0980B0" points="11 15 13 15 13 17 11 17"></polygon>
+            <polygon id="Shape" fill="#41C7C5" points="13 15 15 15 15 17 13 17"></polygon>
+            <polygon id="Shape" fill="#FFFFF6" points="17 15 19 15 19 17 17 17"></polygon>
+            <polygon id="Shape" fill="#A549C6" points="19 15 21 15 21 17 19 17"></polygon>
+            <polygon id="Shape" fill="#A549C6" points="25 15 27 15 27 17 25 17"></polygon>
+            <polygon id="Shape" fill="#FFFFF6" points="27 15 29 15 29 17 27 17"></polygon>
+            <polygon id="Shape" fill="#FFFFF6" points="41 15 43 15 43 17 41 17"></polygon>
+            <polygon id="Shape" fill="#679C2E" points="43 15 45 15 45 17 43 17"></polygon>
+            <polygon id="Shape" fill="#679C2E" points="49 15 51 15 51 17 49 17"></polygon>
+            <polygon id="Shape" fill="#FFFFF6" points="51 15 53 15 53 17 51 17"></polygon>
+            <polygon id="Shape" fill="#41C7C5" points="55 15 57 15 57 17 55 17"></polygon>
+            <polygon id="Shape" fill="#0980B0" points="57 15 59 15 59 17 57 17"></polygon>
+            <polygon id="Shape" fill="#882F05" points="59 15 61 15 61 23 59 23"></polygon>
+            <polygon id="Shape" fill="#41C7C5" points="63 15 65 15 65 17 63 17"></polygon>
+            <polygon id="Shape" fill="#0980B0" points="65 15 67 15 67 17 65 17"></polygon>
+            <polygon id="Shape" fill-opacity="0" fill="#000000" points="11 17 15 17 15 23 11 23"></polygon>
+            <polygon id="Shape" fill="#F6854A" points="21 17 25 17 25 19 21 19"></polygon>
+            <polygon id="Shape" fill="#F5B88D" points="37 17 39 17 39 21 37 21"></polygon>
+            <polygon id="Shape" fill-opacity="0" fill="#000000" points="55 17 59 17 59 23 55 23"></polygon>
+            <polygon id="Shape" fill="#A05307" points="19 19 21 19 21 21 25 21 25 19 27 19 27 23 19 23"></polygon>
+            <polygon id="Shape" fill="#FAC28C" points="21 19 25 19 25 21 21 21"></polygon>
+            <polygon id="Shape" fill="#E49453" points="31 19 33 19 33 23 31 23"></polygon>
+            <polygon id="Shape" fill="#F9A194" points="45 19 49 19 49 21 45 21"></polygon>
+            <polygon id="Shape" fill="#FAC28C" points="5 23 9 23 9 30 5 30"></polygon>
+            <polygon id="Shape" fill="#E49453" points="9 23 13 23 13 30 9 30"></polygon>
+            <polygon id="Shape" fill="#0980B0" points="13 23 17 23 17 30 13 30"></polygon>
+            <polygon id="Shape" fill="#41C7C5" points="17 23 31 23 31 33 19 33 19 35 17 35"></polygon>
+            <polygon id="Shape" fill="#55A233" points="31 23 35 23 35 31 31 31"></polygon>
+            <polygon id="Shape" fill="#7BC561" points="35 23 39 23 39 31 35 31"></polygon>
+            <polygon id="Shape" fill="#55A233" points="39 23 41 23 41 31 39 31"></polygon>
+            <polygon id="Shape" fill="#7BC561" points="41 23 43 23 43 25 45 25 45 27 47 27 47 25 49 25 49 27 51 27 51 29 53 29 53 31 41 31"></polygon>
+            <polygon id="Shape" fill="#F5B88D" points="43 23 49 23 49 25 47 25 47 27 45 27 45 25 43 25"></polygon>
+            <polygon id="Shape" fill="#F69F3A" points="49 23 53 23 53 29 51 29 51 27 49 27"></polygon>
+            <polygon id="Shape" fill="#55A233" points="53 23 57 23 57 30 53 30"></polygon>
+            <polygon id="Shape" fill="#F5B88D" points="57 23 61 23 61 30 57 30"></polygon>
+            <polygon id="Shape" fill="#FCD8B0" points="61 23 65 23 65 30 61 30"></polygon>
+            <polygon id="Shape" fill="#F5B88D" points="31 31 35 31 35 36 31 36"></polygon>
+            <polygon id="Shape" fill="#FCD8B0" points="35 31 39 31 39 36 35 36"></polygon>
+            <polygon id="Shape" fill="#013401" points="39 31 41 31 41 33 39 33"></polygon>
+            <polygon id="Shape" fill="#246804" points="41 31 53 31 53 33 41 33"></polygon>
+            <polygon id="Shape" fill="#0980B0" points="19 33 31 33 31 41 17 41 17 35 19 35"></polygon>
+            <polygon id="Shape" fill="#55A233" points="39 33 41 33 41 36 39 36"></polygon>
+            <polygon id="Shape" fill="#7BC561" points="41 33 53 33 53 36 41 36"></polygon>
+            <polygon id="Shape" fill="#2424AE" points="31 36 35 36 35 41 31 41"></polygon>
+            <polygon id="Shape" fill="#882F05" points="35 36 41 36 41 41 35 41"></polygon>
+            <polygon id="Shape" fill="#A05307" points="41 36 53 36 53 41 41 41"></polygon>
+            <polygon id="Shape" fill="#703605" points="17 41 31 41 31 45 17 45"></polygon>
+            <polygon id="Shape" fill="#501C03" points="31 41 35 41 35 45 31 45"></polygon>
+            <polygon id="Shape" fill="#8E7B71" points="35 41 41 41 41 45 35 45"></polygon>
+            <polygon id="Shape" fill="#C6B6AB" points="41 41 53 41 53 45 41 45"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/navbar/menu-store.svg b/data/images/navbar/menu-store.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b4b762c1755b10362144976f55470ff292799e33
--- /dev/null
+++ b/data/images/navbar/menu-store.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- generated at drububu.com  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="50px" viewBox="0 0 60 50">
+<path d="M0 0h60v50h-15v-40h-42v40h-3v-50z" fill="rgba(0,0,0,0)"/>
+<path d="M3 10h33v14h-9v-3h6v-8h-27v8h9v3h-12v-14z" fill="rgb(90,75,58)"/>
+<path d="M36 10h3v14h-3v-14z" fill="rgb(60,50,38)"/>
+<path d="M39 10h6v40h-6v-3h3v-20h-3v-6h3v-8h-3v-3z" fill="rgb(47,38,28)"/>
+<path d="M6 13h27v3h-27v-3z" fill="rgb(159,100,28)"/>
+<path d="M39 13h3v3h-3v-3z" fill="rgb(102,62,17)"/>
+<path d="M6 16h3v5h-3v-5z" fill="rgb(180,112,31)"/>
+<path d="M9 16h24v5h-6v-3h-12v3h-6v-5z" fill="rgb(208,131,36)"/>
+<path d="M39 16h3v5h-3v-5z" fill="rgb(113,68,19)"/>
+<path d="M15 18h6v6h-3v-3h-3v-3z" fill="rgb(223,222,219)"/>
+<path d="M21 18h3v5h-3v-5z" fill="rgb(118,118,118)"/>
+<path d="M24 18h3v3h-3v-3z" fill="rgb(168,106,30)"/>
+<path d="M15 21h3v3h3v6h-6v-9z" fill="rgb(194,194,194)"/>
+<path d="M24 21h3v3h-3v-3z" fill="rgb(70,58,45)"/>
+<path d="M21 23h3v7h-3v-7z" fill="rgb(96,100,117)"/>
+<path d="M3 24h12v3h-9v20h27v-20h-6v-3h9v26h-33v-26z" fill="rgb(70,58,45)"/>
+<path d="M24 24h3v3h-3v-3z" fill="rgb(59,46,38)"/>
+<path d="M36 24h3v26h-3v-26z" fill="rgb(48,40,31)"/>
+<path d="M6 27h9v3h-9v-3z" fill="rgb(159,100,28)"/>
+<path d="M24 27h9v3h-9v-3z" fill="rgb(159,100,28)"/>
+<path d="M39 27h3v3h-3v-3z" fill="rgb(102,62,17)"/>
+<path d="M6 30h3v17h-3v-17z" fill="rgb(180,112,31)"/>
+<path d="M9 30h6v3h12v-3h6v17h-24v-17z" fill="rgb(208,131,36)"/>
+<path d="M15 30h12v3h-12v-3z" fill="rgb(180,112,31)"/>
+<path d="M39 30h3v15h-3v-15z" fill="rgb(113,68,19)"/>
+<path d="M39 45h3v2h-3v-2z" fill="rgb(102,62,17)"/>
+</svg>
diff --git a/data/images/navbar/menu-support.svg b/data/images/navbar/menu-support.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cb5794032c0e096359deffb36b98330f47d09832
--- /dev/null
+++ b/data/images/navbar/menu-support.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59 48" width="59" height="48">
+	<defs>
+		<image width="47" height="48" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAwBAMAAABziT7RAAAAAXNSR0IB2cksfwAAACpQTFRFDg4O8PT0iIOByMS+bGtvWks6ZF9ej46SIwoR3icnPDImVaIzJGgE/8QA1T7elgAAAA50Uk5TAP////////////////9XStsUAAABB0lEQVR4nGNggAJBKFBSUmJAATgljKHAxcVlEEmEQkFaWhqREuUdHeUgjGEUTgnjjpnGxjM7sLgKpwTQ4qjQUFIkjE1Do7D7nBQJRkHp3eXlpaFR5eVAfzhKbxRSUsAvwWxsvXsz1CgjJWVj6z1nDhCU2Gx7GRIfJi7OIMKBkARQxhgm4V5MWIK9vPY2QsLZvLwsLQG/BDPCJExX4ZAwL4eBEiIlTIChfQaIXYDJKhlZwiwtBS6RXowq4Q42CSiH4sESIB8mgeLBYqCDQcpA7kXxoDGyBNTymTPBgbj3MrESMxlmnjkDDnaCElDnAk06wwwNPgwJkHMREmj+wCoB8QlMAhocuCQAxGfgXuPUio8AAAAASUVORK5CYII="/>
+	</defs>
+	<style>
+		tspan { white-space:pre }
+	</style>
+	<use id="Layer 4" href="#img1" x="12" y="0" />
+</svg>
\ No newline at end of file
diff --git a/pages/assets/css/styles.css b/pages/assets/css/styles.css
index 30710c254aaff0d94199e001e539d15db348d160..003d8e384db7a9e1fc378ab5aa916c0f4f9e17b8 100644
--- a/pages/assets/css/styles.css
+++ b/pages/assets/css/styles.css
@@ -38,7 +38,7 @@ a.siteName:hover {
 }
 .menuList{
     display: table;
-    margin-top: 0;
+    margin-top: 1rem;
 }
 .barreDeNavigation .inferieure .menuList>li>a .nav-icon {
     display: inline-block;
diff --git a/pages/client/includes/navbar.php b/pages/client/includes/navbar.php
index fc37c0bf586df10edfef8e1f92324a5f33d6d501..2ba6e032ee35fe2d9c4a42e7b7968f90807561a9 100644
--- a/pages/client/includes/navbar.php
+++ b/pages/client/includes/navbar.php
@@ -13,10 +13,10 @@
             </div>
             <div>
                 <ul class="menuList">
-                    <li>
+                    <li id="joinServerIcon">
                         <a href="#" class="nav-link">
                             <i class="nav-icon">
-                                <img src="<?=getWebsiteSetting("websiteUrl")?>data/images/navbar/menu-buy.gif" alt="Join icon">
+                                <img src="<?=getWebsiteSetting("websiteUrl")?>data/images/navbar/menu-buy.png" alt="Join icon">
                             </i>
                             Nous rejoindre
                         </a>
@@ -25,4 +25,18 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript">
+    const joinServerIcon = document.getElementById('joinServerIcon');
+
+    joinServerIcon.addEventListener('mouseenter', e => {
+        animatedIcon("joinServerIcon", "enter");
+    }); false);
+    joinServerIcon.addEventListener('mouseleave', e => {
+        animatedIcon("joinServerIcon", "leave");
+    }); false);
+
+    function animatedIcon(id, action){
+        $("#"+id+" > i").css("background-color", "red");
+    }
+</script>
\ No newline at end of file