diff --git a/index.html b/index.html
index 082e5a8..59dde28 100644
--- a/index.html
+++ b/index.html
@@ -114,8 +114,13 @@
                             <div class="highlight-h4"></div>
                         </div>
                     </div>
+                    <div>
+                        <div class="header-container">
+                            <h5>VoxWave</h5>
+                            <div class="highlight-h5"></div>
+                        </div>
+                    </div>
 
-                    <p>VoxWave</p>
                     <p>Septembre 2012 à Juillet 2018</p>
                     <ul class="two-col-ul">
                         <li>Programmation de voix de synthèse</li>
@@ -144,15 +149,25 @@
                         </div>
                     </div>
 
-                    <ul>
+                    <ul class="list-no-style">
                         <li>
-                            <p class="skill-name">Programmation</p>
+                            <div>
+                                <div class="header-container skill-name">
+                                    <h5>Programmation</h5>
+                                    <div class="highlight-h5"></div>
+                                </div>
+                            </div>
                             <p class="skill-description">Notions en PostScript, C#, Java, shell (Bash, Zsh, Fish)</p>
                             <p class="skill-description">Connaissances en Python, Rust, Assembleur (x86 syntaxe AT&T), Prolog, HTML, CSS, Javascript (Ecmascript 6), Scheme</p>
                             <p class="skill-description">Connaissances solides en C, C++</p>
                         </li>
                         <li>
-                            <p class="skill-name">Outils de développement</p>
+                            <div>
+                                <div class="header-container skill-name">
+                                    <h5>Outils de développement</h5>
+                                    <div class="highlight-h5"></div>
+                                </div>
+                            </div>
                             <ul class="skill-list two-col-ul">
                                 <li>Emacs</li>
                                 <li>Git</li>
@@ -166,21 +181,36 @@
                             </ul>
                         </li>
                         <li>
-                            <p class="skill-name">Systèmes d’exploitation</p>
+                            <div>
+                                <div class="header-container skill-name">
+                                    <h5>Systèmes d’exploitation</h5>
+                                    <div class="highlight-h5"></div>
+                                </div>
+                            </div>
                             <ul class="skill-list two-col-ul">
                                 <li>GNU/Linux (Arch Linux, Debian, Ubuntu)</li>
                                 <li>Microsoft Windows XP/7/8.1/10</li>
                             </ul>
                         </li>
                         <li>
-                            <p class="skill-name">Synthèse vocale</p>
+                            <div>
+                                <div class="header-container skill-name">
+                                    <h5>Synthèse vocale</h5>
+                                    <div class="highlight-h5"></div>
+                                </div>
+                            </div>
                             <ul class="skill-list two-col-ul">
                                 <li>Développement de banques vocales pour VOCALOID3, Alter/Ego, Chipspeech, UTAU</li>
                                 <li>Utilisation de VOCALOID2/3/4, Alter/Ego, Chipspeech, UTAU, CeVIO Creative Studio</li>
                             </ul>
                         </li>
                         <li>
-                            <p class="skill-name">Son</p>
+                            <div>
+                                <div class="header-container skill-name">
+                                    <h5>Son</h5>
+                                    <div class="highlight-h5"></div>
+                                </div>
+                            </div>
                             <ul class="skill-list two-col-ul">
                                 <li>FL Studio</li>
                                 <li>iZotope RX 4/5/6</li>
@@ -188,7 +218,12 @@
                             </ul>
                         </li>
                         <li>
-                            <p class="skill-name">Bureautique</p>
+                            <div>
+                                <div class="header-container skill-name">
+                                    <h5>Bureautique</h5>
+                                    <div class="highlight-h5"></div>
+                                </div>
+                            </div>
                             <ul class="skill-list">
                                 <li>LaTeX</li>
                                 <li>Org-mode</li>
@@ -207,17 +242,35 @@
                         </div>
                     </div>
 
-                    <ul class="two-col-ul">
+                    <ul class="two-col-ul list-no-style">
                         <li>
-                            <h5>Français</h5>
+                            <div>
+                                <div class="header-container">
+                                    <h5>Français</h5>
+                                    <div class="highlight-h5"></div>
+                                </div>
+                            </div>
+
                             <p>Langue maternelle</p>
                         </li>
                         <li>
-                            <h5>Anglais</h5>
+                            <div>
+                                <div class="header-container">
+                                    <h5>Anglais</h5>
+                                    <div class="highlight-h5"></div>
+                                </div>
+                            </div>
+
                             <p>Parlé courrament. Voyages en Juillet 2016 à Londres et Juin 2018 à Oxford (professionnel et personnel), deux années d’études en Anglais LLCE à l’université Lumière Lyon 2, deux voyages linguistiques en angleterre en 2011 et 2013, voyage à New York City en 2011.</p>
                         </li>
                         <li>
-                            <h5>Japonais</h5>
+                            <div>
+                                <div class="header-container">
+                                    <h5>Japonais</h5>
+                                    <div class="highlight-h5"></div>
+                                </div>
+                            </div>
+
                             <p>Compréhension basique. Trois années d’études de la langue, deux voyages au Japon en 2014 (Tokyo) et 2015 (Tokyo et Osaka), connaissances linguistiques du Japonais</p>
                         </li>
                     </ul>
@@ -230,17 +283,35 @@
                         </div>
                     </div>
 
-                    <ul>
+                    <ul class="list-no-style">
                         <li>
-                            <h5>Linguistique</h5>
+                            <div>
+                                <div class="header-container">
+                                    <h5>Linguistique</h5>
+                                    <div class="highlight-h5"></div>
+                                </div>
+                            </div>
+
                             <p>Connaissances des concepts grammaticaux, de morphologie, de syntaxe et de phonétique.</p>
                         </li>
                         <li>
-                            <h5>Création de langues</h5>
+                            <div>
+                                <div class="header-container">
+                                    <h5>Création de langues</h5>
+                                    <div class="highlight-h5"></div>
+                                </div>
+                            </div>
+
                             <p>Des exemples peuvent être trouvés <a href="https://langue.phundrak.fr">sur mon site de linguistique</a>.</p>
                         </li>
                         <li>
-                            <h5>Création d’univers fictifs</h5>
+                            <div>
+                                <div class="header-container">
+                                    <h5>Création d’univers fictifs</h5>
+                                    <div class="highlight-h5"></div>
+                                </div>
+                            </div>
+
                             <p>Création d’un univers fictif complexe pour mon roman en cours d’écriture.</p>
                         </li>
                     </ul>
@@ -262,8 +333,12 @@
                             <div class="highlight-h4"></div>
                         </div>
                     </div>
-
-                    <p>Université Vincennes-Saint-Denis (Paris VIII)</p>
+                    <div>
+                        <div class="header-container">
+                            <h5>Université Vincennes-Saint-Denis (Paris VIII)</h5>
+                            <div class="highlight-h5"></div>
+                        </div>
+                    </div>
                     <p>Depuis Septembre 2016</p>
                     <p class="train-description">Formation en programmation et sciences de l’informatique</p>
                 </li>
@@ -274,8 +349,12 @@
                             <div class="highlight-h4"></div>
                         </div>
                     </div>
-
-                    <p>Université Lumière Lyon 2</p>
+                    <div>
+                        <div class="header-container">
+                            <h5>Université Lumière Lyon 2</h5>
+                            <div class="highlight-h5"></div>
+                        </div>
+                    </div>
                     <p>Septembre 2013 à Mai 2015</p>
                     <p class="train-description">Formation d’Anglais en fillière Langue, Littérature et Civilisations Étrangères (LLCE)</p>
                 </li>
@@ -286,8 +365,12 @@
                             <div class="highlight-h4"></div>
                         </div>
                     </div>
-
-                    <p>Lycée de la Plaine de l’Ain</p>
+                    <div>
+                        <div class="header-container">
+                            <h5>Lycée de la Plaine de l’Ain</h5>
+                            <div class="highlight-h5"></div>
+                        </div>
+                    </div>
                     <p>Septembre 2010 à Juillet 2013</p>
                     <p class="train-description">Baccalauréat série Scientifique spécialisation Sciences de l’Ingénieur, mention bien</p>
                 </li>
diff --git a/style/main.css b/style/main.css
index 92b9070..3a18914 100644
--- a/style/main.css
+++ b/style/main.css
@@ -9,6 +9,7 @@ body {
     background-color: #3498db;
     margin: 0;
     padding: 0;
+    font-family: 'Fira Sans', serif;
 }
 
 a {
@@ -20,10 +21,15 @@ a {
     transition: color 0.2s, border-bottom-color 0.2s;
 }
 
+.card a {
+    color: #8e44ad;
+    border-bottom: 5px solid #8e44ad;
+}
+
 
 a:hover {
-    color: #8e44ad;
-    border-bottom-color: #8e44ad;
+    color: #9b59b6;
+    border-bottom-color: #9b59b6;
     transition: color 0.4s, border-bottom-color 0.4s;
 }
 
@@ -68,6 +74,7 @@ h2 {
     background-color: #7f8c8d;
     width: 100%;
     white-space: nowrap;
+    line-height: 2.5em;
 }
 
 .ribbon-links li {
@@ -75,12 +82,31 @@ h2 {
     float: left;
     padding: 5px 20px;
     background-color: #7f8c8d;
+    transition: background-color 0.2s;
+    position: relative;
+    z-position: 20;
 }
 
 .ribbon li:hover {
-    background-color: #34495e
+    background-color: #34495e;
+    transition: background-color 0.3s;
 }
 
+/* .ribbon li::before { */
+/*     top: 0; */
+/*     left: 0; */
+/*     width: 100%; */
+/*     height: 0%; */
+/*     content: ""; */
+/*     position: absolute; */
+/*     background: #000; */
+/*     transition: height 0.5s; */
+/* } */
+
+/* .ribbon li:hover::before { */
+/*     height: 100%; */
+/* } */
+
 /* sidebar *******************************************************************/
 
 .sidebar {
@@ -135,12 +161,13 @@ p.side-content {
 .card-lvl2 {
     margin: 10px 10px 20px 20px;
     padding-left: 0;
-    background-color: #bdc3c7;
+    background-color: #2c3e50;
+    color: #ecf0f1;
 }
 
 .list-lvl1,
 .list-lvl1 a {
-    background-color: #bdc3c7;
+    background-color: #2c3e50;
     list-style: none;
 }
 
@@ -181,7 +208,11 @@ h3 {
 }
 
 h4 {
-    font-size: 1.2em;
+    font-size: 1.4em;
+}
+
+h5 {
+    font-size: 1.4em;
 }
 
 .header-container {
@@ -217,7 +248,7 @@ h4 {
 .highlight-h4 {
     background-color: #e67e22 !important;
     height: 24px;
-    top: -26px;
+    top: -28px;
     left: 0;
     width: 110%;
 }
@@ -225,7 +256,7 @@ h4 {
 .list-lvl1 .highlight-h4 {
     background-color: #e67e22 !important;
     height: 24px;
-    top: -34px;
+    top: -42px;
     left: 0;
     left: -10px;
     width: 120%;
@@ -233,6 +264,10 @@ h4 {
 
 .highlight-h5 {
     background-color: #9b59b6 !important;
-    height: 12px;
-    top: -12px;
+    height: 18px;
+    top: -20px;
+}
+
+.list-no-style {
+    list-style: none;
 }