diff --git a/assets/css/app.scss b/assets/css/app.scss
index b9f08eb..d44e917 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -1 +1,10 @@
+// Custom colors :
+$gunmetal: rgba(43, 48, 58, 1);
+$cinnabar: rgba(214, 73, 51, 1);
+$minion-yellow: rgba(252, 231, 98, 1);
+$green-blue-crayola: rgba(25, 130, 196, 1);
+
+// Override bulma colors
+$dark: $gunmetal;
+
 @import "~bulma/bulma";
diff --git a/assets/css/palette.scss b/assets/css/palette.scss
new file mode 100644
index 0000000..fb582bb
--- /dev/null
+++ b/assets/css/palette.scss
@@ -0,0 +1,34 @@
+/* CSS */
+--gunmetal: hsla(220, 15%, 20%, 1);
+--cinnabar: hsla(8, 67%, 52%, 1);
+--minion-yellow: hsla(52, 96%, 69%, 1);
+--green-blue-crayola: hsla(203, 77%, 43%, 1);
+
+/* SCSS HEX */
+$gunmetal: #2b303aff;
+$cinnabar: #d64933ff;
+$minion-yellow: #fce762ff;
+$green-blue-crayola: #1982c4ff;
+
+/* SCSS HSL */
+$gunmetal: hsla(220, 15%, 20%, 1);
+$cinnabar: hsla(8, 67%, 52%, 1);
+$minion-yellow: hsla(52, 96%, 69%, 1);
+$green-blue-crayola: hsla(203, 77%, 43%, 1);
+
+/* SCSS RGB */
+$gunmetal: rgba(43, 48, 58, 1);
+$cinnabar: rgba(214, 73, 51, 1);
+$minion-yellow: rgba(252, 231, 98, 1);
+$green-blue-crayola: rgba(25, 130, 196, 1);
+
+/* SCSS Gradient */
+$gradient-top: linear-gradient(0deg, #2b303aff, #d64933ff, #fce762ff, #1982c4ff);
+$gradient-right: linear-gradient(90deg, #2b303aff, #d64933ff, #fce762ff, #1982c4ff);
+$gradient-bottom: linear-gradient(180deg, #2b303aff, #d64933ff, #fce762ff, #1982c4ff);
+$gradient-left: linear-gradient(270deg, #2b303aff, #d64933ff, #fce762ff, #1982c4ff);
+$gradient-top-right: linear-gradient(45deg, #2b303aff, #d64933ff, #fce762ff, #1982c4ff);
+$gradient-bottom-right: linear-gradient(135deg, #2b303aff, #d64933ff, #fce762ff, #1982c4ff);
+$gradient-top-left: linear-gradient(225deg, #2b303aff, #d64933ff, #fce762ff, #1982c4ff);
+$gradient-bottom-left: linear-gradient(315deg, #2b303aff, #d64933ff, #fce762ff, #1982c4ff);
+$gradient-radial: radial-gradient(#2b303aff, #d64933ff, #fce762ff, #1982c4ff);
\ No newline at end of file
diff --git a/templates/front/_navbar.html.twig b/templates/front/_navbar.html.twig
index 6d95ba3..1f91e31 100644
--- a/templates/front/_navbar.html.twig
+++ b/templates/front/_navbar.html.twig
@@ -1,4 +1,4 @@
-<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
+<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
     <div class="container">
         {# Brand #}
         <div class="navbar-brand">
@@ -19,18 +19,12 @@
         <div id="navMenu" class="navbar-menu">
             {# Left #}
             <div class="navbar-start">
-                <a class="navbar-item" href="{{ path('front_home') }}">
-                    Home
-                </a>
-                <a class="navbar-item" href="#">
-                    Projects
-                </a>
             </div>
 
             {# Right #}
             <div class="navbar-end">
                 <span class="navbar-item">
-                    <a class="button is-primary is-inverted" href="https://github.com/kiw808">
+                    <a class="button is-dark is-inverted" href="https://github.com/kiw808">
                         <span class="icon">
                             <ion-icon name="logo-github"></ion-icon>
                         </span>
diff --git a/templates/front/hero.html.twig b/templates/front/hero.html.twig
index 80b9a93..73bfdfd 100644
--- a/templates/front/hero.html.twig
+++ b/templates/front/hero.html.twig
@@ -1,7 +1,7 @@
-<section class="hero is-fullheight-with-navbar is-primary">
+<section class="hero is-fullheight-with-navbar is-dark">
     <div class="hero-body">
         <div class="container has-text-centered">
-            <h1 class="title is-1">Pierre Muller</h1>
+            <h1 class="title is-1 has-text-primary">Pierre MULLER</h1>
             <h4 class="subtitle">Back end web developer</h4>
         </div>
     </div>